Update app.py

app.py

@@ -150,42 +150,42 @@ with gr.Blocks(css=custom_css) as demo:
 
     # Section HTML : la "pieuvre" + le script JS
     # Notez la fonction setChatText(...) qu'on appelle en cliquant sur la bulle.
-    with gr.Box():
-        gr.HTML(
-            """
-            <div class="octopus-container">
-                <!-- Image point d'interrogation au centre -->
-                <img src="https://cdn-icons-png.flaticon.com/512/4926/4926733.png" class="center-image" />
-
-                <!-- Bulles de questions (cliquables) -->
-            """ +
-            "".join(
-                f"""
-                <div class="octopus-arm arm{i+1}" onclick="setChatText(`{QUESTIONS[i]}`)">
-                    <p>{QUESTIONS[i]}</p>
-                </div>
-                """
-                for i in range(len(QUESTIONS))
-            ) +
-            """
+    #with gr.Box():
+    gr.HTML(
+        """
+        <div class="octopus-container">
+            <!-- Image point d'interrogation au centre -->
+            <img src="https://cdn-icons-png.flaticon.com/512/4926/4926733.png" class="center-image" />
+
+            <!-- Bulles de questions (cliquables) -->
+        """ +
+        "".join(
+            f"""
+            <div class="octopus-arm arm{i+1}" onclick="setChatText(`{QUESTIONS[i]}`)">
+                <p>{QUESTIONS[i]}</p>
             </div>
-
-            <script>
-            // Au clic sur une bulle, insère la question dans la zone de saisie du ChatInterface
-            function setChatText(questionText) {
-                // Le ChatInterface de Gradio possède un <textarea> dont
-                // l'attribut placeholder est souvent "Type a message..."
-                // On cherche ce textarea et on y met la question.
-                let textBox = document.querySelector('textarea[placeholder="Type a message..."]');
-                if (textBox) {
-                    textBox.value = questionText;
-                } else {
-                    console.warn("Impossible de trouver la zone de texte du chatbot.");
-                }
-            }
-            </script>
             """
-        )
+            for i in range(len(QUESTIONS))
+        ) +
+        """
+        </div>
+
+        <script>
+        // Au clic sur une bulle, insère la question dans la zone de saisie du ChatInterface
+        function setChatText(questionText) {
+            // Le ChatInterface de Gradio possède un <textarea> dont
+            // l'attribut placeholder est souvent "Type a message..."
+            // On cherche ce textarea et on y met la question.
+            let textBox = document.querySelector('textarea[placeholder="Type a message..."]');
+            if (textBox) {
+                textBox.value = questionText;
+            } else {
+                console.warn("Impossible de trouver la zone de texte du chatbot.");
+            }
+        }
+        </script>
+        """
+    )
 
     # Le chatbot Gradio, en dessous
     chat = gr.ChatInterface(