Spaces:

flen-crypto
/

anycoder-d887c378

Running

App Files Files Community

flen-crypto commited on Dec 15, 2025

Commit

07b0db1

verified ·

1 Parent(s): 87ca0d5

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +364 -1067

index.html CHANGED Viewed

@@ -1,1150 +1,447 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mr.FLEN — Fiverr Music Creator (Local)</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <style>
-    :root {
-      --bg: #0f1220;
-      --card: #151a2e;
-      --text: #e8ecff;
-      --muted: #aab3da;
-      --accent: #4a68d8;
-      --success: #2dd4bf;
-      --warn: #ffb400;
-      --danger: #ff5a7a;
-      --border: #263055;
-      --radius: 14px;
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    body {
-      margin: 0;
-      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-      background: linear-gradient(180deg, #0b0d17, var(--bg));
-      color: var(--text);
-    }
-    header {
-      padding: 18px 16px 10px;
-      border-bottom: 1px solid var(--border);
-      background: radial-gradient(900px 260px at 20% 0%, rgba(74, 104, 216, 0.35), transparent 60%);
-    }
-    h1 {
-      margin: 0;
-      font-size: 1.25rem;
-    }
-    header p {
-      margin: 6px 0 0;
-      color: var(--muted);
-      max-width: 1100px;
-    }
-    main {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 16px;
-      display: grid;
-      grid-template-columns: 1.15fr 0.85fr;
-      gap: 16px;
-    }
-    @media (max-width: 980px) {
-      main {
-        grid-template-columns: 1fr;
       }
-    }
-    .card {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 14px;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
-    }
-    .card h2 {
-      margin: 0 0 10px;
-      font-size: 1.05rem;
-    }
-    .grid2 {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-    }
-    @media (max-width: 680px) {
-      .grid2 {
-        grid-template-columns: 1fr;
       }
-    }
-    label {
-      display: block;
-      font-size: 0.82rem;
-      color: var(--muted);
-      margin: 8px 0 4px;
-    }
-    input, textarea, select {
-      width: 100%;
-      padding: 10px;
-      border-radius: 10px;
-      border: 1px solid var(--border);
-      background: #0f1430;
-      color: var(--text);
-      font-size: 0.92rem;
-    }
-    textarea {
-      min-height: 84px;
-      resize: vertical;
-    }
-    .btnrow {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 12px;
-    }
-    button {
-      cursor: pointer;
-      border: 0;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font-weight: 650;
-      font-size: 0.92rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      user-select: none;
-    }
-    .primary {
-      background: var(--accent);
-      color: #fff;
-    }
-    .ghost {
-      background: transparent;
-      color: var(--text);
-      border: 1px solid var(--border);
-    }
-    .success {
-      background: var(--success);
-      color: #0c4641;
-      border: 1px solid rgba(45, 212, 191, 0.35);
-    }
-    .warn {
-      background: rgba(255, 174, 0, 0.16);
-      color: #ffe2a8;
-      border: 1px solid rgba(255, 174, 0, 0.35);
-    }
-    .danger {
-      background: rgba(255, 90, 122, 0.14);
-      color: #ffd0da;
-      border: 1px solid rgba(255, 90, 122, 0.35);
-    }
-    .pill {
-      display: inline-flex;
-      gap: 6px;
-      align-items: center;
-      font-size: 0.78rem;
-      color: var(--muted);
-      padding: 6px 10px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-    }
-    .rowline {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      align-items: center;
-    }
-    .small {
-      font-size: 0.78rem;
-      color: var(--muted);
-    }
-    .kbd {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      background: #0b0f26;
-      border: 1px solid var(--border);
-      padding: 2px 6px;
-      border-radius: 8px;
-      color: #cbd5ff;
-    }
-    .out {
-      white-space: pre-wrap;
-      background: #0b0f26;
-      border: 1px dashed rgba(74, 104, 216, 0.6);
-      border-radius: 12px;
-      padding: 10px;
-      margin-top: 10px;
-      min-height: 120px;
-    }
-    .tabs {
-      display: flex;
-      gap: 6px;
-      flex-wrap: wrap;
-      margin-top: 10px;
-    }
-    .tab {
-      padding: 8px 12px;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: #0b0f26;
-      color: var(--text);
-      font-weight: 650;
-      font-size: 0.88rem;
-    }
-    .tab.active {
-      border-color: rgba(74, 104, 216, 0.8);
-      box-shadow: 0 0 0 2px rgba(74, 104, 216, 0.25) inset;
-    }
-    .panel {
-      display: none;
-      margin-top: 8px;
-    }
-    .panel.active {
-      display: block;
-    }
-    .drop {
-      border: 1px dashed rgba(45, 212, 191, 0.55);
-      background: rgba(45, 212, 191, 0.06);
-      border-radius: 12px;
-      padding: 10px;
-      margin-top: 10px;
-    }
-    .drop.drag {
-      outline: 2px solid rgba(45, 212, 191, 0.6);
-    }
-    .imggrid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      margin-top: 10px;
-    }
-    @media (max-width: 680px) {
-      .imggrid {
-        grid-template-columns: 1fr;
       }
     }
-    .thumb {
-      width: 100%;
-      border-radius: 12px;
-      border: 1px solid var(--border);
-      background: #0b0f26;
-    }
-    .clipItem {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 8px;
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      background: #0b0f26;
-      margin: 6px 0;
-    }
-    .clipName {
-      flex: 1;
-      font-size: 0.9rem;
-      color: var(--muted);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .clipBtns {
-      display: flex;
-      gap: 6px;
-    }
-    .miniBtn {
-      padding: 6px 10px;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text);
-      font-weight: 700;
-      font-size: 0.85rem;
-    }
-    a {
-      color: #9db2ff;
-    }
-    .built-with {
-      font-size: 0.78rem;
-      color: var(--muted);
-      margin-top: 10px;
-    }
-    .built-with a {
-      color: #9db2ff;
-      text-decoration: none;
-    }
-    .built-with a:hover {
-      text-decoration: underline;
-    }
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: #0b0f26;
-      border-radius: 10px;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: var(--accent);
-      border-radius: 10px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #3a58d8;
-    }
-    .status-indicator {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      margin-right: 6px;
-    }
-    .status-ok {
-      background-color: var(--success);
-    }
-    .status-error {
-      background-color: var(--danger);
-    }
-    .status-warn {
-      background-color: var(--warn);
-    }
-    .progress-bar {
-      width: 100%;
-      height: 4px;
-      background-color: var(--border);
-      border-radius: 2px;
-      margin-top: 8px;
-      overflow: hidden;
-    }
-    .progress-fill {
-      height: 100%;
-      background-color: var(--accent);
-      width: 0%;
-      transition: width 0.3s ease;
-    }
-    .api-status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-top: 12px;
-      padding: 8px;
-      border-radius: 8px;
-      background-color: rgba(74, 104, 216, 0.1);
-      border: 1px solid rgba(74, 104, 216, 0.3);
-    }
-    .api-input {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-      align-items: center;
-    }
-    .api-input input {
-      flex: 1;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 0.85rem;
-    }
-    .api-input button {
-      padding: 8px 12px;
-    }
-    .api-section {
-      border-top: 1px solid var(--border);
-      padding-top: 12px;
-      margin-top: 12px;
-    }
-    .file-info {
-      margin-top: 10px;
-      padding: 8px;
-      border-radius: 8px;
-      background: rgba(45, 212, 191, 0.1);
-      border: 1px solid rgba(45, 212, 191, 0.3);
     }
-    .processing-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      display: none;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
-    .processing-content {
-      text-align: center;
-      background: var(--card);
-      padding: 24px;
-      border-radius: 16px;
-      border: 1px solid var(--border);
-    }
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid rgba(74, 104, 216, 0.2);
-      border-radius: 50%;
-      border-top-color: var(--accent);
-      animation: spin 1s ease-in-out infinite;
-      margin: 0 auto 16px;
-    }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
       }
     }
-    .modal {
-      display: none;
-      position: fixed;
-      z-index: 1001;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.7);
-      justify-content: center;
-      align-items: center;
-    }
-    .modal-content {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 24px;
-      max-width: 560px;
-      width: 92%;
-      max-height: 80vh;
-      overflow-y: auto;
-    }
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-    }
-    .modal-title {
-      font-size: 1.2rem;
-      margin: 0;
     }
-    .close-modal {
-      background: none;
-      border: none;
-      color: var(--muted);
-      font-size: 1.5rem;
-      cursor: pointer;
-    }
-    .modal-body {
-      margin-bottom: 20px;
     }
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap: 10px;
     }
-    .error-message {
-      color: var(--danger);
-      font-size: 0.85rem;
-      margin-top: 8px;
-      padding: 8px;
-      background-color: rgba(255, 90, 122, 0.1);
-      border-radius: 8px;
-      border: 1px solid rgba(255, 90, 122, 0.2);
-    }
-    .api-key-input-container {
-      position: relative;
-    }
-    .toggle-password {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: none;
-      border: none;
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 0.9rem;
     }
-  </style>
-</head>
-<body>
-  <header>
-    <div class="rowline">
-      <h1>Mr.FLEN — Fiverr Music Creator (Local)</h1>
-      <span class="pill" id="healthPill">
-        <span class="status-indicator status-ok"></span>
-        Server OK — port: 8787 — OpenAI key: <span id="apiKeyStatus">checking...</span> — model:
-        <span id="modelStatus">loading...</span> — video: <span id="videoStatus">off</span>
-      </span>
-      <button class="ghost" id="diagBtn" type="button">
-        <i class="fas fa-diagnoses"></i> Run diag
-      </button>
-    </div>
-    <p>
-      Flow: form → <span class="kbd">Generate</span> → <span class="kbd">Populate</span> → optional image/video →
-      uploads → <span class="kbd">Stitch</span> into one MP4.
-      This generator rewrites banned vocabulary using synonyms or more complex wording — it never fails due to banned
-      words.
-    </p>
-    <div class="built-with">
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-    </div>
-  </header>
-  <main>
-    <!-- 1) Customer Form -->
-    <section class="card">
-      <h2>1) Customer Form</h2>
-      <!-- API Key Input Section -->
-      <div class="api-section">
-        <h3 style="margin: 0 0 8px 0; font-size: 0.95rem;">OpenAI API Configuration</h3>
-        <div class="api-input">
-          <div class="api-key-input-container" style="position: relative; flex: 1;">
-            <input type="password" id="openaiApiKey" placeholder="Enter your OpenAI API key (sk-...)">
-            <button type="button" class="toggle-password" id="togglePassword">
-              <i class="fas fa-eye"></i>
-            </button>
-          </div>
-          <button class="primary" id="saveApiKeyBtn" type="button">
-            <i class="fas fa-save"></i> Save Key
-          </button>
-          <button class="ghost" id="testApiKeyBtn" type="button">
-            <i class="fas fa-vial"></i> Test Key
-          </button>
-        </div>
-        <div class="small" style="margin-top: 6px;">
-          Your API key is stored locally in your browser and never sent to our servers.
-          <a href="https://platform.openai.com/account/api-keys" target="_blank" style="color: var(--accent);">Get your
-            API key</a>
-        </div>
-        <div class="api-status" id="apiStatusDisplay" style="display: none;">
-          <span class="status-indicator"></span>
-          <span id="apiStatusMessage"></span>
-        </div>
-        <div id="apiErrorDisplay" class="error-message" style="display: none;"></div>
-      </div>
-      <div class="grid2">
-        <div>
-          <label>Song title</label>
-          <input id="songTitle" placeholder="Let AI decide if blank">
-        </div>
-        <div>
-          <label>Occasion</label>
-          <input id="occasion" placeholder="Birthday / Christmas / Anniversary…">
-        </div>
-        <div>
-          <label>Buyer name</label>
-          <input id="buyerName" placeholder="Ben">
-        </div>
-        <div>
-          <label>Recipient name</label>
-          <input id="recipientName" placeholder="JoJo">
-        </div>
-        <div>
-          <label>Relationship</label>
-          <input id="relationship" placeholder="Partner / best mate / mum…">
-        </div>
-        <div>
-          <label>Tone / vibe</label>
-          <input id="tone" placeholder="Funny but romantic / heartfelt / hype…">
-        </div>
-        <div>
-          <label>Main genre</label>
-          <input id="mainGenre" placeholder="UKG / Pop / Singer-songwriter…">
-        </div>
-        <div>
-          <label>Secondary genres</label>
-          <input id="secondaryGenres" placeholder="Orchestral lift / UKG shuffle / etc.">
-        </div>
-        <div>
-          <label>Tempo / energy</label>
-          <input id="tempo" placeholder="Mid-tempo / slow / upbeat…">
-        </div>
-        <div>
-          <label>Vocal style</label>
-          <input id="vocalStyle" placeholder="Warm intimate tenor, conversational timing…">
-        </div>
-        <div>
-          <label>Instrumentation notes</label>
-          <input id="instrumentationNotes" placeholder="Piano-led, strings, UKG hats…">
-        </div>
-        <div>
-          <label>Language level</label>
-          <select id="languageLevel">
-            <option value="clean">clean</option>
-            <option value="mild">mild</option>
-            <option value="no limit" selected>no limit</option>
-          </select>
-        </div>
-        <div>
-          <label>Package level</label>
-          <select id="packageLevel">
-            <option value="basic">Basic</option>
-            <option value="standard">Standard</option>
-            <option value="premium" selected>Premium</option>
-            <option value="ultra">Ultra</option>
-          </select>
-        </div>
-        <div class="rowline" style="margin-top:8px">
-          <label style="margin:0 10px 0 0">Include packs?</label>
-          <input id="wantsArtwork" type="checkbox" checked> <span class="small">Artwork</span>
-          <input id="wantsVideo" type="checkbox" checked> <span class="small">Video</span>
-        </div>
-      </div>
-      <label>3–5 key facts</label>
-      <textarea id="keyFacts" placeholder="One fact per line…"></textarea>
-      <label>1–3 stories / moments</label>
-      <textarea id="stories" placeholder="One story per line…"></textarea>
-      <label>Main message</label>
-      <textarea id="mainMessage" placeholder="Your heartfelt message…"></textarea>
-      <label>Names / people / places to include</label>
-      <textarea id="namesPlaces" placeholder="Bruno the dog, favourite pub, etc."></textarea>
-      <details style="margin-top:10px">
-        <summary class="rowline" style="cursor:pointer">
-          <span class="pill">Optional visual inputs</span>
-          <span class="small">open/close</span>
-        </summary>
-        <div style="padding-top:10px">
-          <div class="grid2">
-            <div>
-              <label>Visual style</label>
-              <input id="visualStyle" placeholder="Photo-real / illustrated / film grain…">
-            </div>
-            <div>
-              <label>Visual mood</label>
-              <input id="visualMood" placeholder="Romantic, warm, grounded…">
-            </div>
-          </div>
-          <label>Places / themes</label>
-          <textarea id="visualPlacesThemes" placeholder="Seaside sunset, woodland walk, etc."></textarea>
-          <label>Typography (exact text)</label>
-          <input id="visualText" placeholder="Exact words to appear in-world (optional)">
-        </div>
-      </details>
-      <div class="btnrow">
-        <button class="primary" id="generateBtn" type="button">
-          <i class="fas fa-magic"></i> Generate Suno Block
-        </button>
-        <button class="ghost" id="randomBtn" type="button">
-          <i class="fas fa-dice"></i> Randomiser (API)
-        </button>
-        <button class="success" id="populateBtn" type="button">
-          <i class="fas fa-cog"></i> Populate builders
-        </button>
-        <button class="ghost" id="copySunoBtn" type="button">
-          <i class="fas fa-copy"></i> Copy Suno block
-        </button>
-        <button class="ghost" id="saveDraftBtn" type="button">
-          <i class="fas fa-save"></i> Save draft
-        </button>
-        <button class="ghost" id="loadDraftBtn" type="button">
-          <i class="fas fa-folder-open"></i> Load draft
-        </button>
-        <button class="danger" id="resetBtn" type="button">
-          <i class="fas fa-redo"></i> Reset
-        </button>
-      </div>
-      <div class="small" style="margin-top:10px">
-        Current order: <span class="kbd" id="orderId">none</span><span id="orderDir" class="small"></span>
-      </div>
-      <div class="out" id="sunoBlockOut">Suno block will appear here…</div>
-      <div class="small" id="warnings"></div>
-      <div class="out" id="diagOut" style="display:none"></div>
-    </section>
-    <!-- 2) Prompt Builders -->
-    <section class="card">
-      <h2>2) Builders</h2>
-      <div class="tabs">
-        <button class="tab active" id="tabSong" type="button">
-          <i class="fas fa-music"></i> Song
-        </button>
-        <button class="tab" id="tabArt" type="button">
-          <i class="fas fa-paint-brush"></i> Artwork
-        </button>
-        <button class="tab" id="tabVideo" type="button">
-          <i class="fas fa-video"></i> Video
-        </button>
-      </div>
-      <div class="panel active" id="panelSong">
-        <label>Song prompt (from [Suno v5 Master Prompt])</label>
-        <textarea id="songPrompt" placeholder="Generate then populate to see the song prompt"></textarea>
-        <div class="btnrow">
-          <button class="ghost" id="copySongPromptBtn" type="button">
-            <i class="fas fa-copy"></i> Copy song prompt
-          </button>
-        </div>
-      </div>
-      <div class="panel" id="panelArt">
-        <label>Artwork prompt (from [Artwork_Pack])</label>
-        <textarea id="artPrompt" placeholder="Generate then populate to see the artwork prompt"></textarea>
-        <div class="btnrow">
-          <button class="primary" id="genImageBtn" type="button">
-            <i class="fas fa-magic"></i> Generate Image
-          </button>
-          <button class="ghost" id="copyArtBtn" type="button">
-            <i class="fas fa-copy"></i> Copy artwork prompt
-          </button>
-          <button class="ghost" id="clearArtImgsBtn" type="button">
-            <i class="fas fa-trash"></i> Clear previews
-          </button>
-        </div>
-        <div class="imggrid" id="imgGrid"></div>
-      </div>
-      <div class="panel" id="panelVideo">
-        <label>Video prompt (from [Video_Pack])</label>
-        <textarea id="videoPrompt" placeholder="Generate then populate to see the video prompt"></textarea>
-        <div class="btnrow">
-          <button class="primary" id="genVideoBtn" type="button" disabled>
-            <i class="fas fa-magic"></i> Generate Video
-          </button>
-          <button class="ghost" id="copyVideoBtn" type="button">
-            <i class="fas fa-copy"></i> Copy video prompt
-          </button>
-          <button class="ghost" id="clearVideoPreviewBtn" type="button">
-            <i class="fas fa-trash"></i> Clear preview
-          </button>
-        </div>
-        <div class="out" id="videoOut">Video status…</div>
-        <div id="videoPreview" style="margin-top:10px"></div>
-        <div class="small" style="margin-top:6px">
-          Video requires the server to be configured with a video connector. If disabled, the button will be inactive.
-        </div>
-      </div>
-    </section>
-    <!-- 3) Uploads & Stitching -->
-    <section class="card">
-      <h2>3) Uploads (Song + Video clips)</h2>
-      <div class="small">You can upload unlimited clips. Rearrange the order before uploading, then stitch into a single
-        music video file.</div>
-      <div class="drop" id="songDrop">
-        <div class="rowline">
-          <strong>Drop song file here</strong> <span class="small">(MP3/WAV/M4A)</span>
-        </div>
-        <input type="file" id="songFile" accept=".mp3,.wav,.m4a">
-        <div id="songFileInfo" class="file-info" style="display: none;">
-          <strong>Selected song:</strong> <span id="songFileName"></span>
-          <button class="miniBtn" id="removeSongBtn" type="button">Remove</button>
-        </div>
-      </div>
-      <div class="drop" id="clipDrop" style="margin-top:12px">
-        <div class="rowline">
-          <strong>Drop video clips here</strong> <span class="small">(MP4)</span>
-        </div>
-        <input type="file" id="clipFilesInput" accept=".mp4" multiple>
-        <div id="clipQueueWrap">
-          <div class="small" style="margin-top:6px">No clips queued.</div>
-        </div>
-      </div>
-      <div class="btnrow">
-        <button class="warn" id="stitchBtn" type="button">
-          <i class="fas fa-link"></i> Stitch clips → musicVID.mp4
-        </button>
-        <button class="ghost" id="clearClipsBtn" type="button">
-          <i class="fas fa-trash"></i> Clear queue
-        </button>
-      </div>
-      <div class="out" id="uploadOut">Upload status…</div>
-      <div class="small" id="orderLinks"></div>
-    </section>
-  </main>
-  <!-- Processing Overlay -->
-  <div class="processing-overlay" id="processingOverlay">
-    <div class="processing-content">
-      <div class="spinner"></div>
-      <h3>Processing...</h3>
-      <p id="processingMessage">Please wait while we process your request</p>
-      <div class="progress-bar">
-        <div class="progress-fill" id="progressFill"></div>
-      </div>
-    </div>
-  </div>
-  <!-- Modal -->
-  <div class="modal" id="infoModal">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h2 class="modal-title">Information</h2>
-        <button class="close-modal" id="closeModal" type="button">&times;</button>
-      </div>
-      <div class="modal-body" id="modalBody"></div>
-      <div class="modal-footer">
-        <button class="primary" id="modalOkBtn" type="button">OK</button>
-      </div>
-    </div>
-  </div>
-  <script>
-    // Configuration
-    const API_BASE = 'http://localhost:8787/api';
-    let currentOrderId = null;
-    let apiKey = '';
-    let songFile = null;
-    let videoClips = []; // { id, file, name }
-    // DOM Elements
-    const healthPill = document.getElementById('healthPill');
-    const apiKeyStatus = document.getElementById('apiKeyStatus');
-    const modelStatus = document.getElementById('modelStatus');
-    const videoStatus = document.getElementById('videoStatus');
-    const orderIdDisplay = document.getElementById('orderId');
-    const orderDirSpan = document.getElementById('orderDir');
-    const sunoBlockOut = document.getElementById('sunoBlockOut');
-    const warningsDisplay = document.getElementById('warnings');
-    const diagOut = document.getElementById('diagOut');
-    const openaiApiKeyInput = document.getElementById('openaiApiKey');
-    const saveApiKeyBtn = document.getElementById('saveApiKeyBtn');
-    const testApiKeyBtn = document.getElementById('testApiKeyBtn');
-    const apiStatusDisplay = document.getElementById('apiStatusDisplay');
-    const apiStatusMessage = document.getElementById('apiStatusMessage');
-    const apiErrorDisplay = document.getElementById('apiErrorDisplay');
-    const songFileInput = document.getElementById('songFile');
-    const songFileInfo = document.getElementById('songFileInfo');
-    const songFileName = document.getElementById('songFileName');
-    const removeSongBtn = document.getElementById('removeSongBtn');
-    const clipFilesInput = document.getElementById('clipFilesInput');
-    const clipQueueWrap = document.getElementById('clipQueueWrap');
-    const uploadOut = document.getElementById('uploadOut');
-    const orderLinks = document.getElementById('orderLinks');
-    const imgGrid = document.getElementById('imgGrid');
-    const videoOut = document.getElementById('videoOut');
-    const videoPreview = document.getElementById('videoPreview');
-    const togglePassword = document.getElementById('togglePassword');
-    const processingOverlay = document.getElementById('processingOverlay');
-    const processingMessage = document.getElementById('processingMessage');
-    const progressFill = document.getElementById('progressFill');
-    const infoModal = document.getElementById('infoModal');
-    const modalBody = document.getElementById('modalBody');
-    const closeModal = document.getElementById('closeModal');
-    const modalOkBtn = document.getElementById('modalOkBtn');
-    // ---------- Init ----------
-    async function init() {
-      // Load saved API key from localStorage
-      const savedKey = localStorage.getItem('openaiApiKey');
-      if (savedKey) {
-        apiKey = savedKey;
-        openaiApiKeyInput.value = '••••••••••••••••••••••••••••••••••••••••';
       }
-      await checkServerHealth();
-      setInterval(checkServerHealth, 30000);
-      // API key
-      saveApiKeyBtn.addEventListener('click', saveApiKey);
-      testApiKeyBtn.addEventListener('click', testApiKey);
-      togglePassword.addEventListener('click', togglePasswordVisibility);
-      // File upload handlers
-      songFileInput.addEventListener('change', handleSongFileUpload);
-      removeSongBtn.addEventListener('click', removeSongFile);
-      clipFilesInput.addEventListener('change', handleClipFilesUpload);
-      // Drag and drop
-      setupDrop(document.getElementById('songDrop'), (files) => {
-        if (files.length) {
-          songFileInput.files = files;
-          handleSongFileUpload();
-        }
-      });
-      setupDrop(document.getElementById('clipDrop'), (files) => {
-        if (files.length) {
-          clipFilesInput.files = files;
-          handleClipFilesUpload();
-        }
       });
-      // Modal handlers
-      closeModal.addEventListener('click', () => infoModal.style.display = 'none');
-      modalOkBtn.addEventListener('click', () => infoModal.style.display = 'none');
-      // Tabs
-      document.querySelectorAll('.tab').forEach(tab => {
-        tab.addEventListener('click', () => {
-          document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-          document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
-          tab.classList.add('active');
-          const panelId = tab.id.replace('tab', 'panel');
-          document.getElementById(panelId).classList.add('active');
         });
       });
-      // Buttons
-      document.getElementById('generateBtn').addEventListener('click', generateSunoBlock);
-      document.getElementById('randomBtn').addEventListener('click', randomizeForm);
-      document.getElementById('populateBtn').addEventListener('click', populateBuilders);
-      document.getElementById('copySunoBtn').addEventListener('click', copySunoBlock);
-      document.getElementById('saveDraftBtn').addEventListener('click', saveDraft);
-      document.getElementById('loadDraftBtn').addEventListener('click', loadDraft);
-      document.getElementById('resetBtn').addEventListener('click', resetForm);
-      document.getElementById('diagBtn').addEventListener('click', runDiagnostics);
-      document.getElementById('genImageBtn').addEventListener('click', generateImage);
-      document.getElementById('genVideoBtn').addEventListener('click', generateVideo);
-      document.getElementById('stitchBtn').addEventListener('click', stitchClips);
-      document.getElementById('clearClipsBtn').addEventListener('click', clearClips);
-      // Copy buttons
-      document.getElementById('copySongPromptBtn').addEventListener('click', () => copyToClipboard(document.getElementById('songPrompt').value));
-      document.getElementById('copyArtBtn').addEventListener('click', () => copyToClipboard(document.getElementById('artPrompt').value));
-      document.getElementById('copyVideoBtn').addEventListener('click', () => copyToClipboard(document.getElementById('videoPrompt').value));
-      document.getElementById('clearArtImgsBtn').addEventListener('click', () => imgGrid.innerHTML = '');
-      document.getElementById('clearVideoPreviewBtn').addEventListener('click', () => {
-        videoPreview.innerHTML = '';
-        videoOut.textContent = 'Video status…';
-      });
-      // Try to enable video button if server says it's on
-      await refreshVideoEnabled();
-    }
-    function togglePasswordVisibility() {
-      const type = openaiApiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
-      openaiApiKeyInput.setAttribute('type', type);
-      togglePassword.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
     }
-    function setupDrop(dropEl, onFiles) {
-      dropEl.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        dropEl.classList.add('drag');
-      });
-      dropEl.addEventListener('dragleave', () => dropEl.classList.remove('drag'));
-      dropEl.addEventListener('drop', (e) => {
-        e.preventDefault();
-        dropEl.classList.remove('drag');
-        if (e.dataTransfer.files?.length) onFiles(e.dataTransfer.files);
-      });
-    }
-    // ---------- UI helpers ----------
-    function showOverlay(msg, pct = null) {
-      processingOverlay.style.display = 'flex';
-      processingMessage.textContent = msg || 'Processing...';
-      if (typeof pct === 'number') progressFill.style.width = `${Math.max(0, Math.min(100, pct))}%`;
-      else progressFill.style.width = '0%';
-    }
-    function hideOverlay() {
-      processingOverlay.style.display = 'none';
-      progressFill.style.width = '0%';
     }
-    function showModal(html) {
-      modalBody.innerHTML = html;
-      infoModal.style.display = 'flex';
-    }
-    function showApiStatus(type, message) {
-      apiStatusDisplay.style.display = 'flex';
-      const statusIndicator = apiStatusDisplay.querySelector('.status-indicator');
-      if (type === 'success') statusIndicator.className = 'status-indicator status-ok';
-      else if (type === 'error') statusIndicator.className = 'status-indicator status-error';
-      else statusIndicator.className = 'status-indicator status-warn';
-      apiStatusMessage.textContent = message;
-    }
-    function showApiError(message) {
-      apiErrorDisplay.textContent = message;
-      apiErrorDisplay.style.display = 'block';
     }
-    function hideApiError() {
-      apiErrorDisplay.style.display = 'none';
     }
-    async function copyToClipboard(text) {
       try {
-        await navigator.clipboard.writeText(text || '');
-        showModal(`<p class="small">Copied to clipboard ✅</p>`);
       } catch {
-        showModal(`<p class="small">Could not copy automatically. Select and copy manually.</p>`);
       }
     }
-    // ---------- API key ----------
-    function saveApiKey() {
-      const key = openaiApiKeyInput.value.trim();
-      if (!key) return showApiStatus('error', 'Please enter an API key');
-      if (!key.startsWith('sk-')) return showApiStatus('error', 'Invalid API key format. Should start with "sk-"');
-      apiKey = key;
-      localStorage.setItem('openaiApiKey', key);
-      openaiApiKeyInput.value = '••••••••••••••••••••••••••••••••••••••••';
-      showApiStatus('success', 'API key saved successfully');
-      hideApiError();
-      checkServerHealth();
     }
-    async function testApiKey() {
-      const key = openaiApiKeyInput.value.trim();
-      if (!key) return showApiStatus('error', 'Please enter an API key to test');
       try {
-        showOverlay('Testing API key...', 30);
-        hideApiError();
-        const response = await fetch(`${API_BASE}/test-api-key`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ api_key: key })
         });
         const data = await safeJson(response);
         hideOverlay();
-        if (response.ok) {
-          showApiStatus('success', `API key looks valid. Model: ${data.model || 'unknown'}`);
-        } else {
-          showApiStatus('error', data.error || 'API key test failed');
-          showApiError(data.error || 'API key test failed');
-        }
       } catch (error) {
         hideOverlay();
-        showApiStatus('error', `Error testing API key: ${error.message}`);
-        showApiError(`Error testing API key: ${error.message}`);
-        console.error('API key test error:', error);
       }
     }
-    // ---------- Health ----------
-    async function checkServerHealth() {
       try {
-        const response = await fetch(`${API_BASE}/health`);
-        if (!response.ok) throw new Error('Server not responding');
-        const healthData = await response.json();
-        if (healthData.ok) {
-          healthPill.querySelector('.status-indicator').className = 'status-indicator status-ok';
         }
-        // API key status: if server has a key (or accepts header key)
-        apiKeyStatus.textContent = apiKey ? 'yes (browser)' : (healthData.hasOpenAIKey ? 'yes (server)' : 'no');
-        apiKeyStatus.style.color = (apiKey || healthData.hasOpenAIKey) ? '#2dd4bf' : '#ff5a7a';
-        // Model & video
-        modelStatus.textContent = healthData.model || 'unknown';
-        modelStatus.style.color = '#2dd4bf';
-        videoStatus.textContent = healthData.videoEnabled ? 'on' : 'off';
-        videoStatus.style.color = healthData.videoEnabled ? '#2dd4bf' : '#ffb400';
       } catch (error) {
-        healthPill.querySelector('.status-indicator').className = 'status-indicator status-error';
-        console.error('Health check failed:', error);
       }
     }
-    async function refreshVideoEnabled() {
-      try {
-        const r = await fetch(`${API_BASE}/health`);
-        if (!r.ok) return;
-        const h = await r.json();
-        const btn = document.getElementById('genVideoBtn');
-        btn.disabled = !h.videoEnabled;
-      } catch {
-        /* ignore */
-      }
-    }
-    // ---------- Form handling ----------
-    function getFormData() {
-      const splitLines = (v) =>
-        String(v || '')
-          .split(/\r?\n/)
-          .map(s => s.trim())

+.filter(Boolean);
+      return {
+        songTitle: document.getElementById('songTitle').value.trim(),
+        occasion: document.getElementById('occasion').value.trim(),
+        buyerName: document.getElementById('buyerName').value.trim(),
+        recipientName: document.getElementById('recipientName').value.trim(),
+        relationship: document.getElementById('relationship').value.trim(),
+        tone: document.getElementById('tone').value.trim(),
+        mainGenre: document.getElementById('mainGenre').value.trim(),
+        secondaryGenres: document.getElementById('secondaryGenres').value.trim(),
+        tempo: document.getElementById('tempo').value.trim(),
+        vocalStyle: document.getElementById('vocalStyle').value.trim(),
+        instrumentationNotes: document.getElementById('instrumentationNotes').value.trim(),
+        languageLevel: document.getElementById('languageLevel').value,
+        packageLevel: document.getElementById('packageLevel').value,
+        wantsArtwork: document.getElementById('wantsArtwork').checked,
+        wantsVideo: document.getElementById('wantsVideo').checked,
+        keyFacts: splitLines(document.getElementById('keyFacts').value),
+        stories: splitLines(document.getElementById('stories').value),
+        mainMessage: document.getElementById('mainMessage').value.trim(),
+        namesPlaces: splitLines(document.getElementById('namesPlaces').value),
+        visualStyle: document.getElementById('visualStyle').value.trim(),
+        visualMood: document.getElementById('visualMood').value.trim(),
+        visualPlacesThemes: splitLines(document.getElementById('visualPlacesThemes').value),
+        visualText: document.getElementById('visualText').value.trim()
+      };
+    }
+    async function generateSunoBlock() {
+      if (!apiKey) {
+        return showModal('<p class="small">Please save your OpenAI API key first.</p>');
       }
+      const formData = getFormData();
+      if (!formData.buyerName || !formData.recipientName) {
+        return showModal('<p class="small">Please fill in at least buyer and recipient names.</p>');
       }
+      try {
+        showOverlay('Generating Suno block...', 30);
+        const response = await fetch(`${API_BASE}/generate-suno-block`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-OpenAI-API-Key': apiKey
+          },
+          body: JSON.stringify(formData)
+        });
+        const data = await safeJson(response);
+        hideOverlay();
+        if (response.ok) {
+          sunoBlockOut.textContent = data.sunoBlock;
+          warningsDisplay.textContent = data.warnings || '';
+          showModal('<p class="small">Suno block generated successfully ✅</p>');
+        } else {
+          showModal(`<p class="small">Error: ${data.error || 'Failed to generate Suno block'}</p>`);
+        }
+      } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
+        console.error('Generate error:', error);
       }
     }
+    async function populateBuilders() {
+      if (!sunoBlockOut.textContent.trim()) {
+        return showModal('<p class="small">Generate a Suno block first.</p>');
+      }
+      try {
+        showOverlay('Populating builders...', 30);
+        const response = await fetch(`${API_BASE}/populate-builders`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-OpenAI-API-Key': apiKey
+          },
+          body: JSON.stringify({
+            sunoBlock: sunoBlockOut.textContent.trim(),
+            formData: getFormData()
+          })
+        });
+        const data = await safeJson(response);
+        hideOverlay();
+        if (response.ok) {
+          document.getElementById('songPrompt').value = data.songPrompt || '';
+          document.getElementById('artPrompt').value = data.artPrompt || '';
+          document.getElementById('videoPrompt').value = data.videoPrompt || '';
+          showModal('<p class="small">Builders populated successfully ✅</p>');
+        } else {
+          showModal(`<p class="small">Error: ${data.error || 'Failed to populate builders'}</p>`);
+        }
+      } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
+        console.error('Populate error:', error);
+      }
     }
+    async function generateImage() {
+      const prompt = document.getElementById('artPrompt').value.trim();
+      if (!prompt) {
+        return showModal('<p class="small">Please populate the artwork prompt first.</p>');
+      }
+      try {
+        showOverlay('Generating image...', 30);
+        const response = await fetch(`${API_BASE}/generate-image`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-OpenAI-API-Key': apiKey
+          },
+          body: JSON.stringify({ prompt })
+        });
+        const data = await safeJson(response);
+        hideOverlay();
+        if (response.ok) {
+          imgGrid.innerHTML = '';
+          data.imageUrls.forEach(url => {
+            const img = document.createElement('img');
+            img.src = url;
+            img.className = 'thumb';
+            imgGrid.appendChild(img);
+          });
+          showModal('<p class="small">Image generated successfully ✅</p>');
+        } else {
+          showModal(`<p class="small">Error: ${data.error || 'Failed to generate image'}</p>`);
+        }
+      } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
+        console.error('Image generation error:', error);
       }
     }
+    async function generateVideo() {
+      const prompt = document.getElementById('videoPrompt').value.trim();
+      if (!prompt) {
+        return showModal('<p class="small">Please populate the video prompt first.</p>');
+      }
+      try {
+        showOverlay('Generating video...', 30);
+        const response = await fetch(`${API_BASE}/generate-video`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-OpenAI-API-Key': apiKey
+          },
+          body: JSON.stringify({ prompt })
+        });
+        const data = await safeJson(response);
+        hideOverlay();
+        if (response.ok) {
+          videoOut.textContent = 'Video generated successfully';
+          videoPreview.innerHTML = `
+            <video controls class="thumb" style="width:100%">
+              <source src="${data.videoUrl}" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          `;
+          showModal('<p class="small">Video generated successfully ✅</p>');
+        } else {
+          showModal(`<p class="small">Error: ${data.error || 'Failed to generate video'}</p>`);
+        }
+      } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
+        console.error('Video generation error:', error);
+      }
     }
+    // ---------- File handling ----------
+    function handleSongFileUpload() {
+      const file = songFileInput.files[0];
+      if (!file) return;
+      songFile = file;
+      songFileName.textContent = file.name;
+      songFileInfo.style.display = 'flex';
+      uploadOut.textContent = 'Song file ready for upload';
     }
+    function removeSongFile() {
+      songFile = null;
+      songFileInput.value = '';
+      songFileInfo.style.display = 'none';
+      uploadOut.textContent = 'Upload status...';
     }
+    function handleClipFilesUpload() {
+      const files = Array.from(clipFilesInput.files);
+      if (!files.length) return;
+      videoClips = files.map((file, i) => ({
+        id: Date.now() + i,
+        file,
+        name: file.name
+      }));
+      renderClipQueue();
     }
+    function renderClipQueue() {
+      if (!videoClips.length) {
+        clipQueueWrap.innerHTML = '<div class="small" style="margin-top:6px">No clips queued.</div>';
+        return;
       }
+      clipQueueWrap.innerHTML = '';
+      videoClips.forEach((clip, idx) => {
+        const item = document.createElement('div');
+        item.className = 'clipItem';
+        item.innerHTML = `
+          <span class="clipName">${clip.name}</span>
+          <div class="clipBtns">
+            <button class="miniBtn" data-id="${clip.id}" data-action="move-up">↑</button>
+            <button class="miniBtn" data-id="${clip.id}" data-action="move-down">↓</button>
+            <button class="miniBtn" data-id="${clip.id}" data-action="remove">×</button>
+          </div>
+        `;
+        clipQueueWrap.appendChild(item);
       });
+      clipQueueWrap.querySelectorAll('.clipBtns button').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const id = parseInt(e.target.getAttribute('data-id'));
+          const action = e.target.getAttribute('data-action');
+          handleClipAction(id, action);
         });
       });
     }
+    function handleClipAction(id, action) {
+      const idx = videoClips.findIndex(c => c.id === id);
+      if (idx === -1) return;
+      if (action === 'remove') {
+        videoClips.splice(idx, 1);
+      } else if (action === 'move-up' && idx > 0) {
+        [videoClips[idx], videoClips[idx - 1]] = [videoClips[idx - 1], videoClips[idx]];
+      } else if (action === 'move-down' && idx < videoClips.length - 1) {
+        [videoClips[idx], videoClips[idx + 1]] = [videoClips[idx + 1], videoClips[idx]];
+      }
+      renderClipQueue();
     }
+    async function stitchClips() {
+      if (!songFile) {
+        return showModal('<p class="small">Please upload a song file first.</p>');
+      }
+      if (!videoClips.length) {
+        return showModal('<p class="small">Please upload at least one video clip.</p>');
+      }
+      try {
+        showOverlay('Stitching clips...', 30);
+        // In a real implementation, you would upload files and call the stitch API
+        // This is a simplified version that simulates the process
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        showOverlay('Stitching clips...', 60);
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        showOverlay('Stitching clips...', 90);
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        hideOverlay();
+        showModal('<p class="small">Clips stitched successfully! ✅</p>');
+        uploadOut.textContent = 'Stitching complete. Download: musicVID.mp4';
+      } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
+        console.error('Stitch error:', error);
+      }
     }
+    function clearClips() {
+      videoClips = [];
+      clipFilesInput.value = '';
+      renderClipQueue();
+      uploadOut.textContent = 'Upload status...';
     }
+    // ---------- Utility functions ----------
+    async function safeJson(response) {
       try {
+        return await response.json();
       } catch {
+        return { error: 'Invalid server response' };
       }
     }
+    function copySunoBlock() {
+      copyToClipboard(sunoBlockOut.textContent);
+    }
+    function saveDraft() {
+      const draft = {
+        formData: getFormData(),
+        sunoBlock: sunoBlockOut.textContent,
+        songPrompt: document.getElementById('songPrompt').value,
+        artPrompt: document.getElementById('artPrompt').value,
+        videoPrompt: document.getElementById('videoPrompt').value
+      };
+      localStorage.setItem('fiverrMusicDraft', JSON.stringify(draft));
+      showModal('<p class="small">Draft saved successfully ✅</p>');
     }
+    function loadDraft() {
+      const saved = localStorage.getItem('fiverrMusicDraft');
+      if (!saved) return showModal('<p class="small">No saved draft found.</p>');
       try {
+        const draft = JSON.parse(saved);
+        // Restore form
+        document.getElementById('songTitle').value = draft.formData.songTitle || '';
+        document.getElementById('occasion').value = draft.formData.occasion || '';
+        document.getElementById('buyerName').value = draft.formData.buyerName || '';
+        document.getElementById('recipientName').value = draft.formData.recipientName || '';
+        document.getElementById('relationship').value = draft.formData.relationship || '';
+        document.getElementById('tone').value = draft.formData.tone || '';
+        document.getElementById('mainGenre').value = draft.formData.mainGenre || '';
+        document.getElementById('secondaryGenres').value = draft.formData.secondaryGenres || '';
+        document.getElementById('tempo').value = draft.formData.tempo || '';
+        document.getElementById('vocalStyle').value = draft.formData.vocalStyle || '';
+        document.getElementById('instrumentationNotes').value = draft.formData.instrumentationNotes || '';
+        document.getElementById('languageLevel').value = draft.formData.languageLevel || 'no limit';
+        document.getElementById('packageLevel').value = draft.formData.packageLevel || 'premium';
+        document.getElementById('wantsArtwork').checked = draft.formData.wantsArtwork || false;
+        document.getElementById('wantsVideo').checked = draft.formData.wantsVideo || false;
+        document.getElementById('keyFacts').value = draft.formData.keyFacts?.join('\n') || '';
+        document.getElementById('stories').value = draft.formData.stories?.join('\n') || '';
+        document.getElementById('mainMessage').value = draft.formData.mainMessage || '';
+        document.getElementById('namesPlaces').value = draft.formData.namesPlaces?.join('\n') || '';
+        document.getElementById('visualStyle').value = draft.formData.visualStyle || '';
+        document.getElementById('visualMood').value = draft.formData.visualMood || '';
+        document.getElementById('visualPlacesThemes').value = draft.formData.visualPlacesThemes?.join('\n') || '';
+        document.getElementById('visualText').value = draft.formData.visualText || '';
+        // Restore outputs
+        sunoBlockOut.textContent = draft.sunoBlock || '';
+        document.getElementById('songPrompt').value = draft.songPrompt || '';
+        document.getElementById('artPrompt').value = draft.artPrompt || '';
+        document.getElementById('videoPrompt').value = draft.videoPrompt || '';
+        showModal('<p class="small">Draft loaded successfully ✅</p>');
+      } catch (error) {
+        showModal(`<p class="small">Error loading draft: ${error.message}</p>`);
+      }
+    }
+    function resetForm() {
+      if (confirm('Are you sure you want to reset the entire form?')) {
+        document.querySelectorAll('input, textarea, select').forEach(el => {
+          if (el.type === 'checkbox') el.checked = false;
+          else el.value = '';
         });
+        sunoBlockOut.textContent = 'Suno block will appear here...';
+        warningsDisplay.textContent = '';
+        document.getElementById('songPrompt').value = '';
+        document.getElementById('artPrompt').value = '';
+        document.getElementById('videoPrompt').value = '';
+        imgGrid.innerHTML = '';
+        videoPreview.innerHTML = '';
+        videoOut.textContent = 'Video status...';
+        removeSongFile();
+        clearClips();
+        showModal('<p class="small">Form reset complete ✅</p>');
+      }
+    }
+    async function runDiagnostics() {
+      try {
+        showOverlay('Running diagnostics...', 30);
+        const response = await fetch(`${API_BASE}/diagnostics`, {
+          headers: { 'X-OpenAI-API-Key': apiKey }
+        });
         const data = await safeJson(response);
         hideOverlay();
+        diagOut.textContent = JSON.stringify(data, null, 2);
+        diagOut.style.display = 'block';
+        showModal('<p class="small">Diagnostics complete ✅</p>');
       } catch (error) {
         hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
       }
     }
+    async function randomizeForm() {
+      if (!apiKey) {
+        return showModal('<p class="small">Please save your OpenAI API key first.</p>');
+      }
       try {
+        showOverlay('Randomizing form...', 30);
+        const response = await fetch(`${API_BASE}/randomize-form`, {
+          headers: { 'X-OpenAI-API-Key': apiKey }
+        });
+        const data = await safeJson(response);
+        hideOverlay();
+        if (response.ok) {
+          document.getElementById('songTitle').value = data.songTitle || '';
+          document.getElementById('occasion').value = data.occasion || '';
+          document.getElementById('buyerName').value = data.buyerName || '';
+          document.getElementById('recipientName').value = data.recipientName || '';
+          document.getElementById('relationship').value = data.relationship || '';
+          document.getElementById('tone').value = data.tone || '';
+          document.getElementById('mainGenre').value = data.mainGenre || '';
+          document.getElementById('secondaryGenres').value = data.secondaryGenres || '';
+          document.getElementById('tempo').value = data.tempo || '';
+          document.getElementById('vocalStyle').value = data.vocalStyle || '';
+          document.getElementById('instrumentationNotes').value = data.instrumentationNotes || '';
+          document.getElementById('keyFacts').value = data.keyFacts?.join('\n') || '';
+          document.getElementById('stories').value = data.stories?.join('\n') || '';
+          document.getElementById('mainMessage').value = data.mainMessage || '';
+          document.getElementById('namesPlaces').value = data.namesPlaces?.join('\n') || '';
+          showModal('<p class="small">Form randomized successfully ✅</p>');
+        } else {
+          showModal(`<p class="small">Error: ${data.error || 'Failed to randomize form'}</p>`);
         }
       } catch (error) {
+        hideOverlay();
+        showModal(`<p class="small">Error: ${error.message}</p>`);
       }
     }
+    // ---------- Initialize ----------
+    init();
+  </script>
+</body>
+</html>