Update app.py

app.py

@@ -80,44 +80,92 @@ def predict_outcome(opponent_deck):
 model = load_model(MODEL_PATH)
 
 # Create Gradio Interface
-with gr.Blocks() as interface:
+with gr.Blocks(css="""
+    .card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+    .card-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 5px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+    }
+    .card-container:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .card-container img {
+        width: 80px;
+        height: 80px;
+        object-fit: contain;
+    }
+    .card-container.selected {
+        background-color: #e3f2fd;
+        border-color: #2196f3;
+    }
+    .card-label {
+        font-size: 12px;
+        text-align: center;
+        margin-top: 5px;
+    }
+""") 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.CheckboxGroup(
-        label="Select 8 Cards",
-        choices=list(valid_card_images.keys()),
-        info="You must select exactly 8 cards.",
-        interactive=True,
-    )
-
-    with gr.Row():
+    # 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"
+
+    # Create card grid
+    with gr.Box(elem_classes="card-grid"):
         for card, url in valid_card_images.items():
-            with gr.Column():
-                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],
+            with gr.Box(elem_classes="card-container"):
+                btn = gr.Button(image=url, label=card, scale=0)
+                gr.Markdown(card, elem_classes="card-label")
+                btn.click(
+                    toggle_card,
+                    inputs=[gr.Textbox(value=card, visible=False), selected_deck],
+                    outputs=[selected_deck, selected_cards_display]
                 )
 
-    result = gr.Textbox(label="Prediction Result:", interactive=False)
+    with gr.Row():
+        result = gr.Textbox(label="Prediction Result:", interactive=False)
+        clear_btn = gr.Button("Clear Selection")
+        predict_btn = gr.Button("Make Prediction", variant="primary")
+
+    def clear_selection():
+        return [], "Selected cards: 0/8", ""
+
+    clear_btn.click(
+        clear_selection,
+        outputs=[selected_deck, selected_cards_display, result]
+    )
 
     def validate_and_predict(deck):
         if len(deck) != 8:
-            return "Error: Select exactly 8 cards."
+            return "Error: Please select exactly 8 cards"
         return predict_outcome(deck)
 
-    predict_button = gr.Button("Make Prediction")
-    predict_button.click(validate_and_predict, inputs=[selected_deck], outputs=[result])
-
-# CSS per dimensioni immagini e layout
-interface.css = """
-img {
-    width: 70px !important;
-    height: 70px !important;
-    margin-bottom: 5px;
-}
-"""
+    predict_btn.click(
+        validate_and_predict,
+        inputs=[selected_deck],
+        outputs=[result]
+    )
 
 interface.launch()