Hugging Face's logo

Spaces:
ciaochris
/
Temporal_Exploration
Running

App Files Community
ciaochris commited on
Commit
f7000b7
·
verified ·
1 Parent(s): 4a0cc13

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +186 -0
index.html ADDED
@@ -0,0 +1,186 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rhythma • Living Modulation Engine</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
9
+ :root { --primary: #00d4ff; --accent: #ff2e63; }
10
+ * { margin:0; padding:0; box-sizing:border-box; }
11
+ body { font-family:'Inter',sans-serif; background:linear-gradient(135deg,#0a0a0a 0%,#1a0033 100%); color:#eee; min-height:100vh; }
12
+ .header { text-align:center; padding:3rem 1rem 2rem; background:rgba(10,10,10,0.95); border-bottom:1px solid rgba(0,212,255,0.2); }
13
+ .logo { font-family:'Space Grotesk',sans-serif; font-size:3.8rem; font-weight:600; background:linear-gradient(90deg,#00d4ff,#ff2e63); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-3px; }
14
+ .container { max-width:1280px; margin:0 auto; padding:2rem 1rem; }
15
+ .main-grid { display:grid; grid-template-columns:1fr 2fr; gap:2rem; }
16
+ @media (max-width:1024px) { .main-grid { grid-template-columns:1fr; } }
17
+ .card { background:#111; border-radius:20px; padding:2rem; box-shadow:0 20px 40px rgba(0,0,0,0.3); border:1px solid rgba(0,212,255,0.1); }
18
+ .generate-btn { background:linear-gradient(90deg,#00d4ff,#ff2e63); color:white; font-weight:600; font-size:1.3rem; padding:1.2rem 3rem; border:none; border-radius:9999px; width:100%; cursor:pointer; margin-top:2rem; transition:0.3s; }
19
+ .generate-btn:hover { transform:scale(1.05); }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <div class="header">
24
+ <div class="logo">RHYTHMA</div>
25
+ <p style="font-size:1.1rem;opacity:0.8;">The Living Modulation Engine</p>
26
+ </div>
27
+
28
+ <div class="container">
29
+ <div class="main-grid">
30
+ <!-- INPUT -->
31
+ <div class="card">
32
+ <h2 style="margin-bottom:1.5rem;">1. Your Intention</h2>
33
+ <textarea id="input-text" rows="5" style="width:100%;padding:1rem;border-radius:16px;border:1px solid rgba(0,212,255,0.3);background:#1a1a1a;color:#eee;font-size:1.1rem;" placeholder="I'm feeling anxious about tomorrow... I want deep focus..."></textarea>
34
+
35
+ <div style="margin:2rem 0;">
36
+ <label style="font-weight:500;">🎤 Voice Input</label>
37
+ <div style="border:2px dashed #00d4ff;border-radius:16px;padding:2rem;text-align:center;background:rgba(0,0,0,0.3);">
38
+ <button onclick="toggleRecording()" id="record-btn" style="background:#ff2e63;color:white;border:none;padding:14px 32px;border-radius:9999px;font-weight:600;">🎙️ Start Recording</button>
39
+ <p id="recording-status" style="margin-top:12px;display:none;color:#ff2e63;">Recording… (max 60s)</p>
40
+ <audio id="recorded-audio" controls style="width:100%;margin-top:1rem;display:none;"></audio>
41
+ </div>
42
+ </div>
43
+
44
+ <details style="margin-top:1rem;">
45
+ <summary style="cursor:pointer;font-weight:500;">Advanced Overrides</summary>
46
+ <div style="margin-top:1rem;display:grid;gap:1rem;">
47
+ <div>
48
+ <label>Frequency (0 = auto)</label>
49
+ <input type="range" id="freq-slider" min="0" max="1000" value="0" style="width:100%;" oninput="document.getElementById('freq-val').innerHTML=this.value + ' Hz'">
50
+ <div id="freq-val" style="text-align:center;font-size:0.9rem;margin-top:4px;">0 Hz (auto)</div>
51
+ </div>
52
+ <div>
53
+ <label>Modulation Type</label>
54
+ <select id="modulation-select" style="width:100%;padding:12px;border-radius:12px;background:#1a1a1a;color:#eee;">
55
+ <option value="sine">Sine – smooth &amp; flowing</option>
56
+ <option value="pulse">Pulse – energizing</option>
57
+ <option value="chirp">Chirp – evolving</option>
58
+ </select>
59
+ </div>
60
+ <div>
61
+ <label>Rhythm Pattern</label>
62
+ <select id="rhythm-select" style="width:100%;padding:12px;border-radius:12px;background:#1a1a1a;color:#eee;">
63
+ <option value="auto">Auto (AI chosen)</option>
64
+ <option value="calm">Calm</option>
65
+ <option value="active">Active</option>
66
+ <option value="focused">Focused</option>
67
+ <option value="relaxed">Relaxed</option>
68
+ </select>
69
+ </div>
70
+ <div>
71
+ <label>Duration (seconds)</label>
72
+ <input type="range" id="duration-slider" min="3" max="60" value="10" style="width:100%;" oninput="document.getElementById('dur-val').innerHTML=this.value + ' seconds'">
73
+ <div id="dur-val" style="text-align:center;font-size:0.9rem;margin-top:4px;">10 seconds</div>
74
+ </div>
75
+ </div>
76
+ </details>
77
+
78
+ <button onclick="generateExperience()" class="generate-btn">✨ Generate My Rhythma Experience</button>
79
+ </div>
80
+
81
+ <!-- OUTPUT -->
82
+ <div class="card">
83
+ <h2 style="margin-bottom:1.5rem;">2. Your Living Soundscape</h2>
84
+ <div id="analysis-box" style="background:rgba(0,212,255,0.1);padding:1.5rem;border-radius:16px;border-left:6px solid #00d4ff;min-height:140px;">
85
+ <div id="analysis-text" style="line-height:1.7;">Your soundscape is being created…</div>
86
+ </div>
87
+
88
+ <div style="margin:1.5rem 0;">
89
+ <audio id="audio-player" controls style="width:100%;"></audio>
90
+ </div>
91
+
92
+ <div style="display:grid;grid-template-columns:1fr 2fr;gap:1rem;">
93
+ <div>
94
+ <div style="font-size:0.85rem;opacity:0.7;margin-bottom:8px;">Base Waveform</div>
95
+ <div id="simple-waveform" style="background:#000;border-radius:16px;height:130px;display:flex;align-items:center;justify-content:center;"></div>
96
+ </div>
97
+ <div>
98
+ <div style="font-size:0.85rem;opacity:0.7;margin-bottom:8px;">Spectrogram</div>
99
+ <div id="plot-container" style="background:#000;border-radius:16px;height:130px;overflow:hidden;"></div>
100
+ </div>
101
+ </div>
102
+
103
+ <div id="symbolic-box" style="margin-top:1.5rem;background:rgba(255,46,99,0.1);padding:1.5rem;border-radius:16px;border-left:6px solid #ff2e63;">
104
+ <div id="symbolic-text" style="font-style:italic;"></div>
105
+ </div>
106
+
107
+ <div id="transcription-container" style="display:none;margin-top:1.5rem;">
108
+ <div style="font-size:0.85rem;opacity:0.7;margin-bottom:8px;">🎤 Your Spoken Words</div>
109
+ <div id="transcription-text" style="padding:1rem;background:#1a1a1a;border-radius:12px;"></div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+ let mediaRecorder, audioChunks = [], isRecording = false;
117
+
118
+ async function toggleRecording() {
119
+ const btn = document.getElementById('record-btn');
120
+ if (!isRecording) {
121
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
122
+ mediaRecorder = new MediaRecorder(stream);
123
+ audioChunks = [];
124
+ mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
125
+ mediaRecorder.onstop = () => {
126
+ const blob = new Blob(audioChunks, { type: 'audio/wav' });
127
+ document.getElementById('recorded-audio').src = URL.createObjectURL(blob);
128
+ document.getElementById('recorded-audio').style.display = 'block';
129
+ };
130
+ mediaRecorder.start();
131
+ isRecording = true;
132
+ btn.textContent = '⏹️ Stop Recording';
133
+ } else {
134
+ mediaRecorder.stop();
135
+ isRecording = false;
136
+ btn.textContent = '🎙️ Start Recording';
137
+ }
138
+ }
139
+
140
+ async function generateExperience() {
141
+ const btn = document.querySelector('.generate-btn');
142
+ const originalText = btn.innerHTML;
143
+ btn.innerHTML = '🌊 Generating your living soundscape...';
144
+ btn.disabled = true;
145
+
146
+ const formData = new FormData();
147
+ formData.append('input_text', document.getElementById('input-text').value);
148
+
149
+ const recorded = document.getElementById('recorded-audio');
150
+ if (recorded.src && recorded.style.display !== 'none') {
151
+ const blob = await fetch(recorded.src).then(r => r.blob());
152
+ formData.append('audio', blob, 'voice.wav');
153
+ }
154
+
155
+ formData.append('override_freq', document.getElementById('freq-slider').value);
156
+ formData.append('override_modulation', document.getElementById('modulation-select').value);
157
+ formData.append('override_rhythm', document.getElementById('rhythm-select').value);
158
+ formData.append('duration', document.getElementById('duration-slider').value);
159
+
160
+ const res = await fetch('/generate', { method: 'POST', body: formData });
161
+ const data = await res.json();
162
+
163
+ if (data.error) {
164
+ alert('Error: ' + data.error);
165
+ btn.innerHTML = originalText;
166
+ btn.disabled = false;
167
+ return;
168
+ }
169
+
170
+ document.getElementById('analysis-text').innerHTML = `<strong>${(data.emotional_state || 'NEUTRAL').toUpperCase()}</strong><br><br>${data.analysis_text.replace(/\n/g, '<br>')}`;
171
+ document.getElementById('symbolic-text').innerHTML = data.symbolic_text;
172
+ document.getElementById('audio-player').src = `data:audio/wav;base64,${data.audio_base64}`;
173
+ document.getElementById('simple-waveform').innerHTML = `<img src="data:image/png;base64,${data.waveform_base64}" style="max-height:100%;">`;
174
+ document.getElementById('plot-container').innerHTML = `<img src="data:image/png;base64,${data.plot_base64}" style="width:100%;height:100%;object-fit:contain;">`;
175
+
176
+ if (data.transcription) {
177
+ document.getElementById('transcription-container').style.display = 'block';
178
+ document.getElementById('transcription-text').textContent = data.transcription;
179
+ }
180
+
181
+ btn.innerHTML = originalText;
182
+ btn.disabled = false;
183
+ }
184
+ </script>
185
+ </body>
186
+ </html>