Update app.py

app.py

@@ -1,8 +1,38 @@
 import gradio as gr
-import time  # 新增 time 模組處理快取
+import base64
+import requests
+import time
+from io import BytesIO
+from PIL import Image
 
-# 使用正確的圖片路徑格式
-data = [
+# 圖片處理函數 (包含壓縮和Base64編碼)
+def process_image(url):
+    try:
+        response = requests.get(url, timeout=10)
+        response.raise_for_status()
+        
+        img = Image.open(BytesIO(response.content))
+        
+        # 保持透明度處理
+        if img.mode in ('RGBA', 'LA'):
+            img = img.convert('RGBA')
+        else:
+            img = img.convert('RGB')
+        
+        # 調整大小（保持比例縮放到最大300px）
+        img.thumbnail((300, 300))
+        
+        # 轉換為Base64
+        buffered = BytesIO()
+        img.save(buffered, format="PNG", optimize=True, quality=85)
+        return f"data:image/png;base64,{base64.b64encode(buffered.getvalue()).decode()}"
+        
+    except Exception as e:
+        print(f"圖片處理失敗: {str(e)}")
+        return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+
+# 完整28個嫌疑犯數據（原始URL格式）
+raw_data = [
     {"蛛絲馬跡": 1, "嫌疑犯": "5冰淇淋師傅", "直接證據": "SAS", "間接證據": "RHS SSS", "嫌疑犯圖片": "https://huggingface.co/spaces/Lashtw/Judge_system/resolve/main/5%E5%86%B0%E6%B7%87%E6%B7%8B%E5%B8%AB%E5%82%85.png"},
     {"蛛絲馬跡": 2, "嫌疑犯": "7候選人", "直接證據": "SSS", "間接證據": "SAS ASA AAS", "嫌疑犯圖片": "https://huggingface.co/spaces/Lashtw/Judge_system/resolve/main/7%E5%80%99%E9%81%B8%E4%BA%BA.png"},
     {"蛛絲馬跡": 3, "嫌疑犯": "8列車長", "直接證據": "SAS", "間接證據": "無", "嫌疑犯圖片": "https://huggingface.co/spaces/Lashtw/Judge_system/resolve/main/8%E5%88%97%E8%BB%8A%E9%95%B7.png"},
@@ -33,98 +63,155 @@ data = [
     {"蛛絲馬跡": 28, "嫌疑犯": "26保全", "直接證據": "ASA", "間接證據": "AAS", "嫌疑犯圖片": "https://huggingface.co/spaces/Lashtw/Judge_system/resolve/main/26%E4%BF%9D%E5%85%A8.png"}
 ]
 
+# 預處理所有圖片（部署時自動執行）
+print("⏳ 正在預處理28張嫌疑人圖片...")
+start_loading = time.time()
+
+for item in raw_data:
+    try:
+        process_start = time.time()
+        item["嫌疑犯圖片"] = process_image(item["嫌疑犯圖片"])
+        print(f"✅ 蛛絲馬跡 {item['蛛絲馬跡']:02d} 圖片處理完成 | 耗時 {time.time()-process_start:.2f}s")
+    except Exception as e:
+        print(f"❌ 蛛絲馬跡 {item['蛛絲馬跡']:02d} 圖片處理失敗: {str(e)}")
+        item["嫌疑犯圖片"] = None
+
+print(f"🎉 所有圖片預處理完成 | 總耗時 {time.time()-start_loading:.2f}秒")
+
+# 共用狀態儲存
 indirect_evidence_store = ""
 
 def query_data(clue_number):
     global indirect_evidence_store
     try:
         clue_number = int(clue_number)
-        row = next((item for item in data if item['蛛絲馬跡'] == clue_number), None)
-        if row:
-            suspect = row['嫌疑犯']
-            direct_evidence = row['直接證據']
-            indirect_evidence_store = row['間接證據'] if row['間接證據'] != "無" else "無間接證據"
-            
-            # 加入時間戳記處理快取問題
-            image_url = f"{row['嫌疑犯圖片']}?{int(time.time())}" if row['嫌疑犯圖片'] else None
+        if not 1 <= clue_number <= 28:
+            return [
+                gr.update(value="⚠️ 請輸入1-28之間的整數"),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                None
+            ]
             
-            return (
-                f"嫌疑犯: {suspect}\n直接證據: {direct_evidence}",
+        target = next((i for i in raw_data if i['蛛絲馬跡'] == clue_number), None)
+        
+        if target:
+            indirect_evidence_store = target['間接證據'] if target['間接證據'] != "無" else "無間接證據"
+            return [
+                f"🔍 嫌疑犯：{target['嫌疑犯']}\n🔖 直接證據：{target['直接證據']}",
                 gr.update(visible=True),
-                gr.update(value="", visible=False),
-                image_url
-            )
-        else:
-            return (
-                "未找到相關資料，請檢查蛛絲馬跡號碼是否正確。",
                 gr.update(visible=False),
-                gr.update(value="", visible=False),
-                None
-            )
-    except ValueError:
-        return (
-            "請輸入有效的數字。",
+                target['嫌疑犯圖片'] or None
+            ]
+        return [
+            "🕵️♂️ 查無此編號的嫌疑人記錄",
+            gr.update(visible=False),
             gr.update(visible=False),
-            gr.update(value="", visible=False),
             None
-        )
+        ]
+    except:
+        return [
+            "❌ 輸入格式錯誤，請輸入數字",
+            gr.update(visible=False),
+            gr.update(visible=False),
+            None
+        ]
 
-def show_indirect_evidence():
+def show_indirect():
     global indirect_evidence_store
-    return gr.update(value=indirect_evidence_store, visible=True)
+    return gr.update(value=f"📚 間接證據分析：{indirect_evidence_store}", visible=True)
 
-def reset_fields():
+def reset_all():
     global indirect_evidence_store
     indirect_evidence_store = ""
-    return (
-        "",
+    return [
+        gr.update(value=""), 
+        gr.update(visible=False),
         gr.update(visible=False),
-        gr.update(value="", visible=False),
-        gr.update(value="", visible=True),
         None
-    )
+    ]
 
-with gr.Blocks() as demo:
-    gr.Markdown("<h1>嫌疑犯ABC的現身</h1>")
-    gr.Markdown("<h3>法官系統</h3>")
+# 界面設計
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="gray",
+        font=[gr.themes.GoogleFont("Noto Sans TC")]
+    ),
+    css="""
+    .suspect-img {border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
+    .dark .suspect-img {border: 2px solid #333 !important;}
+    .result-box {background: #f8f9fa!important; border-radius: 8px!important;}
+    .dark .result-box {background: #2d2d2d!important;}
+    """
+) as demo:
     
-    with gr.Row():
-        input_box = gr.Textbox(label="請輸入蛛絲馬跡號碼", placeholder="例如: 11", lines=1)
-        query_button = gr.Button("查詢", variant="primary")
+    gr.Markdown("""
+    <div style="text-align: center; margin-bottom: 30px;">
+        <h1 style="font-weight: 700; color: #2563eb;">🕵️♂️ 刑事偵查系統</h1>
+        <h3 style="color: #4b5563;">重大刑案專案追緝平台</h3>
+    </div>
+    """)
     
+    with gr.Row(variant="panel"):
+        input_clue = gr.Number(
+            label="🕹️ 輸入蛛絲馬跡編號",
+            minimum=1,
+            maximum=28,
+            precision=0,
+            interactive=True,
+            container=False
+        )
+        
     with gr.Row():
+        with gr.Column(scale=2):
+            with gr.Group(elem_classes="result-box"):
+                result_display = gr.Textbox(
+                    label="🔎 偵查結果",
+                    interactive=False,
+                    lines=3,
+                    max_lines=3
+                )
+                indirect_btn = gr.Button(
+                    "📖 顯示間接證據", 
+                    visible=False,
+                    size="sm"
+                )
+                indirect_display = gr.Textbox(
+                    label="📝 間接證據報告",
+                    visible=False,
+                    interactive=False
+                )
+                
         with gr.Column(scale=1):
-            output_box = gr.Textbox(label="查詢結果", interactive=False)
-        with gr.Column(scale=1):
-            image_output = gr.Image(label="嫌疑犯圖片", elem_id="suspect-image", show_label=True)
-
-    indirect_button = gr.Button("顯示間接證據", visible=False)
-    indirect_output = gr.Textbox(label="間接證據內容", interactive=False, visible=False)
-    reset_button = gr.Button("重新查詢", variant="secondary")
+            img_display = gr.Image(
+                label="📸 嫌疑人檔案照",
+                height=320,
+                interactive=False,
+                elem_classes="suspect-img"
+            )
+            
+    with gr.Row():
+        submit_btn = gr.Button("🚀 開始偵查", variant="primary")
+        reset_btn = gr.Button("🔄 重置查詢", variant="secondary")
 
-    query_button.click(
+    # 事件綁定
+    submit_btn.click(
         query_data,
-        inputs=input_box,
-        outputs=[output_box, indirect_button, indirect_output, image_output]
+        inputs=input_clue,
+        outputs=[result_display, indirect_btn, indirect_display, img_display]
     )
-    indirect_button.click(
-        show_indirect_evidence,
-        inputs=None,
-        outputs=indirect_output
+    
+    indirect_btn.click(
+        show_indirect,
+        outputs=indirect_display
     )
-    reset_button.click(
-        reset_fields,
-        inputs=None,
-        outputs=[input_box, indirect_button, indirect_output, output_box, image_output]
+    
+    reset_btn.click(
+        reset_all,
+        outputs=[input_clue, indirect_btn, indirect_display, img_display]
     )
 
-    demo.css = """
-    #suspect-image {
-        max-width: 250px !important;
-        max-height: 250px !important;
-        border: 2px solid #e0e0e0;
-        border-radius: 8px;
-    }
-    """
-
-demo.launch()
+# 啟動應用
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)