ryota commited on
Commit
ff4606c
·
1 Parent(s): f1303f8

設定欄の入力欄の高さを揃える

Browse files

「精度」だけ説明文が無く、入力欄の位置が他の2つとずれていた。
説明文を足したうえで、説明の行数が違っても入力欄の位置が揃うようにする。

- 各項目の入れ物だけを対象にする(横並びの入れ物に当てると縦積みになる)
- 選択欄が2px低かったので、入力欄の最低の高さを揃えた

実測: 3項目とも上端481px・高さ40pxで一致。

Files changed (1) hide show
  1. app.py +10 -1
app.py CHANGED
@@ -311,6 +311,14 @@ document.addEventListener("click", function (e) {
311
 
312
  CSS = """
313
  /* 明るい画面と暗い画面のどちらでも読めるように、色は変数で持つ */
 
 
 
 
 
 
 
 
314
  .results {
315
  --card: #ffffff;
316
  --line: #dbe3ee;
@@ -497,7 +505,7 @@ with gr.Blocks(title="商談文字起こし") as demo:
497
  file_types=AUDIO_TYPES,
498
  )
499
 
500
- with gr.Row():
501
  min_seconds = gr.Number(
502
  DEFAULTS["min_seconds"], label="この長さ以上だけ処理する(秒)",
503
  info="これより短い録音は文字起こしせず、一覧にだけ残します",
@@ -507,6 +515,7 @@ with gr.Blocks(title="商談文字起こし") as demo:
507
  ("速度優先(small・誤変換が増えます)", "small"),
508
  ("精度優先(large-v3・遅い)", "large-v3")],
509
  value=DEFAULTS["model_size"], label="精度",
 
510
  )
511
  num_speakers = gr.Number(
512
  DEFAULTS["num_speakers"], label="話者の人数",
 
311
 
312
  CSS = """
313
  /* 明るい画面と暗い画面のどちらでも読めるように、色は変数で持つ */
314
+ /* 設定欄。説明文の行数が違っても、入力欄の位置を揃える。
315
+ 横並びを壊さないよう、各項目の入れ物だけを対象にする。 */
316
+ #settings .form { align-items: stretch; }
317
+ #settings .form > .block { display: flex; flex-direction: column; }
318
+ #settings .form > .block > :last-child { margin-top: auto; }
319
+ /* 入力欄そのものの高さも揃える(選択欄だけ2px低い) */
320
+ #settings .form > .block > :last-child > * { min-height: 40px; }
321
+
322
  .results {
323
  --card: #ffffff;
324
  --line: #dbe3ee;
 
505
  file_types=AUDIO_TYPES,
506
  )
507
 
508
+ with gr.Row(elem_id="settings"):
509
  min_seconds = gr.Number(
510
  DEFAULTS["min_seconds"], label="この長さ以上だけ処理する(秒)",
511
  info="これより短い録音は文字起こしせず、一覧にだけ残します",
 
515
  ("速度優先(small・誤変換が増えます)", "small"),
516
  ("精度優先(large-v3・遅い)", "large-v3")],
517
  value=DEFAULTS["model_size"], label="精度",
518
+ info="迷ったら標準のままで構いません",
519
  )
520
  num_speakers = gr.Number(
521
  DEFAULTS["num_speakers"], label="話者の人数",