Janady13/ai-music-system / public/index.html

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/ai-music-system / public/index.html
Date	Not specified in source
Repository	Janady13/ai-music-system
Revision	cd5207850253ee238f8a267c043b1e3c070ed81a
Branch	codex/create-ai-for-music-generation-ifwcfc
Path or archive member	public/index.html
Original SHA-256	eb77de07d1acacb0ed32a95aed806423805ee82c7df12d81ef5b73cb80e41297
Git blob SHA	75a5accfbb8d894c37c3b362bab4fc53b2f6ab27
Reading-copy SHA-256	eb77de07d1acacb0ed32a95aed806423805ee82c7df12d81ef5b73cb80e41297
Original source ↗
Recovered source transcript

Download complete source text ↓507 lines · 15.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Skynet Studio · AI Synthesizer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      color-scheme: dark;
      --bg: radial-gradient(circle at 20% 20%, #1d2b64, transparent 55%),
             radial-gradient(circle at 80% 10%, #f8cdda33, transparent 60%),
             #090b1a;
      --panel: rgba(14, 16, 36, 0.85);
      --accent: #7a5cff;
      --accent-strong: #ad8cff;
      --text: #f7f8fc;
      --muted: #8d95b8;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: 'Space Grotesk', sans-serif;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
    }
    header {
      padding: 32px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
    }
    header h1 {
      font-size: 32px;
      letter-spacing: 0.12em;
      margin: 0;
      text-transform: uppercase;
    }
    header h1 span {
      color: var(--accent);
    }
    header p {
      margin: 0;
      color: var(--muted);
      max-width: 480px;
    }
    main {
      flex: 1;
      padding: 0 48px 48px;
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 32px;
    }
    .panel {
      background: var(--panel);
      border: 1px solid rgba(122, 92, 255, 0.25);
      border-radius: 20px;
      padding: 24px;
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 45px rgba(6, 11, 40, 0.45);
    }
    .panel h2 {
      margin-top: 0;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 18px;
    }
    label {
      display: block;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--muted);
      margin-bottom: 8px;
    }
    select,
    input[type="number"],
    input[type="range"],
    .pill-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 12px 14px;
      color: var(--text);
      font-family: inherit;
      font-size: 15px;
      margin-bottom: 20px;
    }
    input[type="range"] {
      accent-color: var(--accent);
      height: 2px;
      padding: 12px 0;
    }
    button.primary {
      width: 100%;
      border-radius: 14px;
      padding: 16px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: none;
      color: #05060f;
      background: linear-gradient(120deg, #f0e7ff 0%, var(--accent) 100%);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    button.primary:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    button.primary:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(122, 92, 255, 0.3);
    }
    .controls-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .controls-group.full {
      grid-template-columns: 1fr;
    }
    .surface {
      display: grid;
      gap: 24px;
    }
    .surface .module {
      border: 1px solid rgba(122, 92, 255, 0.2);
      border-radius: 16px;
      padding: 20px;
      background: rgba(7, 9, 25, 0.7);
      display: grid;
      gap: 16px;
    }
    .module h3 {
      margin: 0;
      font-size: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(122, 92, 255, 0.18);
      color: var(--accent-strong);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }
    ul.inline {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul.inline li {
      padding: 8px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 14px;
    }
    table.timeline {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    table.timeline th,
    table.timeline td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 10px 6px;
      text-align: left;
    }
    table.timeline th {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 11px;
      color: var(--muted);
    }
    .grid-two {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }
    .stat {
      display: grid;
      gap: 4px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(122, 92, 255, 0.15);
    }
    .stat span.label {
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .stat span.value {
      font-size: 18px;
      font-weight: 600;
    }
    footer {
      padding: 24px 48px 48px;
      color: var(--muted);
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    @media (max-width: 1024px) {
      main {
        grid-template-columns: 1fr;
      }
      header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</head>
<body>
  <header>
    <div>
      <h1>Skynet <span>Studio</span></h1>
      <p>A dedicated artificial narrow intelligence for composition design, performance direction, and advanced sound architecture.</p>
    </div>
    <div class="badge">Narrow AI Engine · Real-Time Blueprinting</div>
  </header>
  <main>
    <aside class="panel">
      <h2>Session Designer</h2>
      <div class="controls-group">
        <div>
          <label for="genre">Genre Focus</label>
          <select id="genre">
            <option value="">Let AI choose</option>
            <option value="electronic">Electronic</option>
            <option value="ambient">Ambient</option>
            <option value="jazz">Jazz</option>
            <option value="classical">Classical</option>
            <option value="synthwave">Synthwave</option>
            <option value="techno">Techno</option>
          </select>
        </div>
        <div>
          <label for="mood">Mood Signature</label>
          <select id="mood">
            <option value="">Let AI choose</option>
            <option value="uplifting">Uplifting</option>
            <option value="peaceful">Peaceful</option>
            <option value="energetic">Energetic</option>
            <option value="driving">Driving</option>
            <option value="contemplative">Contemplative</option>
          </select>
        </div>
      </div>
      <div class="controls-group">
        <div>
          <label for="duration">Duration (bars)</label>
          <input type="number" id="duration" min="16" max="192" value="96" />
        </div>
        <div>
          <label for="tempo">Tempo Bias</label>
          <input type="range" id="tempo" min="60" max="140" value="110" />
          <div class="stat" style="margin-top: -12px;">
            <span class="label">Target BPM</span>
            <span class="value" id="tempoDisplay">110</span>
          </div>
        </div>
      </div>
      <div class="controls-group full">
        <div>
          <label for="key">Preferred Key</label>
          <select id="key">
            <option value="">Adaptive</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="A">A</option>
            <option value="B">B</option>
          </select>
        </div>
        <div>
          <label for="instrumentSeed">Instrument Seeds</label>
          <input id="instrumentSeed" class="pill-input" placeholder="comma separated e.g. modular bass, vocal chop" />
        </div>
      </div>
      <button class="primary" id="generateBtn">Generate Blueprint</button>
      <div class="stat" id="statusDisplay" style="margin-top: 20px;">
        <span class="label">Engine State</span>
        <span class="value" id="engineState">Idle · awaiting instructions</span>
      </div>
    </aside>
    <section class="surface">
      <div class="module" id="summaryModule">
        <div class="grid-two">
          <div class="stat">
            <span class="label">Genre</span>
            <span class="value" id="summaryGenre">—</span>
          </div>
          <div class="stat">
            <span class="label">Mood</span>
            <span class="value" id="summaryMood">—</span>
          </div>
          <div class="stat">
            <span class="label">Tempo</span>
            <span class="value" id="summaryTempo">—</span>
          </div>
          <div class="stat">
            <span class="label">Key / Scale</span>
            <span class="value" id="summaryKey">—</span>
          </div>
        </div>
        <div class="stat">
          <span class="label">Narrative Concept</span>
          <span class="value" id="summaryConcept">Awaiting generation…</span>
        </div>
      </div>
      <div class="module">
        <h3>Arrangement Architecture</h3>
        <table class="timeline" id="arrangementTable">
          <thead>
            <tr>
              <th>Section</th>
              <th>Bars</th>
              <th>Direction</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div class="module">
        <h3>Instrumentation &amp; Sound Design</h3>
        <ul class="inline" id="instrumentList"></ul>
        <div id="soundLayers" class="grid-two"></div>
      </div>
      <div class="module">
        <h3>Automation &amp; Performance Strategy</h3>
        <div class="grid-two" id="automationList"></div>
        <div class="stat">
          <span class="label">Expressive Focus</span>
          <span class="value" id="performanceExpressive">—</span>
        </div>
        <div class="stat">
          <span class="label">Spotlight Moment</span>
          <span class="value" id="performanceSpotlight">—</span>
        </div>
      </div>
      <div class="module">
        <h3>Influence Graph</h3>
        <div id="influenceList" class="grid-two"></div>
      </div>
    </section>
  </main>
  <footer>
    Artificial narrow intelligence composer · Precision scoring &amp; synthesis laboratory
  </footer>
  <script>
    const generateBtn = document.getElementById('generateBtn');
    const statusDisplay = document.getElementById('engineState');
    const tempoInput = document.getElementById('tempo');
    const tempoDisplay = document.getElementById('tempoDisplay');

    tempoInput.addEventListener('input', () => {
      tempoDisplay.textContent = tempoInput.value;
    });

    function setStatus(text) {
      statusDisplay.textContent = text;
    }

    function parseSeeds(value) {
      if (!value) return [];
      return value
        .split(',')
        .map((token) => token.trim())
        .filter(Boolean)
        .slice(0, 8);
    }

    function renderPlan(plan) {
      document.getElementById('summaryGenre').textContent = plan.metadata.genre;
      document.getElementById('summaryMood').textContent = plan.metadata.mood;
      document.getElementById('summaryTempo').textContent = `${plan.metadata.tempo} bpm`;
      document.getElementById('summaryKey').textContent = `${plan.metadata.key} · ${plan.metadata.scale}`;
      document.getElementById('summaryConcept').textContent = plan.composition.narrative.concept;

      const timelineBody = document.querySelector('#arrangementTable tbody');
      timelineBody.innerHTML = '';
      plan.composition.arrangement.forEach((section) => {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${section.section}</td><td>${section.length}</td><td>${section.notes}</td>`;
        timelineBody.appendChild(row);
      });

      const instrumentList = document.getElementById('instrumentList');
      instrumentList.innerHTML = '';
      plan.composition.instrumentation.forEach((instrument) => {
        const item = document.createElement('li');
        item.textContent = instrument;
        instrumentList.appendChild(item);
      });

      const soundLayers = document.getElementById('soundLayers');
      soundLayers.innerHTML = '';
      plan.composition.soundDesign.forEach((layer) => {
        const layerCard = document.createElement('div');
        layerCard.className = 'stat';
        layerCard.innerHTML = `
          <span class="label">${layer.focus.toUpperCase()} · ${layer.influence}</span>
          <span class="value">${layer.synthesis}</span>
          <span class="label">Processing</span>
          <span>${layer.processing.join('<br/>')}</span>
        `;
        soundLayers.appendChild(layerCard);
      });

      const automationList = document.getElementById('automationList');
      automationList.innerHTML = '';
      plan.composition.automation.forEach((automation) => {
        const card = document.createElement('div');
        card.className = 'stat';
        card.innerHTML = `
          <span class="label">${automation.intent}</span>
          <span class="value">${automation.strategy}</span>
        `;
        automationList.appendChild(card);
      });

      document.getElementById('performanceExpressive').textContent = plan.composition.performance.expressive;
      document.getElementById('performanceSpotlight').textContent = plan.composition.performance.spotlight;

      const influenceList = document.getElementById('influenceList');
      influenceList.innerHTML = '';
      plan.composition.narrative.influences.forEach((influence) => {
        const card = document.createElement('div');
        card.className = 'stat';
        card.innerHTML = `
          <span class="label">${influence.genre.toUpperCase()} · ${influence.mood}</span>
          <span class="value">${influence.title}</span>
          <span>Weight ${influence.weight}</span>
        `;
        influenceList.appendChild(card);
      });
    }

    async function generatePlan() {
      if (generateBtn.disabled) return;
      generateBtn.disabled = true;
      setStatus('Calibrating synthesis heuristics…');

      const payload = {
        genre: document.getElementById('genre').value || undefined,
        mood: document.getElementById('mood').value || undefined,
        duration: Number(document.getElementById('duration').value),
        tempo: Number(tempoInput.value),
        key: document.getElementById('key').value || undefined,
        instruments: parseSeeds(document.getElementById('instrumentSeed').value)
      };

      try {
        const res = await fetch('/api/generate', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const data = await res.json();
        if (!res.ok || !data.ok) {
          throw new Error(data.error || 'Generation failed');
        }
        renderPlan(data);
        const generated = new Date(data.metadata.generatedAt).toLocaleTimeString();
        setStatus(`Blueprint ready · ${generated}`);
      } catch (error) {
        console.error(error);
        setStatus(`Error: ${error.message}`);
      } finally {
        generateBtn.disabled = false;
      }
    }

    generateBtn.addEventListener('click', generatePlan);
    setStatus('Idle · awaiting instructions');
  </script>
</body>
</html>