Hugging Face's logo

Spaces:
SenY
/
LLMClient
Running

App Files Community
SenY commited on
Commit
3edb3a9
·
1 Parent(s): ce821e6

tmp2

Browse files
Files changed (1) hide show
  1. index.html +434 -0
index.html ADDED
@@ -0,0 +1,434 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>LLM Client</title>
8
+ <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
10
+ crossorigin="anonymous">
11
+ <style>
12
+ #mainContent textarea.form-control {
13
+ min-height: 40vh;
14
+ font-size: 1.2rem;
15
+ }
16
+
17
+ .accordion-button:not(.collapsed) {
18
+ background-color: #212529;
19
+ color: #fff;
20
+ }
21
+
22
+ .navbar-toggler {
23
+ display: block !important;
24
+ }
25
+
26
+
27
+ @keyframes redFlashBg {
28
+
29
+ 0%,
30
+ 100% {
31
+ background-color: initial;
32
+ }
33
+
34
+ 50% {
35
+ background-color: rgba(255, 0, 0, 0.5);
36
+ }
37
+ }
38
+
39
+ @keyframes redFlashFg {
40
+
41
+ 0%,
42
+ 100% {
43
+ color: initial;
44
+ }
45
+
46
+ 50% {
47
+ color: red;
48
+ }
49
+ }
50
+
51
+ .red-flash-bg {
52
+ animation: redFlashBg 0.5s infinite;
53
+ }
54
+
55
+ .red-flash-fg {
56
+ animation: redFlashFg 0.5s infinite;
57
+ }
58
+
59
+ @keyframes greenFlashBg {
60
+
61
+ 0%,
62
+ 100% {
63
+ background-color: initial;
64
+ }
65
+
66
+ 50% {
67
+ background-color: rgba(0, 255, 0, 0.5);
68
+ }
69
+ }
70
+
71
+ @keyframes greenFlashFg {
72
+
73
+ 0%,
74
+ 100% {
75
+ color: initial;
76
+ }
77
+
78
+ 50% {
79
+ color: green;
80
+ }
81
+ }
82
+
83
+ .green-flash-bg {
84
+ animation: greenFlashBg 0.5s infinite;
85
+ }
86
+
87
+ .green-flash-fg {
88
+ animation: greenFlashFg 0.5s infinite;
89
+ }
90
+
91
+ /* 新しいスタイルを追加 */
92
+ .navbar {
93
+ position: sticky;
94
+ top: 0;
95
+ z-index: 1000;
96
+ }
97
+
98
+ /* メインコンテンツの上部にパディングを追加 */
99
+ #mainContent {
100
+ padding-top: 1rem;
101
+ }
102
+
103
+ @media (max-width: 991.98px) {
104
+ .navbar-brand {
105
+ font-size: 1rem;
106
+ }
107
+
108
+ .btn-sm {
109
+ padding: 0.25rem 0.5rem;
110
+ font-size: 0.75rem;
111
+ }
112
+ }
113
+
114
+ @media (min-width: 1400px) {}
115
+
116
+ /* 目次のスタイル */
117
+ #indexOffcanvas .offcanvas-body ul {
118
+ padding-left: 0;
119
+ }
120
+
121
+ #indexOffcanvas .offcanvas-body li {
122
+ margin-bottom: 0.5rem;
123
+ }
124
+
125
+ #indexOffcanvas .offcanvas-body a {
126
+ text-decoration: none;
127
+ color: inherit;
128
+ }
129
+
130
+ #indexOffcanvas .offcanvas-body .toggle-btn {
131
+ padding: 0.1rem 0.3rem;
132
+ font-size: 0.8rem;
133
+ }
134
+ </style>
135
+ </head>
136
+
137
+ <body data-bs-theme="dark">
138
+ <div class="container-fluid">
139
+ <div class="row">
140
+ <div class="col-12 text-center">
141
+ <a class="navbar-brand" href="#">
142
+ <i class="fa-brands fa-google"></i>
143
+ <i class="fa-solid fa-robot d-none"></i>
144
+ LLM Client
145
+ </a>
146
+ </div>
147
+ </div>
148
+ <div class="row w-100">
149
+ <div class="col-3 d-flex justify-content-end">
150
+ <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
151
+ data-bs-target="#settingsOffcanvas" aria-controls="settingsOffcanvas">
152
+ <i class="fas fa-list"></i>
153
+ </button>
154
+ </div>
155
+ <div class="col-6 d-flex justify-content-center">
156
+ <button id="prevAccordion" class="btn btn-outline-light">
157
+ <i class="fas fa-chevron-left"></i> 前へ
158
+ </button>
159
+ <button id="requestButton" class="btn btn-primary" onclick="Request()">
160
+ 生成
161
+ </button>
162
+ <button id="stopButton" class="btn btn-danger d-none" onclick="stopGeneration()">
163
+ 中止
164
+ </button>
165
+ <button id="nextAccordion" class="btn btn-outline-light">
166
+ 次へ <i class="fas fa-chevron-right"></i>
167
+ </button>
168
+ </div>
169
+ <div class="col-3 d-flex justify-content-start">
170
+ <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#indexOffcanvas"
171
+ aria-controls="indexOffcanvas">
172
+ <i class="fas fa-book"></i>
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="container">
179
+ <div class="row justify-content-center">
180
+ <!-- 画像アップロード用セクション -->
181
+ <div id="imageUploadSection" class="mb-3">
182
+ <div class="d-flex justify-content-between align-items-center mb-2">
183
+ <h5>画像添付</h5>
184
+ <button class="btn btn-outline-primary btn-sm" onclick="addImageInput()">
185
+ <i class="fas fa-plus"></i> 画像を追加
186
+ </button>
187
+ </div>
188
+ <div id="imageInputsContainer">
189
+ <!-- 画像入力フィールドがここに動的に追加されます -->
190
+ </div>
191
+ </div>
192
+ <div id="mainContent">
193
+ <div class="mt-3">
194
+ <div class="accordion" id="mainAccordion">
195
+ <div class="accordion-item">
196
+ <h2 class="accordion-header">
197
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
198
+ data-bs-target="#promptsCollapse">
199
+ 基本設定
200
+ </button>
201
+ </h2>
202
+ <div id="promptsCollapse" class="accordion-collapse collapse"
203
+ data-bs-parent="#mainAccordion">
204
+ <div class="accordion-body">
205
+ <textarea class="form-control mb-2" id="generatePrompt"
206
+ placeholder="システムプロンプトを入力"></textarea>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="accordion-item">
211
+ <h2 class="accordion-header">
212
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
213
+ data-bs-target="#content1Collapse">
214
+ 小説内容 (入力)
215
+ </button>
216
+ </h2>
217
+ <div id="content1Collapse" class="accordion-collapse collapse"
218
+ data-bs-parent="#mainAccordion">
219
+ <div class="accordion-body">
220
+ <textarea class="form-control mb-2" id="novelContent1"
221
+ placeholder="ここに小説の本文を入力してください"></textarea>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="accordion-item">
226
+ <h2 class="accordion-header">
227
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
228
+ data-bs-target="#nextPromptCollapse">
229
+ 次の展開
230
+ </button>
231
+ </h2>
232
+ <div id="nextPromptCollapse" class="accordion-collapse collapse"
233
+ data-bs-parent="#mainAccordion">
234
+ <div class="accordion-body">
235
+ <div class="d-flex justify-content-between align-items-center mb-3">
236
+ <textarea class="form-control me-2" id="nextPrompt" placeholder="次の展開を指示" rows="1"></textarea>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="accordion-item">
242
+ <h2 class="accordion-header">
243
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
244
+ data-bs-target="#content2Collapse">
245
+ 小説内容 (出力)
246
+ </button>
247
+ </h2>
248
+ <div id="content2Collapse" class="accordion-collapse collapse"
249
+ data-bs-parent="#mainAccordion">
250
+ <div class="accordion-body">
251
+ <textarea class="form-control" id="novelContent2"
252
+ placeholder="ここに続きが表示されます。"></textarea>
253
+ <button id="moveToInputButton" class="btn btn-primary mt-2" onclick="moveToInput()">
254
+ 入力欄に追記
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="row mt-3">
262
+ <div class="col-12 d-flex justify-content-end">
263
+ <input type="text" class="form-control d-inline-block w-auto me-2" id="savedTitle"
264
+ placeholder="タイトル">
265
+ <button id="saveButton" class="btn btn-secondary me-2" onclick="saveToJson()">
266
+ 保存
267
+ </button>
268
+ <button id="loadButton" class="btn btn-secondary" onclick="loadFromJson()">
269
+ 読込
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="offcanvas offcanvas-start" tabindex="-1" id="settingsOffcanvas"
279
+ aria-labelledby="settingsOffcanvasLabel">
280
+ <div class="offcanvas-header">
281
+ <h5 class="offcanvas-title" id="settingsOffcanvasLabel">設定</h5>
282
+ <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
283
+ </div>
284
+ <div class="offcanvas-body">
285
+ <div class="accordion" id="settingsAccordion">
286
+ <!-- API設定 -->
287
+ <div class="accordion-item">
288
+ <h2 class="accordion-header">
289
+ <button class="accordion-button" type="button" data-bs-toggle="collapse"
290
+ data-bs-target="#apiSettings">
291
+ API設定
292
+ </button>
293
+ </h2>
294
+ <div id="apiSettings" class="accordion-collapse collapse show" data-bs-parent="#settingsAccordion">
295
+ <div class="accordion-body">
296
+ <h5>エンドポイント</h5>
297
+ <select class="form-select mb-2" id="endpointSelect">
298
+ <option value="restart">Restart</option>
299
+ <option value="openai">OpenAI Compatible</option>
300
+ </select>
301
+
302
+ <h5>Gemini API Key</h5>
303
+ <p class="text-muted">エンドポイントがGeminiの場合は必須</p>
304
+ <input type="text" class="form-control mb-2" id="geminiApiKey" placeholder="Gemini API Key">
305
+
306
+ <h5 class="mt-3">OpenAI Compatible設定</h5>
307
+ <p class="text-muted">エンドポイントがOpenAI Compatibleの場合は必須</p>
308
+ <input type="text" class="form-control mb-2" id="openaiEndpoint"
309
+ placeholder="OpenAI Endpoint">
310
+ <textarea class="form-control mb-2" id="openaiHeaders"
311
+ placeholder='{
312
+ "Content-Type": "application/json",
313
+ "Authorization": "Bearer sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
314
+ }'></textarea>
315
+ <textarea class="form-control mb-2" id="openaiJsonBody"
316
+ placeholder='{
317
+ "model": "gemini-pro",
318
+ "messages": [],
319
+ "temperature": 1.0,
320
+ "max_tokens": 8192,
321
+ "stream": true
322
+ }'></textarea>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- 生成設定 -->
328
+ <div class="accordion-item">
329
+ <h2 class="accordion-header">
330
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
331
+ data-bs-target="#generationSettings">
332
+ 生成設定
333
+ </button>
334
+ </h2>
335
+ <div id="generationSettings" class="accordion-collapse collapse"
336
+ data-bs-parent="#settingsAccordion">
337
+ <div class="accordion-body">
338
+ <div class="mb-2">
339
+ <label for="encodeLength" class="form-label">エンコード長</label>
340
+ <input type="range" class="form-range" id="encodeLength" placeholder="エンコード長" min="1"
341
+ max="16" value="4">
342
+ <input type="number" class="form-control" id="encodeLengthInput" placeholder="エンコード長"
343
+ min="1" max="16" value="4">
344
+ </div>
345
+ <div class="form-check mb-2 form-switch">
346
+ <input class="form-check-input" type="checkbox" id="summerizedPromptToggle">
347
+ <label class="form-check-label" for="summerizedPromptToggle">Summerize</label>
348
+ </div>
349
+ <div class="form-check mb-2 form-switch">
350
+ <input class="form-check-input" type="checkbox" id="partialEncodeToggle">
351
+ <label class="form-check-label" for="partialEncodeToggle">Encode</label>
352
+ </div>
353
+ <div class="form-check mb-2 form-switch">
354
+ <input class="form-check-input" type="checkbox" id="streamToggle" checked>
355
+ <label class="form-check-label" for="streamToggle">Stream</label>
356
+ </div>
357
+ <div class="mb-2">
358
+ <label for="temperature" class="form-label">Temperature</label>
359
+ <input type="range" class="form-range" id="temperature" min="0" max="2" value="1.0" step="0.1">
360
+ <input type="number" class="form-control" id="temperatureInput" value="1.0" min="0" max="2" step="0.1">
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- その他の設定 -->
367
+ <div class="accordion-item">
368
+ <h2 class="accordion-header">
369
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
370
+ data-bs-target="#otherSettings">
371
+ その他の設定
372
+ </button>
373
+ </h2>
374
+ <div id="otherSettings" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
375
+ <div class="accordion-body">
376
+ <h5>メモ欄</h5>
377
+ <textarea class="form-control mb-2" id="memo" placeholder="メモ用項目。生成に一切影響しません。"
378
+ rows="5"></textarea>
379
+
380
+ <button id="formatTextButton" class="btn btn-primary mb-2" onclick="formatText()">
381
+ <i class="fa-solid fa-align-left"></i> 改行を整理
382
+ </button>
383
+
384
+ <h5 class="mt-3">デバッグ</h5>
385
+ <button id="debugButton" class="btn btn-secondary mb-2" onclick="debugPrompt()">
386
+ <i class="fa-solid fa-bug"></i> payload
387
+ </button>
388
+ <button id="summaryButton" class="btn btn-secondary mb-2" onclick="console.log(createSummarizedText())">
389
+ <i class="fa-solid fa-bug"></i> 要約
390
+ </button>
391
+
392
+ <h5 class="mt-3">校正履歴</h5>
393
+ <button id="showDiffButton" class="btn btn-secondary mb-2" onclick="showDiffModal()">
394
+ <i class="fa-solid fa-history"></i> 校正履歴を表示
395
+ </button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- 新しい右側のOffCanvas -->
404
+ <div class="offcanvas offcanvas-end" tabindex="-1" id="indexOffcanvas" aria-labelledby="indexOffcanvasLabel">
405
+ <div class="offcanvas-header">
406
+ <h5 class="offcanvas-title" id="indexOffcanvasLabel">目次</h5>
407
+ <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
408
+ </div>
409
+ <div class="offcanvas-body">
410
+ <!-- ここに目次の内容を追加します -->
411
+ </div>
412
+ </div>
413
+
414
+ <!-- モーダルウィンドウの追加 -->
415
+ <div class="modal fade" id="diffModal" tabindex="-1" aria-labelledby="diffModalLabel" aria-hidden="true">
416
+ <div class="modal-dialog modal-lg">
417
+ <div class="modal-content">
418
+ <div class="modal-header">
419
+ <h5 class="modal-title" id="diffModalLabel">校正履歴</h5>
420
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
421
+ </div>
422
+ <div class="modal-body">
423
+ <div id="diffContainer"></div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
430
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
431
+ <script src="gemini.js"></script>
432
+ </body>
433
+
434
+ </html>