Update app.py

app.py

@@ -84,24 +84,21 @@ with gr.Blocks() as interface:
     gr.Markdown("## Clash Royale Prediction")
     gr.Markdown("Select 8 cards from the opponent's deck to predict the probability of winning!")
 
-    selected_deck = gr.State([])
-
-    def toggle_card(card_name, current_deck):
-        if card_name in current_deck:
-            current_deck.remove(card_name)
-        else:
-            if len(current_deck) < 8:
-                current_deck.append(card_name)
-        return current_deck
+    selected_deck = gr.CheckboxGroup(
+        label="Select 8 Cards",
+        choices=list(valid_card_images.keys()),
+        info="You must select exactly 8 cards.",
+        interactive=True,
+    )
 
     with gr.Row():
         for card, url in valid_card_images.items():
             with gr.Column():
-                gr.Image(value=url, interactive=False, elem_id=f"image-{card}")
-                gr.Button(card, elem_id=f"button-{card}").click(
-                    toggle_card,
-                    inputs=[gr.Textbox(value=card, visible=False), selected_deck],
-                    outputs=[selected_deck]
+                gr.Image(value=url, label=card, interactive=False, elem_id=f"image-{card}")
+                gr.Checkbox(label=card, value=False, elem_id=f"checkbox-{card}").change(
+                    lambda name, state: name if state else None,
+                    inputs=[gr.Textbox(value=card), selected_deck],
+                    outputs=[selected_deck],
                 )
 
     result = gr.Textbox(label="Prediction Result:", interactive=False)