Update app.py

app.py

@@ -138,7 +138,6 @@ def update_history(current_result_1, current_result_2, history_list):
         <div style="font-size: 18px; color: #666; margin-bottom: 10px; font-weight: bold;">
             🕒 測驗時間：{now}
         </div>
-
         <div style="
         display: flex;
         flex-direction: row;
@@ -149,10 +148,8 @@ def update_history(current_result_1, current_result_2, history_list):
         padding-bottom: 15px;
         margin-bottom: 15px;
         width: 100%;">
-
         <div style="flex: 1;">{current_result_1}</div>
         <div style="flex: 1;">{current_result_2}</div>
-
     </div>
     </div>
     """
@@ -181,6 +178,32 @@ def clear_all():
     # 15個輸入(gen, age, family, q1~q12) + 2個即時結果 + 1個歷史面板
     return [None] * 15 + ["", ""]
 
+# 排名設定
+def make_rank_list(a_score, d_score, s_score):
+    items = [
+        ("焦慮 (Anxiety)", a_score),
+        ("憂鬱 (Depression)", d_score),
+        ("壓力 (Stress)", s_score),
+    ]
+    items_sorted = sorted(items, key=lambda x: x[1], reverse=True)
+
+    medal = ["🥇", "🥈", "🥉"]
+    rows = ""
+
+    for i, (name, _) in enumerate(items_sorted):
+        rows += f"""
+        <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #eee;">
+            <div style="font-size:18px;">{medal[i]} {name}</div>
+            <div style="font-size:18px; color:#666;">第 {i+1} 名</div>
+        </div>
+        """
+
+    return f"""
+    <div style="padding: 20px; background: white; border-radius: 10px; border: 1px solid #ddd;">
+        <h2 style="color:#313230; margin-top:0; margin-bottom:10px;">各面向排名</h2>
+        {rows}
+    </div>
+    """
 
 # 定義主要測試功能
 
@@ -192,94 +215,54 @@ def clear_all():
 def predict_risk(gen, age, family, q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12):
     inputs = [gen, age, family, q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12]
 
-    # 檢查是否有任何一個選項是 None (未按)
     if any(v is None or v == "" for v in inputs):
-        # 觸發彈出視窗
         raise gr.Error("⚠️測驗載入有誤：請確保每一題都已填答或查看填答格式是否正確。")
 
-    # 1. 跑進度條 (需確保函式參數有 progress=gr.Progress())
     progress = gr.Progress()
     progress(0, desc="模型計算中...")
 
-    # 2. 將 12 個輸入整理成模型認得的 DataFrame
-    # 欄位名稱必須與訓練時完全相同
-    cols = ["gender", "age", "familysize", "Q2A", "Q4A", "Q19A", "Q20A", "Q28A", "Q21A", "Q26A", "Q37A", "Q42A", "Q11A", "Q12A", "Q27A"
-]
+    cols = ["gender", "age", "familysize", "Q2A", "Q4A", "Q19A", "Q20A", "Q28A", "Q21A", "Q26A", "Q37A", "Q42A", "Q11A", "Q12A", "Q27A"]
     input_df = pd.DataFrame([[gen, age, family, q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12]], columns=cols)
 
     progress(0.5, desc="正在分析數據...")
-    time.sleep(0.5) # 模擬運算時間
+    time.sleep(0.5)
 
-    # 3. 使用模型 model 進行預測
     score = model.predict(input_df)[0]
-    progress(1.0, desc="計算完成！")
 
-
-    # 4. 定義風險標籤
     if score == 0:
         label = "低度風險"
-        color = "#91cd92"  # 綠色
+        color = "#91cd92"
     elif score == 1:
         label = "中度風險"
-        color = "#f59e0b"  # 橘色
+        color = "#f59e0b"
     elif score == 2:
         label = "高度風險"
-        color = "#ef4444"  # 紅色
+        color = "#ef4444"
     else:
         label = "計算結果有誤，請重新測試。"
+        color = "#999999"
 
-    # 定義類別分數條
     a_score = (q1 + q2 + q3 + q4 + q5)
     d_score = (q6 + q7 + q8 + q9)
     s_score = (q10 + q11 + q12)
     t_score = a_score + d_score + s_score
-    max_val = 36
-
-    def make_bar(label, score, max_val, color):
-        percent = (score / max_val) * 100
-        return f"""
-        <div style="margin-bottom: 10px;">
-            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
-                <span style="font-weight: bold;">{label}</span>
-            </div>
-            <div style="background-color: #e0e0e0; border-radius: 10px; height: 12px; width: 100%;">
-                <div style="background-color: {color}; width: {percent}%; height: 100%; border-radius: 10px;"></div>
-            </div>
-        </div>
-        """
 
-    # 5. 準備回傳內容
-    # 總分與風險標籤
     result_score = f"""
     <div style="text-align: center; font-family: sans-serif;">
         <h2 style="color: #313230;">您的預測結果為</h2>
         <h1 style="font-size: 60px; color: {color}; margin: 0;">
             {label}
         </h1>
-        <h1 style="font-size: 20px; color: #bbbbc2; margin: 0;">
-            {t_score}/36
-        </h1>
     </div>
     """
 
-    # 類別分數條
-    label_html = f"""
-    <div style="padding: 20px; background: white; border-radius: 10px; border: 1px solid #ddd;">
-        <h2 style="color: #313230;margin-top: 0; margin-bottom: 15px;">各面向之比重</h2>
-        {make_bar("焦慮 (Anxiety)", a_score, max_val, "#fccb42")}
-        {make_bar("憂鬱 (Depression)", d_score, max_val, "#6dc8fe")}
-        {make_bar("壓力 (Stress)", s_score, max_val, "#fb6d6d")}
-    </div>
-    """
+    label_html = make_rank_list(a_score, d_score, s_score)
 
-    # 儲存測試資料
     save_to_google_sheets(inputs, a_score, d_score, s_score, t_score, score)
 
-
     progress(1.0, desc="完成")
-
     return result_score, label_html
-
+ 
 
 
 # In[59]:
@@ -317,26 +300,21 @@ custom_css = """
 #my_green_btn:hover {
     background-color: #72a473 !important; /* 滑鼠懸停時變深 */
 }
-
 #my_white_btn {
     background-color: #ffffff !important;
     color: black !important;
     border: 1px solid #e4e4e7;
 }
-
 #my_white_btn:hover {
     background-color: #e4e4e7 !important;
     color: black !important; /* 滑鼠懸停時變深 */
 }
-
-
 .my-custom-panel {
     background-color: #fffef8 !important;
     border: 2px solid #e4e4e7 !important;
     padding: 20px;
     border-radius: 15px;
 }
-
 #history_panel .label-wrap span {
     font-weight: bold !important;
 }
@@ -459,8 +437,3 @@ demo.launch()
 
 
 # 如需免費永久托管，需在終端機模式執行「gradio deploy」部署到 Hugging Face Spaces。
-
-
-
-
-