Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Neural Radio Learning Interface</title> | |
| <style> | |
| body { | |
| background: #000; | |
| color: #0f0; | |
| font-family: monospace; | |
| padding: 20px; | |
| margin: 0; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .radio-source { | |
| border: 1px solid #0f0; | |
| padding: 10px; | |
| margin: 10px 0; | |
| } | |
| .visualizer { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin: 10px 0; | |
| } | |
| canvas { | |
| background: #111; | |
| border: 1px solid #0f0; | |
| width: 100%; | |
| height: 100px; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| margin: 10px 0; | |
| } | |
| button { | |
| background: #111; | |
| color: #0f0; | |
| border: 1px solid #0f0; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #0f0; | |
| color: #000; | |
| } | |
| .status { | |
| border: 1px solid #0f0; | |
| padding: 10px; | |
| margin: 10px 0; | |
| } | |
| .meter { | |
| width: 100%; | |
| height: 20px; | |
| background: #111; | |
| border: 1px solid #0f0; | |
| margin: 5px 0; | |
| } | |
| .meter-fill { | |
| height: 100%; | |
| background: #0f0; | |
| width: 0%; | |
| transition: width 0.3s; | |
| } | |
| .memory-bank { | |
| border: 1px solid #0f0; | |
| padding: 10px; | |
| margin: 10px 0; | |
| height: 150px; | |
| overflow-y: auto; | |
| } | |
| .neural-response { | |
| border: 1px solid #0f0; | |
| padding: 10px; | |
| margin: 10px 0; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .recording { | |
| color: #f00; | |
| animation: pulse 1s infinite; | |
| display: none; | |
| } | |
| .active .recording { | |
| display: inline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Neural Radio Learning Interface</h2> | |
| <div class="radio-source"> | |
| <h3>Radio Source</h3> | |
| <audio id="radioStream" crossorigin="anonymous"> | |
| <source src="http://stream.live.vc.bbcmedia.co.uk/bbc_world_service" type="audio/mpeg"> | |
| </audio> | |
| <div>Status: <span id="radioStatus">Not connected</span></div> | |
| </div> | |
| <div class="visualizer"> | |
| <div> | |
| <div>Input Signal</div> | |
| <canvas id="inputVisual"></canvas> | |
| </div> | |
| <div> | |
| <div>Radio Signal</div> | |
| <canvas id="radioVisual"></canvas> | |
| </div> | |
| </div> | |
| <div class="status"> | |
| <div>Neural Learning Progress:</div> | |
| <div class="meter"> | |
| <div class="meter-fill" id="learningMeter"></div> | |
| </div> | |
| <div>Pattern Recognition:</div> | |
| <div class="meter"> | |
| <div class="meter-fill" id="patternMeter"></div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button id="startBtn">Start Learning</button> | |
| <button id="stopBtn">Stop</button> | |
| <button id="respondBtn">Force Response</button> | |
| <span class="recording">● Recording</span> | |
| </div> | |
| <div class="memory-bank"> | |
| <h3>Memory Bank</h3> | |
| <div id="memories"></div> | |
| </div> | |
| <div class="neural-response"> | |
| <h3>Neural Response</h3> | |
| <div id="response">Waiting for input...</div> | |
| </div> | |
| </div> | |
| <script> | |
| class NeuralRadioInterface { | |
| constructor() { | |
| this.audioContext = null; | |
| this.radioAnalyser = null; | |
| this.micAnalyser = null; | |
| this.isLearning = false; | |
| this.memories = []; | |
| this.learningProgress = 0; | |
| this.patternStrength = 0; | |
| this.initializeUI(); | |
| this.setupEventListeners(); | |
| } | |
| initializeUI() { | |
| this.inputCanvas = document.getElementById('inputVisual'); | |
| this.radioCanvas = document.getElementById('radioVisual'); | |
| this.learningMeter = document.getElementById('learningMeter'); | |
| this.patternMeter = document.getElementById('patternMeter'); | |
| this.memoriesDiv = document.getElementById('memories'); | |
| this.responseDiv = document.getElementById('response'); | |
| this.radioStatus = document.getElementById('radioStatus'); | |
| } | |
| setupEventListeners() { | |
| document.getElementById('startBtn').onclick = () => this.start(); | |
| document.getElementById('stopBtn').onclick = () => this.stop(); | |
| document.getElementById('respondBtn').onclick = () => this.generateResponse(); | |
| const radio = document.getElementById('radioStream'); | |
| radio.onplay = () => this.radioStatus.textContent = 'Connected'; | |
| radio.onerror = () => this.radioStatus.textContent = 'Error connecting'; | |
| } | |
| async start() { | |
| try { | |
| this.audioContext = new AudioContext(); | |
| // Setup microphone input | |
| const micStream = await navigator.mediaDevices.getUserMedia({audio: true}); | |
| const micSource = this.audioContext.createMediaStreamSource(micStream); | |
| this.micAnalyser = this.audioContext.createAnalyser(); | |
| micSource.connect(this.micAnalyser); | |
| // Setup radio input | |
| const radio = document.getElementById('radioStream'); | |
| radio.play(); | |
| const radioSource = this.audioContext.createMediaElementSource(radio); | |
| this.radioAnalyser = this.audioContext.createAnalyser(); | |
| radioSource.connect(this.radioAnalyser); | |
| radioSource.connect(this.audioContext.destination); | |
| this.isLearning = true; | |
| document.body.classList.add('active'); | |
| this.learn(); | |
| this.updateVisuals(); | |
| this.monitorInput(); | |
| } catch(err) { | |
| console.error('Error:', err); | |
| this.responseDiv.textContent = 'Error: ' + err.message; | |
| } | |
| } | |
| stop() { | |
| this.isLearning = false; | |
| document.getElementById('radioStream').pause(); | |
| document.body.classList.remove('active'); | |
| if(this.audioContext) { | |
| this.audioContext.close(); | |
| } | |
| } | |
| learn() { | |
| if(!this.isLearning) return; | |
| // Simulate learning from radio stream | |
| if(this.learningProgress < 100) { | |
| this.learningProgress += Math.random() * 0.5; | |
| this.learningMeter.style.width = this.learningProgress + '%'; | |
| } | |
| // Store simulated memories | |
| if(Math.random() < 0.1) { | |
| const memory = `Learned pattern ${Math.floor(Math.random() * 1000)} at ${new Date().toLocaleTimeString()}`; | |
| this.memories.unshift(memory); | |
| if(this.memories.length > 10) this.memories.pop(); | |
| this.updateMemories(); | |
| } | |
| setTimeout(() => this.learn(), 100); | |
| } | |
| monitorInput() { | |
| if(!this.isLearning) return; | |
| const bufferLength = this.micAnalyser.frequencyBinCount; | |
| const dataArray = new Uint8Array(bufferLength); | |
| this.micAnalyser.getByteTimeDomainData(dataArray); | |
| // Analyze input and trigger response | |
| let sum = 0; | |
| for(let i = 0; i < bufferLength; i++) { | |
| sum += Math.abs(dataArray[i] - 128); | |
| } | |
| const inputLevel = sum / bufferLength; | |
| this.patternStrength = Math.min(100, this.patternStrength + (inputLevel > 10 ? 5 : -2)); | |
| this.patternMeter.style.width = this.patternStrength + '%'; | |
| if(this.patternStrength > 80) { | |
| this.generateResponse(); | |
| this.patternStrength = 0; | |
| } | |
| setTimeout(() => this.monitorInput(), 100); | |
| } | |
| generateResponse() { | |
| const responses = [ | |
| 'Analyzing input pattern...', | |
| 'Pattern matched! Generating response...', | |
| 'Processing neural pathways...', | |
| 'Synthesizing radio fragments...', | |
| 'Generating response from learned patterns...' | |
| ]; | |
| this.responseDiv.textContent = responses[Math.floor(Math.random() * responses.length)]; | |
| // Simulate audio response | |
| const oscillator = this.audioContext.createOscillator(); | |
| const gain = this.audioContext.createGain(); | |
| oscillator.connect(gain); | |
| gain.connect(this.audioContext.destination); | |
| oscillator.frequency.setValueAtTime(440, this.audioContext.currentTime); | |
| gain.gain.setValueAtTime(0.1, this.audioContext.currentTime); | |
| gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 0.5); | |
| oscillator.start(); | |
| oscillator.stop(this.audioContext.currentTime + 0.5); | |
| } | |
| updateVisuals() { | |
| if(!this.isLearning) return; | |
| // Draw input visualization | |
| if(this.micAnalyser) { | |
| const inputData = new Uint8Array(this.micAnalyser.frequencyBinCount); | |
| this.micAnalyser.getByteTimeDomainData(inputData); | |
| this.drawWaveform(this.inputCanvas, inputData, '#0f0'); | |
| } | |
| // Draw radio visualization | |
| if(this.radioAnalyser) { | |
| const radioData = new Uint8Array(this.radioAnalyser.frequencyBinCount); | |
| this.radioAnalyser.getByteTimeDomainData(radioData); | |
| this.drawWaveform(this.radioCanvas, radioData, '#f00'); | |
| } | |
| requestAnimationFrame(() => this.updateVisuals()); | |
| } | |
| drawWaveform(canvas, dataArray, color) { | |
| const ctx = canvas.getContext('2d'); | |
| const width = canvas.width; | |
| const height = canvas.height; | |
| ctx.fillStyle = '#111'; | |
| ctx.fillRect(0, 0, width, height); | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = color; | |
| ctx.beginPath(); | |
| const sliceWidth = width / dataArray.length; | |
| let x = 0; | |
| for(let i = 0; i < dataArray.length; i++) { | |
| const v = dataArray[i] / 128.0; | |
| const y = v * height/2; | |
| if(i === 0) ctx.moveTo(x, y); | |
| else ctx.lineTo(x, y); | |
| x += sliceWidth; | |
| } | |
| ctx.lineTo(width, height/2); | |
| ctx.stroke(); | |
| } | |
| updateMemories() { | |
| this.memoriesDiv.innerHTML = this.memories | |
| .map(m => `<div>${m}</div>`) | |
| .join(''); | |
| } | |
| } | |
| window.onload = () => new NeuralRadioInterface(); | |
| </script> | |
| </body> | |
| </html> |