src/options/options.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Ollama Translations - 設定</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <main>
    <h1>Ollama Translations 設定</h1>

    <form id="options-form" novalidate>
      <fieldset>
        <legend>基本設定</legend>

        <div class="field">
          <label class="switch-label">
            <input type="checkbox" id="enabled" role="switch">
            翻訳機能を有効にする
          </label>
        </div>

        <div class="field">
          <label for="ollama-host">Ollama Host</label>
          <input type="text" id="ollama-host" placeholder="http://localhost:11434" spellcheck="false">
          <p class="hint">初期版では http://localhost:&lt;port&gt; / http://127.0.0.1:&lt;port&gt; のみ接続できます。</p>
        </div>

        <div class="field">
          <label for="model">Model</label>
          <div class="inline">
            <select id="model"></select>
            <button type="button" id="reload-models">再取得</button>
          </div>
          <p id="model-status" class="status" hidden></p>
        </div>

        <div class="field">
          <label for="target-language">翻訳先言語</label>
          <select id="target-language"></select>
        </div>

        <div class="field">
          <label for="thinking">Thinking</label>
          <select id="thinking">
            <option value="off">off</option>
            <option value="on">on</option>
            <option value="low">low</option>
            <option value="medium">medium</option>
            <option value="high">high</option>
          </select>
        </div>

        <div class="field">
          <label for="temperature">Temperature: <output id="temperature-value">0.2</output></label>
          <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.2">
        </div>

        <div class="field">
          <label for="context-length">Context Length: <output id="context-length-value">16k</output></label>
          <input type="range" id="context-length" min="0" max="5" step="1">
          <p class="hint">4k / 8k / 16k / 32k / 128k / 256k</p>
        </div>

        <div class="field">
          <span class="label-text">Seed</span>
          <div class="segmented" role="radiogroup" aria-label="Seed mode">
            <label><input type="radio" name="seed-mode" value="random"> 可変</label>
            <label><input type="radio" name="seed-mode" value="fixed"> 固定</label>
          </div>
          <div class="inline" id="seed-value-row" hidden>
            <label for="seed-value">固定値</label>
            <input type="number" id="seed-value" step="1" placeholder="42">
          </div>
        </div>

        <div class="field">
          <label for="user-system-prompt">ユーザー用システムプロンプト</label>
          <textarea id="user-system-prompt" rows="3" placeholder="例: カジュアルな口調で訳してください"></textarea>
          <p class="hint">アプリ固定プロンプトと結合して送信されます。</p>
        </div>
      </fieldset>

      <fieldset>
        <legend>詳細設定（未設定項目は送信されません）</legend>
        <div id="advanced-fields"></div>

        <div class="field">
          <label for="stop">stop（1行に1シーケンス）</label>
          <textarea id="stop" rows="3" placeholder="例: &lt;END&gt;"></textarea>
        </div>
      </fieldset>

      <div class="actions">
        <button type="submit" id="save">保存</button>
        <span id="save-status" class="status" role="status"></span>
      </div>
    </form>

    <p class="dev-link"><a href="../../tests/test.html" target="_blank" rel="noreferrer">開発者向け: テストを実行</a></p>
  </main>
  <script type="module" src="options.js"></script>
</body>
</html>