Update templates/index.html

templates/index.html

@@ -1,92 +1,217 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Suno Custom Cover Studio</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Suno Custom Studio 2026</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <style>
+        /* Responsive CSS */
+        :root {
+            --primary: #6366f1;
+            --bg: #0b0e14;
+            --card: #151921;
+            --input: #1c222d;
+            --text: #f8fafc;
+            --accent: #10b981;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            margin: 0;
+            padding: 15px;
+            display: flex;
+            justify-content: center;
+        }
+
+        .box {
+            width: 100%;
+            max-width: 700px;
+            background: var(--card);
+            padding: 25px;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+
+        @media (min-width: 600px) {
+            .grid { grid-template-columns: 1fr 1fr; }
+            .full { grid-column: span 2; }
+        }
+
+        label { font-size: 0.8rem; color: #718096; margin-bottom: 5px; display: block; }
+        input, select, textarea {
+            width: 100%;
+            padding: 12px;
+            background: var(--input);
+            border: 1px solid #2d3748;
+            border-radius: 8px;
+            color: white;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+
+        textarea { min-height: 120px; resize: vertical; }
+
+        button {
+            width: 100%;
+            padding: 15px;
+            background: var(--primary);
+            border: none;
+            color: white;
+            font-weight: bold;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        button:hover { filter: brightness(1.1); }
+
+        #log {
+            margin-top: 20px;
+            background: #000;
+            padding: 15px;
+            border-radius: 8px;
+            font-family: monospace;
+            font-size: 13px;
+            color: #94a3b8;
+            height: 120px;
+            overflow-y: auto;
+            border: 1px solid #222;
+        }
+
+        .dl-link {
+            display: none;
+            text-decoration: none;
+            background: var(--accent);
+            color: white;
+            text-align: center;
+            padding: 15px;
+            border-radius: 8px;
+            font-weight: bold;
+            margin-top: 15px;
+        }
+    </style>
 </head>
 <body>
-    <div class="box">
-        <div style="display:flex; justify-content:space-between; align-items:center;">
-            <h2>Suno AI Cover</h2>
-            <div style="color:#f59e0b">Credits: <span id="cr">?</span></div>
-        </div>
 
-        <div class="grid-input" style="margin-top:20px;">
-            <input type="password" id="tk" placeholder="Paste Suno API Token (sk-...)">
-            <button onclick="saveTk()" style="background:#334155;">Connect Token</button>
-        </div>
+<div class="box">
+    <div class="header">
+        <h2 style="margin:0;">Suno Studio</h2>
+        <div style="color:#f59e0b">Credits: <span id="cr">?</span></div>
+    </div>
 
-        <hr style="border:0.5px solid #334155; margin:20px 0;">
-
-        <div class="grid-input">
-            <div>
-                <label>Model</label>
-                <select id="mdl">
-                    <option value="V5">V5 (Recommended)</option>
-                    <option value="V4_5ALL">V4_5ALL (Max 1 min audio)</option>
-                    <option value="V4_5PLUS">V4_5PLUS</option>
-                    <option value="V4">V4</option>
-                </select>
-            </div>
-            <div>
-                <label>Audio URL</label>
-                <input type="text" id="url" placeholder="Direct .mp3 link">
-            </div>
-            <div>
-                <label>Style/Genre</label>
-                <input type="text" id="style" placeholder="e.g. Jazz, Pop, 120BPM">
-            </div>
-            <div>
-                <label>Title</label>
-                <input type="text" id="title" placeholder="Song Title">
-            </div>
-            <div class="full-width">
-                <label>Lyrics (Prompt)</label>
-                <textarea id="lyr" placeholder="Enter lyrics here (Custom Mode)..."></textarea>
+    <div class="grid">
+        <div class="full">
+            <label>API Token</label>
+            <div style="display:flex; gap:10px;">
+                <input type="password" id="tk" placeholder="sk-...">
+                <button onclick="saveTk()" style="margin:0; width:auto;">Connect</button>
             </div>
         </div>
+    </div>
 
-        <div style="margin-bottom:15px;">
-            <input type="checkbox" id="instr" style="width:auto;"> Instrumental Mode
-        </div>
+    <hr style="border:0.5px solid #2d3748; margin:25px 0;">
 
-        <button onclick="go()" style="width:100%;">Generate New Cover</button>
+    <div class="grid">
+        <div>
+            <label>Model Version</label>
+            <select id="mdl">
+                <option value="V5">V5 (Latest)</option>
+                <option value="V4_5ALL">V4_5ALL</option>
+                <option value="V4">V4</option>
+            </select>
+        </div>
+        <div>
+            <label>Source MP3 URL</label>
+            <input type="text" id="url" placeholder="https://...">
+        </div>
+        <div>
+            <label>Music Style (Genre/Mood)</label>
+            <input type="text" id="style" placeholder="e.g. unplugged, female voice">
+        </div>
+        <div>
+            <label>Song Title</label>
+            <input type="text" id="title" placeholder="My Creation">
+        </div>
+        <div class="full">
+            <label>Lyrics (Custom Mode)</label>
+            <textarea id="lyr" placeholder="[Verse 1]... [Chorus]..."></textarea>
+        </div>
+    </div>
 
-        <div id="log">Ready for task...</div>
-        <a id="dl" href="#" target="_blank" class="dl-btn">Download Finished Track</a>
+    <div style="margin-top:15px;">
+        <label style="display:inline; cursor:pointer;">
+            <input type="checkbox" id="instr" style="width:auto;"> Instrumental Only
+        </label>
     </div>
 
-    <script>
-        const socket = io();
-        const log = document.getElementById('log');
-
-        function saveTk() { socket.emit('save_token', {token: document.getElementById('tk').value}); }
-
-        function go() {
-            const payload = {
-                uploadUrl: document.getElementById('url').value,
-                model: document.getElementById('mdl').value,
-                style: document.getElementById('style').value,
-                title: document.getElementById('title').value || "Cover Track",
-                prompt: document.getElementById('lyr').value,
-                instrumental: document.getElementById('instr').checked,
-                customMode: true,
-                callBackUrl: "https://example.com/callback" // Placeholder
-            };
-            socket.emit('start_gen', payload);
-            document.getElementById('dl').style.display = 'none';
+    <button onclick="generate()">Start Generation</button>
+
+    <div id="log">Logs: Ready for input.</div>
+    
+    <a id="dl" href="#" target="_blank" class="dl-link">📥 Download Generated Track</a>
+</div>
+
+<script>
+    const socket = io();
+    const log = document.getElementById('log');
+
+    function saveTk() {
+        socket.emit('save_token', {token: document.getElementById('tk').value});
+    }
+
+    function generate() {
+        const payload = {
+            uploadUrl: document.getElementById('url').value,
+            customMode: true,
+            instrumental: document.getElementById('instr').checked,
+            model: document.getElementById('mdl').value,
+            prompt: document.getElementById('lyr').value,
+            style: document.getElementById('style').value,
+            title: document.getElementById('title').value || "Suno_Track",
+            // Note: callBackUrl is set in app.py logic
+        };
+        
+        socket.emit('start_gen', payload);
+        document.getElementById('dl').style.display = 'none';
+        addLog("Sending payload to Suno...");
+    }
+
+    function addLog(msg) {
+        log.innerHTML += `<div>[${new Date().toLocaleTimeString()}] ${msg}</div>`;
+        log.scrollTop = log.scrollHeight;
+    }
+
+    socket.on('credits', d => document.getElementById('cr').innerText = d.val);
+    
+    socket.on('status', d => {
+        addLog(d.msg);
+        if (d.done && d.url) {
+            // Pointing to the Flask Proxy Route
+            const encodedUrl = encodeURIComponent(d.url);
+            const title = encodeURIComponent(document.getElementById('title').value || "Track");
+            
+            const dlBtn = document.getElementById('dl');
+            dlBtn.href = `/download_proxy?url=${encodedUrl}&title=${title}`;
+            dlBtn.style.display = 'block';
         }
+    });
+</script>
 
-        socket.on('credits', d => document.getElementById('cr').innerText = d.val);
-        socket.on('status', d => {
-            log.innerHTML += `<div>[${new Date().toLocaleTimeString()}] ${d.msg}</div>`;
-            log.scrollTop = log.scrollHeight;
-            if(d.done) {
-                document.getElementById('dl').href = d.url;
-                document.getElementById('dl').style.display = 'block';
-            }
-        });
-    </script>
 </body>
 </html>