Update app.py

app.py

@@ -444,53 +444,37 @@ def app():
         back_to_menu_button.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[menu_section, cart_section],
+         # Inject Voice Accessibility JavaScript
+        demo.load(
+            lambda: None,  # This is just to render the custom HTML
+            inputs=None,
+            outputs=None,
+            _js="""
+            <script>
+                function speak(text) {
+                    const speech = new SpeechSynthesisUtterance(text);
+                    speech.lang = 'en-US';
+                    window.speechSynthesis.speak(speech);
+                }
+
+                document.addEventListener('DOMContentLoaded', () => {
+                    document.querySelectorAll('.hoverable').forEach(element => {
+                        element.addEventListener('mouseenter', () => {
+                            const text = element.getAttribute('aria-label') || element.innerText;
+                            speak(`This is ${text}`);
+                        });
+                    });
+
+                    document.querySelectorAll('.clickable').forEach(element => {
+                        element.addEventListener('click', () => {
+                            const text = element.getAttribute('aria-label') || element.innerText;
+                            speak(`You clicked on ${text}`);
+                        });
+                    });
+                });
+            </script>
+            """
         )
-    def main_app():
-        return "Welcome to the menu ordering system. Interact with items to hear details."
-
-    # Add custom HTML and JavaScript for voice accessibility
-    custom_html = """
-    <script>
-      // Function to speak text
-      function speak(text) {
-        const speech = new SpeechSynthesisUtterance(text);
-        speech.lang = 'en-US'; // Set language
-        speech.pitch = 1.0;    // Adjust pitch (optional)
-        speech.rate = 1.0;     // Adjust rate (optional)
-        window.speechSynthesis.speak(speech);
-      }
-
-      // Event listeners for hover and click
-      document.addEventListener('DOMContentLoaded', (event) => {
-        // Add hoverable elements
-        document.querySelectorAll('.hoverable').forEach((element) => {
-          element.addEventListener('mouseenter', () => {
-            const text = element.getAttribute('aria-label') || element.innerText;
-            speak(`This is ${text}`);
-          });
-        });
-
-        // Add clickable elements
-        document.querySelectorAll('.clickable').forEach((element) => {
-          element.addEventListener('click', () => {
-            const text = element.getAttribute('aria-label') || element.innerText;
-            speak(`You clicked on ${text}`);
-          });
-        });
-      });
-    </script>
-    """
-    
-    # Define the Gradio Interface
-    demo = gr.Interface(
-        fn=main_app,       # Your main app function
-        inputs=[],         # Define your inputs
-        outputs="html",    # Define your outputs
-        live=True          # Enable live updates
-    )
-
-    # Add the custom JavaScript to the app
-    demo.custom_html = custom_html
 
     return demo