Update app.py

app.py

@@ -1,12 +1,12 @@
 import gradio as gr
-import os
+from gradio_iframe import iframe
 
 # Read the HTML content
 def load_html():
     with open("index.html", "r", encoding="utf-8") as f:
         return f.read()
 
-# Create the Gradio interface
+# Create the Gradio interface with iframe component
 def create_interface():
     html_content = load_html()
     
@@ -14,7 +14,7 @@ def create_interface():
         title="Matrix Music Hacker",
         theme=gr.themes.Base(
             primary_hue="green",
-            secondary_hue="cyan",
+            secondary_hue="cyan", 
             neutral_hue="slate"
         ).set(
             body_background_fill="#000000",
@@ -23,7 +23,43 @@ def create_interface():
         )
     ) as interface:
         
-        gr.HTML(html_content)
+        gr.Markdown("# 🎵 Matrix Music Hacker v2.1")
+        gr.Markdown("*Full JavaScript-enabled version running in iframe*")
+        
+        # Use iframe component to render the full HTML with working JavaScript
+        iframe(
+            html_content,
+            height=800,
+            width="100%",
+            label="Matrix Music Hacker Interface"
+        )
+        
+        gr.Markdown("""
+        ### 📝 Instructions:
+        1. **Grant Permissions**: Allow microphone access when prompted
+        2. **Click "INITIATE VOICE HACK"** to start voice recognition
+        3. **Speak Commands**: Try "play deep house drums" or "make cyberpunk synth"
+        4. **Watch the Matrix**: Enjoy the real-time visualizations!
+        
+        ### 🎯 Available Voice Commands:
+        - "play deep house drums"
+        - "create underground bass"
+        - "make cyberpunk synth wave" 
+        - "play matrix ambient sounds"
+        - "start rave breakbeat"
+        - "generate random beat"
+        
+        ### ⚡ Keyboard Shortcuts:
+        - `Ctrl + Enter`: Execute code
+        - `Escape`: Stop playback
+        - `Ctrl + R`: Start voice recognition
+        
+        ### 🔧 Technical Notes:
+        - Requires modern browser with Web Speech API support
+        - Audio synthesis powered by Strudel.cc
+        - Matrix visualizations use Canvas 2D API
+        - All JavaScript functionality is preserved in iframe
+        """)
         
     return interface