Upload folder using huggingface_hub

index.html

@@ -1,447 +1,1204 @@
-.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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music Video Creator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #4a6bff;
+            --primary-dark: #3a5bef;
+            --secondary: #f8f9fa;
+            --text: #333;
+            --text-light: #666;
+            --white: #ffffff;
+            --error: #ff4444;
+            --success: #28a745;
+            --border: #e0e0e0;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --radius: 8px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f7ff;
+            color: var(--text);
+            line-height: 1.6;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+        }
+
+        header {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            padding: 20px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 24px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .logo i {
+            font-size: 30px;
+        }
+
+        .header-actions {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: var(--radius);
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background-color: var(--secondary);
+            color: var(--text);
+        }
+
+        .btn-secondary:hover {
+            background-color: #e9ecef;
+        }
+
+        .btn-small {
+            padding: 4px 12px;
+            font-size: 14px;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            padding: 30px;
+        }
+
+        .section {
+            background: white;
+            border-radius: var(--radius);
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .section-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: var(--text-light);
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(74, 107, 255, 0.2);
+        }
+
+        textarea.form-control {
+            min-height: 100px;
+            resize: vertical;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .checkbox-group input {
+            width: auto;
+        }
+
+        .output-section {
+            background: #f8f9fa;
+            border-radius: var(--radius);
+            padding: 15px;
+            min-height: 100px;
+            font-family: monospace;
+            font-size: 13px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            position: relative;
+        }
+
+        .output-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .thumb-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .thumb {
+            width: 100%;
+            height: 100px;
+            object-fit: cover;
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+
+        .thumb:hover {
+            transform: scale(1.05);
+        }
+
+        .file-upload {
+            border: 2px dashed var(--border);
+            border-radius: var(--radius);
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .file-upload:hover {
+            border-color: var(--primary);
+            background-color: rgba(74, 107, 255, 0.05);
+        }
+
+        .file-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-top: 10px;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: var(--radius);
+        }
+
+        .clip-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px;
+            background: white;
+            border-radius: var(--radius);
+            margin-bottom: 5px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background: white;
+            padding: 30px;
+            border-radius: var(--radius);
+            max-width: 500px;
+            width: 90%;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .modal-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: var(--primary);
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: var(--text-light);
+        }
+
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 999;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 18px;
+        }
+
+        .progress-bar {
+            width: 200px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 2px;
+            margin-top: 20px;
+            overflow: hidden;
+        }
+
+        .progress {
+            height: 100%;
+            background: white;
+            width: 0%;
+            transition: width 0.3s;
+        }
+
+        .anycoder-link {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: white;
+            text-decoration: none;
+            font-size: 12px;
+            opacity: 0.8;
+        }
+
+        .anycoder-link:hover {
+            opacity: 1;
+            text-decoration: underline;
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+                padding: 15px;
+            }
+
+            header {
+                flex-direction: column;
+                gap: 15px;
+                text-align: center;
+            }
+
+            .header-actions {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-music"></i>
+                <span>Music Video Creator</span>
+            </div>
+            <div class="header-actions">
+                <button class="btn btn-secondary btn-small" onclick="showApiKeyModal()">
+                    <i class="fas fa-key"></i> API Key
+                </button>
+                <button class="btn btn-secondary btn-small" onclick="saveDraft()">
+                    <i class="fas fa-save"></i> Save Draft
+                </button>
+                <button class="btn btn-secondary btn-small" onclick="loadDraft()">
+                    <i class="fas fa-folder-open"></i> Load Draft
+                </button>
+                <button class="btn btn-secondary btn-small" onclick="resetForm()">
+                    <i class="fas fa-undo"></i> Reset
+                </button>
+            </div>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
+                Built with anycoder
+            </a>
+        </header>
+
+        <div class="main-content">
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-info-circle"></i>
+                    <span>Song Information</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="songTitle">Song Title</label>
+                    <input type="text" id="songTitle" class="form-control" placeholder="Enter song title">
+                </div>
+
+                <div class="form-group">
+                    <label for="occasion">Occasion</label>
+                    <input type="text" id="occasion" class="form-control" placeholder="e.g., Birthday, Anniversary">
+                </div>
+
+                <div class="form-group">
+                    <label for="buyerName">Buyer Name</label>
+                    <input type="text" id="buyerName" class="form-control" placeholder="Your name">
+                </div>
+
+                <div class="form-group">
+                    <label for="recipientName">Recipient Name</label>
+                    <input type="text" id="recipientName" class="form-control" placeholder="Who is this for?">
+                </div>
+
+                <div class="form-group">
+                    <label for="relationship">Relationship</label>
+                    <input type="text" id="relationship" class="form-control" placeholder="e.g., Mother, Friend">
+                </div>
+
+                <div class="form-group">
+                    <label for="tone">Tone</label>
+                    <input type="text" id="tone" class="form-control" placeholder="e.g., Happy, Romantic">
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-music"></i>
+                    <span>Music Details</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="mainGenre">Main Genre</label>
+                    <input type="text" id="mainGenre" class="form-control" placeholder="e.g., Pop, Rock">
+                </div>
+
+                <div class="form-group">
+                    <label for="secondaryGenres">Secondary Genres</label>
+                    <input type="text" id="secondaryGenres" class="form-control" placeholder="Additional genres">
+                </div>
+
+                <div class="form-group">
+                    <label for="tempo">Tempo</label>
+                    <input type="text" id="tempo" class="form-control" placeholder="e.g., Fast, Slow">
+                </div>
+
+                <div class="form-group">
+                    <label for="vocalStyle">Vocal Style</label>
+                    <input type="text" id="vocalStyle" class="form-control" placeholder="e.g., Male, Female">
+                </div>
+
+                <div class="form-group">
+                    <label for="instrumentationNotes">Instrumentation Notes</label>
+                    <textarea id="instrumentationNotes" class="form-control" placeholder="Any specific instruments?"></textarea>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-story"></i>
+                    <span>Content Details</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="keyFacts">Key Facts (one per line)</label>
+                    <textarea id="keyFacts" class="form-control" placeholder="Important facts about the recipient"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="stories">Stories (one per line)</label>
+                    <textarea id="stories" class="form-control" placeholder="Memorable stories to include"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="mainMessage">Main Message</label>
+                    <textarea id="mainMessage" class="form-control" placeholder="The core message of the song"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="namesPlaces">Names/Places (one per line)</label>
+                    <textarea id="namesPlaces" class="form-control" placeholder="Important names and places"></textarea>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-palette"></i>
+                    <span>Visual Style</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="visualStyle">Visual Style</label>
+                    <input type="text" id="visualStyle" class="form-control" placeholder="e.g., Cartoon, Realistic">
+                </div>
+
+                <div class="form-group">
+                    <label for="visualMood">Visual Mood</label>
+                    <input type="text" id="visualMood" class="form-control" placeholder="e.g., Bright, Moody">
+                </div>
+
+                <div class="form-group">
+                    <label for="visualPlacesThemes">Places/Themes (one per line)</label>
+                    <textarea id="visualPlacesThemes" class="form-control" placeholder="Visual themes to include"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="visualText">Visual Text</label>
+                    <input type="text" id="visualText" class="form-control" placeholder="Any text to include in visuals">
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-cog"></i>
+                    <span>Package Options</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="languageLevel">Language Level</label>
+                    <select id="languageLevel" class="form-control">
+                        <option value="no limit">No Limit</option>
+                        <option value="simple">Simple</option>
+                        <option value="advanced">Advanced</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="packageLevel">Package Level</label>
+                    <select id="packageLevel" class="form-control">
+                        <option value="basic">Basic</option>
+                        <option value="premium">Premium</option>
+                        <option value="deluxe">Deluxe</option>
+                    </select>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="wantsArtwork">
+                    <label for="wantsArtwork">Include Artwork</label>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="wantsVideo">
+                    <label for="wantsVideo">Include Video</label>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-robot"></i>
+                    <span>Generate Suno Block</span>
+                </div>
+
+                <button class="btn btn-primary" onclick="generateSunoBlock()">
+                    <i class="fas fa-magic"></i> Generate Suno Block
+                </button>
+
+                <div class="output-section" id="sunoBlockOut">
+                    Suno block will appear here...
+                </div>
+
+                <div class="output-actions">
+                    <button class="btn btn-secondary btn-small" onclick="copySunoBlock()">
+                        <i class="fas fa-copy"></i> Copy
+                    </button>
+                    <button class="btn btn-secondary btn-small" onclick="populateBuilders()">
+                        <i class="fas fa-arrow-right"></i> Populate Builders
+                    </button>
+                </div>
+
+                <div id="warningsDisplay" style="color: var(--error); margin-top: 10px; font-size: 13px;"></div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-code"></i>
+                    <span>Builder Prompts</span>
+                </div>
+
+                <div class="form-group">
+                    <label for="songPrompt">Song Prompt</label>
+                    <textarea id="songPrompt" class="form-control" placeholder="Generated song prompt will appear here"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="artPrompt">Artwork Prompt</label>
+                    <textarea id="artPrompt" class="form-control" placeholder="Generated artwork prompt will appear here"></textarea>
+                    <button class="btn btn-primary btn-small" onclick="generateImage()" style="margin-top: 10px;">
+                        <i class="fas fa-image"></i> Generate Image
+                    </button>
+                </div>
+
+                <div class="form-group">
+                    <label for="videoPrompt">Video Prompt</label>
+                    <textarea id="videoPrompt" class="form-control" placeholder="Generated video prompt will appear here"></textarea>
+                    <button class="btn btn-primary btn-small" onclick="generateVideo()" style="margin-top: 10px;">
+                        <i class="fas fa-video"></i> Generate Video
+                    </button>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-images"></i>
+                    <span>Generated Images</span>
+                </div>
+
+                <div id="imgGrid" class="thumb-grid">
+                    <!-- Images will appear here -->
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-file-video"></i>
+                    <span>Video Preview</span>
+                </div>
+
+                <div id="videoPreview" style="margin-bottom: 10px;">
+                    <!-- Video will appear here -->
+                </div>
+
+                <div id="videoOut" style="font-size: 13px; color: var(--text-light);">
+                    Video status...
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-file-audio"></i>
+                    <span>Song File Upload</span>
+                </div>
+
+                <div class="file-upload" onclick="document.getElementById('songFileInput').click()">
+                    <i class="fas fa-cloud-upload-alt" style="font-size: 40px; color: var(--primary); margin-bottom: 10px;"></i>
+                    <p>Click to upload song file</p>
+                    <input type="file" id="songFileInput" style="display: none;" accept="audio/*" onchange="handleSongFileUpload()">
+                </div>
+
+                <div id="songFileInfo" style="display: none;">
+                    <span id="songFileName"></span>
+                    <button class="btn btn-secondary btn-small" onclick="removeSongFile()">
+                        <i class="fas fa-trash"></i> Remove
+                    </button>
+                </div>
+
+                <div id="uploadOut" style="margin-top: 10px; font-size: 13px; color: var(--text-light);">
+                    Upload status...
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-film"></i>
+                    <span>Video Clips</span>
+                </div>
+
+                <div class="file-upload" onclick="document.getElementById('clipFilesInput').click()">
+                    <i class="fas fa-cloud-upload-alt" style="font-size: 40px; color: var(--primary); margin-bottom: 10px;"></i>
+                    <p>Click to upload video clips</p>
+                    <input type="file" id="clipFilesInput" style="display: none;" accept="video/*" multiple onchange="handleClipFilesUpload()">
+                </div>
+
+                <div id="clipQueueWrap" style="margin-top: 15px;">
+                    <div class="small" style="margin-top:6px">No clips queued.</div>
+                </div>
+
+                <div style="margin-top: 15px; display: flex; gap: 10px;">
+                    <button class="btn btn-primary btn-small" onclick="stitchClips()">
+                        <i class="fas fa-link"></i> Stitch Clips
+                    </button>
+                    <button class="btn btn-secondary btn-small" onclick="clearClips()">
+                        <i class="fas fa-trash"></i> Clear All
+                    </button>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">
+                    <i class="fas fa-tools"></i>
+                    <span>Advanced Tools</span>
+                </div>
+
+                <button class="btn btn-secondary" onclick="randomizeForm()" style="margin-bottom: 10px;">
+                    <i class="fas fa-random"></i> Randomize Form
+                </button>
+
+                <button class="btn btn-secondary" onclick="runDiagnostics()">
+                    <i class="fas fa-stethoscope"></i> Run Diagnostics
+                </button>
+
+                <div id="diagOut" style="display: none; margin-top: 15px; font-family: monospace; font-size: 12px; background: #f8f9fa; padding: 10px; border-radius: var(--radius);"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal for API Key -->
+    <div id="apiKeyModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">API Key Settings</h2>
+                <button class="close-btn" onclick="closeApiKeyModal()">&times;</button>
+            </div>
+            <div class="form-group">
+                <label for="apiKeyInput">OpenAI API Key</label>
+                <input type="password" id="apiKeyInput" class="form-control" placeholder="Enter your OpenAI API key">
+            </div>
+            <button class="btn btn-primary" onclick="saveApiKey()">
+                <i class="fas fa-save"></i> Save API Key
+            </button>
+        </div>
+    </div>
+
+    <!-- General Modal -->
+    <div id="generalModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">Notification</h2>
+                <button class="close-btn" onclick="closeModal()">&times;</button>
+            </div>
+            <div id="modalContent"></div>
+        </div>
+    </div>
+
+    <!-- Overlay -->
+    <div id="overlay" class="overlay">
+        <div>
+            <div id="overlayText">Processing...</div>
+            <div class="progress-bar">
+                <div class="progress" id="progressBar"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Configuration
+        const API_BASE = 'https://api.example.com'; // Replace with your actual API base
+        let apiKey = localStorage.getItem('openaiApiKey') || '';
+        let songFile = null;
+        let videoClips = [];
+
+        // DOM Elements
+        const sunoBlockOut = document.getElementById('sunoBlockOut');
+        const warningsDisplay = document.getElementById('warningsDisplay');
+        const imgGrid = document.getElementById('imgGrid');
+        const videoPreview = document.getElementById('videoPreview');
+        const videoOut = document.getElementById('videoOut');
+        const songFileInput = document.getElementById('songFileInput');
+        const songFileName = document.getElementById('songFileName');
+        const songFileInfo = document.getElementById('songFileInfo');
+        const clipFilesInput = document.getElementById('clipFilesInput');
+        const clipQueueWrap = document.getElementById('clipQueueWrap');
+        const diagOut = document.getElementById('diagOut');
+        const uploadOut = document.getElementById('uploadOut');
+
+        // Initialize
+        function init() {
+            // Check if API key exists
+            if (apiKey) {
+                document.getElementById('apiKeyInput').value = '••••••••••••••••';
+            }
+
+            // Set up event listeners
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') {
+                    closeModal();
+                    closeApiKeyModal();
+                }
+            });
+        }
+
+        // Modal functions
+        function showModal(content) {
+            const modal = document.getElementById('generalModal');
+            const modalContent = document.getElementById('modalContent');
+            modalContent.innerHTML = content;
+            modal.style.display = 'flex';
+        }
+
+        function closeModal() {
+            document.getElementById('generalModal').style.display = 'none';
+        }
+
+        function showApiKeyModal() {
+            document.getElementById('apiKeyModal').style.display = 'flex';
+        }
+
+        function closeApiKeyModal() {
+            document.getElementById('apiKeyModal').style.display = 'none';
+        }
+
+        function saveApiKey() {
+            const keyInput = document.getElementById('apiKeyInput');
+            apiKey = keyInput.value.trim();
+
+            if (apiKey) {
+                localStorage.setItem('openaiApiKey', apiKey);
+                keyInput.value = '••••••••••••••••';
+                showModal('<p class="small">API key saved successfully ✅</p>');
+                closeApiKeyModal();
+            } else {
+                showModal('<p class="small">Please enter a valid API key</p>');
+            }
+        }
+
+        // Overlay functions
+        function showOverlay(text, progress = 0) {
+            const overlay = document.getElementById('overlay');
+            const overlayText = document.getElementById('overlayText');
+            const progressBar = document.getElementById('progressBar');
+
+            overlayText.textContent = text;
+            progressBar.style.width = `${progress}%`;
+            overlay.style.display = 'flex';
+        }
+
+        function hideOverlay() {
+            document.getElementById('overlay').style.display = 'none';
+        }
+
+        function updateOverlayProgress(progress) {
+            document.getElementById('progressBar').style.width = `${progress}%`;
+        }
+
+        // Utility functions
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => {
+                showModal('<p class="small">Copied to clipboard ✅</p>');
+            }).catch(err => {
+                showModal('<p class="small">Failed to copy: ' + err.message + '</p>');
+            });
+        }
+
+        function splitLines(text) {
+            return text.split('\n')
+                .map(line => line.trim())
+                .filter(Boolean);
+        }
+
+        function getFormData() {
+            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()
+            };
+        }
+
+        // Fixed image generation function with better error handling and timeout
+        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...', 10);
+
+                // Create a controller for aborting the request
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout
+
+                const response = await fetch(`${API_BASE}/generate-image`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-OpenAI-API-Key': apiKey
+                    },
+                    body: JSON.stringify({ prompt }),
+                    signal: controller.signal
+                });
+
+                clearTimeout(timeoutId);
+
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+                }
+
+                const data = await response.json();
+                hideOverlay();
+
+                if (data.imageUrls && data.imageUrls.length > 0) {
+                    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 {
+                    throw new Error('No image URLs returned from the API');
+                }
+            } catch (error) {
+                hideOverlay();
+                console.error('Image generation error:', error);
+
+                let errorMessage = 'Failed to generate image';
+                if (error.name === 'AbortError') {
+                    errorMessage = 'Image generation timed out. Please try again.';
+                } else if (error.message.includes('socket hang up')) {
+                    errorMessage = 'Connection to image generation service was interrupted. Please check your internet connection and try again.';
+                } else if (error.message) {
+                    errorMessage = error.message;
+                }
+
+                showModal(`<p class="small">Error: ${errorMessage}</p>`);
+            }
+        }
+
+        // Other functions remain the same as in your original code
+        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 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 functions
+        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);
+
+                // Simulate progress
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                updateOverlayProgress(60);
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                updateOverlayProgress(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