Update app.py

app.py

@@ -46,22 +46,22 @@ def query_data(clue_number):
             indirect_evidence_store = row['間接證據'] if row['間接證據'] else "無間接證據"
             image_url = row['嫌疑犯圖片'] if row['嫌疑犯圖片'] else None
             return (
-                f"嫌疑犯: {suspect}\n直接證據: {direct_evidence}", 
-                gr.update(visible=True), 
+                f"嫌疑犯: {suspect}\n直接證據: {direct_evidence}",
+                gr.update(visible=True),
                 gr.update(value="", visible=False),
                 image_url if image_url else None
             )
         else:
             return (
-                "未找到相關資料，請檢查蛛絲馬跡號碼是否正確。", 
-                gr.update(visible=False), 
+                "未找到相關資料，請檢查蛛絲馬跡號碼是否正確。",
+                gr.update(visible=False),
                 gr.update(value="", visible=False),
                 None
             )
     except ValueError:
         return (
-            "請輸入有效的數字。", 
-            gr.update(visible=False), 
+            "請輸入有效的數字。",
+            gr.update(visible=False),
             gr.update(value="", visible=False),
             None
         )
@@ -74,9 +74,9 @@ def reset_fields():
     global indirect_evidence_store
     indirect_evidence_store = ""
     return (
-        "", 
-        gr.update(visible=False), 
-        gr.update(value="", visible=False), 
+        "",
+        gr.update(visible=False),
+        gr.update(value="", visible=False),
         gr.update(value="", visible=True),
         None
     )
@@ -91,8 +91,10 @@ with gr.Blocks() as demo:
         query_button = gr.Button("查詢")
     
     with gr.Row():
-        output_box = gr.Textbox(label="查詢結果", interactive=False)
-        image_output = gr.Image(label="嫌疑犯圖片", visible=True, elem_id="suspect-image")
+        with gr.Column(scale=1):
+            output_box = gr.Textbox(label="查詢結果", interactive=False)
+        with gr.Column(scale=1):
+            image_output = gr.Image(label="嫌疑犯圖片", visible=True, elem_id="suspect-image")
     
     indirect_button = gr.Button("間接證據", visible=False)
     indirect_output = gr.Textbox(label="間接證據內容", interactive=False, visible=False)
@@ -100,29 +102,28 @@ with gr.Blocks() as demo:
 
     # Bind actions to functions
     query_button.click(
-        query_data, 
-        inputs=input_box, 
+        query_data,
+        inputs=input_box,
         outputs=[output_box, indirect_button, indirect_output, image_output]
     )
     indirect_button.click(
-        show_indirect_evidence, 
-        inputs=None, 
+        show_indirect_evidence,
+        inputs=None,
         outputs=indirect_output
     )
     reset_button.click(
-        reset_fields, 
-        inputs=None, 
+        reset_fields,
+        inputs=None,
         outputs=[input_box, indirect_button, indirect_output, output_box, image_output]
     )
 
-# Add custom CSS to adjust image size
-demo.add_css("""
+# Add inline CSS to adjust image size
+demo.css = """
 #suspect-image img {
-    max-width: 100px;
-    max-height: 100px;
-    object-fit: contain;
+    max-width: 150px;
+    max-height: 150px;
 }
-""")
+"""
 
 # Launch the Gradio app
 demo.launch()