Fix: Make input components visible for JS interaction (hidden via CSS)

app.py

@@ -314,15 +314,22 @@ function sendStrokes() {
 # Gradio App
 # ============================================================================
 
-with gr.Blocks(title="Animal Doodle Classifier", theme=gr.themes.Soft()) as app:
+CSS = """
+#strokes-input, #predict-btn {
+    display: none !important;
+}
+"""
+
+with gr.Blocks(title="Animal Doodle Classifier", theme=gr.themes.Soft(), css=CSS) as app:
     gr.Markdown("# 🎨 Animal Doodle Classifier")
     gr.Markdown("Draw an animal and click **Predict**! Supported: butterfly, cow, elephant, giraffe, monkey, octopus, scorpion, shark, snake, spider")
     
     with gr.Row():
         with gr.Column(scale=1):
             canvas = gr.HTML(CANVAS_HTML)
-            strokes_input = gr.Textbox(label="Strokes", elem_id="strokes-input", visible=False)
-            predict_btn = gr.Button("Predict", elem_id="predict-btn", visible=False)
+            # visible=True so they are in DOM, hidden by CSS
+            strokes_input = gr.Textbox(label="Strokes", elem_id="strokes-input", visible=True)
+            predict_btn = gr.Button("Predict", elem_id="predict-btn", visible=True)
         
         with gr.Column(scale=1):
             output = gr.Label(num_top_classes=5, label="Predictions")