Hugging Face's logo

Spaces:
ciaochris
/
Temporal_Exploration
Running

App Files Community
ciaochris commited on
Commit
73b2ac2
·
verified ·
1 Parent(s): 22fe1cb

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -186
index.html DELETED
@@ -1,186 +0,0 @@
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>