Update app.py

app.py

@@ -246,29 +246,113 @@ def process_input(mode, txt, ext, temp, trim, style):
         return render_fullpage_screenshot(txt, ext, trim)
     return text_to_screenshot(txt, ext, temp, trim, style)
 
-with gr.Blocks(title="HTML Viewer & Gemini 2.5 Flash Demo", theme=gr.themes.Base()) as iface:
-    gr.Markdown("# HTMLビューア & テキスト→インフォグラフィック変換")
-    input_mode = gr.Radio(["HTML入力", "テキスト入力"], value="HTML入力", label="入力モード")
-    input_text = gr.Textbox(lines=15, label="入力")
-    style_dd = gr.Dropdown(["standard", "cute", "resort", "cool", "dental"], value="standard", label="デザインスタイル", visible=False)
-    ext_slider = gr.Slider(0, 30, value=10, step=1, label="上下高さ拡張率（%）")
-    temp_slider = gr.Slider(0.0, 1.0, value=0.5, step=0.1, label="生成時の温度", visible=False)
-    trim_cb = gr.Checkbox(value=True, label="余白を自動トリミング")
-    out_img = gr.Image(type="pil", label="スクリーンショット")
-    gen_btn = gr.Button("生成")
-    gr.Markdown(f"""
-    **使用モデル**: `{os.environ.get("GEMINI_MODEL", "gemini-1.5-pro")}`  
-    **API**: `/api/screenshot`, `/api/text-to-screenshot`
-    """)
-    
-    def toggle(mode):
-        show = mode == "テキスト入力"
-        return [{"visible": show, "__type__": "update"}, {"visible": show, "__type__": "update"}]
-    input_mode.change(toggle, input_mode, [temp_slider, style_dd])
-    gen_btn.click(process_input, [input_mode, input_text, ext_slider, temp_slider, trim_cb, style_dd], out_img)
+# ---------- Gradio UI ----------
+with gr.Blocks(title="Full Page Screenshot (テキスト変換対応)", theme=gr.themes.Base()) as iface:
+    # 見出し
+    gr.Markdown(
+        "<h1 style='text-align:center;margin:0.2em 0'>HTMLビューア ＆ テキスト→インフォグラフィック変換</h1>",
+        elem_id="title",
+        inline=True,
+    )
+    gr.Markdown(
+        "HTML を直接レンダリングするか、テキストを Gemini API でインフォグラフィックに変換して画像取得できます。",
+        elem_id="subtitle",
+    )
+
+    # === 入力モード選択 ===
+    with gr.Row():
+        input_mode = gr.Radio(
+            ["HTML入力", "テキスト入力"],
+            value="HTML入力",
+            label="入力モード",
+        )
+
+    # === 共通入力テキスト ===
+    input_text = gr.Textbox(
+        lines=15,
+        label="入力",
+        placeholder="HTMLコードまたはテキストを入力してください（モードに応じて処理）。",
+    )
+
+    # === スタイル + スライダー類を 2 カラムで ===
+    with gr.Row():
+        # 左：スタイル
+        with gr.Column(scale=1, min_width=180):
+            style_dropdown = gr.Dropdown(
+                choices=["standard", "cute", "resort", "cool", "dental"],
+                value="standard",
+                label="デザインスタイル",
+                info="テキスト→HTML 変換時のテーマ",
+                visible=False,              # 初期は非表示
+            )
+        # 右：拡張率 & 温度
+        with gr.Column(scale=3):
+            extension_percentage = gr.Slider(
+                0, 30, value=10, step=1,
+                label="上下高さ拡張率（%）"
+            )
+            temperature = gr.Slider(
+                0.0, 1.0, value=0.5, step=0.1,
+                label="生成時の温度（低い=一貫性高、高い=創造性高）",
+                visible=False,              # 初期は非表示
+            )
+
+    # === トリミング & ボタン ===
+    trim_whitespace = gr.Checkbox(
+        value=True,
+        label="余白を自動トリミング",
+    )
+    submit_btn = gr.Button("生成", variant="primary", size="lg")
+
+    # === 出力 ===
+    output_image = gr.Image(
+        type="pil",
+        label="ページ全体のスクリーンショット",
+        show_label=True,
+        show_download_button=True,
+    )
+
+    # ---------- 変化イベント ----------
+    def toggle_controls(mode):
+        """テキストモードのときだけ温度とスタイルを表示"""
+        is_text = mode == "テキスト入力"
+        return (
+            gr.update(visible=is_text),   # temperature
+            gr.update(visible=is_text),   # style_dropdown
+        )
+
+    input_mode.change(
+        fn=toggle_controls,
+        inputs=input_mode,
+        outputs=[temperature, style_dropdown],
+    )
 
+    submit_btn.click(
+        fn=process_input,
+        inputs=[
+            input_mode,
+            input_text,
+            extension_percentage,
+            temperature,
+            trim_whitespace,
+            style_dropdown,
+        ],
+        outputs=output_image,
+    )
+
+    # 下部にモデル表示
+    gr.Markdown(
+        f"""
+**使用モデル** : `{os.getenv("GEMINI_MODEL", "gemini-1.5-pro")}`  
+**API** : `/api/screenshot`  /  `/api/text-to-screenshot`
+""",
+        elem_id="footnote",
+    )
+
+# --- Gradio を FastAPI にマウント ---
 app = gr.mount_gradio_app(app, iface, path="/")
 
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=7860)