Voice Canvas - AI Art Director - XeLseD

function preload() {
  // Decode the API key before setup
  openaiApiKey = getApiKey();
  console.log("OpenAI API Key decoded.");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0); // Dark background
  noStroke(); // Default to no stroke for most visuals

  // Create and position microphone button
  micButton = select('#micButton');
  micButton.mousePressed(startListening);

  // Create and position transcript div
  transcriptDiv = select('#transcriptDiv');
  transcriptDiv.html(transcriptText);

  // Initialize Web Speech API
  if ('webkitSpeechRecognition' in window) {
    recognition = new webkitSpeechRecognition();
    recognition.continuous = false; // Listen for a single phrase
    recognition.interimResults = false; // Only get final results
    recognition.lang = 'en-US'; // Set language

    recognition.onstart = function() {
      micButton.html('Listening...');
      micButton.attribute('disabled', ''); // Disable button while listening
      transcriptText = "Listening...";
      transcriptDiv.html(transcriptText);
      console.log("Speech recognition started.");
    };

    recognition.onresult = function(event) {
      let finalTranscript = '';
      for (let i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
          finalTranscript += event.results[i][0].transcript;
        }
      }
      transcriptText = "You said: " + finalTranscript;
      transcriptDiv.html(transcriptText);
      console.log("Speech recognized: " + finalTranscript);
      interpretSpeech(finalTranscript);
    };

    recognition.onerror = function(event) {
      console.error("Speech recognition error: ", event.error);
      transcriptText = "Error: " + event.error;
      transcriptDiv.html(transcriptText);
      micButton.html('Start Listening');
      micButton.removeAttribute('disabled');
      if (event.error === 'no-speech') {
        transcriptText = "No speech detected. Please try again.";
      } else if (event.error === 'not-allowed') {
        transcriptText = "Microphone access denied. Please allow access in your browser settings.";
      }
      transcriptDiv.html(transcriptText);
    };

    recognition.onend = function() {
      micButton.html('Start Listening');
      micButton.removeAttribute('disabled');
      console.log("Speech recognition ended.");
      // Only reset transcript if an OpenAI call hasn't started yet
      // or if it was an error before OpenAI could be called.
      if (!speaking && transcriptText.startsWith("You said:")) {
        transcriptText = "Processing speech...";
        transcriptDiv.html(transcriptText);
      }
    };
  } else {
    transcriptText = "Web Speech API (webkitSpeechRecognition) not supported in this browser. Please use Chrome.";
    transcriptDiv.html(transcriptText);
    micButton.attribute('disabled', '');
    console.warn(transcriptText);
  }
}

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

  // Render art based on current parameters
  switch (visualParams.visualType) {
    case 'waves':
      drawWaves();
      break;
    case 'particles':
      drawParticles();
      break;
    case 'circles':
      drawCircles();
      break;
    case 'lines':
      drawLines();
      break;
    default:
      drawWaves(); // Fallback
      break;
  }
}

function startListening() {
  if (recognition) {
    recognition.start();
  }
}

async function interpretSpeech(speechText) {
  transcriptText = "Asking OpenAI...";
  transcriptDiv.html(transcriptText);

  const prompt = `You are an art generator assistant. When given a description, generate parameters for a visual art piece. Return the response as a JSON object with the following keys: \`visualType\` (string, one of 'waves', 'particles', 'circles', 'lines'), \`color\` (string, hex color code, e.g., '#RRGGBB'), \`speed\` (number, 0.1 to 5), \`count\` (integer, 10 to 200). Ensure the color is a valid hex code. For example, if the description is 'red flowing lines', you might return \`{\"visualType\": \"lines\", \"color\": \"#FF0000\", \"speed\": 2, \"count\": 100}\`. If the description is 'blue starry background', you might return \`{\"visualType\": \"particles\", \"color\": \"#0000FF\", \"speed\": 0.5, \"count\": 150}\`. If the description is 'slow green circles', you might return \`{\"visualType\": \"circles\", \"color\": \"#00FF00\", \"speed\": 0.2, \"count\": 80}\`. If the description is 'fast vibrant waves', you might return \`{\"visualType\": \"waves\", \"color\": \"#FF00FF\", \"speed\": 4, \"count\": 70}\`.
Now, generate parameters for: \"${speechText}\"`;;

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${openaiApiKey}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo', // Or 'gpt-4' if available and preferred
        messages: [{
          role: 'user',
          content: prompt
        }],
        response_format: { type: "json_object" }, // Crucial for getting JSON output
        temperature: 0.7, // Creativity level
        max_tokens: 150 // Max tokens for the response
      })
    });

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

    const data = await response.json();
    console.log("OpenAI raw response:", data);

    const openAIResponseContent = data.choices[0].message.content;
    console.log("OpenAI content:", openAIResponseContent);

    // Attempt to parse the JSON string
    let parsedParams;
    try {
      parsedParams = JSON.parse(openAIResponseContent);
    } catch (e) {
      console.error("Failed to parse JSON from OpenAI:", e);
      transcriptText = "OpenAI returned invalid JSON. Trying again...";
      transcriptDiv.html(transcriptText);
      // Fallback or retry
      return;
    }

    // Validate and sanitize parameters
    visualParams.visualType = ['waves', 'particles', 'circles', 'lines'].includes(parsedParams.visualType) ? parsedParams.visualType : 'waves';
    visualParams.color = /^#([0-9A-Fa-f]{3}){1,2}$/.test(parsedParams.color) ? parsedParams.color : defaultColors[floor(random(defaultColors.length))]; // Validate hex color
    visualParams.speed = constrain(parsedParams.speed, 0.1, 5);
    visualParams.count = constrain(floor(parsedParams.count), 10, 200);

    transcriptText = `OpenAI says: Visual Type: ${visualParams.visualType}, Color: ${visualParams.color}, Speed: ${visualParams.speed}, Count: ${visualParams.count}`;
    transcriptDiv.html(transcriptText);
    console.log("Updated visual parameters:", visualParams);

    speakBack(visualParams); // Now calls the OpenAI TTS function

  } catch (error) {
    console.error("Error communicating with OpenAI:", error);
    transcriptText = "Error: Could not get art parameters from OpenAI. Please check your API key and try again. " + error.message;
    transcriptDiv.html(transcriptText);
    micButton.removeAttribute('disabled'); // Re-enable button on error
  }
}

async function speakBack(params) {
  if (speaking) {
    console.log("Speech synthesis is already in progress.");
    return;
  }

  const textToSpeak = `Generating art with visual type ${params.visualType}, color ${params.color}, speed ${params.speed}, and count ${params.count}.`;
  console.log("Speaking back art description using OpenAI TTS...");

  speaking = true; // Set flag to prevent overlapping

  try {
    const response = await fetch('https://api.openai.com/v1/audio/speech', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${openaiApiKey}`
      },
      body: JSON.stringify({
        model: 'tts-1', // Choose a model: 'tts-1' or 'tts-1-hd' for higher quality
        input: textToSpeak,
        voice: 'nova', // Choose a voice: 'alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'
        response_format: 'mp3', // Audio format
        speed: 1.0 // Speed of speech (0.25 to 4.0)
      })
    });

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

    // Get the audio data as a Blob
    const audioBlob = await response.blob();
    // Create a temporary URL for the audio Blob
    const audioUrl = URL.createObjectURL(audioBlob);

    // Play the audio using p5.sound's loadSound and play functions
    const sound = loadSound(audioUrl, () => {
      sound.play();
      console.log("OpenAI TTS audio started playing.");
    }, (error) => {
      // Callback for when loadSound fails
      console.error("p5.sound loadSound error:", error);
      speaking = false; // Reset flag on error
      URL.revokeObjectURL(audioUrl); // Clean up the temporary URL
    });

    // Set a callback for when the sound finishes playing
    sound.onended(() => {
      speaking = false; // Reset flag when speech is done
      console.log("OpenAI TTS audio finished playing.");
      URL.revokeObjectURL(audioUrl); // Clean up the temporary URL after playback
    });

  } catch (error) {
    console.error("Error communicating with OpenAI TTS:", error);
    transcriptText = "Error: Could not speak back art parameters from OpenAI. " + error.message;
    transcriptDiv.html(transcriptText);
    speaking = false; // Reset flag on error
  }
}

function drawWaves() {
  fill(visualParams.color);
  let waveHeight = height / 4;
  let waveWidth = width / (visualParams.count - 1);

  beginShape();
  vertex(0, height); // Start from bottom-left
  for (let i = 0; i < visualParams.count; i++) {
    let x = i * waveWidth;
    let y = height / 2 + sin(frameCount * 0.01 * visualParams.speed + i * 0.1) * waveHeight;
    vertex(x, y);
  }
  vertex(width, height); // Go to bottom-right
  endShape(CLOSE);
}

function drawParticles() {
  fill(visualParams.color);
  for (let i = 0; i < visualParams.count; i++) {
    let x = (noise(i * 0.01, frameCount * 0.005 * visualParams.speed) * width);
    let y = (noise(i * 0.02, frameCount * 0.005 * visualParams.speed) * height);
    circle(x, y, 10);
  }
}

function drawCircles() {
  fill(visualParams.color);
  let maxRadius = min(width, height) / 3;
  let circleSpacing = maxRadius / visualParams.count;

  for (let i = 0; i < visualParams.count; i++) {
    let radius = (i + 1) * circleSpacing;
    let x = width / 2;
    let y = height / 2;
    circle(x, y, radius * 2);
  }
}

function drawLines() {
  stroke(visualParams.color);
  strokeWeight(2);
  noFill();

  let lineCount = visualParams.count;
  let lineSpacing = height / (lineCount + 1);

  for (let i = 0; i < lineCount; i++) {
    let y = (i + 1) * lineSpacing;
    beginShape();
    for (let x = 0; x <= width; x += 10) {
      let offset = sin(frameCount * 0.02 * visualParams.speed + x * 0.01) * 20;
      vertex(x, y + offset);
    }
    endShape();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0); // Clear background after resize
}

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