Update app.py

app.py

@@ -6,7 +6,7 @@ import json
 import gradio as gr
 
 # =======================================================
-# 🚀 Gradio 補丁
+# 🚀 核心修復：Gradio 官方 OpenAPI Schema 解析崩潰補丁
 # =======================================================
 try:
     import gradio_client.utils
@@ -32,7 +32,7 @@ except Exception:
 OMR_DIR = os.path.abspath("OMRChecker")
 MOCK_DIR = os.path.abspath("mock_libs")
 
-# 偽裝螢幕套件，防止 Headless 環境呼叫 cv2.imshow 崩潰
+# 建立偽裝螢幕套件，防止 Headless 環境呼叫 cv2.imshow 崩潰
 os.makedirs(MOCK_DIR, exist_ok=True)
 with open(os.path.join(MOCK_DIR, "screeninfo.py"), "w", encoding="utf-8") as f:
     f.write('class ScreenInfoError(Exception):\n    pass\nclass FakeMonitor:\n    width = 1920\n    height = 1080\ndef get_monitors():\n    return [FakeMonitor()]\n')
@@ -47,7 +47,7 @@ if not os.path.exists(OMR_DIR) or not os.path.exists(os.path.join(OMR_DIR, "main
         subprocess.run([sys.executable, "-m", "pip", "install", "-r", req_path], check=True)
 
 # =======================================================
-# ⚡ 極速 Layout 渲染核心
+# ⚡ 極速 Layout 渲染核心 (不含批改，只需 2~3 秒)
 # =======================================================
 def generate_layout_preview(json_content):
     if not json_content or str(json_content).strip() == "":
@@ -55,7 +55,7 @@ def generate_layout_preview(json_content):
 
     current_dir = os.path.dirname(__file__)
     
-    # 自動尋找本地的 template 圖片
+    # 自動尋找本地的 template 圖片 (必須要有空白圖供對齊)
     template_img_src = None
     for file in os.listdir(current_dir):
         if file.lower().startswith("template") and file.lower().endswith((".jpg", ".jpeg", ".png")):
@@ -75,17 +75,17 @@ def generate_layout_preview(json_content):
     images_dir = os.path.join(job_dir, "images")
     outputs_dir = os.path.join(OMR_DIR, "outputs")
 
-    # 重置目錄
+    # 重置並建立乾淨的工作目錄
     if os.path.exists(job_dir): shutil.rmtree(job_dir)
     os.makedirs(images_dir, exist_ok=True)
     if os.path.exists(outputs_dir): shutil.rmtree(outputs_dir)
 
-    # 寫入 JSON 與 測試圖片
+    # 寫入 JSON 與 複製測試用的 template 圖片
     with open(os.path.join(OMR_DIR, "inputs", "template.json"), "w", encoding="utf-8") as f:
         f.write(json_content)
     shutil.copy(template_img_src, os.path.join(images_dir, "template_test.jpg"))
 
-    # 強制開啟最高視覺化等級
+    # 強制開啟最高視覺化等級 (保證產生實體劃線預覽圖)
     config_path = os.path.join(OMR_DIR, "config.json")
     if os.path.exists(config_path):
         try:
@@ -107,7 +107,7 @@ def generate_layout_preview(json_content):
         cwd=OMR_DIR, capture_output=True, text=True, env=current_env
     )
 
-    # 尋找畫好的圖片
+    # 尋找畫好框線的輸出圖片
     generated_img = None
     if os.path.exists(outputs_dir):
         for root, dirs, files in os.walk(outputs_dir):
@@ -126,20 +126,33 @@ def generate_layout_preview(json_content):
         return None, "❌ 繪製失敗。可能是 JSON 內的座標超出了圖片邊界。\n\n系統報錯日誌:\n" + (result.stderr or result.stdout)
 
 # =======================================================
-# 🎨 專用網頁介面 (Gradio)
+# 🎨 專用網頁介面 (Gradio) + 自訂 CSS 防止版面暴走
 # =======================================================
-with gr.Blocks(title="OMR Layout 秒速測試器") as demo:
+# 限制 JSON 輸入框的最大高度，強制產生內部捲軸
+custom_css = """
+.json-container {
+    max-height: 75vh !important;
+    overflow-y: auto !important;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 5px;
+}
+"""
+
+with gr.Blocks(title="OMR Layout 秒速測試器", css=custom_css) as demo:
     gr.Markdown("## 📐 OMRChecker 專屬 Layout 秒速調校工具")
-    gr.Markdown("不需等待批改，不需重新上傳圖片。直接修改下方 JSON，點擊右方按鈕，**2~3 秒內即可看見原廠引擎輸出的最新畫框圖片**。")
     
+    # 💡 按鈕置頂：不需要往下滑就能一鍵測試
     with gr.Row():
-        with gr.Column(scale=1):
+        submit_btn = gr.Button("🚀 立即更新框線預覽 (只需 2 秒)", variant="primary", size="lg")
+
+    with gr.Row():
+        # 💡 套用 CSS 類別，讓過長的 JSON 在這個區塊內自己滾動
+        with gr.Column(scale=1, elem_classes="json-container"):
             json_input = gr.Code(language="json", label="在此輸入或修改 Template JSON", lines=30)
             
         with gr.Column(scale=1):
-            # 高度設定大一點，方便看整張 A4 考卷
-            image_output = gr.Image(label="生成的 Layout 預覽圖 (原廠畫線)", type="filepath", interactive=False, height=600)
-            submit_btn = gr.Button("🚀 立即更新框線預覽 (只需 2 秒)", variant="primary")
+            image_output = gr.Image(label="生成的 Layout 預覽圖 (原廠畫線)", type="filepath", interactive=False)
 
     with gr.Row():
         log_output = gr.Textbox(label="後台執行日誌 (除錯用)", lines=4)
@@ -151,4 +164,5 @@ with gr.Blocks(title="OMR Layout 秒速測試器") as demo:
     )
 
 if __name__ == "__main__":
+    # 若在雲端運行，請確保 server_name="0.0.0.0"
     demo.launch(server_name="0.0.0.0", server_port=7860)