Update app.py

app.py

@@ -81,29 +81,23 @@ model = load_model(MODEL_PATH)
 
 # Create Gradio Interface
 with gr.Blocks(css="""
-    .container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        gap: 10px;
-        padding: 10px;
+    .image-container img {
+        width: 80px !important;
+        height: 80px !important;
+        object-fit: contain;
+        cursor: pointer;
     }
-    .card-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    .image-container {
+        text-align: center;
+        margin: 5px;
         padding: 5px;
         border: 1px solid #ddd;
         border-radius: 8px;
-        transition: all 0.3s ease;
-    }
-    img.card-image {
-        width: 80px !important;
-        height: 80px !important;
-        object-fit: contain;
     }
-    .selected {
-        background-color: #e3f2fd;
-        border-color: #2196f3;
+    .card-label {
+        font-size: 12px;
+        margin-top: 5px;
+        text-align: center;
     }
 """) as interface:
     gr.Markdown("## Clash Royale Prediction")
@@ -124,20 +118,24 @@ with gr.Blocks(css="""
         return current_deck, f"Selected cards: {len(current_deck)}/8"
 
     # Create card grid using rows and columns
-    with gr.Column():
-        cards_per_row = 8
-        cards_list = list(valid_card_images.items())
-        
-        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():
-                        btn = gr.Button(image=url, label=card)
-                        btn.click(
-                            toggle_card,
-                            inputs=[gr.Textbox(value=card, visible=False), selected_deck],
-                            outputs=[selected_deck, selected_cards_display]
-                        )
+    cards_per_row = 8
+    cards_list = list(valid_card_images.items())
+    
+    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]
+                    )
+                    # 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)