kolaslab commited on
Commit
fde3aac
·
verified ·
1 Parent(s): 406bd9a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +9 -352
index.html CHANGED
@@ -2,367 +2,24 @@
2
  <html>
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Neural Radio Learning Interface</title>
 
6
  <style>
7
- body {
8
- background: #000;
9
- color: #0f0;
10
- font-family: monospace;
11
- padding: 20px;
12
  margin: 0;
13
- }
14
-
15
- .container {
16
- max-width: 1000px;
17
- margin: 0 auto;
18
- }
19
-
20
- .radio-source {
21
- border: 1px solid #0f0;
22
- padding: 10px;
23
- margin: 10px 0;
24
- }
25
-
26
- .visualizer {
27
- display: grid;
28
- grid-template-columns: 1fr 1fr;
29
- gap: 10px;
30
- margin: 10px 0;
31
- }
32
-
33
- canvas {
34
- background: #111;
35
- border: 1px solid #0f0;
36
  width: 100%;
37
- height: 100px;
38
- }
39
-
40
- .controls {
41
- display: flex;
42
- gap: 10px;
43
- margin: 10px 0;
44
- }
45
-
46
- button {
47
- background: #111;
48
- color: #0f0;
49
- border: 1px solid #0f0;
50
- padding: 10px 20px;
51
- cursor: pointer;
52
- }
53
-
54
- button:hover {
55
- background: #0f0;
56
- color: #000;
57
- }
58
-
59
- .status {
60
- border: 1px solid #0f0;
61
- padding: 10px;
62
- margin: 10px 0;
63
  }
64
-
65
- .meter {
66
  width: 100%;
67
- height: 20px;
68
- background: #111;
69
- border: 1px solid #0f0;
70
- margin: 5px 0;
71
- }
72
-
73
- .meter-fill {
74
  height: 100%;
75
- background: #0f0;
76
- width: 0%;
77
- transition: width 0.3s;
78
- }
79
-
80
- .memory-bank {
81
- border: 1px solid #0f0;
82
- padding: 10px;
83
- margin: 10px 0;
84
- height: 150px;
85
- overflow-y: auto;
86
- }
87
-
88
- .neural-response {
89
- border: 1px solid #0f0;
90
- padding: 10px;
91
- margin: 10px 0;
92
- }
93
-
94
- @keyframes pulse {
95
- 0% { opacity: 1; }
96
- 50% { opacity: 0.5; }
97
- 100% { opacity: 1; }
98
- }
99
-
100
- .recording {
101
- color: #f00;
102
- animation: pulse 1s infinite;
103
- display: none;
104
- }
105
-
106
- .active .recording {
107
- display: inline;
108
  }
109
  </style>
110
  </head>
111
  <body>
112
- <div class="container">
113
- <h2>Neural Radio Learning Interface</h2>
114
-
115
- <div class="radio-source">
116
- <h3>Radio Source</h3>
117
- <audio id="radioStream" crossorigin="anonymous">
118
- <source src="http://stream.live.vc.bbcmedia.co.uk/bbc_world_service" type="audio/mpeg">
119
- </audio>
120
- <div>Status: <span id="radioStatus">Not connected</span></div>
121
- </div>
122
-
123
- <div class="visualizer">
124
- <div>
125
- <div>Input Signal</div>
126
- <canvas id="inputVisual"></canvas>
127
- </div>
128
- <div>
129
- <div>Radio Signal</div>
130
- <canvas id="radioVisual"></canvas>
131
- </div>
132
- </div>
133
-
134
- <div class="status">
135
- <div>Neural Learning Progress:</div>
136
- <div class="meter">
137
- <div class="meter-fill" id="learningMeter"></div>
138
- </div>
139
- <div>Pattern Recognition:</div>
140
- <div class="meter">
141
- <div class="meter-fill" id="patternMeter"></div>
142
- </div>
143
- </div>
144
-
145
- <div class="controls">
146
- <button id="startBtn">Start Learning</button>
147
- <button id="stopBtn">Stop</button>
148
- <button id="respondBtn">Force Response</button>
149
- <span class="recording">● Recording</span>
150
- </div>
151
-
152
- <div class="memory-bank">
153
- <h3>Memory Bank</h3>
154
- <div id="memories"></div>
155
- </div>
156
-
157
- <div class="neural-response">
158
- <h3>Neural Response</h3>
159
- <div id="response">Waiting for input...</div>
160
- </div>
161
- </div>
162
-
163
- <script>
164
- class NeuralRadioInterface {
165
- constructor() {
166
- this.audioContext = null;
167
- this.radioAnalyser = null;
168
- this.micAnalyser = null;
169
- this.isLearning = false;
170
- this.memories = [];
171
- this.learningProgress = 0;
172
- this.patternStrength = 0;
173
-
174
- this.initializeUI();
175
- this.setupEventListeners();
176
- }
177
-
178
- initializeUI() {
179
- this.inputCanvas = document.getElementById('inputVisual');
180
- this.radioCanvas = document.getElementById('radioVisual');
181
- this.learningMeter = document.getElementById('learningMeter');
182
- this.patternMeter = document.getElementById('patternMeter');
183
- this.memoriesDiv = document.getElementById('memories');
184
- this.responseDiv = document.getElementById('response');
185
- this.radioStatus = document.getElementById('radioStatus');
186
- }
187
-
188
- setupEventListeners() {
189
- document.getElementById('startBtn').onclick = () => this.start();
190
- document.getElementById('stopBtn').onclick = () => this.stop();
191
- document.getElementById('respondBtn').onclick = () => this.generateResponse();
192
-
193
- const radio = document.getElementById('radioStream');
194
- radio.onplay = () => this.radioStatus.textContent = 'Connected';
195
- radio.onerror = () => this.radioStatus.textContent = 'Error connecting';
196
- }
197
-
198
- async start() {
199
- try {
200
- this.audioContext = new AudioContext();
201
-
202
- // Setup microphone input
203
- const micStream = await navigator.mediaDevices.getUserMedia({audio: true});
204
- const micSource = this.audioContext.createMediaStreamSource(micStream);
205
- this.micAnalyser = this.audioContext.createAnalyser();
206
- micSource.connect(this.micAnalyser);
207
-
208
- // Setup radio input
209
- const radio = document.getElementById('radioStream');
210
- radio.play();
211
- const radioSource = this.audioContext.createMediaElementSource(radio);
212
- this.radioAnalyser = this.audioContext.createAnalyser();
213
- radioSource.connect(this.radioAnalyser);
214
- radioSource.connect(this.audioContext.destination);
215
-
216
- this.isLearning = true;
217
- document.body.classList.add('active');
218
-
219
- this.learn();
220
- this.updateVisuals();
221
- this.monitorInput();
222
-
223
- } catch(err) {
224
- console.error('Error:', err);
225
- this.responseDiv.textContent = 'Error: ' + err.message;
226
- }
227
- }
228
-
229
- stop() {
230
- this.isLearning = false;
231
- document.getElementById('radioStream').pause();
232
- document.body.classList.remove('active');
233
- if(this.audioContext) {
234
- this.audioContext.close();
235
- }
236
- }
237
-
238
- learn() {
239
- if(!this.isLearning) return;
240
-
241
- // Simulate learning from radio stream
242
- if(this.learningProgress < 100) {
243
- this.learningProgress += Math.random() * 0.5;
244
- this.learningMeter.style.width = this.learningProgress + '%';
245
- }
246
-
247
- // Store simulated memories
248
- if(Math.random() < 0.1) {
249
- const memory = `Learned pattern ${Math.floor(Math.random() * 1000)} at ${new Date().toLocaleTimeString()}`;
250
- this.memories.unshift(memory);
251
- if(this.memories.length > 10) this.memories.pop();
252
-
253
- this.updateMemories();
254
- }
255
-
256
- setTimeout(() => this.learn(), 100);
257
- }
258
-
259
- monitorInput() {
260
- if(!this.isLearning) return;
261
-
262
- const bufferLength = this.micAnalyser.frequencyBinCount;
263
- const dataArray = new Uint8Array(bufferLength);
264
- this.micAnalyser.getByteTimeDomainData(dataArray);
265
-
266
- // Analyze input and trigger response
267
- let sum = 0;
268
- for(let i = 0; i < bufferLength; i++) {
269
- sum += Math.abs(dataArray[i] - 128);
270
- }
271
-
272
- const inputLevel = sum / bufferLength;
273
- this.patternStrength = Math.min(100, this.patternStrength + (inputLevel > 10 ? 5 : -2));
274
- this.patternMeter.style.width = this.patternStrength + '%';
275
-
276
- if(this.patternStrength > 80) {
277
- this.generateResponse();
278
- this.patternStrength = 0;
279
- }
280
-
281
- setTimeout(() => this.monitorInput(), 100);
282
- }
283
-
284
- generateResponse() {
285
- const responses = [
286
- 'Analyzing input pattern...',
287
- 'Pattern matched! Generating response...',
288
- 'Processing neural pathways...',
289
- 'Synthesizing radio fragments...',
290
- 'Generating response from learned patterns...'
291
- ];
292
-
293
- this.responseDiv.textContent = responses[Math.floor(Math.random() * responses.length)];
294
-
295
- // Simulate audio response
296
- const oscillator = this.audioContext.createOscillator();
297
- const gain = this.audioContext.createGain();
298
-
299
- oscillator.connect(gain);
300
- gain.connect(this.audioContext.destination);
301
-
302
- oscillator.frequency.setValueAtTime(440, this.audioContext.currentTime);
303
- gain.gain.setValueAtTime(0.1, this.audioContext.currentTime);
304
- gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 0.5);
305
-
306
- oscillator.start();
307
- oscillator.stop(this.audioContext.currentTime + 0.5);
308
- }
309
-
310
- updateVisuals() {
311
- if(!this.isLearning) return;
312
-
313
- // Draw input visualization
314
- if(this.micAnalyser) {
315
- const inputData = new Uint8Array(this.micAnalyser.frequencyBinCount);
316
- this.micAnalyser.getByteTimeDomainData(inputData);
317
- this.drawWaveform(this.inputCanvas, inputData, '#0f0');
318
- }
319
-
320
- // Draw radio visualization
321
- if(this.radioAnalyser) {
322
- const radioData = new Uint8Array(this.radioAnalyser.frequencyBinCount);
323
- this.radioAnalyser.getByteTimeDomainData(radioData);
324
- this.drawWaveform(this.radioCanvas, radioData, '#f00');
325
- }
326
-
327
- requestAnimationFrame(() => this.updateVisuals());
328
- }
329
-
330
- drawWaveform(canvas, dataArray, color) {
331
- const ctx = canvas.getContext('2d');
332
- const width = canvas.width;
333
- const height = canvas.height;
334
-
335
- ctx.fillStyle = '#111';
336
- ctx.fillRect(0, 0, width, height);
337
- ctx.lineWidth = 2;
338
- ctx.strokeStyle = color;
339
- ctx.beginPath();
340
-
341
- const sliceWidth = width / dataArray.length;
342
- let x = 0;
343
-
344
- for(let i = 0; i < dataArray.length; i++) {
345
- const v = dataArray[i] / 128.0;
346
- const y = v * height/2;
347
-
348
- if(i === 0) ctx.moveTo(x, y);
349
- else ctx.lineTo(x, y);
350
-
351
- x += sliceWidth;
352
- }
353
-
354
- ctx.lineTo(width, height/2);
355
- ctx.stroke();
356
- }
357
-
358
- updateMemories() {
359
- this.memoriesDiv.innerHTML = this.memories
360
- .map(m => `<div>${m}</div>`)
361
- .join('');
362
- }
363
- }
364
-
365
- window.onload = () => new NeuralRadioInterface();
366
- </script>
367
  </body>
368
  </html>
 
2
  <html>
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>전체 화면 임베딩</title>
7
  <style>
8
+ html, body {
 
 
 
 
9
  margin: 0;
10
+ padding: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  width: 100%;
12
+ height: 100%;
13
+ overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  }
15
+ iframe {
 
16
  width: 100%;
 
 
 
 
 
 
 
17
  height: 100%;
18
+ border: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
  </style>
21
  </head>
22
  <body>
23
+ <iframe src="https://fhcuop.vercel.app/" allowfullscreen></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </body>
25
  </html>