Update app.py

app.py

@@ -81,61 +81,50 @@ model = load_model(MODEL_PATH)
 
 # Create Gradio Interface
 with gr.Blocks(css="""
-    .image-container img {
+    .card-container img {
         width: 80px !important;
         height: 80px !important;
         object-fit: contain;
-        cursor: pointer;
+        margin: 5px auto;
     }
-    .image-container {
+    .card-container {
         text-align: center;
-        margin: 5px;
         padding: 5px;
         border: 1px solid #ddd;
         border-radius: 8px;
+        margin: 5px;
     }
-    .card-label {
-        font-size: 12px;
+    .checkbox-container {
         margin-top: 5px;
-        text-align: center;
     }
 """) as interface:
     gr.Markdown("## Clash Royale Prediction")
     gr.Markdown("Select 8 cards from the opponent's deck to predict the probability of winning!")
 
     # State for tracking selected cards
-    selected_deck = gr.State([])
-    
-    # Display for currently selected cards
     selected_cards_display = gr.Markdown("Selected cards: 0/8")
 
-    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, f"Selected cards: {len(current_deck)}/8"
+    def update_selection(checkbox_values):
+        selected_count = sum(1 for v in checkbox_values if v)
+        return f"Selected cards: {selected_count}/8"
 
     # Create card grid using rows and columns
     cards_per_row = 8
     cards_list = list(valid_card_images.items())
+    all_checkboxes = []
     
     for i in range(0, len(cards_list), cards_per_row):
         with gr.Row():
             for card, url in cards_list[i:i + cards_per_row]:
-                with gr.Column(elem_classes="image-container"):
-                    img = gr.Image(value=url, interactive=False, show_label=False)
-                    gr.Markdown(card, elem_classes="card-label")
-                    # Create a hidden button for click handling
-                    click_btn = gr.Button(visible=False)
-                    click_btn.click(
-                        toggle_card,
-                        inputs=[gr.Textbox(value=card, visible=False), selected_deck],
-                        outputs=[selected_deck, selected_cards_display]
+                with gr.Column(elem_classes="card-container"):
+                    gr.Image(value=url, show_label=False)
+                    checkbox = gr.Checkbox(label=card, elem_classes="checkbox-container")
+                    all_checkboxes.append(checkbox)
+                    checkbox.change(
+                        update_selection,
+                        inputs=all_checkboxes,
+                        outputs=selected_cards_display
                     )
-                    # Trigger the hidden button when the image is clicked
-                    img.click(lambda: None, None, click_btn.click)
 
     with gr.Row():
         result = gr.Textbox(label="Prediction Result:", interactive=False)
@@ -143,22 +132,26 @@ with gr.Blocks(css="""
         predict_btn = gr.Button("Make Prediction", variant="primary")
 
     def clear_selection():
-        return [], "Selected cards: 0/8", ""
+        return [False] * len(all_checkboxes) + ["Selected cards: 0/8", ""]
 
     clear_btn.click(
         clear_selection,
-        outputs=[selected_deck, selected_cards_display, result]
+        outputs=all_checkboxes + [selected_cards_display, result]
     )
 
-    def validate_and_predict(deck):
-        if len(deck) != 8:
+    def validate_and_predict(*checkbox_values):
+        selected_cards = [
+            card for card, checked in zip(valid_card_images.keys(), checkbox_values)
+            if checked
+        ]
+        if len(selected_cards) != 8:
             return "Error: Please select exactly 8 cards"
-        return predict_outcome(deck)
+        return predict_outcome(selected_cards)
 
     predict_btn.click(
         validate_and_predict,
-        inputs=[selected_deck],
-        outputs=[result]
+        inputs=all_checkboxes,
+        outputs=result
     )
 
 interface.launch()