Update app.py

app.py

@@ -81,7 +81,7 @@ model = load_model(MODEL_PATH)
 
 # Create Gradio Interface
 with gr.Blocks(css="""
-    .card-grid {
+    .container {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 10px;
@@ -96,24 +96,15 @@ with gr.Blocks(css="""
         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;
+    img.card-image {
+        width: 80px !important;
+        height: 80px !important;
         object-fit: contain;
     }
-    .card-container.selected {
+    .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!")
@@ -132,17 +123,21 @@ with gr.Blocks(css="""
                 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.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]
-                )
+    # 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]
+                        )
 
     with gr.Row():
         result = gr.Textbox(label="Prediction Result:", interactive=False)