Voice Aurora - AI Sound Visualizer - xelsed.ai

function getApiKey() {
  return atob(encoded).split('').map(c => String.fromCharCode(c.charCodeAt(0) ^ key)).join('');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0); // Black background

  // Initialize mic input for visual reactivity
  mic = new p5.AudioIn();
  mic.start();
  amplitude = new p5.Amplitude();
  amplitude.setInput(mic);

  layerSeparation = height / (numLayers + 2); // Calculate vertical spacing for layers

  // Get references to DOM elements
  micButton = document.getElementById('micButton');
  transcriptElement = document.getElementById('transcript');
  statusElement = document.getElementById('status');

  // Set up speech recognition functionality
  setupSpeechRecognition();

  // Create initial particles
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }

  // Speak the initial description using OpenAI TTS
  callOpenAITextToSpeech(currentAuroraParams.description);
}

function draw() {
  background(0); // Clear the background each frame

  // Update and draw particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].show();
    if (particles[i].finished()) {
      particles.splice(i, 1); // Remove particles that have floated off-screen
    }
  }
  // Add new particles occasionally to maintain the count
  if (random(1) < 0.1 && particles.length < particleCount) {
    particles.push(new Particle());
  }

  // Get mic level for reactivity
  let micLevel = amplitude.getLevel();
  // Map mic level to a reactivity range for the aurora waves
  let reactivity = map(micLevel, 0, 1, 0, 50);

  // Aurora effect
  noFill(); // Aurora waves should not be filled
  strokeJoin(ROUND); // Makes curve connections smoother

  // Draw multiple passes for a glow effect
  for (let glowPass = 0; glowPass < 5; glowPass++) {
    for (let i = 0; i < numLayers; i++) {
      let layerY = height - (i + 1) * layerSeparation; // Vertical position of the layer

      // Interpolate colors for a gradient effect across layers
      let auroraColor = lerpColor(
        color(currentAuroraParams.colors[i % currentAuroraParams.colors.length]),
        color(currentAuroraParams.colors[(i + 1) % currentAuroraParams.colors.length]),
        map(i, 0, numLayers - 1, 0, 1)
      );

      // Adjust alpha for the glow effect: outer passes are more transparent
      let alphaValue = map(glowPass, 0, 4, 20, 100);
      auroraColor.setAlpha(alphaValue);
      stroke(auroraColor);

      // Adjust stroke weight based on OpenAI's intensity and glow pass
      let baseStrokeWeight = map(currentAuroraParams.intensity, 'low', 'high', 2, 8);
      let glowStrokeWeight = baseStrokeWeight + map(glowPass, 0, 4, 0, 5);
      strokeWeight(glowStrokeWeight);

      beginShape();
      // Add a control point before the first vertex and after the last for smoother curves
      // This ensures the curve starts and ends cleanly at the canvas edges
      curveVertex(0, layerY + reactivity + noise(noiseOffset, i * noiseScale + yOffset) * 100);

      // Draw the main curve points
      for (let x = 0; x <= width; x += 20) {
        let noiseVal = noise(x * noiseScale + noiseOffset, i * noiseScale + yOffset);
        let y = layerY + reactivity + noiseVal * 100; // Apply Perlin noise for wave shape
        curveVertex(x, y);
      }
      curveVertex(width, layerY + reactivity + noise(width * noiseScale + noiseOffset, i * noiseScale + yOffset) * 100);
      endShape();
    }
  }

  noiseOffset += 0.005; // Increment noise offset for horizontal flow
  yOffset += 0.001; // Increment y offset for slight vertical variation over time
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  layerSeparation = height / (numLayers + 2); // Recalculate layer separation on resize
}

class Particle {
  constructor() {
    this.x = random(width); // Random horizontal position
    this.y = random(height, height + 100); // Start below the canvas
    this.vy = random(0.5, 2); // Random upward velocity
    this.alpha = 255; // Initial alpha (opaque)
    this.size = random(1, 4); // Random size
  }

  // Check if the particle is off-screen
  finished() {
    return this.y < -10;
  }

  // Update particle's position and fade
  update() {
    this.y -= this.vy;
    this.alpha -= 2; // Fade out over time
  }

  // Draw the particle
  show() {
    noStroke();
    fill(255, this.alpha); // White, fading particle
    circle(this.x, this.y, this.size);
  }
}

function setupSpeechRecognition() {
  if ('webkitSpeechRecognition' in window) {
    speechRecognition = new webkitSpeechRecognition();
    speechRecognition.continuous = true; // Keep listening after a pause
    speechRecognition.interimResults = true; // Show results as they are being spoken
    speechRecognition.lang = 'en-US'; // Set language

    // Event handler when recognition starts
    speechRecognition.onstart = () => {
      isListening = true;
      micButton.innerText = 'Stop Listening';
      statusElement.innerText = 'Status: Listening... Speak now!';
    };

    // Event handler for recognition results
    speechRecognition.onresult = (event) => {
      let finalTranscript = '';
      let interimTranscript = '';

      // Loop through results to separate final and interim transcripts
      for (let i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
          finalTranscript += event.results[i][0].transcript;
        } else {
          interimTranscript += event.results[i][0].transcript;
        }
      }

      // Display the current transcript (final or interim)
      transcriptElement.innerText = `Transcript: ${finalTranscript || interimTranscript}`;

      // If a final transcript is available, send it to OpenAI
      if (finalTranscript) {
        statusElement.innerText = 'Status: Processing speech with OpenAI...';
        callOpenAI(finalTranscript).then(result => {
          if (result) {
            currentAuroraParams = result; // Update global aurora parameters
            // Speak the description using OpenAI TTS
            callOpenAITextToSpeech(result.description);
            // statusElement update will be handled by callOpenAITextToSpeech
          } else {
            statusElement.innerText = 'Status: OpenAI response error. Try again.';
          }
        });
        // Clear transcript after sending to OpenAI
        transcriptElement.innerText = 'Transcript: ';
      }
    };

    // Event handler for recognition errors
    speechRecognition.onerror = (event) => {
      console.error("Speech Recognition Error:", event.error);
      statusElement.innerText = `Status: Speech Recognition Error - ${event.error}`;
      isListening = false;
      micButton.innerText = 'Start Listening';
    };

    // Event handler when recognition ends
    speechRecognition.onend = () => {
      console.log("Speech Recognition Ended.");
      isListening = false;
      micButton.innerText = 'Start Listening';
      statusElement.innerText = 'Status: Idle';
      // Optionally restart listening if continuous is desired but it stopped
      // if (shouldContinueListening) speechRecognition.start();
    };

    // Attach click listener to the mic button
    micButton.onclick = () => {
      if (isListening) {
        speechRecognition.stop();
      } else {
        speechRecognition.start();
      }
    };
  } else {
    // Disable button and show message if Speech Recognition is not supported
    micButton.disabled = true;
    micButton.innerText = 'Speech Recognition Not Supported';
    statusElement.innerText = 'Status: Speech Recognition Not Supported in this browser. Please use Chrome or Edge.';
    console.warn("webkitSpeechRecognition not supported in this browser. Please use Chrome or Edge.");
  }
}

async function callOpenAITextToSpeech(textToSpeak) {
  // If there's an audio playing, stop it first
  if (currentAudioFile && currentAudioFile.isPlaying()) {
    currentAudioFile.stop();
  }

  const apiKey = getApiKey();
  const endpoint = 'https://api.openai.com/v1/audio/speech';

  try {
    statusElement.innerText = 'Status: Generating speech with OpenAI...';
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        model: 'tts-1', // You can choose 'tts-1' or 'tts-1-hd' for higher quality
        voice: 'alloy', // Choose from 'alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'
        input: textToSpeak
      })
    });

    if (!response.ok) {
      const errorData = await response.text();
      throw new Error(`OpenAI TTS API error: ${response.status} - ${errorData}`);
    }

    const audioBlob = await response.blob();
    statusElement.innerText = 'Status: Loading OpenAI speech...';

    // Create a new p5.SoundFile instance from the blob
    currentAudioFile = new p5.SoundFile(audioBlob, () => {
      // Callback when audio is loaded
      console.log("OpenAI audio loaded successfully.");
      statusElement.innerText = 'Status: Playing OpenAI speech...';
      currentAudioFile.play();
      currentAudioFile.onended(() => {
        statusElement.innerText = 'Status: OpenAI speech ended. Ready for next command.';
      });
    }, (error) => {
      // Error callback during loading
      console.error("Error loading p5.SoundFile from blob:", error);
      statusElement.innerText = `Status: Error loading speech - ${error}`;
      currentAudioFile = null; // Clear reference if loading failed
    });

  } catch (error) {
    console.error("Error calling OpenAI TTS API:", error);
    statusElement.innerText = `Status: API Error (TTS) - ${error.message}`;
    currentAudioFile = null; // Clear reference if API call failed
  }
}

async function callOpenAI(transcript) {
  const apiKey = getApiKey();
  const endpoint = 'https://api.openai.com/v1/chat/completions';
  // Craft a precise prompt to guide OpenAI to produce the desired JSON format
  const prompt = `Based on the following audio transcript: "${transcript}", generate a JSON object describing an aurora.
  The JSON should have three keys:
  1.  'colors': An array of 3-5 hex color codes (e.g., ['#FF0000', '#00FF00']).
  2.  'intensity': A string, either 'low', 'medium', or 'high'.
  3.  'description': A short, poetic sentence describing the aurora scene.`;

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo', // Using gpt-3.5-turbo, which supports response_format
        messages: [{
          role: 'user',
          content: prompt
        }],
        response_format: { type: "json_object" } // Request JSON object directly
      })
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`OpenAI API error: ${response.status} - ${errorData.error.message}`);
    }

    const data = await response.json();
    const content = data.choices[0].message.content; // The JSON string is in the content
    return JSON.parse(content); // Parse the JSON string into a JavaScript object
  } catch (error) {
    console.error("Error calling OpenAI API:", error);
    document.getElementById('status').innerText = `Status: API Error - ${error.message}`;
    return null;
  }
}