Update app.py

app.py

@@ -103,11 +103,11 @@ def apply_font_to_all_text(fig):
 
     return fig
 
-
 def save_radar_chart_image(fig):
-    """使用 kaleido 輸出 png 的記憶體檔案"""
-    img_bytes = pio.to_image(fig, format="png", engine="kaleido")
-    return img_bytes
+  """使用 kaleido 輸出 png 的記憶體檔案"""
+  img_bytes = pio.to_image(fig, format="png", engine="kaleido")
+  return img_bytes
+
 def main():
     st.title('學生成績雷達圖產生器')
 
@@ -140,13 +140,18 @@ def main():
                 
                 # 初始化選取狀態
                 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}
-                
+                   st.session_state.selected_images = {}
+                for student in df['姓名']:
+                   if student not in comparison_rows:
+                      if student not in st.session_state.selected_images:
+                         st.session_state.selected_images[student] = False
+
+
                 # 建立圖片核取方塊
                 image_bytes = {}
                 for student in df['姓名']:
                     if student in comparison_rows:
-                      continue
+                        continue
 
                     fig = create_radar_chart(df, [student] + comparison_rows, selected_columns)
                     fig = apply_font_to_all_text(fig)
@@ -156,27 +161,33 @@ def main():
                 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(
+                        st.image(image_bytes[student], use_container_width=True)
+                        
+                        checkbox_id = f"checkbox-{student}"
+                        
+                        # 更新選取狀態
+                        def update_selection(student):
+                             st.session_state.selected_images[student] = not st.session_state.selected_images[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 ""}>
+                                 <input type="checkbox" id="{checkbox_id}" {"checked" if st.session_state.selected_images[student] else ""} onclick="this.dispatchEvent(new CustomEvent('checkbox-clicked',{{"detail": '{student}'}}))">
                                   <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
+                               """, 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
+                        st.markdown(f"""<script>
+                                          document.getElementById('{checkbox_id}').addEventListener('checkbox-clicked', function(event) {{
+                                              window.dispatchEvent(new CustomEvent('checkbox-clicked-streamlit', {{detail: event.detail}}));
+                                              }});
+                                       </script>""", unsafe_allow_html=True)
                          
-                         if st.checkbox("",key=f"checkbox-{student}_clicked",label_visibility="hidden"):
-                             pass
 
-                         
+                        if st.session_state.get('checkbox-clicked-streamlit', {}).get('detail') == student:
+                            update_selection(student)
+
                 #全部選取和全部不選
                 if st.button("全部選取"):
                     for student in st.session_state.selected_images:
@@ -190,14 +201,14 @@ def main():
                 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:
+                      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)
+                            zipf.writestr(f"{student}_comparison.png", img_bytes)
                       with open(zip_path, "rb") as f:
                           st.download_button(
                                 label="下載選取圖片",