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

1<!DOCTYPE html> 2<html> 3<head> 4 <title>AI Music Generator</title> 5 <script src="/socket.io/socket.io.js"></script> 6 <style> 7 body { 8 font-family: -apple-system, BlinkMacSystemFont, sans-serif; 9 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 10 color: white; 11 margin: 0; 12 padding: 20px; 13 min-height: 100vh; 14 } 15 .container { 16 max-width: 600px; 17 margin: 0 auto; 18 text-align: center; 19 } 20 .controls { 21 background: rgba(255,255,255,0.1); 22 padding: 20px; 23 border-radius: 15px; 24 margin: 20px 0; 25 } 26 select, button { 27 padding: 10px; 28 margin: 5px; 29 border: none; 30 border-radius: 5px; 31 font-size: 16px; 32 } 33 button { 34 background: #4CAF50; 35 color: white; 36 cursor: pointer; 37 padding: 15px 30px; 38 } 39 button:disabled { 40 background: #666; 41 cursor: not-allowed; 42 } 43 .result { 44 background: rgba(255,255,255,0.1); 45 padding: 20px; 46 border-radius: 15px; 47 margin-top: 20px; 48 } 49 </style> 50</head> 51<body> 52 <div class="container"> 53 <h1>🎵 AI Music Generator</h1> 54 <p>Generate unique music with AI</p> 55 56 <div class="controls"> 57 <h3>Music Parameters</h3> 58 <div> 59 <label>Genre:</label> 60 <select id="genre"> 61 <option value="electronic">Electronic</option> 62 <option value="classical">Classical</option> 63 <option value="jazz">Jazz</option> 64 <option value="rock">Rock</option> 65 </select> 66 </div> 67 <div> 68 <label>Mood:</label> 69 <select id="mood"> 70 <option value="uplifting">Uplifting</option> 71 <option value="melancholy">Melancholy</option> 72 <option value="energetic">Energetic</option> 73 <option value="peaceful">Peaceful</option> 74 </select> 75 </div> 76 <div> 77 <label>Duration:</label> 78 <select id="duration"> 79 <option value="15">15 seconds</option> 80 <option value="30">30 seconds</option> 81 <option value="60">1 minute</option> 82 </select> 83 </div> 84 <br> 85 <button onclick="generateMusic()" id="generateBtn">🎵 Generate Music</button> 86 </div> 87 88 <div id="result" class="result" style="display: none;"> 89 <h3>🎉 Music Generated!</h3> 90 <div id="resultContent"></div> 91 </div> 92 </div> 93 94 <script> 95 const socket = io(); 96 let isGenerating = false; 97 98 socket.on('connect', () => { 99 console.log('Connected to server'); 100 }); 101 102 socket.on('music-generated', (data) => { 103 isGenerating = false; 104 document.getElementById('generateBtn').disabled = false; 105 document.getElementById('generateBtn').textContent = '🎵 Generate Music'; 106 107 const result = document.getElementById('result'); 108 const container = document.getElementById('resultContent'); 109 110 if (!data || data.ok === false) { 111 container.innerHTML = `<p style=\"color:#ffaaaa\"><strong>Generation failed:</strong> ${data?.error || 'Unknown error'}</p>`; 112 result.style.display = 'block'; 113 return; 114 } 115 116 const metadata = data.metadata || {}; 117 const composition = data.composition || {}; 118 const arrangement = composition.arrangement || []; 119 const recommendations = composition.recommendations || {}; 120 const performance = composition.performance || {}; 121 const analysis = data.analysis || {}; 122 123 const formatList = (items = []) => items.map(item => `<li>${item}</li>`).join(''); 124 const arrangementHtml = arrangement.map(section => ` 125 <li> 126 <strong>${section.name.toUpperCase()}</strong> — ${section.lengthSeconds}s (~${section.bars} bars) 127 <br><small>Progression: ${Array.isArray(section.progression) ? section.progression.join(' → ') : section.progression}</small> 128 </li>`).join(''); 129 const dynamicsHtml = (performance.dynamics || []).map(item => ` 130 <li><strong>${item.section}:</strong> focus on ${item.target} (${item.contour})</li>`).join(''); 131 const transitionsHtml = (recommendations.transitions || []).map(step => ` 132 <li>At ${step.at}s — ${step.idea}</li>`).join(''); 133 const mixingHtml = formatList(recommendations.mixing || []); 134 135 container.innerHTML = ` 136 <p><strong>Genre:</strong> ${metadata.genre}</p> 137 <p><strong>Mood:</strong> ${metadata.mood}</p> 138 <p><strong>Duration:</strong> ${metadata.duration}s · <strong>Tempo:</strong> ${metadata.tempo} BPM (${metadata.timeSignature})</p> 139 <p><strong>Key:</strong> ${metadata.key} · <strong>Confidence:</strong> ${(analysis.confidence || 0).toFixed(2)}</p> 140 <h4>Arrangement</h4> 141 <ol>${arrangementHtml || '<li>No arrangement computed</li>'}</ol> 142 <h4>Core Instrumentation</h4> 143 <ul>${formatList(composition.instrumentation?.core || [])}</ul> 144 <h4>Rhythm & Bass</h4> 145 <ul>${formatList((composition.instrumentation?.rhythm || []).concat(composition.instrumentation?.bass || []))}</ul> 146 <h4>Motifs & Textures</h4> 147 <ul>${formatList((composition.instrumentation?.motifs || []).concat(composition.instrumentation?.textures || []))}</ul> 148 <h4>Performance Highlights</h4> 149 <ul><li><strong>Groove:</strong> ${performance.groove || 'Steady pulse'}</li><li><strong>Bass & Lead:</strong> ${performance.bassLeadInteraction || 'Root support'}</li><li><strong>Melodic Focus:</strong> ${performance.melodicFocus || 'Motif driven'}</li></ul> 150 <h4>Dynamic Focus</h4> 151 <ul>${dynamicsHtml || '<li>Standard dynamics</li>'}</ul> 152 <h4>Automation Ideas</h4> 153 <ul>${formatList((composition.automation || []).map(step => `At ${step.at}s for ${step.duration}s — ${step.action} (${step.intensity} intensity)`))}</ul> 154 <h4>Transition Ideas</h4> 155 <ul>${transitionsHtml || '<li>Blend sections with subtle risers.</li>'}</ul> 156 <h4>Mixing Notes</h4> 157 <ul>${mixingHtml || '<li>Balance frequency ranges for clarity.</li>'}</ul> 158 <h4>Model Reasoning</h4> 159 <ul>${formatList(analysis.reasoning || [])}</ul> 160 <p style=\"font-size:12px;color:#cccccc\">Dataset entries: ${analysis.dataset?.corpusEntries || 0} · Profile observations: ${analysis.dataset?.profileObservations || 0}</p> 161 <p style=\"font-size:12px;color:#888\">Generated: ${metadata.generatedAt ? new Date(metadata.generatedAt).toLocaleString() : 'just now'}</p> 162 `; 163 result.style.display = 'block'; 164 }); 165 function generateMusic() { 166 if (isGenerating) return; 167 168 isGenerating = true; 169 document.getElementById('generateBtn').disabled = true; 170 document.getElementById('generateBtn').textContent = '🎵 Generating...'; 171 document.getElementById('result').style.display = 'none'; 172 173 const params = { 174 genre: document.getElementById('genre').value, 175 mood: document.getElementById('mood').value, 176 duration: parseInt(document.getElementById('duration').value) 177 }; 178 179 socket.emit('generate-music', params); 180 } 181 </script> 182</body> 183</html> 184