design 1

app.py

@@ -1,70 +1,369 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
-
-
-def respond(
-    message,
-    history: list[dict[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-    hf_token: gr.OAuthToken,
-):
-    """
-    For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-    """
-    client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
+import json
+from datetime import datetime
+from pathlib import Path
+
+# Clean, simple CSS
+custom_css = """
+/* Clean modern design */
+.gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #1a1a2e;
+    color: #eee;
+}
+
+/* File panel styling */
+.file-panel {
+    background: #16213e !important;
+    border-right: 1px solid #0f3460;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* File panel header */
+.file-panel-header {
+    background: #0f3460;
+    padding: 15px;
+    border-bottom: 2px solid #e94560;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* File list styling */
+.file-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.file-item {
+    background: #0f3460;
+    margin: 5px 0;
+    padding: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.file-item:hover {
+    background: #e94560;
+    transform: translateX(5px);
+}
 
-    messages = [{"role": "system", "content": system_message}]
+.file-item.selected {
+    background: #e94560;
+    border-left: 4px solid #f47068;
+}
 
-    messages.extend(history)
+/* Main content area */
+.main-content {
+    padding: 30px;
+    background: #1a1a2e;
+}
 
-    messages.append({"role": "user", "content": message})
+/* Control styling */
+.control-group {
+    background: #16213e;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 20px 0;
+    border: 1px solid #0f3460;
+}
 
-    response = ""
+/* Simple button styling */
+.gr-button {
+    background: #e94560 !important;
+    border: none !important;
+    color: white !important;
+    padding: 10px 20px !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    transition: all 0.2s !important;
+}
 
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        choices = message.choices
-        token = ""
-        if len(choices) and choices[0].delta.content:
-            token = choices[0].delta.content
+.gr-button:hover {
+    background: #f47068 !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3) !important;
+}
 
-        response += token
-        yield response
+/* Slider styling */
+.gr-slider input {
+    accent-color: #e94560 !important;
+}
 
+/* Hide default Gradio label styling */
+.gr-form {
+    background: transparent !important;
+    border: none !important;
+}
 
+.gr-box {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Dropdown styling */
+.gr-dropdown {
+    background: #0f3460 !important;
+    border: 1px solid #e94560 !important;
+    color: #eee !important;
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
+
+# Simple JavaScript for file management
+file_panel_js = """
+<script>
+let selectedFile = null;
+
+function selectFile(index) {
+    // Remove previous selection
+    document.querySelectorAll('.file-item').forEach(item => {
+        item.classList.remove('selected');
+    });
+    
+    // Add selection to clicked item
+    const selectedItem = document.getElementById(`file-${index}`);
+    if (selectedItem) {
+        selectedItem.classList.add('selected');
+        selectedFile = index;
+    }
+}
+
+function refreshFileList() {
+    // This would refresh the file list from the backend
+    console.log('Refreshing file list...');
+}
+</script>
 """
-chatbot = gr.ChatInterface(
-    respond,
-    type="messages",
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
-
-with gr.Blocks() as demo:
-    with gr.Sidebar():
-        gr.LoginButton()
-    chatbot.render()
 
+def create_file_panel_html(files):
+    """Create HTML for the file panel"""
+    
+    if not files:
+        file_items_html = """
+        <div style='text-align: center; padding: 40px 20px; color: #666;'>
+            <div style='font-size: 48px; opacity: 0.3; margin-bottom: 10px;'>📁</div>
+            <div>No files loaded</div>
+            <div style='font-size: 12px; margin-top: 10px;'>Click "Import Audio" to add files</div>
+        </div>
+        """
+    else:
+        file_items_html = ""
+        for i, file in enumerate(files):
+            file_items_html += f"""
+            <div class='file-item' id='file-{i}' onclick='selectFile({i})'>
+                <span style='font-size: 20px;'>🎵</span>
+                <div style='flex: 1;'>
+                    <div style='font-weight: 500;'>{file['name']}</div>
+                    <div style='font-size: 11px; opacity: 0.7;'>{file['size']} • {file['duration']}</div>
+                </div>
+            </div>
+            """
+    
+    return f"""
+    <div class='file-panel'>
+        <div class='file-panel-header'>
+            <span style='font-size: 20px; font-weight: 600;'>Files</span>
+            <button onclick='document.getElementById("import-btn").click()' style='
+                margin-left: auto;
+                background: #e94560;
+                border: none;
+                color: white;
+                padding: 8px 16px;
+                border-radius: 6px;
+                cursor: pointer;
+                font-weight: 500;
+            '>+ Import Audio</button>
+        </div>
+        <div class='file-list'>
+            {file_items_html}
+        </div>
+    </div>
+    {file_panel_js}
+    """
+
+def process_audio(audio_files, model, input_gain, output_gain, mix):
+    """Process audio with selected settings"""
+    if not audio_files:
+        return None, "No audio file selected"
+    
+    # Your NAM processing here
+    return audio_files, f"Processed with {model}"
+
+def import_audio_files(files):
+    """Handle imported audio files"""
+    if not files:
+        return create_file_panel_html([]), "No files imported"
+    
+    file_list = []
+    for file in files:
+        file_info = {
+            'name': Path(file.name).name if hasattr(file, 'name') else 'Unknown',
+            'size': '2.3 MB',  # Would calculate actual size
+            'duration': '3:45'  # Would get actual duration
+        }
+        file_list.append(file_info)
+    
+    return create_file_panel_html(file_list), f"Imported {len(files)} file(s)"
+
+# Build the interface
+with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+    
+    # Hidden file input
+    file_input = gr.File(
+        visible=False,
+        file_count="multiple",
+        file_types=["audio"],
+        elem_id="import-btn"
+    )
+    
+    with gr.Row():
+        # Left panel - File browser (1/4 width)
+        with gr.Column(scale=1, min_width=250):
+            file_panel = gr.HTML(
+                value=create_file_panel_html([]),
+                elem_classes="file-panel-container"
+            )
+        
+        # Right side - Main content (3/4 width)
+        with gr.Column(scale=3, elem_classes="main-content"):
+            
+            # Header
+            gr.Markdown("# 🎸 NAM Garden Audio Processor")
+            
+            # Model Selection
+            with gr.Group(elem_classes="control-group"):
+                gr.Markdown("### Neural Amp Model")
+                model_dropdown = gr.Dropdown(
+                    choices=[
+                        "Marshall JCM800",
+                        "Fender Twin Reverb", 
+                        "Mesa Boogie Rectifier",
+                        "Vox AC30",
+                        "Orange Rockerverb"
+                    ],
+                    value="Marshall JCM800",
+                    label="Select Model",
+                    container=False
+                )
+            
+            # Audio Controls
+            with gr.Group(elem_classes="control-group"):
+                gr.Markdown("### Audio Controls")
+                
+                with gr.Row():
+                    input_gain = gr.Slider(
+                        minimum=-20,
+                        maximum=20,
+                        value=0,
+                        label="Input Gain (dB)",
+                        container=True
+                    )
+                    output_gain = gr.Slider(
+                        minimum=-20,
+                        maximum=20,
+                        value=0,
+                        label="Output Gain (dB)",
+                        container=True
+                    )
+                    mix = gr.Slider(
+                        minimum=0,
+                        maximum=100,
+                        value=100,
+                        label="Mix (%)",
+                        container=True
+                    )
+            
+            # Waveform Display
+            with gr.Group(elem_classes="control-group"):
+                gr.Markdown("### Waveform")
+                gr.HTML("""
+                    <div style='
+                        height: 150px;
+                        background: #0f3460;
+                        border-radius: 8px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: #666;
+                        font-size: 14px;
+                    '>
+                        <canvas id='waveform' style='width: 100%; height: 100%;'></canvas>
+                    </div>
+                """)
+            
+            # Output
+            with gr.Group(elem_classes="control-group"):
+                gr.Markdown("### Output")
+                audio_output = gr.Audio(
+                    label="Processed Audio",
+                    container=True,
+                    elem_classes="audio-output"
+                )
+            
+            # Process Button
+            with gr.Row():
+                process_btn = gr.Button(
+                    "Process Audio",
+                    variant="primary",
+                    size="lg"
+                )
+            
+            # Status
+            status = gr.Textbox(
+                label="Status",
+                value="Ready",
+                interactive=False,
+                container=True
+            )
+    
+    # Event handlers
+    file_input.change(
+        fn=import_audio_files,
+        inputs=[file_input],
+        outputs=[file_panel, status]
+    )
+    
+    process_btn.click(
+        fn=process_audio,
+        inputs=[file_input, model_dropdown, input_gain, output_gain, mix],
+        outputs=[audio_output, status]
+    )
+    
+    # Add waveform drawing script
+    demo.load(None, None, None, js="""
+    () => {
+        const canvas = document.getElementById('waveform');
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            
+            // Draw placeholder waveform
+            ctx.strokeStyle = '#e94560';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            
+            const width = canvas.width;
+            const height = canvas.height;
+            const centerY = height / 2;
+            
+            for (let x = 0; x < width; x++) {
+                const y = centerY + Math.sin(x * 0.02) * 30 * Math.sin(x * 0.001);
+                if (x === 0) ctx.moveTo(x, y);
+                else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+        }
+    }
+    """)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

requirements.txt

@@ -0,0 +1,3 @@
+gradio==4.44.0
+numpy
+pathlib