Hugging Face's logo

Spaces:
SenY
/
GalGameUI
Running

App Files Community
SenY commited on
Commit
13c1c13
•
1 Parent(s): dd8c2dd

ヘルプ作成

Browse files
Files changed (1) hide show
  1. index.html +123 -18
index.html CHANGED
@@ -98,7 +98,7 @@
98
  #userInterface>* {
99
  width: 100%;
100
  height: 100%;
101
- display:flex;
102
  align-items: center;
103
  justify-content: center;
104
  background-color: rgba(0, 0, 0, 0.25);
@@ -146,7 +146,6 @@
146
  #controller {
147
  list-style-type: none;
148
  z-index: 32768;
149
- background: rgba(127, 127, 127, 0.5);
150
  }
151
 
152
  #controller .input-group {
@@ -169,14 +168,14 @@
169
  rel="stylesheet">
170
  </head>
171
 
172
- <body class="d-flex flex-column">
173
  <main class="flex-shrink-0">
174
  <div class="container-fluid">
175
  <div class="row">
176
  <div id="result" class="d-none col-12 p-0 m-0 vh-100"></div>
177
  </div>
178
  <div class="row">
179
- <div class="col-lg-8 p-0 m-0 relative" id="edit">
180
  <div id="emptySpace" class="row p-0 m-0">
181
  </div>
182
  <div id="messageWindow" class="row">
@@ -224,19 +223,35 @@
224
  </div>
225
  </div>
226
  <div id="userInterface" class="text-light d-none">
227
- <div><div>Q-Save</div></div>
228
- <div><div>Q-Load</div></div>
229
- <div><div>Save</div></div>
230
- <div><div>Load</div></div>
231
- <div><div>Auto</div></div>
232
- <div><div>Skip</div></div>
233
- <div><div>Log</div></div>
234
- <div><div>Config</div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
  </div>
236
  </div>
237
  </div>
238
  </div>
239
- <div class="col-lg-4" id="controller">
240
  <h5><u>All images are processed on your browser. No data are sent to any servers.</u></h5>
241
  <div class="input-group">
242
  <button id="render" type="button" class="btn btn-success">Render</button>
@@ -289,9 +304,9 @@
289
  </div>
290
  <div class="input-group">
291
  <button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
292
- (Shadow)</button>
293
  <button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
294
- (Stroke)</button>
295
  <div class="vr"></div>
296
  <button id="userInterfaceToggle" type="button"
297
  class="btn btn-primary opacity-50">Fake-UI</button>
@@ -302,8 +317,8 @@
302
  <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
303
  step="1" min="16" max="30">
304
  <span class="input-group-text">Padding</span>
305
- <input name="mainMessagePaddingSize" type="range" class="form-control form-range" id="mainMessagePaddingSize" value="0"
306
- step="0.1" min="0" max="2">
307
  </div>
308
  <div class="input-group">
309
  <span class="input-group-text">Render Scale</span>
@@ -316,6 +331,96 @@
316
  </label>
317
  </div>
318
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  </div>
320
  </div>
321
  </main>
@@ -350,7 +455,7 @@
350
  document.getElementById("edit").style.height = height + 'px';
351
  document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
352
  document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';
353
-
354
  document.querySelectorAll("#right input, #left input").forEach(el => {
355
  el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
356
  });
 
98
  #userInterface>* {
99
  width: 100%;
100
  height: 100%;
101
+ display: flex;
102
  align-items: center;
103
  justify-content: center;
104
  background-color: rgba(0, 0, 0, 0.25);
 
146
  #controller {
147
  list-style-type: none;
148
  z-index: 32768;
 
149
  }
150
 
151
  #controller .input-group {
 
168
  rel="stylesheet">
169
  </head>
170
 
171
+ <body class="d-flex flex-column bg-dark">
172
  <main class="flex-shrink-0">
173
  <div class="container-fluid">
174
  <div class="row">
175
  <div id="result" class="d-none col-12 p-0 m-0 vh-100"></div>
176
  </div>
177
  <div class="row">
178
+ <div class="col-lg-7 p-0 m-0 relative" id="edit">
179
  <div id="emptySpace" class="row p-0 m-0">
180
  </div>
181
  <div id="messageWindow" class="row">
 
223
  </div>
224
  </div>
225
  <div id="userInterface" class="text-light d-none">
226
+ <div>
227
+ <div>Q-Save</div>
228
+ </div>
229
+ <div>
230
+ <div>Q-Load</div>
231
+ </div>
232
+ <div>
233
+ <div>Save</div>
234
+ </div>
235
+ <div>
236
+ <div>Load</div>
237
+ </div>
238
+ <div>
239
+ <div>Auto</div>
240
+ </div>
241
+ <div>
242
+ <div>Skip</div>
243
+ </div>
244
+ <div>
245
+ <div>Log</div>
246
+ </div>
247
+ <div>
248
+ <div>Config</div>
249
+ </div>
250
  </div>
251
  </div>
252
  </div>
253
  </div>
254
+ <div class="col-lg-5 text-light bg-dark bg-gradient" id="controller">
255
  <h5><u>All images are processed on your browser. No data are sent to any servers.</u></h5>
256
  <div class="input-group">
257
  <button id="render" type="button" class="btn btn-success">Render</button>
 
304
  </div>
305
  <div class="input-group">
306
  <button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
307
+ (For preview)</button>
308
  <button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
309
+ (Recommended)</button>
310
  <div class="vr"></div>
311
  <button id="userInterfaceToggle" type="button"
312
  class="btn btn-primary opacity-50">Fake-UI</button>
 
317
  <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
318
  step="1" min="16" max="30">
319
  <span class="input-group-text">Padding</span>
320
+ <input name="mainMessagePaddingSize" type="range" class="form-control form-range"
321
+ id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
322
  </div>
323
  <div class="input-group">
324
  <span class="input-group-text">Render Scale</span>
 
331
  </label>
332
  </div>
333
  </div>
334
+ <div class="col-lg-12 text-light bg-dark bg-gradient p-4" id="help">
335
+ <h1>ヘルプ</h1>
336
+ <h2>概要</h2>
337
+ <p>ギャルゲーのスクリーンショット風画像の生成を補助するツールです。</p>
338
+ <p>画像データは全てブラウザ上で処理されサーバーに送信されたりはしませんのでお好きな画像をお使いください。</p>
339
+ <p>AI生成された画像に限らず好きな画像を利用可能です。</p>
340
+ <p>このソフトウェア(webアプリ)そのものに対するライセンスは付与していないので転載・改変はご遠慮ください。</p>
341
+ <p>生成される画像に関しては当方は一切権利を主張しませんので商用・非商用を問わず自由にご利用頂けます。</p>
342
+ <h2>基本的な使い方</h2>
343
+ <ul>
344
+ <li>"Set Image"を推して画像を設定する。</li>
345
+ <li>名前欄とテキスト欄に好きなメッセージを入れる</li>
346
+ <li>Renderを押すと画像が生成されるのでそれを保存する。</li>
347
+ </ul>
348
+ <h2>設定項目</h2>
349
+ <ul>
350
+ <li>Face Icon</li>
351
+ <li>Remove Icon</li>
352
+ <li>
353
+ <ul>
354
+ <li>顔アイコンを設定・削除する。背景透過済画像を推奨</li>
355
+ </ul>
356
+ </li>
357
+ <li>Window Color</li>
358
+ <li>
359
+ <ul>
360
+ <li>メッセージウィンドウの背景色と透過度を上下でそれぞれ設定</li>
361
+ </ul>
362
+ </li>
363
+ <li>Font</li>
364
+ <li>font-family</li>
365
+ <li>
366
+ <ul>
367
+ <li>デフォルト以外のフォントを利用したい場合はフォント名をここに入力。</li>
368
+ </ul>
369
+ </li>
370
+ <li>font-size</li>
371
+ <li>
372
+ <ul>
373
+ <li>フォントの大きさを設定。</li>
374
+ </ul>
375
+ </li>
376
+ <li>Text-Stroke</li>
377
+ <li>
378
+ <ul>
379
+ <li>For Preview</li>
380
+ <li><ul><li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。プレビュー画面ではこちらの方が綺麗に出る。</li></ul></li>
381
+ <li>Recommended</li>
382
+ <li><ul><li>-webkit-text-strokeをフォントサイズの10%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。</li></ul></li>
383
+ </ul>
384
+ </li>
385
+ <li>Fake-UI</li>
386
+ <li>
387
+ <ul>
388
+ <li>セーブボタン等のUIっぽいものの表示・非表示を切り替える。</li>
389
+ <li>それぞれのボタンはクリックすることで消えるがここでＯＮ・ＯＦＦをすることで全て復活します。デザインの都合でボタンの数などを減らしたい時に。</li>
390
+ </ul>
391
+ </li>
392
+ <li>Advanced</li>
393
+ <li>
394
+ <ul>
395
+ <li>その他のちょっとややこしい設定</li>
396
+ <li>Window Size</li>
397
+ <li>
398
+ <ul>
399
+ <li>メッセージウィンドウの高さそのものを調整。</li>
400
+ </ul>
401
+ </li>
402
+ <li>Padding</li>
403
+ <li>
404
+ <ul>
405
+ <li>メッセージウィンドウの外周に対するテキスト表示エリアの隙間の大きさ。行間の調整などに。</li>
406
+ </ul>
407
+ </li>
408
+ <li>Render Scale</li>
409
+ <li>
410
+ <ul>
411
+ <li>画像としてレンダリングする時の解像度設定。初期値のまま動かさないことを推奨。</li>
412
+ </ul>
413
+ </li>
414
+ <li>Reset Cookies</li>
415
+ <li>
416
+ <ul>
417
+ <li>保存されている過去のパラメータを全て削除して初期化。</li>
418
+ </ul>
419
+ </li>
420
+ </ul>
421
+ </li>
422
+ </ul>
423
+ </div>
424
  </div>
425
  </div>
426
  </main>
 
455
  document.getElementById("edit").style.height = height + 'px';
456
  document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
457
  document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';
458
+
459
  document.querySelectorAll("#right input, #left input").forEach(el => {
460
  el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
461
  });