Create app.py

app.py

@@ -0,0 +1,226 @@
+# Matrix Music Hacker - Hugging Face Spaces Deployment Guide
+
+## Step 1: Create Required Files
+
+You'll need to create these files in your repository:
+
+### 1. `app.py` (Main application file)
+```python
+import gradio as gr
+import os
+
+# Read the HTML content
+def load_html():
+    with open("index.html", "r", encoding="utf-8") as f:
+        return f.read()
+
+# Create the Gradio interface
+def create_interface():
+    html_content = load_html()
+    
+    with gr.Blocks(
+        title="Matrix Music Hacker",
+        theme=gr.themes.Base(
+            primary_hue="green",
+            secondary_hue="cyan",
+            neutral_hue="slate"
+        ).set(
+            body_background_fill="#000000",
+            block_background_fill="#001100",
+            border_color_primary="#00ff00"
+        )
+    ) as interface:
+        
+        gr.HTML(html_content)
+        
+    return interface
+
+if __name__ == "__main__":
+    interface = create_interface()
+    interface.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False
+    )
+```
+
+### 2. `requirements.txt`
+```
+gradio>=4.0.0
+```
+
+### 3. `README.md`
+```markdown
+---
+title: Matrix Music Hacker
+emoji: 🎵
+colorFrom: green
+colorTo: cyan
+sdk: gradio
+sdk_version: 4.44.0
+app_file: app.py
+pinned: false
+license: mit
+---
+
+# Matrix Music Hacker v2.1
+
+A cyberpunk-themed voice-controlled music synthesizer using Strudel.cc for beat generation and audio synthesis.
+
+## Features
+
+- 🎤 **Voice Recognition**: Speak commands to generate music
+- 💻 **Code Matrix**: Edit Strudel code directly
+- 🌊 **Real-time Visualization**: Matrix-style audio visualizations
+- 🎵 **Multiple Genres**: Deep house, cyberpunk, ambient, breakbeat, and more
+- 🔊 **Live Audio Synthesis**: Powered by Strudel.cc
+
+## Voice Commands
+
+Try saying:
+- "play deep house drums"
+- "create underground bass"
+- "make cyberpunk synth wave"
+- "play matrix ambient sounds"
+- "start rave breakbeat"
+
+## Keyboard Shortcuts
+
+- `Ctrl + Enter`: Execute code
+- `Escape`: Stop playback
+- `Ctrl + R`: Start voice recognition
+
+## Technology Stack
+
+- **Frontend**: HTML5, CSS3, JavaScript
+- **Audio Engine**: Strudel.cc
+- **Speech Recognition**: Web Speech API
+- **Visualization**: Canvas 2D API
+- **Deployment**: Hugging Face Spaces + Gradio
+
+## Usage
+
+1. Click "INITIATE VOICE HACK" to start voice recognition
+2. Speak a music command (see examples above)
+3. Watch as your voice is converted to Strudel code
+4. The system will automatically execute the generated music
+5. Enjoy the matrix-style visualizations!
+
+## Note
+
+This application requires:
+- A modern web browser with Web Speech API support
+- Microphone permissions for voice input
+- Audio permissions for sound output
+
+Built with ❤️ for the cyberpunk music community.
+```
+
+### 4. `.gitattributes` (Optional)
+```
+*.html linguist-language=HTML
+*.js linguist-language=JavaScript
+*.css linguist-language=CSS
+*.py linguist-language=Python
+```
+
+## Step 2: Rename Your HTML File
+
+Rename your `paste.txt` file to `index.html` since that's what the Python code expects.
+
+## Step 3: Deploy to Hugging Face Spaces
+
+### Option A: Using Hugging Face Hub (Recommended)
+
+1. **Install the Hugging Face Hub**:
+```bash
+pip install huggingface_hub
+```
+
+2. **Login to Hugging Face**:
+```bash
+huggingface-cli login
+```
+
+3. **Create the Space**:
+```bash
+# Create a new directory for your space
+mkdir matrix-music-hacker
+cd matrix-music-hacker
+
+# Copy all your files here
+cp /path/to/your/paste.txt ./index.html
+# Create the other files (app.py, requirements.txt, README.md)
+
+# Initialize git repo
+git init
+git add .
+git commit -m "Initial commit: Matrix Music Hacker v2.1"
+
+# Push to Hugging Face Spaces
+git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/matrix-music-hacker
+git push -u origin main
+```
+
+### Option B: Using the Web Interface
+
+1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
+2. Click "Create new Space"
+3. Choose:
+   - **Name**: `matrix-music-hacker`
+   - **SDK**: `Gradio`
+   - **Hardware**: `CPU basic` (free tier)
+   - **Visibility**: `Public`
+4. Upload all your files through the web interface
+
+## Step 4: Configuration Notes
+
+### Important Considerations:
+
+1. **Audio Context**: The Web Audio API might have some limitations in the Gradio iframe environment. You may need to add user interaction requirements.
+
+2. **Speech Recognition**: The Web Speech API requires HTTPS, which Hugging Face Spaces provides.
+
+3. **External Dependencies**: The Strudel.js library is loaded from CDN, which should work fine.
+
+4. **File Structure**:
+```
+your-space/
+├── app.py
+├── requirements.txt
+├── README.md
+├── index.html
+└── .gitattributes (optional)
+```
+
+## Step 5: Testing and Troubleshooting
+
+After deployment:
+
+1. **Check the logs** in the Hugging Face Spaces interface
+2. **Test voice recognition** - ensure microphone permissions work
+3. **Verify audio output** - check if sounds play correctly
+4. **Test all buttons** and interactive elements
+
+### Common Issues:
+
+- **Audio not playing**: May need user interaction before audio context starts
+- **Voice recognition not working**: Check browser compatibility and HTTPS
+- **Visualization not showing**: Canvas might need resizing in iframe
+
+## Step 6: Optimization (Optional)
+
+For better performance, consider:
+
+1. **Minify the HTML/CSS/JS**
+2. **Add error handling** for audio context initialization
+3. **Add loading states** for better UX
+4. **Implement fallbacks** for unsupported browsers
+
+## Final Notes
+
+- The application will be available at `https://huggingface.co/spaces/YOUR_USERNAME/matrix-music-hacker`
+- Hugging Face Spaces provides free hosting for public repositories
+- The space will automatically rebuild when you push changes to the repository
+
+Your Matrix Music Hacker is ready to hack the cybernetic soundscape! 🎵🔥