Update app.py

app.py

@@ -1,12 +1,12 @@
 import gradio as gr
 from ultralytics import YOLO
 
+model = YOLO("model.pt")
+
 def predict(img):
     path = img.split("\\")[-1].split(".")[0]
     print("path", path)
 
-    model = YOLO("model.pt")
-
     results = model.predict(source=img, save=False, show_labels=False, show_conf=False)
     
     # Handle both single result and list of results
@@ -24,15 +24,175 @@ def predict(img):
     
     return str(count), annot_img
 
-with gr.Blocks(title="Pill Counter") as demo:
+# 自定義 CSS 樣式（背景改為白色、簡潔風格）
+custom_css = """
+.gradio-container {
+    background: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* 主標題 */
+.main-header {
+    text-align: center;
+    color: #333333;
+    font-size: 2.2em;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+/* 副標題 */
+.sub-header {
+    text-align: center;
+    color: #555555;
+    font-size: 1.1em;
+    margin-bottom: 20px;
+    font-weight: 300;
+}
+
+/* 卡片容器 */
+.card-container {
+    background: #f9f9f9;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    margin: 15px;
+}
+
+/* 輸入區 */
+.input-section {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 15px;
+    border: 1px solid #e0e0e0;
+}
+
+/* 輸出區 */
+.output-section {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #e0e0e0;
+}
+
+/* 按鈕 */
+.predict-btn {
+    background: #4285f4 !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 12px 32px !important;
+    color: white !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    transition: background 0.2s ease !important;
+    cursor: pointer !important;
+}
+
+.predict-btn:hover {
+    background: #3367d6 !important;
+}
+
+/* 圖片上傳 */
+.image-upload {
+    border: 2px dashed #cccccc !important;
+    border-radius: 10px !important;
+    background: #fcfcfc !important;
+    padding: 15px !important;
+}
+
+.image-upload:hover {
+    border-color: #bbbbbb !important;
+    background: #f5f5f5 !important;
+}
+
+/* 數量文字 */
+.count-output {
+    font-size: 22px !important;
+    font-weight: 600 !important;
+    color: #222222 !important;
+    text-align: center !important;
+    background: #ffffff !important;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+}
+
+/* 結果圖 */
+.result-image {
+    border-radius: 8px !important;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
+    border: 1px solid #e0e0e0 !important;
+}
+
+/* 響應式 */
+@media (max-width: 768px) {
+    .main-header { font-size: 1.8em; }
+    .predict-btn { width: 100% !important; margin-top: 15px !important; }
+}
+"""
+
+with gr.Blocks(
+    title="Pill Counter",
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="green",
+        neutral_hue="gray",
+        font=gr.themes.GoogleFont("Noto Sans TC")
+    ),
+    css=custom_css
+) as demo:
+    
+    gr.HTML("""
+        <div class="main-header">Pill Counter</div>
+    """)
+    
     with gr.Row():
-        with gr.Column():
-            img = gr.Image(type="filepath", format="jpg", height=500, width=700)
-            button = gr.Button()
-        with gr.Column():
-            data_output = gr.Textbox()
-            img_output = gr.Image(type="numpy")
-        button.click(fn=predict, inputs=img, outputs=[data_output, img_output])
+        with gr.Column(scale=1):
+            
+            gr.HTML('<h3 style="color: #4285f4; text-align: center; margin-bottom: 15px;">📤 上傳藥物圖片</h3>')
+            img = gr.Image(
+                type="filepath",
+                format=["jpg", "png"],
+                height=450,
+                width=800,
+                label="請選擇或拖放圖片",
+                elem_classes=["image-upload"]
+            )
+            gr.HTML('<div style="text-align: center; margin-top: 15px;">')
+            button = gr.Button(
+                "開始計算",
+                variant="primary",
+                elem_classes=["predict-btn"]
+            )
+            gr.HTML('</div><div style="text-align:center; margin-top:8px; color:#888;">支援 JPG/PNG，建議 640×640 以上</div>')
+            gr.HTML('</div>')
+        
+        with gr.Column(scale=1):
+            
+            gr.HTML('<h3 style="color: #34a853; text-align: center; margin-bottom: 15px;">📊 檢測結果</h3>')
+            data_output = gr.Textbox(
+                interactive=False,
+                elem_classes=["count-output"]
+            )
+            gr.HTML('<div style="text-align:center; margin:15px 0;"><label style="font-size:14px;color:#555;">標註結果</label></div>')
+            img_output = gr.Image(
+                type="numpy",
+                elem_classes=["result-image"]
+            )
+            gr.HTML('</div>')
+    
+    gr.HTML("""
+        <div style="background:#ffffff; border-left:4px solid #4285f4; padding:15px; margin:15px; color:#666;">
+            <strong>使用步驟：</strong>
+            <ol style="margin-top:8px;">
+                <li>上傳清晰的圖片，保持純色背景(白色或黑色)，勿有反光</li>
+                <li>點擊「開始計算」按鈕</li>
+                <li>查看標註後圖片及藥錠總數</li>
+            </ol>
+        </div>
+    """)
+    
+    button.click(fn=predict, inputs=img, outputs=[data_output, img_output])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()