feat: init hf space

.gitattributes copy

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,43 @@
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+.Python
+*.egg-info/
+dist/
+build/
+.eggs/
+
+# Virtual environments
+.venv/
+venv/
+env/
+
+# Generated audio files
+*.wav
+*.mid
+*.mp3
+/tmp/
+
+# Model cache (heavy — never commit this)
+.cache/
+huggingface/
+/data/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+
+# Env files
+.env
+.env.*
+
+# Package manager artifacts
+pyproject.toml
+uv.lock

.python-version

@@ -0,0 +1 @@
+3.11

Dockerfile

@@ -0,0 +1,31 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# ── System dependencies ───────────────────────────────────────────────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    ffmpeg \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# ── Python: torch first (CPU build, works on Render's free/standard tier) ─────
+# Swap the index URL for a CUDA build if you ever add a GPU service on Render.
+RUN pip install --no-cache-dir \
+    torch torchaudio --index-url https://download.pytorch.org/whl/cpu
+
+# ── Python: audiocraft + flask ────────────────────────────────────────────────
+RUN pip install --no-cache-dir audiocraft flask
+
+# ── App code ──────────────────────────────────────────────────────────────────
+COPY app.py index.html ./
+
+# ── Model cache directory (matches the Render persistent disk mount path) ─────
+# The disk is mounted at /data; HF will read/write models there so they
+# survive container restarts and don't need to re-download every deploy.
+ENV HF_HOME=/data/huggingface
+
+# Render injects $PORT at runtime; default to 10000 to match Render's standard
+EXPOSE 10000
+
+CMD ["python", "app.py"]

README copy.md

@@ -0,0 +1,18 @@
+---
+title: Sample Generator
+emoji: 🎵
+colorFrom: blue
+colorTo: gray
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Sample Generator by M-A
+
+A retro Windows 95-styled AI music sample generator powered by **Meta's MusicGen**.
+
+Describe any genre, mood, or instrumentation in plain text and the model generates
+an original audio sample — from lo-fi hip hop to epic orchestral scores.
+
+**Made by [M-A](https://m-aofficialmusic.org/)** — Applied AI Engineer & Artist.

app.py

@@ -0,0 +1,86 @@
+#!/usr/bin/env python3
+"""
+╔══════════════════════════════════════╗
+║         SAMPLE GENERATOR            ║
+║   Retro-styled AI music sampler     ║
+║   Powered by Meta's MusicGen        ║
+╚══════════════════════════════════════╝
+
+Local usage:
+    pip install -r requirements.txt
+    python app.py  →  http://localhost:7860
+
+HF Spaces:
+    Push this folder to a Docker Space — the Dockerfile handles everything.
+"""
+
+from flask import Flask, send_file, send_from_directory, jsonify, request
+import os, uuid, traceback, threading
+
+app = Flask(__name__)
+_model       = None
+_model_name  = None   # model id from first load; reused for all later requests
+_model_lock  = threading.Lock()
+
+
+# ─── Serve the frontend ────────────────────────────────────────────────────
+
+@app.route('/')
+def index():
+    return send_from_directory(os.path.dirname(__file__), 'index.html')
+
+
+# ─── Generate endpoint ─────────────────────────────────────────────────────
+
+@app.route('/api/generate', methods=['POST'])
+def generate():
+    global _model, _model_name
+
+    data        = request.get_json() or {}
+    description = data.get('description', 'ambient electronic music').strip()
+    duration    = max(1, min(int(data.get('duration', 8)), 60))
+    model_id    = data.get('model', 'facebook/musicgen-small')
+
+    # Whitelist allowed model IDs
+    allowed = {'facebook/musicgen-small', 'facebook/musicgen-medium'}
+    if model_id not in allowed:
+        return jsonify({'error': f'Unknown model: {model_id}'}), 400
+
+    try:
+        # ── Load model once per process (first request wins; concurrent first calls share one load)
+        with _model_lock:
+            if _model is None:
+                from audiocraft.models import MusicGen
+                _model = MusicGen.get_pretrained(model_id)
+                _model_name = model_id
+            # Already loaded: never call get_pretrained again (ignore later model_id changes)
+
+        _model.set_generation_params(duration=duration)
+        wav = _model.generate([description])
+
+        # ── Save to /tmp ───────────────────────────────────────────────
+        tmp_path = f'/tmp/sample_{uuid.uuid4().hex[:10]}'
+        from audiocraft.data.audio import audio_write
+        audio_write(tmp_path, wav[0].cpu(), _model.sample_rate,
+                    strategy='loudness')
+
+        return send_file(f'{tmp_path}.wav', mimetype='audio/wav')
+
+    except Exception as e:
+        return jsonify({
+            'error':     str(e),
+            'traceback': traceback.format_exc()
+        }), 500
+
+
+# ─── Entry point ───────────────────────────────────────────────────────────
+
+if __name__ == '__main__':
+    # HF Spaces requires port 7860; falls back to that locally too
+    port = int(os.environ.get('PORT', 7860))
+    print('\n' + '=' * 50)
+    print('  SAMPLE GENERATOR')
+    print('=' * 50)
+    print(f'  → http://localhost:{port}')
+    print('=' * 50 + '\n')
+    app.run(host='0.0.0.0', port=port, debug=False)

index.html

@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Sample Generator</title>
+  <style>
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      height: 100%;
+      background: #c0c0c0;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 13px;
+      color: #000;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      padding: 6px;
+    }
+
+    /* ─── Window fills viewport ───────────────────────────────────── */
+    .window {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      border: 3px solid;
+      border-color: #fff #404040 #404040 #fff;
+      min-height: 0;
+    }
+
+    /* ─── Title bar ───────────────────────────────────────────────── */
+    .title-bar {
+      background: #1a44d8;
+      color: #fff;
+      padding: 5px 8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      user-select: none;
+      flex-shrink: 0;
+    }
+    .title-bar-title { font-weight: bold; font-size: 14px; letter-spacing: 0.5px; }
+    .title-bar-btns  { display: flex; gap: 3px; }
+    .tbtn {
+      width: 24px; height: 20px;
+      background: #c0c0c0;
+      border: 2px solid; border-color: #fff #404040 #404040 #fff;
+      font-size: 10px; font-weight: bold; color: #000;
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      font-family: 'Courier New', monospace;
+    }
+    .tbtn:active { border-color: #404040 #fff #fff #404040; }
+
+    /* ─── Nav ─────────────────────────────────────────────────────── */
+    .nav {
+      background: #c0c0c0;
+      padding: 7px 18px;
+      display: flex; gap: 44px;
+      flex-shrink: 0;
+    }
+    .nav-item { font-size: 13px; cursor: pointer; color: #000; }
+    .nav-item.active { font-weight: bold; }
+
+    /* ─── White content box — fills remaining space ───────────────── */
+    .content-wrap {
+      flex: 1;
+      padding: 6px 7px 0;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+    .content {
+      flex: 1;
+      background: #fff;
+      border: 2px solid; border-color: #404040 #fff #fff #404040;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    /* ─── Pages (all fill content box) ───────────────────────────── */
+    .page {
+      display: none;
+      width: 100%; height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+    .page.active { display: flex; }
+
+    /* ─── HOME ────────────────────────────────────────────────────── */
+    .home-inner { text-align: center; }
+    .home-eyebrow { font-size: 14px; letter-spacing: 2px; margin-bottom: 6px; }
+    .home-big {
+      font-size: 96px; font-weight: bold;
+      color: #1a44d8; line-height: 1;
+      letter-spacing: -4px; margin-bottom: 4px;
+    }
+    .home-sub { font-size: 15px; letter-spacing: 6px; margin-bottom: 34px; }
+
+    /* ─── GENERATE — centered narrow column ───────────────────────── */
+    .form-inner {
+      width: 480px;
+      max-width: calc(100% - 40px);
+    }
+
+    .field { margin-bottom: 18px; }
+    .field-lbl {
+      display: block; font-size: 11px; letter-spacing: 1px;
+      color: #666; margin-bottom: 6px;
+    }
+
+    .win-input {
+      width: 100%; padding: 5px 7px;
+      font-family: 'Courier New', monospace; font-size: 13px;
+      border: 0; border-bottom: 1px solid #999;
+      background: transparent; outline: none; color: #000;
+    }
+    .win-input:focus { border-bottom-color: #1a44d8; }
+
+    .input-row { display: flex; gap: 8px; align-items: flex-end; }
+    .input-row .win-input { flex: 1; }
+
+    .win-select {
+      padding: 4px 6px;
+      font-family: 'Courier New', monospace; font-size: 12px;
+      border: 1px solid #999;
+      background: #fff; cursor: pointer; color: #000; outline: none;
+    }
+    .win-select:focus { border-color: #1a44d8; }
+
+    /* Tags */
+    .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
+    .tag {
+      background: #c0c0c0;
+      border: 1px solid; border-color: #fff #808080 #808080 #fff;
+      padding: 2px 9px; font-size: 11px; cursor: pointer;
+    }
+    .tag:hover  { background: #1a44d8; color: #fff; border-color: #1a44d8; }
+    .tag:active { border-color: #808080 #fff #fff #808080; }
+
+    .options-row {
+      display: flex; gap: 24px; flex-wrap: wrap;
+      margin-bottom: 22px; align-items: flex-end;
+    }
+    .options-row .field { margin-bottom: 0; }
+
+    /* Buttons */
+    .btn {
+      background: #c0c0c0;
+      border: 2px solid; border-color: #fff #404040 #404040 #fff;
+      padding: 4px 18px;
+      font-family: 'Courier New', monospace; font-size: 13px;
+      cursor: pointer; color: #000;
+    }
+    .btn:active { border-color: #404040 #fff #fff #404040; padding: 5px 17px 3px 19px; }
+    .btn:disabled { color: #808080; cursor: default; }
+    .btn.default { font-weight: bold; border-width: 3px; padding: 5px 24px; }
+    .btn.ghost {
+      background: transparent; border: 1px solid #999;
+      font-size: 12px; padding: 4px 14px;
+    }
+    .btn.ghost:hover { background: #f0f0f0; }
+    .btn.ghost:active { border-color: #404040; }
+
+    .action-row { display: flex; gap: 8px; align-items: center; }
+
+    /* Progress */
+    .progress-wrap { display: none; margin-top: 18px; }
+    .progress-lbl  { font-size: 11px; color: #666; margin-bottom: 5px; }
+    .progress-track {
+      width: 100%; height: 4px;
+      background: #e0e0e0; overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: repeating-linear-gradient(
+        90deg, #1a44d8 0px, #1a44d8 60%, #c0d0ff 60%, #c0d0ff 100%
+      );
+      background-size: 200% 100%;
+      animation: slide 1.2s linear infinite;
+    }
+    @keyframes slide { to { background-position: -200% 0; } }
+
+    /* Result */
+    .result-box   { display: none; margin-top: 18px; }
+    audio { width: 100%; display: block; margin-bottom: 10px; }
+    .result-meta  { font-size: 10px; color: #888; margin-top: 8px; }
+
+    /* ─── HISTORY ─────────────────────────────────────────────────── */
+    .history-inner { width: 600px; max-width: calc(100% - 40px); max-height: 80%; overflow-y: auto; }
+    .history-empty { text-align: center; color: #999; padding: 40px 0; font-size: 13px; }
+    .h-item {
+      border-bottom: 1px solid #eee;
+      padding: 8px 0;
+      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+    }
+    .h-item:first-child { border-top: 1px solid #eee; }
+    .h-num  { font-size: 10px; color: #aaa; width: 20px; }
+    .h-desc { flex: 1; font-size: 12px; min-width: 120px; }
+    .h-dur  { font-size: 10px; color: #999; white-space: nowrap; }
+    .h-audio audio { height: 24px; width: 180px; }
+
+    /* ─── ABOUT ───────────────────────────────────────────────────── */
+    .about-inner {
+      width: 420px; max-width: calc(100% - 40px);
+      font-size: 13px; line-height: 1.85; color: #222;
+      text-align: center;
+    }
+    .about-name {
+      font-size: 28px; font-weight: bold;
+      color: #1a44d8; letter-spacing: -1px;
+      margin-bottom: 4px;
+    }
+    .about-role {
+      font-size: 11px; letter-spacing: 3px;
+      color: #888; margin-bottom: 22px;
+      text-transform: uppercase;
+    }
+    .about-divider {
+      border: none; border-top: 1px solid #ddd;
+      margin: 18px 0;
+    }
+    .about-bio {
+      font-size: 13px; color: #444;
+      line-height: 1.9; margin-bottom: 22px;
+    }
+    .about-links {
+      display: flex; flex-direction: column; gap: 8px;
+      align-items: center;
+    }
+    .about-link {
+      display: inline-flex; align-items: center; gap: 8px;
+      font-size: 12px; color: #1a44d8;
+      text-decoration: none; letter-spacing: 0.3px;
+    }
+    .about-link:hover { text-decoration: underline; }
+    .about-link-icon { font-size: 13px; }
+
+    /* ─── Scrollbar ───────────────────────────────────────────────── */
+    .scrollbar {
+      background: #c0c0c0; height: 20px;
+      display: flex; align-items: stretch; flex-shrink: 0;
+      margin-top: 0;
+    }
+    .sb-arrow {
+      width: 20px; flex-shrink: 0;
+      border: 2px solid; border-color: #fff #404040 #404040 #fff;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 9px; cursor: default; background: #c0c0c0;
+    }
+    .sb-arrow:active { border-color: #404040 #fff #fff #404040; }
+    .sb-track {
+      flex: 1; position: relative;
+      background: repeating-linear-gradient(
+        45deg, #b8b8b8 0, #b8b8b8 1px, #c0c0c0 1px, #c0c0c0 4px
+      );
+    }
+    .sb-thumb {
+      position: absolute; left: 38%; top: 0;
+      width: 56px; height: 100%;
+      border: 2px solid; border-color: #fff #404040 #404040 #fff;
+      background: #c0c0c0;
+    }
+  </style>
+</head>
+<body>
+<div class="window">
+
+  <!-- Title bar -->
+  <div class="title-bar">
+    <span class="title-bar-title">Sample Generator</span>
+    <div class="title-bar-btns">
+      <button class="tbtn">_</button>
+      <button class="tbtn">□</button>
+      <button class="tbtn">×</button>
+    </div>
+  </div>
+
+  <!-- Nav -->
+  <div class="nav">
+    <span class="nav-item active" id="nav-home"     onclick="show('home')">Home</span>
+    <span class="nav-item"        id="nav-generate" onclick="show('generate')">Generate</span>
+    <span class="nav-item"        id="nav-history"  onclick="show('history')">History</span>
+    <span class="nav-item"        id="nav-about"    onclick="show('about')">About</span>
+  </div>
+
+  <!-- White content box -->
+  <div class="content-wrap">
+    <div class="content">
+
+      <!-- HOME -->
+      <div class="page active" id="page-home">
+        <div class="home-inner">
+          <p class="home-eyebrow">Generate a</p>
+          <div class="home-big">SAMPLE</div>
+          <p class="home-sub">FROM SCRATCH</p>
+          <button class="btn default" onclick="show('generate')">Start</button>
+        </div>
+      </div>
+
+      <!-- GENERATE -->
+      <div class="page" id="page-generate">
+        <div class="form-inner">
+
+          <div class="field">
+            <label class="field-lbl">DESCRIPTION</label>
+            <div class="input-row">
+              <input type="text" class="win-input" id="desc"
+                placeholder="e.g. lo-fi hip hop, ambient, jazz piano..."
+                value="lo-fi hip hop with rain and vinyl crackle">
+              <button class="btn ghost" onclick="randomPrompt()">🎲</button>
+            </div>
+            <div class="tags" id="tagRow"></div>
+          </div>
+
+          <div class="options-row">
+            <div class="field">
+              <label class="field-lbl">DURATION</label>
+              <select class="win-select" id="dur">
+                <option value="5">5 seconds</option>
+                <option value="8" selected>8 seconds</option>
+                <option value="15">15 seconds</option>
+                <option value="30">30 seconds</option>
+              </select>
+            </div>
+            <div class="field">
+              <label class="field-lbl">MODEL</label>
+              <select class="win-select" id="modelSel">
+                <option value="facebook/musicgen-small" selected>musicgen-small</option>
+                <option value="facebook/musicgen-medium">musicgen-medium</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="action-row">
+            <button class="btn default" id="genBtn" onclick="generate()">► Generate</button>
+            <button class="btn ghost" onclick="clearResult()">Clear</button>
+          </div>
+
+          <div class="progress-wrap" id="progressWrap">
+            <div class="progress-lbl" id="progressLbl">Generating…</div>
+            <div class="progress-track"><div class="progress-fill"></div></div>
+          </div>
+
+          <div class="result-box" id="resultBox">
+            <audio id="player" controls></audio>
+            <div class="action-row">
+              <button class="btn ghost" onclick="dlSample()">↓ Download WAV</button>
+              <button class="btn ghost" onclick="generate()">↺ Regenerate</button>
+            </div>
+            <div class="result-meta" id="resultMeta"></div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- HISTORY -->
+      <div class="page" id="page-history">
+        <div class="history-inner">
+          <div id="historyList">
+            <div class="history-empty">No samples generated yet.</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ABOUT -->
+      <div class="page" id="page-about">
+        <div class="about-inner">
+          <div class="about-name">M - A</div>
+          <div class="about-role">Applied AI Engineer &amp; Artist</div>
+          <p class="about-bio">
+            Designing and developing AI solutions for all kinds of use cases —
+            and also a song-writer, musician and painter.<br>
+            This sample generator is one small piece of that creative chaos 🤍
+          </p>
+          <hr class="about-divider">
+          <div class="about-links">
+            <a class="about-link" href="https://m-aofficialmusic.org/" target="_blank">
+              <span class="about-link-icon">🌐</span> m-aofficialmusic.org
+            </a>
+            <a class="about-link" href="https://open.spotify.com/artist/5v8fSIV6a2nJwHNHWHHHa5" target="_blank">
+              <span class="about-link-icon">🎵</span> Spotify
+            </a>
+            <a class="about-link" href="https://www.youtube.com/channel/UCFuuOTOczyOkD5aUUBfKy0A" target="_blank">
+              <span class="about-link-icon">▶</span> YouTube
+            </a>
+            <a class="about-link" href="https://www.instagram.com/maofficialmusique" target="_blank">
+              <span class="about-link-icon">◈</span> Instagram
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Scrollbar -->
+  <div class="scrollbar">
+    <div class="sb-arrow">◄</div>
+    <div class="sb-track"><div class="sb-thumb"></div></div>
+    <div class="sb-arrow">►</div>
+  </div>
+
+</div>
+
+<script>
+  const PROMPTS = [
+    "lo-fi hip hop with rain and vinyl crackle",
+    "epic orchestral film score with choir",
+    "happy 8-bit chiptune adventure",
+    "dark minimal techno with heavy bass",
+    "smooth jazz piano trio late night",
+    "acoustic folk guitar campfire song",
+    "ambient drone meditation",
+    "upbeat synthpop 80s dance floor",
+    "heavy metal guitar riff",
+    "bossa nova guitar and piano",
+    "deep house groove with soft pads",
+    "funky slap bass groove",
+    "melancholic piano ballad",
+    "tropical reggaeton with steel drums",
+    "blues harmonica and acoustic guitar",
+  ];
+
+  const TAGS = ["lo-fi hip hop", "ambient", "jazz piano", "techno", "orchestral", "chiptune", "folk guitar", "EDM"];
+
+  (function() {
+    const row = document.getElementById('tagRow');
+    TAGS.forEach(t => {
+      const el = document.createElement('span');
+      el.className = 'tag'; el.textContent = t;
+      el.onclick = () => document.getElementById('desc').value = t;
+      row.appendChild(el);
+    });
+  })();
+
+  let currentBlob = null, history = [];
+
+  function show(page) {
+    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    document.getElementById('page-' + page).classList.add('active');
+    document.getElementById('nav-'  + page).classList.add('active');
+  }
+
+  function randomPrompt() {
+    document.getElementById('desc').value = PROMPTS[Math.floor(Math.random() * PROMPTS.length)];
+  }
+
+  async function generate() {
+    const desc  = document.getElementById('desc').value.trim();
+    const dur   = parseInt(document.getElementById('dur').value);
+    const model = document.getElementById('modelSel').value;
+    if (!desc) { alert('Please enter a description!'); return; }
+
+    const btn          = document.getElementById('genBtn');
+    const progressWrap = document.getElementById('progressWrap');
+    const progressLbl  = document.getElementById('progressLbl');
+    const resultBox    = document.getElementById('resultBox');
+
+    btn.disabled = true;
+    progressWrap.style.display = 'block';
+    resultBox.style.display    = 'none';
+    progressLbl.textContent    = 'Loading model & generating… (first run may take a few minutes)';
+
+    try {
+      const res = await fetch('/api/generate', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ description: desc, duration: dur, model })
+      });
+      if (!res.ok) {
+        let msg = 'Generation failed';
+        try { msg = (await res.json()).error || msg; } catch(_) {}
+        throw new Error(msg);
+      }
+      const blob = await res.blob();
+      currentBlob = blob;
+      document.getElementById('player').src = URL.createObjectURL(blob);
+      const ts = new Date().toLocaleTimeString();
+      document.getElementById('resultMeta').textContent = '"' + desc + '" · ' + dur + 's · ' + ts;
+      resultBox.style.display = 'block';
+      progressLbl.textContent = 'Complete!';
+      history.unshift({ desc, dur, url: URL.createObjectURL(blob), ts });
+      renderHistory();
+    } catch(e) {
+      progressLbl.textContent = 'Error: ' + e.message;
+    } finally {
+      btn.disabled = false;
+      setTimeout(() => { progressWrap.style.display = 'none'; }, 3000);
+    }
+  }
+
+  function dlSample() {
+    if (!currentBlob) return;
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(currentBlob);
+    const slug = document.getElementById('desc').value.replace(/[^a-z0-9 ]/gi,'').trim().replace(/\s+/g,'_').toLowerCase().slice(0,40);
+    a.download = 'sample_' + slug + '.wav'; a.click();
+  }
+
+  function clearResult() {
+    document.getElementById('resultBox').style.display = 'none';
+    document.getElementById('player').src = ''; currentBlob = null;
+  }
+
+  function renderHistory() {
+    const el = document.getElementById('historyList');
+    if (!history.length) { el.innerHTML = '<div class="history-empty">No samples generated yet.</div>'; return; }
+    el.innerHTML = history.map((item, i) => `
+      <div class="h-item">
+        <span class="h-num">#${i+1}</span>
+        <span class="h-desc">${item.desc}</span>
+        <span class="h-dur">${item.dur}s · ${item.ts}</span>
+        <div class="h-audio"><audio controls src="${item.url}"></audio></div>
+        <a href="${item.url}" download="sample_${i+1}.wav"><button class="btn ghost" style="font-size:11px;padding:2px 8px;">↓</button></a>
+      </div>`).join('');
+  }
+
+  document.getElementById('desc').addEventListener('keydown', e => { if (e.key === 'Enter') generate(); });
+</script>
+</body>
+</html>