Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import pandas as pd
 import numpy as np
@@ -83,22 +82,28 @@ 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 = []
-    for card_name, image_url in card_images.items():
-        def toggle_card(card_name):
-            if card_name in selected_deck:
-                selected_deck.remove(card_name)
-            else:
-                selected_deck.append(card_name)
-
-        gr.Image(
-            value=image_url,
-            label=card_name,
-            tool="select",
-            interactive=True,
-            click=toggle_card(card_name),
-        )
-    
+    selected_deck = gr.State([])  # To store selected cards
+
+    card_buttons = []
+    with gr.Row():
+        for card_name, image_url in card_images.items():
+            def select_card(card_name):
+                def toggle(state):
+                    if card_name in state:
+                        state.remove(card_name)
+                    else:
+                        state.append(card_name)
+                    return state
+                return toggle
+
+            button = gr.Image(
+                value=image_url,
+                label=card_name,
+                interactive=True,
+            )
+            button.change(select_card(card_name), inputs=[selected_deck], outputs=[selected_deck])
+            card_buttons.append(button)
+
     result = gr.Textbox(label="Prediction Result:", interactive=False)
 
     def validate_and_predict(deck):
@@ -109,4 +114,4 @@ with gr.Blocks() as interface:
     predict_button = gr.Button("Make Prediction")
     predict_button.click(validate_and_predict, inputs=[selected_deck], outputs=[result])
 
-interface.launch()
+interface.launch()