Spaces:

zenjoul80
/

SUNO_API

Running

App Files Files Community

zenjoul80 commited on Jan 26

Commit

1dc0da6

verified ·

1 Parent(s): 803188d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +55 -247

templates/index.html CHANGED Viewed

@@ -1,272 +1,80 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Suno Custom Studio</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <style>
-        /* 1. Global Reset & Variables */
-:root {
-    --primary: #6366f1;
-    --primary-hover: #4f46e5;
-    --bg-main: #0b0e14;
-    --bg-card: #151921;
-    --bg-input: #1c222d;
-    --text-main: #e1e1e1;
-    --text-muted: #718096;
-    --accent: #10b981;
-    --error: #ef4444;
-    --radius: 12px;
-    --transition: all 0.3s ease;
-}
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background-color: var(--bg-main);
-    color: var(--text-main);
-    line-height: 1.6;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    min-height: 100vh;
-}
-/* 2. Responsive Container */
-.box {
-    width: 100%;
-    background: var(--bg-card);
-    padding: 20px;
-    border-radius: var(--radius);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-    transition: var(--transition);
-}
-/* 3. Typography & Headers */
-h2 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 5px;
-}
-label {
-    display: block;
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    margin-bottom: 5px;
-    margin-top: 15px;
-}
-/* 4. Form Elements */
-input[type="text"],
-input[type="password"],
-select,
-textarea {
-    width: 100%;
-    padding: 12px 15px;
-    background: var(--bg-input);
-    color: white;
-    border: 1px solid #2d3748;
-    border-radius: 8px;
-    font-size: 16px; /* Prevents auto-zoom on iOS */
-    margin-bottom: 10px;
-    transition: border-color 0.2s;
-}
-input:focus, select:focus, textarea:focus {
-    outline: none;
-    border-color: var(--primary);
-}
-textarea {
-    min-height: 100px;
-    resize: vertical;
-}
-/* 5. Layout Helpers */
-.row {
-    display: flex;
-    flex-direction: column; /* Mobile Default */
-    gap: 10px;
-    margin-bottom: 15px;
-}
-.flex-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-/* 6. Buttons */
-button {
-    width: 100%;
-    padding: 14px;
-    background: var(--primary);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: var(--transition);
-}
-button:hover {
-    background: var(--primary-hover);
-    transform: translateY(-1px);
-}
-.token-btn {
-    width: auto;
-    padding: 10px 20px;
-    background: #2d3748;
-}
-/* 7. Logs & Status */
-#log {
-    margin-top: 20px;
-    background: #000;
-    padding: 15px;
-    border-radius: 6px;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.85rem;
-    color: #a0aec0;
-    max-height: 150px;
-    overflow-y: auto;
-    border: 1px solid #222;
-}
-.dl-btn {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    background: var(--accent);
-    margin-top: 15px;
-    padding: 14px;
-    border-radius: 8px;
-    color: white;
-    font-weight: bold;
-}
-/* =========================================
-   8. MEDIA QUERIES (RESPONSIVENESS)
-   ========================================= */
-/* Tablets (Portrait & Landscape) */
-@media (min-width: 600px) {
-    body {
-        padding: 40px 20px;
-    }
-    .box {
-        max-width: 600px;
-        padding: 30px;
-    }
-    .row {
-        flex-direction: row; /* Horizontal on larger screens */
-    }
-    .row input {
-        flex: 2;
-    }
-    .row button {
-        flex: 1;
-    }
-}
-/* Laptops & Desktops */
-@media (min-width: 1024px) {
-    .box {
-        max-width: 750px;
-    }
-    /* Create a two-column grid for style and title on desktop */
-    .grid-desktop {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 15px;
-    }
-}
-/* Extra Large Screens */
-@media (min-width: 1440px) {
-    .box {
-        max-width: 900px;
-    }
-}
-/* Dark Mode high-contrast accessibility */
-@media (prefers-contrast: high) {
-    :root {
-        --bg-input: #000;
-        --text-muted: #fff;
-    }
-  }
-    </style>
 </head>
 <body>
     <div class="box">
-        <div class="row">
-            <h2 style="margin:0;">Suno Studio</h2>
-            <div style="font-size: 0.8rem;">Credits: <b id="cr" style="color:#f59e0b;">?</b></div>
         </div>
-        <div class="row" style="margin-top:15px;">
-            <input type="password" id="tk" placeholder="Enter API Token (sk-...)">
-            <button class="token-btn" onclick="saveTk()">Connect</button>
         </div>
-        <label style="font-size:0.75rem; color:#718096;">Model Engine</label>
-        <select id="mdl">
-            <option value="V5">V5 (Latest High-Fidelity)</option>
-            <option value="V4_5ALL">V4_5ALL (Complex Structure)</option>
-            <option value="V4_5PLUS">V4_5PLUS</option>
-            <option value="V4">V4 (Classic)</option>
-        </select>
-        <input type="text" id="url" placeholder="Source Audio Link (Direct URL to .mp3)">
-        <input type="text" id="style" placeholder="Music Style (e.g. Melodic Techno, 124 BPM, Dark)">
-        <input type="text" id="title" placeholder="Song Title">
-        <textarea id="lyrics" placeholder="Enter Lyrics (use [Verse], [Chorus] tags for better results)"></textarea>
-        <div class="row" style="margin-top:10px;">
-            <label style="font-size:0.8rem;"><input type="checkbox" id="instr"> Instrumental Only</label>
         </div>
-        <button onclick="go()">Generate Cover</button>
-        <div id="log">Logs initialized...</div>
-        <a id="dl" href="#" target="_blank" style="display:none;"><button style="background:#10b981;">Download Result</button></a>
     </div>
     <script>
         const socket = io();
         const log = document.getElementById('log');
         function saveTk() { socket.emit('save_token', {token: document.getElementById('tk').value}); }
         function go() {
-            const isInstrumental = document.getElementById('instr').checked;
-            socket.emit('start_gen', {
-                model: document.getElementById('mdl').value,
                 uploadUrl: document.getElementById('url').value,
                 style: document.getElementById('style').value,
-                title: document.getElementById('title').value || "New Cover",
-                prompt: document.getElementById('lyrics').value, // This is the 'Lyrics' in Custom Mode
                 customMode: true,
-                instrumental: isInstrumental
-            });
             document.getElementById('dl').style.display = 'none';
         }
@@ -274,7 +82,7 @@ button:hover {
         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';
             }

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Suno Custom Cover Studio</title>
+    <link rel="stylesheet" href="/static/style.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
 </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>
+        <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>
+        </div>
+        <div style="margin-bottom:15px;">
+            <input type="checkbox" id="instr" style="width:auto;"> Instrumental Mode
         </div>
+        <button onclick="go()" style="width:100%;">Generate New Cover</button>
+        <div id="log">Ready for task...</div>
+        <a id="dl" href="#" target="_blank" class="dl-btn">Download Finished Track</a>
     </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';
         }
         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';
             }