Spaces:

mrsavage1
/

IONA-SERVER

Running

App Files Files Community

mrsavage1 commited on Mar 20

Commit

910505d

verified ·

1 Parent(s): d06b6f9

Update index.html

Browse files

Files changed (1) hide show

index.html +119 -46

index.html CHANGED Viewed

@@ -3,60 +3,93 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>IONA | Server Configuration</title>
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <style>
-        :root { --bg: #0b0f19; --card: #161b22; --accent: #7c3aed; --text: #f0f6fc; --muted: #8b949e; --border: #30363d; --success: #3fb950; }
-        * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
-        body { background: var(--bg); color: var(--text); padding: 15px; display: flex; justify-content: center; }
         .wrapper { width: 100%; max-width: 800px; }
         .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 25px; }
-        .status-pill { font-size: 0.7rem; color: var(--success); background: rgba(63, 185, 80, 0.1); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(63, 185, 80, 0.2); }
         .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
-        .stat-box { background: var(--card); padding: 15px; border-radius: 12px; text-align: center; border: 1px solid var(--border); }
-        .label { display: block; font-size: 0.6rem; color: var(--muted); margin-bottom: 6px; }
         .val { font-size: 0.9rem; font-weight: 700; color: #fff; }
-        .card { background: var(--card); padding: 18px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 15px; }
-        .card h3 { font-size: 0.85rem; color: var(--accent); margin-bottom: 15px; }
-        .tags { display: flex; flex-wrap: wrap; gap: 8px; }
-        .tags span { background: #21262d; padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; border: 1px solid var(--border); color: #c9d1d9; }
-        .log-window { background: #0d1117; height: 150px; padding: 12px; border-radius: 8px; font-family: monospace; font-size: 0.7rem; overflow-y: auto; border: 1px solid #21262d; }
-        .log-line { margin-bottom: 6px; color: #8b949e; }
-        .log-line span { color: var(--accent); }
-        .btn { width: 100%; padding: 16px; border-radius: 10px; border: none; font-weight: 700; font-size: 0.8rem; cursor: pointer; background: var(--accent); color: white; margin-top: 15px; }
-        input, select { background: #0d1117; color: white; border: 1px solid var(--border); padding: 12px; border-radius: 8px; width: 100%; margin-top: 10px; }
     </style>
 </head>
 <body>
     <div class="wrapper">
         <header class="header">
             <div class="brand"><h1>IONA <span style="font-weight: 400; color: var(--muted); font-size: 0.7rem;">NEXUS SERVER</span></h1></div>
-            <div class="status-pill">● System Online</div>
         </header>
         <div class="stats-row">
-            <div class="stat-box"><span class="label">UPTIME</span><span class="val" id="uptime">--</span></div>
-            <div class="stat-box"><span class="label">RAM</span><span class="val" id="ram">--</span></div>
-            <div class="stat-box"><span class="label">CPU</span><span class="val" id="cpu">--</span></div>
         </div>
         <section class="card">
-            <h3><i class="ph ph-waveform"></i> Voices Available</h3>
-            <div class="tags" id="voice-tags"><span>Syncing...</span></div>
         </section>
         <section class="card">
-            <h3><i class="ph ph-terminal"></i> Test Control</h3>
-            <input type="text" id="test-text" value="Iona Nexus is fully operational. System green.">
-            <div style="display: flex; gap: 10px;">
                 <select id="voice-cat" onchange="updateSubDropdown()"></select>
                 <select id="voice-sub"></select>
             </div>
-            <button class="btn" onclick="synthesize()">EXECUTE SYNTHESIS</button>
         </section>
         <section class="card">
-            <h3><i class="ph ph-terminal-window"></i> Live System Logs</h3>
             <div class="log-window" id="console"></div>
         </section>
     </div>
@@ -72,40 +105,80 @@
                 document.getElementById('uptime').innerText = data.uptime;
                 document.getElementById('ram').innerText = data.ram;
                 document.getElementById('cpu').innerText = data.cpu;
-                document.getElementById('console').innerHTML = data.logs.map(l => `<div class="log-line"><span>></span> ${l}</div>`).join('');
-                // Update dropdowns only if registry has changed
                 if (JSON.stringify(currentRegistry) !== JSON.stringify(data.registry)) {
                     currentRegistry = data.registry;
-                    const catSelect = document.getElementById('voice-cat');
-                    catSelect.innerHTML = Object.keys(currentRegistry).map(c => `<option value="${c}">${c}</option>`).join('');
-                    const tags = document.getElementById('voice-tags');
-                    tags.innerHTML = Object.keys(currentRegistry).map(c => `<span>${c}</span>`).join('');
-                    updateSubDropdown();
                 }
-            } catch (e) { console.error("Sync Error", e); }
         }
         function updateSubDropdown() {
             const cat = document.getElementById('voice-cat').value;
             const subSelect = document.getElementById('voice-sub');
             if (currentRegistry[cat]) {
                 subSelect.innerHTML = currentRegistry[cat].map(s => `<option value="${s}">${s}</option>`).join('');
             }
         }
         async function synthesize() {
-            const formData = new FormData();
-            formData.append('text', document.getElementById('test-text').value);
-            formData.append('category', document.getElementById('voice-cat').value);
-            formData.append('voice', document.getElementById('voice-sub').value);
-            const response = await fetch('/stream', { method: 'POST', body: formData });
-            const blob = await response.blob();
-            const audio = new Audio(URL.createObjectURL(blob));
-            audio.play();
         }
         setInterval(refresh, 3000);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>IONA | Nexus Control</title>
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <style>
+        :root { --bg: #0b0f19; --card: #161b22; --accent: #7c3aed; --text: #f0f6fc; --muted: #8b949e; --border: #30363d; --success: #3fb950; --error: #f85149; }
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
+        body { background: var(--bg); color: var(--text); padding: 15px; display: flex; justify-content: center; min-height: 100vh; }
         .wrapper { width: 100%; max-width: 800px; }
+        /* Header */
         .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 25px; }
+        .brand h1 { font-size: 1.2rem; letter-spacing: 1px; }
+        .status-pill { font-size: 0.7rem; color: var(--success); background: rgba(63, 185, 80, 0.1); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(63, 185, 80, 0.2); display: flex; align-items: center; gap: 6px; }
+        /* Stats Dashboard */
         .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
+        .stat-box { background: var(--card); padding: 15px; border-radius: 12px; text-align: center; border: 1px solid var(--border); transition: transform 0.2s; }
+        .stat-box:hover { transform: translateY(-2px); border-color: var(--accent); }
+        .label { display: block; font-size: 0.6rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; font-weight: 600; }
         .val { font-size: 0.9rem; font-weight: 700; color: #fff; }
+        /* Card System */
+        .card { background: var(--card); padding: 20px; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 15px; }
+        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
+        .card h3 { font-size: 0.85rem; color: var(--accent); display: flex; align-items: center; gap: 8px; }
+        /* Search & Tags */
+        .search-bar { background: #0d1117; border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; color: white; font-size: 0.8rem; width: 100%; margin-bottom: 12px; outline: none; }
+        .search-bar:focus { border-color: var(--accent); }
+        .tags { display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow-y: auto; padding-right: 5px; }
+        .tags::-webkit-scrollbar { width: 4px; }
+        .tags::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+        .tags span { background: #21262d; padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; border: 1px solid var(--border); color: #c9d1d9; cursor: default; transition: 0.2s; }
+        .tags span.active { background: var(--accent); color: white; border-color: var(--accent); }
+        /* Inputs */
+        .input-group { display: flex; gap: 10px; margin-top: 10px; }
+        input, select { background: #0d1117; color: white; border: 1px solid var(--border); padding: 12px; border-radius: 8px; width: 100%; outline: none; transition: 0.2s; }
+        input:focus, select:focus { border-color: var(--accent); }
+        /* Execution Button */
+        .btn { width: 100%; padding: 16px; border-radius: 10px; border: none; font-weight: 700; font-size: 0.85rem; cursor: pointer; background: var(--accent); color: white; margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: filter 0.2s; }
+        .btn:active { transform: scale(0.98); }
+        .btn:disabled { filter: grayscale(1); cursor: not-allowed; }
+        /* Logs */
+        .log-window { background: #0d1117; height: 180px; padding: 15px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; overflow-y: auto; border: 1px solid #21262d; line-height: 1.5; }
+        .log-line { margin-bottom: 4px; border-left: 2px solid transparent; padding-left: 8px; }
+        .log-line.synth { border-left-color: var(--accent); color: #e6edf3; }
+        .log-line span { color: var(--accent); font-weight: bold; margin-right: 5px; }
     </style>
 </head>
 <body>
     <div class="wrapper">
         <header class="header">
             <div class="brand"><h1>IONA <span style="font-weight: 400; color: var(--muted); font-size: 0.7rem;">NEXUS SERVER</span></h1></div>
+            <div id="status" class="status-pill"><i class="ph-fill ph-circle"></i> System Online</div>
         </header>
         <div class="stats-row">
+            <div class="stat-box"><span class="label">Uptime</span><span class="val" id="uptime">--</span></div>
+            <div class="stat-box"><span class="label">Memory</span><span class="val" id="ram">--</span></div>
+            <div class="stat-box"><span class="label">CPU Load</span><span class="val" id="cpu">--</span></div>
         </div>
         <section class="card">
+            <div class="card-header">
+                <h3><i class="ph ph-waveform"></i> Voice Library</h3>
+                <span id="voice-count" style="font-size: 0.7rem; color: var(--muted)">0 Loaded</span>
+            </div>
+            <input type="text" class="search-bar" id="voice-search" placeholder="Search voices (Alba, Cori, Amy...)" oninput="filterTags()">
+            <div class="tags" id="voice-tags"></div>
         </section>
         <section class="card">
+            <h3><i class="ph ph-terminal"></i> Controller</h3>
+            <input type="text" id="test-text" placeholder="Enter text to synthesize..." value="Iona Nexus is fully operational. Engine ready.">
+            <div class="input-group">
                 <select id="voice-cat" onchange="updateSubDropdown()"></select>
                 <select id="voice-sub"></select>
             </div>
+            <button class="btn" id="synth-btn" onclick="synthesize()">
+                <i class="ph ph-play-circle"></i> EXECUTE SYNTHESIS
+            </button>
         </section>
         <section class="card">
+            <h3><i class="ph ph-terminal-window"></i> System Logs</h3>
             <div class="log-window" id="console"></div>
         </section>
     </div>
                 document.getElementById('uptime').innerText = data.uptime;
                 document.getElementById('ram').innerText = data.ram;
                 document.getElementById('cpu').innerText = data.cpu;
+                // Better Log Rendering
+                const consoleEl = document.getElementById('console');
+                consoleEl.innerHTML = data.logs.map(l => {
+                    const isSynth = l.includes("SYNTH");
+                    return `<div class="log-line ${isSynth ? 'synth' : ''}"><span>></span>${l}</div>`;
+                }).join('');
                 if (JSON.stringify(currentRegistry) !== JSON.stringify(data.registry)) {
                     currentRegistry = data.registry;
+                    renderVoiceUI();
                 }
+            } catch (e) {
+                document.getElementById('status').style.color = 'var(--error)';
+                document.getElementById('status').innerHTML = '<i class="ph-fill ph-circle"></i> Offline';
+            }
+        }
+        function renderVoiceUI() {
+            const categories = Object.keys(currentRegistry);
+            document.getElementById('voice-count').innerText = `${categories.length} Voices`;
+            const catSelect = document.getElementById('voice-cat');
+            catSelect.innerHTML = categories.map(c => `<option value="${c}">${c}</option>`).join('');
+            filterTags(); // Initial render of tags
+            updateSubDropdown();
+        }
+        function filterTags() {
+            const query = document.getElementById('voice-search').value.toLowerCase();
+            const tagsEl = document.getElementById('voice-tags');
+            const categories = Object.keys(currentRegistry);
+            tagsEl.innerHTML = categories
+                .filter(c => c.toLowerCase().includes(query))
+                .map(c => `<span>${c}</span>`).join('');
         }
         function updateSubDropdown() {
             const cat = document.getElementById('voice-cat').value;
             const subSelect = document.getElementById('voice-sub');
+            // Highlight active tag
+            document.querySelectorAll('#voice-tags span').forEach(s => {
+                s.classList.toggle('active', s.innerText === cat);
+            });
             if (currentRegistry[cat]) {
                 subSelect.innerHTML = currentRegistry[cat].map(s => `<option value="${s}">${s}</option>`).join('');
             }
         }
         async function synthesize() {
+            const btn = document.getElementById('synth-btn');
+            btn.disabled = true;
+            btn.innerHTML = '<i class="ph ph-circle-notch ph-spin"></i> GENERATING...';
+            try {
+                const formData = new FormData();
+                formData.append('text', document.getElementById('test-text').value);
+                formData.append('category', document.getElementById('voice-cat').value);
+                formData.append('voice', document.getElementById('voice-sub').value);
+                const response = await fetch('/stream', { method: 'POST', body: formData });
+                const blob = await response.blob();
+                const audio = new Audio(URL.createObjectURL(blob));
+                await audio.play();
+            } catch (e) {
+                console.error(e);
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = '<i class="ph ph-play-circle"></i> EXECUTE SYNTHESIS';
+            }
         }
         setInterval(refresh, 3000);