Spaces:

zenjoul80
/

SUNO_API

Runtime error

App Files Files Community

zenjoul80 commited on Jan 26

Commit

d317f76

verified ·

1 Parent(s): b3ae416

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +55 -79

templates/index.html CHANGED Viewed

@@ -3,116 +3,93 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Suno Docker Studio</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <style>
         :root { --primary: #6366f1; --bg: #0b0f1a; --card: #161e2d; --input: #242f41; }
-        body { background: var(--bg); color: #e2e8f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center; }
-        .container { width: 100%; max-width: 650px; background: var(--card); padding: 30px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid #2d3748; }
-        h2 { margin-top: 0; color: white; display: flex; align-items: center; gap: 10px; }
-        .status-dot { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; display: inline-block; }
-        .connected { background: #10b981; box-shadow: 0 0 8px #10b981; }
-        label { display: block; margin: 15px 0 5px; font-size: 13px; font-weight: 600; color: #94a3b8; }
-        input, select, textarea { width: 100%; padding: 12px; background: var(--input); border: 1px solid #334155; border-radius: 8px; color: white; box-sizing: border-box; outline: none; transition: 0.2s; }
-        input:focus { border-color: var(--primary); }
-        .flex-row { display: flex; gap: 10px; align-items: flex-end; }
-        button { padding: 12px 20px; background: var(--primary); border: none; color: white; font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.2s; }
-        button:hover { filter: brightness(1.2); transform: translateY(-1px); }
-        .btn-gen { width: 100%; margin-top: 25px; padding: 16px; font-size: 16px; background: #4f46e5; }
-        #log { margin-top: 20px; background: #000; padding: 15px; height: 130px; overflow-y: auto; font-family: 'Consolas', monospace; font-size: 12px; border-radius: 8px; color: #34d399; border: 1px solid #1e293b; }
-        .download-link { display: none; background: #059669; text-decoration: none; padding: 16px; text-align: center; border-radius: 8px; font-weight: bold; color: white; margin-top: 20px; animation: slideUp 0.3s ease-out; }
-        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
 <body>
 <div class="container">
-    <h2><span id="dot" class="status-dot"></span> Suno Docker Studio</h2>
     <label>API Token</label>
-    <div class="flex-row">
         <input type="password" id="tk" placeholder="sk-...">
-        <button onclick="saveToken()">Connect</button>
-    </div>
-    <hr style="border: 0; border-top: 1px solid #2d3748; margin: 25px 0;">
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
-        <div>
-            <label>Model</label>
-            <select id="mdl">
-                <option value="V5">V5 (Standard)</option>
-                <option value="V4_5ALL">V4.5 (Experimental)</option>
-            </select>
-        </div>
-        <div>
-            <label>Title</label>
-            <input type="text" id="title" placeholder="Song Name">
-        </div>
     </div>
     <label>Source MP3 URL</label>
-    <input type="text" id="url" placeholder="Direct link to audio file">
-    <label>Music Style</label>
-    <input type="text" id="style" placeholder="e.g. Lofi, Indian, female voice">
-    <label>Lyrics / Prompt</label>
-    <textarea id="lyr" rows="5" placeholder="[Chorus]..."></textarea>
-    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: white; margin-top: 15px;">
-        <input type="checkbox" id="instr" style="width: auto; margin: 0;"> Instrumental Only
-    </label>
-    <button class="btn-gen" onclick="generate()">Generate & Save to Docker</button>
-    <div id="log">Logs: App ready. Please link your token.</div>
-    <a id="dl" href="#" class="download-link">📥 Download From Docker Storage</a>
 </div>
 <script>
-    // Initialize Socket.io with Docker-friendly settings
     const socket = io({
-        transports: ['websocket', 'polling'],
-        reconnection: true
     });
     socket.on('connect', () => {
-        document.getElementById('dot').classList.add('connected');
-        addLog("Connected to Docker Server.");
     });
     socket.on('disconnect', () => {
-        document.getElementById('dot').classList.remove('connected');
-        addLog("Disconnected from server.");
     });
-    function saveToken() {
-        const token = document.getElementById('tk').value;
-        if(!token) return alert("Enter token");
-        socket.emit('save_token', {token: token});
     }
-    function generate() {
         const payload = {
             uploadUrl: document.getElementById('url').value,
             customMode: true,
-            model: document.getElementById('mdl').value,
             prompt: document.getElementById('lyr').value,
             style: document.getElementById('style').value,
-            title: document.getElementById('title').value || "Suno_Track",
-            instrumental: document.getElementById('instr').checked ? true : false
         };
         socket.emit('start_gen', payload);
         document.getElementById('dl').style.display = 'none';
-        addLog("🚀 Request sent. Do not refresh...");
     }
     function addLog(msg) {
@@ -121,16 +98,15 @@
         log.scrollTop = log.scrollHeight;
     }
-    socket.on('status', (data) => {
-        addLog(data.msg);
-        if(data.done && data.file_name) {
-            const dl = document.getElementById('dl');
-            // Points to the server's local music folder
-            dl.href = `./get_music/${data.file_name}`;
-            dl.style.display = 'block';
         }
     });
 </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Suno AI Docker Studio</title>
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
     <style>
         :root { --primary: #6366f1; --bg: #0b0f1a; --card: #161e2d; --input: #242f41; }
+        body { background: var(--bg); color: #e2e8f0; font-family: sans-serif; padding: 20px; display: flex; justify-content: center; }
+        .container { width: 100%; max-width: 600px; background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid #2d3748; }
+        label { display: block; margin: 15px 0 5px; font-size: 13px; color: #94a3b8; }
+        input, textarea, select { width: 100%; padding: 12px; background: var(--input); border: 1px solid #334155; border-radius: 8px; color: white; box-sizing: border-box; margin-bottom: 10px; }
+        button { width: 100%; padding: 15px; background: var(--primary); border: none; color: white; font-weight: bold; border-radius: 8px; cursor: pointer; }
+        #log { margin-top: 20px; background: #000; padding: 15px; height: 150px; overflow-y: auto; font-family: monospace; font-size: 12px; border-radius: 8px; color: #10b981; }
+        .dl-link { display: none; background: #059669; text-decoration: none; padding: 15px; text-align: center; border-radius: 8px; font-weight: bold; color: white; margin-top: 15px; }
+        .status-header { display: flex; justify-content: space-between; align-items: center; }
+        #status-indicator { font-size: 12px; padding: 4px 8px; border-radius: 4px; background: #ef4444; }
     </style>
 </head>
 <body>
 <div class="container">
+    <div class="status-header">
+        <h3>Suno Studio</h3>
+        <span id="status-indicator">OFFLINE</span>
+    </div>
     <label>API Token</label>
+    <div style="display:flex; gap:10px;">
         <input type="password" id="tk" placeholder="sk-...">
+        <button onclick="saveTk()" style="width:auto;">Link</button>
     </div>
     <label>Source MP3 URL</label>
+    <input type="text" id="url" placeholder="Direct audio link">
+    <label>Style & Genre</label>
+    <input type="text" id="style" placeholder="e.g. Hindi, slow">
+    <label>Lyrics</label>
+    <textarea id="lyr" rows="4"></textarea>
+    <div style="margin-bottom:20px;">
+        <input type="checkbox" id="instr" style="width:auto;"> <span>Instrumental Mode</span>
+    </div>
+    <button onclick="start()">Generate & Auto-Save</button>
+    <div id="log">Logs: Initialization...</div>
+    <a id="dl" href="#" class="dl-link">📥 Download From Docker</a>
 </div>
 <script>
+    // Docker-optimized Socket.IO configuration
     const socket = io({
+        transports: ['websocket', 'polling'], // Critical for Docker ingress
+        upgrade: true,
+        rememberUpgrade: true
     });
+    const statusInd = document.getElementById('status-indicator');
     socket.on('connect', () => {
+        statusInd.innerText = "ONLINE";
+        statusInd.style.background = "#10b981";
+        addLog("Connected to Docker container.");
     });
     socket.on('disconnect', () => {
+        statusInd.innerText = "OFFLINE";
+        statusInd.style.background = "#ef4444";
+        addLog("Connection lost.");
     });
+    function saveTk() {
+        socket.emit('save_token', {token: document.getElementById('tk').value});
     }
+    function start() {
         const payload = {
             uploadUrl: document.getElementById('url').value,
             customMode: true,
+            model: "V5",
             prompt: document.getElementById('lyr').value,
             style: document.getElementById('style').value,
+            title: "Suno_Track",
+            instrumental: document.getElementById('instr').checked
         };
         socket.emit('start_gen', payload);
         document.getElementById('dl').style.display = 'none';
+        addLog("🚀 Task submitted...");
     }
     function addLog(msg) {
         log.scrollTop = log.scrollHeight;
     }
+    socket.on('status', (d) => {
+        addLog(d.msg);
+        if(d.done) {
+            const btn = document.getElementById('dl');
+            btn.href = `./get_music/${d.file_name}`; // Relative path for Docker
+            btn.style.display = 'block';
         }
     });
 </script>
 </body>
+</html>