Code viewer [Ancient Brain]

Code viewer for World: ImagiGen
// Style elements
const style = document.createElement('style');
style.textContent = `
  @import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('uploads/loone/background.jpg');
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  h1 {
    color: #2b2d42;
    text-align: center;
    margin-bottom: 20px;
    font-size: 60px;
    font-family: 'Smooch', cursive;
  }
  .container {
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
  }
  input[type="text"], select, button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dedede;
    margin: 10px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  button {
    background-color: #2b2d42;
    color: white;
    cursor: pointer;
  }
  button:hover {
    background-color: #274C77;
  }
  #output {
    text-align: center;
    margin-top: 20px;
  }
  #loading {
    text-align: center;
    margin-top: 20px;
  }
  #loading img {
    width: 50px;
  }
  #image-info {
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
  }
`;

// Append the style element to the head of the document
document.head.appendChild(style);

// Function to show loading spinner
function showLoading() {
  document.querySelector("#loading").style.display = 'block';
}

// Function to hide loading spinner
function hideLoading() {
  document.querySelector("#loading").style.display = 'none';
}

let apiKey = ''; // Variable to store the API key

// Function to set API key
function setApiKey() {
  apiKey = document.querySelector("#api-key").value.trim();
  if (apiKey) {
    document.querySelector("#api-key").disabled = true;
  } else {
    alert("Please enter an API key.");
  }
}

// Function to generate a random prompt
function generateRandomPrompt() {
  const prompts = [
    "Mark studying in Cambridge",
    "aliens fighting in space",
    "an elephant climbing a tree",
    "a cat wearing a hat",
    "a penguin on a surfboard",
    "zombie apocalypse picnic",
    "giraffe with a jetpack",
    "cow riding a skateboard",
    "Ancient Brain",
    "flying pigs",
    "Mark teaching an AI lecture",
    "chicken stand-up comedy",
    "banana riding a unicycle",
  ];
  const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
  document.querySelector("#prompt-input").value = randomPrompt;
}

// Function to generate random message
function getRandomMessage(prompt, artStyle) {
  const messages = [
    `Cool picture! Image of a ${prompt} using the ${artStyle} filter.`,
    `Wow! Image of a ${prompt} using the ${artStyle} filter.`,
    `Amazing! A ${artStyle} transformation of ${prompt}.`,
    `Stunning creation! Explore ${prompt} in the style of ${artStyle}.`,
    `Impressive! Witness the beauty of ${prompt} through the ${artStyle} lens.`,
    `Fantastic! Experience ${prompt} reimagined with the ${artStyle} touch.`,
  ];
  return messages[Math.floor(Math.random() * messages.length)];
}

// Function to generate image based on selected art style and prompt
function generateImage(artStyle, prompt) {
  showLoading(); // Display loading spinner

  const outputDiv = document.querySelector("#output");

  // Clear existing image and info
  outputDiv.innerHTML = "";
  document.querySelector("#image-info").textContent = "";
  
  // Include the art style in the prompt
  const promptWithStyle = `${prompt} with ${artStyle} filter`;


// MH edit
console.log ( promptWithStyle );

  // Making the API request
  fetch('https://api.openai.com/v1/images/generations', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "dall-e-3",
      prompt: promptWithStyle,
      n: 1,
      size: "1024x1024"
    })
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    hideLoading(); // Hide loading spinner
    if (data && data.data && data.data.length > 0) {
      const imageUrl = data.data[0].url;
      outputDiv.innerHTML = `<img src="${imageUrl}" alt="Generated Image" style="max-width:100%; height:auto;" />`;
      // Display random message
      const randomMessage = getRandomMessage(prompt, artStyle);
      document.querySelector("#image-info").textContent = randomMessage;
      // Show the Regenerate button
      document.querySelector("#regenerate-button").style.display = 'block';
    } else {
      outputDiv.textContent = "No image generated.";
    }
  })
  .catch(error => {
    console.error("Error while generating image:", error);
    hideLoading(); // Hide loading spinner in case of an error
    outputDiv.textContent = `Error: Please try again.`;
  });
}

// Function to regenerate image based on previous inputs
function regenerateImage() {
  // Clear existing image and info
  document.querySelector("#output").innerHTML = "";
  document.querySelector("#image-info").textContent = "";
  // Hide the Regenerate button
  document.querySelector("#regenerate-button").style.display = 'none';

  const artStyle = document.querySelector("#art-style-select").value;
  const prompt = document.querySelector("#prompt-input").value.trim();
  if (apiKey && artStyle && prompt) {
    generateImage(artStyle, prompt);
  } else {
    alert("Please set the API key, select a filter, and enter a prompt.");
  }
}

// Add the HTML structure into the body
document.body.innerHTML = `
  <h1>ImagiGen</h1>
  <div class="container">
    <h3>Enter API Key</h3>
    <input type="text" id="api-key" placeholder="Enter your API Key...">
    <p id="api-key-message"></p>
    <button id="set-api-key">Set API Key</button>
  </div>
  <p id="api-key-text" style="display: none;"></p>
  <div class="container">
    <h3>Select Filter</h3>
    <select id="art-style-select">
      <option value="" disabled selected style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Choose a Filter</option>
      <option value="blur">Blur</option>
      <option value="brush-stroke">Brush Stroke</option>
      <option value="cartoon">Cartoon</option>
      <option value="comic-book">Comic Book</option>
      <option value="fish-lense">Fish Lens</option>
      <option value="greyscale">Greyscale</option>
      <option value="neon">Neon</option>
      <option value="oil-painting">Oil Painting</option>
      <option value="pixel-art">Pixel Art</option>
      <option value="pop-art">Pop Art</option>
      <option value="sepia">Sepia</option>
      <option value="sketch">Sketch</option>
      <option value="uv">UV</option>
      <option value="vintage">Vintage</option>
      <option value="watercolor">Watercolor</option>
    </select>
  </div>
  <div class="container">
    <h3>Enter a prompt</h3>
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <button id="randomize-prompt" style="width: 25%; margin-right: 2%;">Randomize</button>
      <input type="text" id="prompt-input" placeholder="Enter a prompt..." style="width: 100%;"> 
    </div>
    <button id="submit-prompt">Generate Image</button>
  </div>
  <div class="container">
    <div id="loading" style="display:none;"><img src="uploads/loone/loading.gif" alt="Loading..." /></div>
    <div id="output"></div>
    <div id="image-info"></div>
    <!-- Regenerate button -->
    <button id="regenerate-button" style="display: none; margin-top: 50px;" onclick="regenerateImage()">Regenerate</button>
  </div>
`;

// Event listeners
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector("#set-api-key").addEventListener('click', setApiKey);
  document.querySelector("#submit-prompt").addEventListener('click', function () {
    const artStyle = document.querySelector("#art-style-select").value;
    const prompt = document.querySelector("#prompt-input").value.trim();
    if (apiKey && artStyle && prompt) {
      generateImage(artStyle, prompt);
    } else {
      alert("Please set the API key, select a filter, and enter a prompt.");
    }
  });

  // Add event listener for the Randomize button
  document.querySelector("#randomize-prompt").addEventListener('click', generateRandomPrompt);
});