Update app.py

app.py

@@ -4,6 +4,7 @@ import plotly.graph_objects as go
 import os
 from zipfile import ZipFile
 import plotly.io as pio
+from PIL import Image, ImageDraw
 from io import BytesIO
 import numpy as np
 import os
@@ -14,7 +15,6 @@ try:
 except ImportError:
     st.error("請安裝 'kaleido' 套件以啟用圖像導出功能：\n\n    $ pip install kaleido")
 
-
 def load_data(uploaded_file):
     """載入並處理CSV檔案"""
     try:
@@ -108,7 +108,6 @@ def save_radar_chart_image(fig):
     """使用 kaleido 輸出 png 的記憶體檔案"""
     img_bytes = pio.to_image(fig, format="png", engine="kaleido")
     return img_bytes
-
 def main():
     st.title('學生成績雷達圖產生器')
 
@@ -135,77 +134,79 @@ def main():
 
             st.write("### 批次下載雷達圖")
             comparison_rows = st.multiselect("選擇比較對象（可多選，如班平均或區標）", df['姓名'].tolist())
-            
+
             if comparison_rows:
-              
-              st.markdown("""
-                  <style>
-                      div[data-baseweb="checkbox"] div {
-                          font-family: "Microsoft JhengHei", "Noto Sans CJK", Arial;
-                          font-size: 16px;
-                      }
-                  </style>
-                  """, unsafe_allow_html=True)
-
-              st.write("### 選擇要下載的圖片")
-              
-              # 初始化選取狀態
-              if 'selected_images' not in st.session_state:
-                st.session_state.selected_images = {student:False for student in df['姓名'] if student not in comparison_rows}
-
-              # 建立圖片核取方塊
-              image_bytes = {}
-              for student in df['姓名']:
-                if student in comparison_rows:
-                    continue
-
-                fig = create_radar_chart(df, [student] + comparison_rows, selected_columns)
-                fig = apply_font_to_all_text(fig)
-                image_bytes[student] = save_radar_chart_image(fig)
-              
-              # 顯示圖片
-              cols = st.columns(3) # 排成三列
-              for i, student in enumerate(image_bytes.keys()):
-                with cols[i%3]:
-                  st.image(image_bytes[student],use_container_width=True)
-                  try:
-                      st.checkbox(f"下載 {student}", key=student, value=st.session_state.selected_images[student])
-                      st.session_state.selected_images[student] = st.session_state[student]  # 更新選取狀態
-                  except KeyError:
-                       st.session_state.selected_images[student] = False # 如果還沒有這個學生則預設為不選
-                       st.checkbox(f"下載 {student}", key=student, value=st.session_state.selected_images[student])
-                       st.session_state.selected_images[student] = st.session_state[student]  # 更新選取狀態
-              
-              #全部選取和全部不選
-              if st.button("全部選取"):
-                for student in st.session_state.selected_images:
-                  st.session_state.selected_images[student] = True
-
-              if st.button("全部不選"):
-                for student in st.session_state.selected_images:
-                  st.session_state.selected_images[student] = False
-              
-              # 下載按鈕
-              if st.button("下載選取圖片"):
-                selected_image_bytes = []
-                for student, selected in st.session_state.selected_images.items():
-                  if selected:
-                    selected_image_bytes.append((student,image_bytes[student]))
+                st.write("### 選擇要下載的圖片")
+                
+                # 初始化選取狀態
+                if 'selected_images' not in st.session_state:
+                    st.session_state.selected_images = {student: False for student in df['姓名'] if student not in comparison_rows}
+                
+                # 建立圖片核取方塊
+                image_bytes = {}
+                for student in df['姓名']:
+                    if student in comparison_rows:
+                      continue
+
+                    fig = create_radar_chart(df, [student] + comparison_rows, selected_columns)
+                    fig = apply_font_to_all_text(fig)
+                    image_bytes[student] = save_radar_chart_image(fig)
                 
-                if selected_image_bytes:
-                    zip_path = "selected_radar_charts.zip"
-                    with ZipFile(zip_path, 'w') as zipf:
-                      for student, img_bytes in selected_image_bytes:
-                        zipf.writestr(f"{student}_comparison.png", img_bytes)
-                    with open(zip_path, "rb") as f:
-                      st.download_button(
-                            label="下載選取圖片",
-                            data=f,
-                            file_name="selected_radar_charts.zip",
-                            mime="application/zip"
-                        )
-                else:
-                   st.warning("請至少選擇一張圖片下載")
+                # 顯示圖片
+                cols = st.columns(3)  # 排成三列
+                for i, student in enumerate(image_bytes.keys()):
+                    with cols[i % 3]:
+                         st.image(image_bytes[student], use_container_width=True)
+
+                         checkbox_id = f"checkbox-{student}"
+                         st.markdown(
+                            f"""
+                              <div style="display: flex; align-items: center;">
+                                 <input type="checkbox" id="{checkbox_id}" {"checked" if st.session_state.selected_images[student] else ""}>
+                                  <label for="{checkbox_id}" style="font-family: 'Microsoft JhengHei', 'Noto Sans CJK', Arial; font-size: 16px; margin-left: 5px;">下載 {student}</label>
+                              </div>
+                               """,unsafe_allow_html=True
+                          )
+
+                         # 更新選取狀態
+                         if st.session_state.get(f"checkbox-{student}_clicked"):
+                              st.session_state.selected_images[student] = not st.session_state.selected_images[student]
+                              st.session_state[f"checkbox-{student}_clicked"] = False
+                         
+                         if st.checkbox("",key=f"checkbox-{student}_clicked",label_visibility="hidden"):
+                             pass
+
+                         
+                #全部選取和全部不選
+                if st.button("全部選取"):
+                    for student in st.session_state.selected_images:
+                        st.session_state.selected_images[student] = True
+
+                if st.button("全部不選"):
+                    for student in st.session_state.selected_images:
+                        st.session_state.selected_images[student] = False
+
+                # 下載按鈕
+                if st.button("下載選取圖片"):
+                  selected_image_bytes = []
+                  for student, selected in st.session_state.selected_images.items():
+                      if selected:
+                          selected_image_bytes.append((student,image_bytes[student]))
+                                      
+                  if selected_image_bytes:
+                      zip_path = "selected_radar_charts.zip"
+                      with ZipFile(zip_path, 'w') as zipf:
+                          for student, img_bytes in selected_image_bytes:
+                              zipf.writestr(f"{student}_comparison.png", img_bytes)
+                      with open(zip_path, "rb") as f:
+                          st.download_button(
+                                label="下載選取圖片",
+                                data=f,
+                                file_name="selected_radar_charts.zip",
+                                mime="application/zip"
+                                )
+                  else:
+                      st.warning("請至少選擇一張圖片下載")
 
 if __name__ == "__main__":
     if 'selected_images' not in st.session_state: