Update app.py

app.py

@@ -12,10 +12,8 @@ DATA_FILE = "data.csv"
 def load_fixed_database():
     if os.path.exists(DATA_FILE):
         try:
-            # 讀取固定的健保資料庫
             df = pd.read_csv(DATA_FILE)
             df.columns = df.columns.str.strip()
-            # 清理欄位前後空白
             for col in ['成分', '劑型', '劑量', '廠商', '年度']:
                 if col in df.columns:
                     df[col] = df[col].astype(str).str.strip()
@@ -24,19 +22,17 @@ def load_fixed_database():
             print(f"讀取本地資料庫失敗: {e}")
             return pd.DataFrame()
     else:
-        print(f"錯誤：找不到固定資料庫檔案 {DATA_FILE}，請確保檔案已上傳至同目錄。")
         return pd.DataFrame()
 
-# 程式啟動時載入全域資料
 df_global = load_fixed_database()
 if not df_global.empty:
     ALL_COMPONENTS = sorted(df_global['成分'].dropna().unique())
-    INIT_MESSAGE = f"✅ 成功自動載入固定資料庫！共 {len(df_global)} 筆數據，包含 {len(ALL_COMPONENTS)} 種成分。"
+    INIT_MESSAGE = f"✅ 成功載入資料庫！共 {len(df_global)} 筆數據，包含 {len(ALL_COMPONENTS)} 種成分。"
 else:
     ALL_COMPONENTS = []
-    INIT_MESSAGE = "❌ 警告：未在目錄下找到 data.csv 檔案，請先將資料庫檔案上傳至 Space 檔案庫中。"
+    INIT_MESSAGE = "❌ 未找到 data.csv 檔案，請將資料庫檔案上傳至同目錄。"
 
-# --- 2. 輔助函式：劑量排序邏輯 ---
+# --- 2. 輔助函式 ---
 def parse_dosage_to_numeric(dose_str):
     if not isinstance(dose_str, str):
         return 0.0
@@ -48,64 +44,75 @@ def parse_dosage_to_numeric(dose_str):
         return val
     return 0.0
 
-# --- 3. 動態搜尋成分（如同 Excel 篩選功能） ---
+# --- 3. 動態介面連動函式 ---
 def update_component_choices(search_text):
     if not ALL_COMPONENTS:
-        return gr.update(choices=[])
-    
-    # 修正：如果使用者沒有輸入任何關鍵字，保持空的選項不顯示，避免畫面太混亂
+        return gr.update(choices=[], value=[])
     if not search_text or search_text.strip() == "":
-        return gr.update(choices=[])
-        
-    # 修正原本放在 return 後面的縮排錯誤
+        return gr.update(choices=[], value=[])
     search_text = search_text.strip().lower()
     filtered = [c for c in ALL_COMPONENTS if search_text in c.lower()]
-    return gr.update(choices=filtered)
+    return gr.update(choices=filtered, value=[])
+
+def update_form_choices(selected_comps):
+    if not selected_comps or df_global.empty:
+        return gr.update(choices=[], value=[])
+    df_filtered = df_global[df_global['成分'].isin(selected_comps)]
+    forms = sorted(df_filtered['劑型'].dropna().unique())
+    return gr.update(choices=forms, value=forms)
 
-# --- 4. 產出標準化 Excel 報表 ---
-def generate_standard_excel(selected_components):
+def update_dose_choices(selected_comps, selected_forms):
+    if not selected_comps or not selected_forms or df_global.empty:
+        return gr.update(choices=[], value=[])
+    df_filtered = df_global[
+        (df_global['成分'].isin(selected_comps)) & 
+        (df_global['劑型'].isin(selected_forms))
+    ]
+    doses = sorted(df_filtered['劑量'].dropna().unique(), key=parse_dosage_to_numeric)
+    return gr.update(choices=doses, value=doses)
+
+# --- 4. 產出標準化 Excel 與 HTML 預覽報表 ---
+def generate_reports(selected_components, selected_forms, selected_doses):
     if df_global.empty:
-        return None, "❌ 系統未成功載入 data.csv 資料庫，請檢查 Space 中的檔案是否存在。"
-    if not selected_components:
-        return None, "❌ 請至少勾選一個成分品項！"
+        return None, "❌ 系統未成功載入 data.csv 資料庫。", ""
+    if not selected_components or not selected_forms or not selected_doses:
+        return None, "❌ 請確認成分、劑型、劑量皆已勾選！", ""
+
+    df_filtered = df_global[
+        (df_global['成分'].isin(selected_components)) & 
+        (df_global['劑型'].isin(selected_forms)) &
+        (df_global['劑量'].isin(selected_doses))
+    ].copy()
     
-    # 篩選選定的成分資料
-    df_filtered = df_global[df_global['成分'].isin(selected_components)].copy()
     if df_filtered.empty:
-        return None, "❌ 找不到相關資料！"
-    
-    # 自動判斷數量欄位名稱
+        return None, "❌ 找不到符合該條件的資料！", ""
+
     qty_col = '數量(顆)' if '數量(顆)' in df_filtered.columns else [col for col in df_filtered.columns if '數量' in col][0]
-    
-    # 【新增：強制將數量欄位轉換為數值型態，並移除非數字字元】
     df_filtered[qty_col] = df_filtered[qty_col].astype(str).str.replace(',', '').str.strip()
     df_filtered[qty_col] = pd.to_numeric(df_filtered[qty_col], errors='coerce').fillna(0)
-    
-    # 進行樞紐分析 (Pivot Table)
+
     pivot_df = df_filtered.groupby(['成分', '劑型', '劑量', '廠商', '年度'])[qty_col].sum().unstack(fill_value=0)
-    
-    # 確保三年欄位皆完整
     for year_col in ['2022年', '2023年', '2024年']:
         if year_col not in pivot_df.columns:
             pivot_df[year_col] = 0
             
     pivot_df = pivot_df.reindex(columns=['2022年', '2023年', '2024年']).reset_index()
-    
-    # 高階排序：劑量由小到大 -> 2024年數量由大到小
     pivot_df['dose_numeric'] = pivot_df['劑量'].apply(parse_dosage_to_numeric)
-    pivot_df = pivot_df.sort_values(by=['dose_numeric', '2024年'], ascending=[True, False]).drop(columns=['dose_numeric'])
-    
-    # 建立全新 Excel 工作簿
+    pivot_df = pivot_df.sort_values(
+        by=['成分', '劑型', 'dose_numeric', '2024年'], 
+        ascending=[True, True, True, False]
+    ).drop(columns=['dose_numeric'])
+
+    # --- Excel 處理邏輯 ---
     wb = Workbook()
     ws = wb.active
     ws.title = "廠商排名報表"
     ws.views.sheetView[0].showGridLines = True
-    
-    # 樣式與底色定義
+
     font_family = "微軟正黑體"
-    header_fill = PatternFill(start_color="1F497D", end_color="1F497D", fill_type="solid")  # 標題深藍
-    subtotal_fill = PatternFill(start_color="DCE6F1", end_color="DCE6F1", fill_type="solid") # 合計淡藍
-    total_fill = PatternFill(start_color="B8CCE4", end_color="B8CCE4", fill_type="solid")    # 總計中藍
+    header_fill = PatternFill(start_color="1F497D", end_color="1F497D", fill_type="solid")
+    subtotal_fill = PatternFill(start_color="DCE6F1", end_color="DCE6F1", fill_type="solid")
+    total_fill = PatternFill(start_color="B8CCE4", end_color="B8CCE4", fill_type="solid")
     
     header_font = Font(name=font_family, size=12, bold=True, color="FFFFFF")
     data_font = Font(name=font_family, size=12)
@@ -116,197 +123,438 @@ def generate_standard_excel(selected_components):
     right_align = Alignment(horizontal="right", vertical="center")
     
     thin_side = Side(border_style="thin", color="D9D9D9")
+    thick_bottom_side = Side(border_style="medium", color="000000")
     cell_border = Border(left=thin_side, right=thin_side, top=thin_side, bottom=thin_side)
+    thick_bottom_border = Border(left=thin_side, right=thin_side, top=thin_side, bottom=thick_bottom_side)
+
+    # --- HTML 處理邏輯 ---
+    html_content = f"""
+    <style>
+        .report-container {{ 
+            background: white;
+            padding: 10px; 
+            width: 100%;
+            box-sizing: border-box;
+            -webkit-text-size-adjust: 100%; /* 【關鍵 1】嚴格禁止手機瀏覽器自動縮小整個網頁的字體 */
+        }}
+        .table-responsive {{
+            width: 100%;
+            overflow-x: auto; 
+            -webkit-overflow-scrolling: touch; 
+            padding-bottom: 10px; 
+        }}
+        .report-table {{
+            width: max-content; 
+            min-width: 100%; 
+            border-collapse: collapse; 
+            font-family: '微軟正黑體', sans-serif; 
+            font-size: 15px !important; /* 【關鍵 2】從原本的 13px 放大至 15px，並加上 !important 強制生效 */
+        }}
+        .report-table th, .report-table td {{
+            border: 1px solid #D9D9D9;
+            padding: 8px 12px; 
+            white-space: nowrap !important; /* 【關鍵 3】絕對不換行，讓表格直接往右邊長過去 */
+        }}
+        .report-table th {{ 
+            background-color: #1F497D !important;
+            color: #FFFFFF !important; 
+            text-align: center; 
+            font-weight: bold; 
+        }}
+        .thick-bottom {{ border-bottom: 2px solid black !important; }}
+    </style>
     
-    # 寫入標題列 (欄位依序排列，包含換行)
-    headers = ["成分", "劑型", "劑量", "廠商", "2022年\n數量", "2023年\n數量", "2024年\n數量", "2024年\n占比(%)"]
-    ws.append(headers)
+    <div id="report-capture-area" class="report-container">
+    """
+
+    comp_names = "、".join(df_filtered['成分'].unique())
+    form_mapping = {"注射劑": "Inj.", "一般錠劑膠囊劑": "Tab./Cap.", "膜衣錠": "F.C. Tab.", "膠囊劑": "Cap.", "錠劑": "Tab."}
+    unique_forms = df_filtered['劑型'].unique()
+    form_abbr = f" {form_mapping.get(unique_forms[0], unique_forms[0])}" if len(unique_forms) == 1 else ""
+    doses_for_header = sorted(df_filtered['劑量'].unique(), key=parse_dosage_to_numeric)
+    doses_str = "、".join(doses_for_header)
+    header_title_text = f"{comp_names}{form_abbr} {doses_str}廠商申報量排名"
+
+    html_content += f'<h2 style="text-align:center; font-family: \'微軟正黑體\'; font-weight:bold;">{header_title_text}</h2>'
+    html_content += '<div class="table-responsive"><table class="report-table">'
+
+    headers = ["成分", "劑型", "劑量", "廠商", "2022年<br>數量", "2023年<br>數量", "2024年<br>數量", "2024年<br>占比(%)"]
+    ws_headers = [h.replace("<br>", "\n") for h in headers]
+    ws.append(ws_headers)
     ws.row_dimensions[1].height = 30
-    for col_idx, h in enumerate(headers, 1):
+    
+    html_content += "<tr>"
+    for col_idx, h in enumerate(ws_headers, 1):
         cell = ws.cell(row=1, column=col_idx)
         cell.font = header_font
         cell.fill = header_fill
         cell.alignment = center_align
         cell.border = cell_border
-        
-    unique_doses = sorted(pivot_df['劑量'].unique(), key=parse_dosage_to_numeric)
+        html_content += f"<th style='color: #FFFFFF !important; background-color: #1F497D !important;'>{headers[col_idx-1]}</th>"
+    html_content += "</tr>"
+
+    unique_groups = pivot_df[['成分', '劑型', '劑量']].drop_duplicates()
+    unique_groups_list = list(unique_groups.iterrows())
     
     grand_total_2022 = 0
     grand_total_2023 = 0
     grand_total_2024 = 0
-    
     current_row = 2
-    # 按劑量拆分群組寫入
-    for dose in unique_doses:
-        dose_group = pivot_df[pivot_df['劑量'] == dose]
-        dose_2024_sum = dose_group['2024年'].sum()
+
+    last_comp = None
+    last_form = None
+
+    for idx, (_, group_keys) in enumerate(unique_groups_list):
+        comp = group_keys['成分']
+        form = group_keys['劑型']
+        dose = group_keys['劑量']
+
+        is_last_of_form = False
+        if idx == len(unique_groups_list) - 1:
+            is_last_of_form = True
+        else:
+            next_comp = unique_groups_list[idx+1][1]['成分']
+            next_form = unique_groups_list[idx+1][1]['劑型']
+            if comp != next_comp or form != next_form:
+                is_last_of_form = True
+
+        dose_group = pivot_df[
+            (pivot_df['成分'] == comp) & 
+            (pivot_df['劑型'] == form) & 
+            (pivot_df['劑量'] == dose)
+        ]
         
-        dose_subtotal_2022 = 0
-        dose_subtotal_2023 = 0
-        dose_subtotal_2024 = 0
+        dose_2024_sum = dose_group['2024年'].sum()
+        dose_subtotal_2022 = dose_group['2022年'].sum()
+        dose_subtotal_2023 = dose_group['2023年'].sum()
+        dose_subtotal_2024 = dose_2024_sum
         
-        is_first_row = True
+        print_comp = (comp != last_comp)
+        print_form = print_comp or (form != last_form)
+        is_first_row_in_dose = True
         
         for _, row in dose_group.iterrows():
-            qty_2022 = row['2022年']
-            qty_2023 = row['2023年']
-            qty_2024 = row['2024年']
+            qty_2022 = float(row['2022年'])
+            qty_2023 = float(row['2023年'])
+            qty_2024 = float(row['2024年'])
             ratio = (qty_2024 / dose_2024_sum) if dose_2024_sum > 0 else 0.0
             
-            # 同劑量重複廠商：前三欄留白不重複顯示
-            c_val = row['成分'] if is_first_row else ""
-            f_val = row['劑型'] if is_first_row else ""
-            d_val = row['劑量'] if is_first_row else ""
+            c_val = row['成分'] if print_comp and is_first_row_in_dose else ""
+            f_val = row['劑型'] if print_form and is_first_row_in_dose else ""
+            d_val = row['劑量'] if is_first_row_in_dose else ""
             
             ws.append([c_val, f_val, d_val, row['廠商'], qty_2022, qty_2023, qty_2024, ratio])
+            ws.row_dimensions[current_row].height = 25
+            
+            html_content += f"<tr>"
+            html_content += f"<td style='text-align:center;'>{c_val}</td>"
+            html_content += f"<td style='text-align:center;'>{f_val}</td>"
+            html_content += f"<td style='text-align:center;'>{d_val}</td>"
+            html_content += f"<td style='text-align:left;'>{row['廠商']}</td>"
+            html_content += f"<td style='text-align:right;'>{qty_2022:,.0f}</td>"
+            html_content += f"<td style='text-align:right;'>{qty_2023:,.0f}</td>"
+            html_content += f"<td style='text-align:right;'>{qty_2024:,.0f}</td>"
+            html_content += f"<td style='text-align:right;'>{ratio:.1%}</td>"
+            html_content += "</tr>"
             
-            # 設定一般資料列格式
             for col_idx in range(1, 9):
                 cell = ws.cell(row=current_row, column=col_idx)
                 cell.font = data_font
                 cell.border = cell_border
-                if col_idx in [1, 2, 3]:
-                    cell.alignment = center_align
-                elif col_idx == 4:
-                    cell.alignment = left_align
-                elif col_idx in [5, 6, 7]:
-                    cell.alignment = right_align
-                    cell.number_format = '#,##0' # 千分位、至個位數
-                elif col_idx == 8:
-                    cell.alignment = right_align
-                    cell.number_format = '0.0%'  # 占比至小數點第一位
+                if col_idx in [1, 2, 3]: cell.alignment = center_align
+                elif col_idx == 4: cell.alignment = left_align
+                elif col_idx in [5, 6, 7]: cell.alignment = right_align; cell.number_format = '#,##0'
+                elif col_idx == 8: cell.alignment = right_align; cell.number_format = '0.0%'
             
-            dose_subtotal_2022 += qty_2022
-            dose_subtotal_2023 += qty_2023
-            dose_subtotal_2024 += qty_2024
             current_row += 1
-            is_first_row = False
+            is_first_row_in_dose = False
+        
+        last_comp = comp
+        last_form = form
             
-        # 寫入「劑量合計」列
+        # 合計列
         ws.append(["", "", f"{dose} 合計", "", dose_subtotal_2022, dose_subtotal_2023, dose_subtotal_2024, 1.0])
+        ws.merge_cells(start_row=current_row, start_column=3, end_row=current_row, end_column=4)
+        ws.row_dimensions[current_row].height = 25
+        
+        thick_class = "thick-bottom" if is_last_of_form else ""
+        html_content += f"""
+        <tr style="background-color: #DCE6F1; font-weight: bold;">
+            <td class="{thick_class}"></td><td class="{thick_class}"></td>
+            <td colspan="2" class="{thick_class}" style="text-align:center;">{dose} 合計</td>
+            <td class="{thick_class}" style="text-align:right;">{dose_subtotal_2022:,.0f}</td>
+            <td class="{thick_class}" style="text-align:right;">{dose_subtotal_2023:,.0f}</td>
+            <td class="{thick_class}" style="text-align:right;">{dose_subtotal_2024:,.0f}</td>
+            <td class="{thick_class}" style="text-align:right;">100.0%</td>
+        </tr>
+        """
+        
         for col_idx in range(1, 9):
             cell = ws.cell(row=current_row, column=col_idx)
             cell.font = bold_font
             cell.fill = subtotal_fill
-            cell.border = cell_border
-            if col_idx == 3:
-                cell.alignment = center_align
-            elif col_idx in [5, 6, 7]:
-                cell.alignment = right_align
-                cell.number_format = '#,##0'
-            elif col_idx == 8:
-                cell.alignment = right_align
-                cell.number_format = '0.0%'
+            cell.border = thick_bottom_border if is_last_of_form else cell_border
+            if col_idx == 3: cell.alignment = Alignment(horizontal="center", vertical="center", wrap_text=False)
+            elif col_idx in [5, 6, 7]: cell.alignment = right_align; cell.number_format = '#,##0'
+            elif col_idx == 8: cell.alignment = right_align; cell.number_format = '0.0%'
                 
         grand_total_2022 += dose_subtotal_2022
         grand_total_2023 += dose_subtotal_2023
         grand_total_2024 += dose_subtotal_2024
         current_row += 1
-        
-    # 寫入「總計」列
-    ws.append(["", "", "總計", "", grand_total_2022, grand_total_2023, grand_total_2024, 1.0])
+
+    # 總計列
+    ws.append(["總計", "", "", "", grand_total_2022, grand_total_2023, grand_total_2024, 1.0])
+    ws.merge_cells(start_row=current_row, start_column=1, end_row=current_row, end_column=4)
+    ws.row_dimensions[current_row].height = 25
+    
+    html_content += f"""
+    <tr style="background-color: #B8CCE4; font-weight: bold;">
+        <td colspan="4" style="text-align:center;">總計</td>
+        <td style="text-align:right;">{grand_total_2022:,.0f}</td>
+        <td style="text-align:right;">{grand_total_2023:,.0f}</td>
+        <td style="text-align:right;">{grand_total_2024:,.0f}</td>
+        <td style="text-align:right;">100.0%</td>
+    </tr>
+    </table></div>
+    """
+    
+    # 頁尾
+    html_content += """
+    <div style="display:flex; justify-content:space-between; margin-top: 15px; font-size: 12px; color: #555;">
+        <span>中央健康保險署  政府資料開放平台 2024年資料</span>
+        <span>https://data.gov.tw/dataset/22131</span>
+    </div>
+    </div>
+    """
+
     for col_idx in range(1, 9):
         cell = ws.cell(row=current_row, column=col_idx)
         cell.font = bold_font
         cell.fill = total_fill
         cell.border = cell_border
-        if col_idx == 3:
-            cell.alignment = center_align
-        elif col_idx in [5, 6, 7]:
-            cell.alignment = right_align
-            cell.number_format = '#,##0'
-        elif col_idx == 8:
-            cell.alignment = right_align
-            cell.number_format = '0.0%'
-            
-    # 自動調整欄寬
+        if col_idx == 1: cell.alignment = Alignment(horizontal="center", vertical="center", wrap_text=False)
+        elif col_idx in [5, 6, 7]: cell.alignment = right_align; cell.number_format = '#,##0'
+        elif col_idx == 8: cell.alignment = right_align; cell.number_format = '0.0%'
+
     for col in ws.columns:
-        max_len = 0
         col_letter = get_column_letter(col[0].column)
+        if col_letter == 'H':
+            ws.column_dimensions[col_letter].width = 11.5
+            continue
+        max_len = 0
         for cell in col:
             val_str = str(cell.value or '')
             lines = val_str.split('\n')
             for line in lines:
                 line_len = sum(2 if '\u4e00' <= char <= '\u9fff' else 1 for char in line)
-                if line_len > max_len:
-                    max_len = line_len
+                if line_len > max_len: max_len = line_len
         ws.column_dimensions[col_letter].width = max(max_len + 4, 12)
-        
-    # 專業列印與邊界設定 (公分轉英吋)
+
     ws.sheet_properties.pageSetUpPr.fitToPage = True
-    ws.page_setup.fitToWidth = 1  # 欄位強迫縮放放入單頁
-    ws.page_setup.fitToHeight = 0 # 高度自動延伸
-    ws.page_margins.top = 2.7 / 2.54
-    ws.page_margins.bottom = 2.5 / 2.54
-    ws.page_margins.left = 1.5 / 2.54
-    ws.page_margins.right = 1.5 / 2.54
-    ws.page_margins.header = 1.5 / 2.54
-    ws.page_margins.footer = 1.0 / 2.54
+    ws.page_setup.fitToWidth = 1 
+    ws.page_setup.fitToHeight = 0
+    ws.page_margins.top = 2.7 / 2.54; ws.page_margins.bottom = 2.5 / 2.54
+    ws.page_margins.left = 1.5 / 2.54; ws.page_margins.right = 1.5 / 2.54
+    ws.page_margins.header = 1.5 / 2.54; ws.page_margins.footer = 1.0 / 2.54
+
+    header_string_for_print = f'&"微軟正黑體,Bold"&16{header_title_text}'
+    ws.oddHeader.center.text = header_string_for_print
+    ws.oddFooter.left.text = '&"微軟正黑體,Regular"&12中央健康保險署  政府資料開放平台 2024年資料'
+    ws.oddFooter.right.text = '&"微軟正黑體,Regular"&12https://data.gov.tw/dataset/22131'
+    ws.page_setup.scaleWithDoc = True
+    ws.page_setup.alignWithMargins = True
+
+    safe_filename = re.sub(r'[\\/*?:"<>|]', "_", header_title_text) + ".xlsx"
+    wb.save(safe_filename)
     
-    # 動態變數計算 (用於頁首)
-    comp_names = "、".join(df_filtered['成分'].unique())
-    form_mapping = {"注射劑": "Inj.", "一般錠劑膠囊劑": "Tab./Cap.", "膜衣錠": "F.C. Tab.", "膠囊劑": "Cap.", "錠劑": "Tab."}
-    unique_forms = df_filtered['劑型'].unique()
-    form_abbr = f" {form_mapping.get(unique_forms[0], unique_forms[0])}" if len(unique_forms) == 1 else ""
-    doses_str = "、".join(unique_doses)
+    success_msg = "🎉 成功！已順利產出「Excel 報表」與下方「預覽畫面」。請點擊下方按鈕下載檔案或存為圖片！"
+    return safe_filename, success_msg, html_content
+
+
+# --- 5. 終極優化：完美截圖與手機互動 JavaScript ---
+download_js = """
+function() {
+    var element = document.getElementById('report-capture-area');
+    if (!element) {
+        alert('請先產生報表再下載圖片！');
+        return [];
+    }
     
-    # 頁首頁尾設定 (&16&B 為 Excel 內建 16級字+粗體 語法)
-    header_string = f"&16&B{comp_names}{form_abbr} {doses_str}廠商申報量排名"
-    ws.oddHeader.center.text = header_string
-    ws.oddFooter.left.text = "&12中央健康保險署  政府資料開放平台 2024年資料"
-    ws.oddFooter.right.text = "&12https://data.gov.tw/dataset/22131"
+    if (typeof html2canvas === 'undefined') {
+        alert('截圖套件載入中，請稍後再試或重新整理網頁。');
+        return [];
+    }
     
-    ws.page_setup.scaleWithDoc = True
-    ws.page_setup.alignWithMargins = True
+    var table = document.querySelector('.report-table');
+    var wrapper = document.querySelector('.table-responsive');
+    
+    var originalElementWidth = element.style.width;
+    var originalWrapperOverflow = wrapper ? wrapper.style.overflowX : '';
+    var targetWidth = table ? (table.offsetWidth + 20) : element.scrollWidth;
     
-    # 儲存 Excel
-    output_filename = "Standardized_Report.xlsx"
-    wb.save(output_filename)
+    element.style.width = targetWidth + 'px';
+    if(wrapper) wrapper.style.overflowX = 'visible';
     
-    return output_filename, f"🎉 成功！已為您匯出完整的廠商排名 Excel 報表。"
+    var titleElement = element.querySelector('h2');
+    var fileName = titleElement ? titleElement.innerText.replace(/[\\\\/*?:"<>|]/g, "_") : '廠商排名報表';
+    
+    html2canvas(element, { 
+        scale: 2, 
+        backgroundColor: '#FFFFFF',
+        width: targetWidth,
+        windowWidth: targetWidth 
+    }).then(function(canvas) {
+        
+        // 截圖完畢，瞬間把排版縮回去
+        element.style.width = originalElementWidth;
+        if(wrapper) wrapper.style.overflowX = originalWrapperOverflow;
+        
+        // 【修正 1：強化手機與平板判斷，涵蓋 iPad 的桌面網站模式】
+        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+        
+        canvas.toBlob(function(blob) {
+            var file = new File([blob], fileName + '.png', { type: 'image/png' });
+            var imgDataUrl = canvas.toDataURL('image/png');
+            // 【修正 2：優先嘗試 Web Share API，呼叫原生「儲存影像」】
+            if (isMobile && navigator.canShare && navigator.canShare({ files: [file] })) {
+                navigator.share({
+                    files: [file],
+                    title: fileName
+                }).then(() => {
+                    console.log('成功呼叫原生分享選單');
+                }).catch((error) => {
+                    // 若使用者取消或 iframe 權限遭擋，降級使用長按視窗
+                    console.log('無法使用原生分享，改用長按模式', error);
+                    showLongPressModal(imgDataUrl);
+                });
+            } 
+            // 【修正 3：若不支援 Share API，強制顯示長按視窗】
+            else if (isMobile) {
+                showLongPressModal(imgDataUrl);
+            } 
+            // 電腦版維持自動下載
+            else {
+                var link = document.createElement('a');
+                link.download = fileName + '.png';
+                link.href = imgDataUrl;
+                link.click();
+            }
+        }, 'image/png');
+        // 將長按視窗獨立為函式，方便降級呼叫
+        function showLongPressModal(imgSrc) {
+            var modal = document.createElement('div');
+            modal.style.position = 'fixed';
+            modal.style.top = '0';
+            modal.style.left = '0';
+            modal.style.width = '100vw';
+            modal.style.height = '100vh';
+            modal.style.backgroundColor = 'rgba(0,0,0,0.85)';
+            modal.style.zIndex = '9999';
+            modal.style.display = 'flex';
+            modal.style.flexDirection = 'column';
+            modal.style.alignItems = 'center';
+            modal.style.justifyContent = 'center';
+            
+            var closeBtn = document.createElement('button');
+            closeBtn.innerText = '✕ 關閉';
+            closeBtn.style.position = 'absolute';
+            closeBtn.style.top = '20px';
+            closeBtn.style.right = '20px';
+            closeBtn.style.padding = '8px 16px';
+            closeBtn.style.fontSize = '16px';
+            closeBtn.style.backgroundColor = '#ff4444';
+            closeBtn.style.color = 'white';
+            closeBtn.style.border = 'none';
+            closeBtn.style.borderRadius = '5px';
+            closeBtn.style.fontWeight = 'bold';
+            closeBtn.onclick = function() { document.body.removeChild(modal); };
+            
+            var hint = document.createElement('div');
+            hint.innerText = '👇 請「長按」下方圖片，選擇「儲存到照片 / 儲存影像」';
+            hint.style.color = 'white';
+            hint.style.fontSize = '16px';
+            hint.style.fontWeight = 'bold';
+            hint.style.marginBottom = '20px';
+            hint.style.padding = '10px';
+            hint.style.textAlign = 'center';
+            hint.style.backgroundColor = '#1F497D';
+            hint.style.borderRadius = '8px';
+            
+            var img = document.createElement('img');
+            img.src = imgSrc;
+            img.style.maxWidth = '95%';
+            img.style.maxHeight = '75vh';
+            img.style.border = '2px solid white';
+            img.style.borderRadius = '5px';
+            img.style.objectFit = 'contain';
+            
+            // 確保圖片支援 iOS 長按呼叫選單
+            img.style.webkitTouchCallout = 'default';
+            img.style.userSelect = 'auto';
+            
+            modal.appendChild(closeBtn);
+            modal.appendChild(hint);
+            modal.appendChild(img);
+            document.body.appendChild(modal);
+        }
+        
+    });
+    return [];
+}
+"""
 
-# --- 5. 簡潔的 Gradio 使用者介面 (移除上傳區塊) ---
-with gr.Blocks(title="健保申報量標準化 Excel 產出工具") as demo:
-    gr.Markdown("# 💊 健保申報量標準化 Excel 自動化產出工具")
+
+# --- 6. 介面層 (載入 html2canvas 套件) ---
+with gr.Blocks(
+    theme=gr.themes.Default(primary_hue="blue", secondary_hue="slate"), # 【新增這行】將系統按鈕主色調改為藍色
+    title="健保資料庫數據分析工具", 
+    head='<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>'
+) as demo:
+    
+    gr.Markdown("# 💊 健保資料庫數據分析工具")
     gr.Markdown(f"**系統狀態：** {INIT_MESSAGE}")
     
+    gr.Markdown("⚠️ **提醒使用手機版的同仁：請務必使用系統預設瀏覽器（如 Safari 或 Chrome）開啟本網頁，才能成功下載檔案與圖片。**")
+    
     with gr.Row():
+        # 左側區塊：輸入條件
         with gr.Column(scale=1):
-            gr.Markdown("### 🔍 第一步：輸入成分篩選（支援單方、複方模糊比對）")
-            search_input = gr.Textbox(
-                label="輸入成分關鍵字", 
-                placeholder="例如：Levofloxacin 或 Cilostazol",
-                value=""
-            )
-            
-            # 【主要修改處】：將原本的 choices=ALL_COMPONENTS 改為 choices=[]
-            # 這樣一打開網頁時，第二步就會是乾淨的，只有輸入關鍵字後才會顯示對應成分。
-            component_choices = gr.CheckboxGroup(
-                label="📋 第二步：勾選欲納入報表的成分品項 (可多選)", 
-                choices=[],
-                value=[]
-            )
-            
-            submit_btn = gr.Button("🚀 產生標準化 Excel 報表", variant="primary")
+            gr.Markdown("### 🔍 輸入條件")
+            search_input = gr.Textbox(label="第一步：輸入成分關鍵字", placeholder="例如：Levofloxacin", value="")
+            component_choices = gr.CheckboxGroup(label="📋 第二步：勾選成分品項 (可多選)", choices=[], value=[])
+            form_choices = gr.CheckboxGroup(label="💊 第三步：勾選欲包含的劑型", choices=[], value=[])
+            dose_choices = gr.CheckboxGroup(label="🧪 第四步：勾選欲包含的劑量", choices=[], value=[])
+            submit_btn = gr.Button("🚀 第五步：產生 Excel 報表與預覽", variant="primary")
             
+        # 右側區塊：下載與輸出
         with gr.Column(scale=1):
-            gr.Markdown("### 📥 第三步：下載產出檔案")
+            gr.Markdown("### 📥 報表與圖片下載")
             status_output = gr.Textbox(label="系統處理結果", interactive=False)
-            file_output = gr.File(label="點擊下載產出的 Excel 報表")
+            
+            # 【修改重點 1】：將 gr.File 換成 gr.DownloadButton，設定 variant="primary" 和 size="lg" 讓它變成大橘色按鈕
+            download_excel_btn = gr.DownloadButton("📄 一鍵下載 Excel 報表", variant="primary", size="lg")
+            download_img_btn = gr.Button("🖼️ 一鍵下載為高畫質圖片 (PNG)", variant="primary", size="lg")
 
-    # 監聽搜尋輸入框變更，即時過濾全域資料庫的成分
-    search_input.change(
-        fn=update_component_choices, 
-        inputs=search_input, 
-        outputs=component_choices
-    )
+    gr.Markdown("---")
     
-    # 點擊按鈕一鍵生成報表
+    gr.Markdown("### 網頁即時預覽")
+    html_output = gr.HTML(label="報表預覽區")
+
+    # --- 綁定事件 ---
+    search_input.change(fn=update_component_choices, inputs=search_input, outputs=component_choices)
+    component_choices.change(fn=update_form_choices, inputs=component_choices, outputs=form_choices)
+    form_choices.change(fn=update_dose_choices, inputs=[component_choices, form_choices], outputs=dose_choices)
+    
+    # 【修改重點 2】：將原本輸出對象的 file_output 替換為 download_excel_btn
     submit_btn.click(
-        fn=generate_standard_excel, 
-        inputs=component_choices, 
-        outputs=[file_output, status_output]
+        fn=generate_reports, 
+        inputs=[component_choices, form_choices, dose_choices], 
+        outputs=[download_excel_btn, status_output, html_output] 
     )
+    
+    # 綁定進化版的 JS 截圖指令
+    download_img_btn.click(fn=None, js=download_js)
 
 if __name__ == "__main__":
     demo.launch()