Upload future-html-revision-40.txt

![GIF_20250526_142543_895.gif](https://cdn-uploads.huggingface.co/production/uploads/68349d5c9575cb89d6c6915e/cVqYre-6oXATfcnrd-eXt.gif)

Files changed (1) hide show

future-html-revision-40.txt +712 -0

future-html-revision-40.txt ADDED Viewed

	@@ -0,0 +1,712 @@

+<<<<< this file contains your perchance lists first, and your HTML code underneath it >>>>>
+generateText = {import:ai-text-plugin}
+generateImage = {import:text-to-image-plugin}
+$meta
+  title = Future HTML
+  description = 💻 Coder Helper standalone code assistant 👩‍💻
+  image = https://user.uploads.dev/file/a08d899d09d55507326bbf40cc0e9c60.gif
+<html lang="en-US">
+<meta charset="utf-16">
+  <center>
+  <p>
+  <a href="https://perchance.org/advanced-ai-web-dev">
+  🧑‍🔬<br>
+» AIdev Tutorial «
+  </a>
+  </p>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
+body {
+  width: 100%;
+  max-width: 720px;
+  margin: 0px;
+  padding: 10px;
+  background-color: #000;
+  color: #0F0;
+  font-family: 'Share Tech Mono', 'Courier New', monospace;
+  position: relative;
+  overflow-x: hidden;
+}
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)),
+              url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='matrix' width='120' height='180' patternUnits='userSpaceOnUse'%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='0' y='15'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300CC00' font-family='monospace' font-size='14' x='10' y='30'%3E10101001010101110010%3C/text%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='5' y='45'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300DD00' font-family='monospace' font-size='14' x='15' y='60'%3E10010101001010100101%3C/text%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='0' y='75'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300CC00' font-family='monospace' font-size='14' x='10' y='90'%3E10101001010101110010%3C/text%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='5' y='105'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300DD00' font-family='monospace' font-size='14' x='15' y='120'%3E10010101001010100101%3C/text%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='0' y='135'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300CC00' font-family='monospace' font-size='14' x='10' y='150'%3E10101001010101110010%3C/text%3E%3Ctext fill='%2300FF00' font-family='monospace' font-size='14' x='5' y='165'%3E01010111001010101110%3C/text%3E%3Ctext fill='%2300DD00' font-family='monospace' font-size='14' x='15' y='180'%3E10010101001010100101%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23matrix)' opacity='0.1'/%3E%3C/svg%3E");
+  z-index: -1;
+  opacity: 0.2;
+}
+h1 {
+  margin-bottom: 10px;
+  color: #0F0;
+  font-size: 1.8rem;
+  text-align: center;
+  text-shadow: 0 0 5px #0F0;
+  font-family: 'VT323', monospace;
+  letter-spacing: 1px;
+}
+.chat-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 10px;
+}
+.content-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+#outputCtn {
+  width: 100%;
+  margin-bottom: 15px;
+  padding: 15px;
+  background: #000800;
+  border-radius: 10px;
+  border: 3px solid #0F0;
+  box-shadow: 0 0 15px rgba(0,255,0,0.2);
+  min-height: 150px;
+  position: relative;
+  overflow: hidden;
+}
+#outputCtn::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 255, 0, 0.03),
+    rgba(0, 255, 0, 0.03) 2px,
+    transparent 2px,
+    transparent 4px
+  );
+  pointer-events: none;
+}
+.input-container {
+  width: 100%;
+}
+#topicInput {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #0F0;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  font-size: 1rem;
+  resize: vertical;
+  background-color: rgba(0, 20, 0, 0.9);
+  color: #0F0;
+  font-family: 'Share Tech Mono', monospace;
+  box-shadow: 0 0 10px rgba(0,255,0,0.2);
+}
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.button-group button {
+  padding: 10px 15px;
+  border: 1px solid #0F0;
+  border-radius: 5px;
+  background-color: rgba(0, 40, 0, 0.8);
+  color: #0F0;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.3s;
+  flex: 1;
+  min-width: 120px;
+  font-family: 'Share Tech Mono', monospace;
+  text-shadow: 0 0 5px #0F0;
+  box-shadow: 0 0 10px rgba(0,255,0,0.2);
+}
+.button-group button:hover {
+  background-color: rgba(0, 80, 0, 0.8);
+  box-shadow: 0 0 15px rgba(0,255,0,0.4);
+}
+/* Mobile adjustments */
+@media (max-width: 600px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+  #outputCtn {
+    padding: 10px;
+  }
+  .button-group button {
+    min-width: 100%;
+  }
+}
+</style>
+<div class="main-container">
+<a href="https://poe.com/Future-HTML" title="Future-HTML Assistant">
+<img src="https://user.uploads.dev/file/a08d899d09d55507326bbf40cc0e9c60.gif" width="222px">
+</a>
+<hr style="border-color: #0F0; box-shadow: 0 0 5px #0F0;">
+   <h1>↓ Future HTML Code Helper ↓</h1>
+    <div class="chat-container">
+      <div class="content-area">
+        <div id="outputCtn">
+          <div id="textOutputEl" style="white-space: pre-wrap; font-size: 1.1rem; line-height: 1.5; color: #0F0; font-family: 'Share Tech Mono', monospace;"></div>
+        </div>
+        <div class="input-container">
+          <textarea id="topicInput" placeholder="Enter your HTML, CSS, JavaScript, or coding question:"></textarea>
+          <div class="button-group">
+            <button id="generateTextBtn" onclick="generateTextOutput()">ANALYZE CODE</button>
+            <button id="askGptBtn" onclick="askGPT()">ASK HTML GPT™️</button>
+            <button id="copyPromptBtn" onclick="copyPrompt()" style="display: none;">COPY CODE</button>
+            <button id="generateImageBtn" onclick="generateImageFromText()" style="display: none;">GENERATE IMAGE</button>
+            <button id="stopBtn" hidden onclick="currentPromise?.stop()">Stop Generation</button>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+<div class="main-container">
+    <h1>AI Text to Image Generator</h1>
+    <p class="subtitle" style="color: #0F0; text-shadow: 0 0 3px #0F0;">Create amazing images with AI</p>
+  <div class="gallery-container">
+    <div class="image-display">
+      <img id="generatedImageEl" alt="Generated AI Image" src="https://placehold.co/600x400/000/0F0?text=Your+Image+Will+Appear+Here" style="border: 2px solid #0F0; box-shadow: 0 0 15px rgba(0,255,0,0.3);">
+      <div class="prompt-info" id="promptInfoEl"></div>
+    </div>
+    <div class="prompt-input-container">
+      <input type="text" id="customPromptInput" class="prompt-input" placeholder="Enter your image prompt here...">
+      <div class="button-container">
+        <button id="generateCustomBtn" class="action-button generate-custom-btn">Generate From Prompt</button>
+        <button id="generateRandomBtn" class="action-button generate-random-btn">Generate Random</button>
+      </div>
+      <div id="errorMessageEl" class="error-message" hidden></div>
+    </div>
+  </div>
+  <footer>
+    <p style="color: #0F0;">Made with <a href="https://poe.com/Ai-Coder-Thingy" target="_blank" style="color: #0F0; text-decoration: underline;">Ai-Coder-Thingy Assistant</a> | Created 2025</p>
+  </footer>
+</div>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Share Tech Mono', 'Courier New', monospace; line-height: 1.6; color: #0F0; background-color: #000; text-align: left; }
+  .main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+  header { text-align: center; margin-bottom: 30px; }
+  header h1 { color: #0F0; margin-bottom: 5px; text-shadow: 0 0 5px #0F0; }
+  header .subtitle { color: #0F0; font-size: 1.2rem; }
+  .gallery-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
+  .image-display { background-color: rgba(0, 10, 0, 0.8); border-radius: 10px; box-shadow: 0 0 15px rgba(0,255,0,0.2); overflow: hidden; position: relative; border: 1px solid #0F0; }
+  .image-display img { width: 100%; height: auto; display: block; max-height: 60vh; object-fit: contain; }
+  .prompt-info { padding: 15px; background-color: rgba(0, 20, 0, 0.9); color: #0F0; font-size: 0.9rem; border-top: 1px solid #0F0; }
+  .prompt-input-container { background-color: rgba(0, 10, 0, 0.8); border-radius: 10px; padding: 20px; box-shadow: 0 0 15px rgba(0,255,0,0.2); border: 1px solid #0F0; }
+  .prompt-input { width: 100%; padding: 12px 15px; border: 2px solid #0F0; border-radius: 5px; font-size: 1rem; margin-bottom: 15px; transition: all 0.3s; background-color: rgba(0, 20, 0, 0.9); color: #0F0; font-family: 'Share Tech Mono', monospace; }
+  .prompt-input:focus { border-color: #0F0; outline: none; box-shadow: 0 0 10px rgba(0,255,0,0.4); }
+  .button-container { display: flex; gap: 10px; flex-wrap: wrap; }
+  .action-button { padding: 12px 20px; border: 1px solid #0F0; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: all 0.3s; flex: 1; min-width: 180px; background-color: rgba(0, 40, 0, 0.8); color: #0F0; font-family: 'Share Tech Mono', monospace; text-shadow: 0 0 5px #0F0; }
+  .action-button:hover { transform: translateY(-2px); background-color: rgba(0, 80, 0, 0.8); box-shadow: 0 0 10px rgba(0,255,0,0.4); }
+  .action-button:active { transform: translateY(0); }
+  .action-button:disabled { background-color: rgba(0, 20, 0, 0.5); cursor: not-allowed; transform: none; color: rgba(0, 255, 0, 0.5); }
+  .generate-custom-btn { background-color: rgba(0, 40, 0, 0.8); color: #0F0; }
+  .generate-custom-btn:hover:not(:disabled) { background-color: rgba(0, 80, 0, 0.8); }
+  .generate-random-btn { background-color: rgba(0, 60, 0, 0.8); color: #0F0; }
+  .generate-random-btn:hover:not(:disabled) { background-color: rgba(0, 100, 0, 0.8); }
+  .error-message { background-color: rgba(60, 0, 0, 0.8); color: #0F0; padding: 12px; border-radius: 5px; margin-top: 15px; border: 1px solid #F00; }
+  footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #0F0; color: #0F0; }
+  footer a { color: #0F0; text-decoration: none; text-shadow: 0 0 3px #0F0; }
+  footer a:hover { text-decoration: underline; }
+  .loading-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 10, 0, 0.8); display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #0F0; text-shadow: 0 0 5px #0F0; }
+  @media (min-width: 768px) {
+    .gallery-container { flex-direction: row; }
+    .image-display { flex: 3; }
+    .prompt-input-container { flex: 2; }
+  }
+  @media (max-width: 767px) {
+    .button-container { flex-direction: column; }
+    .action-button { width: 100%; }
+  }
+  a { color: #0F0; text-shadow: 0 0 3px #0F0; }
+  hr { border-color: #0F0; box-shadow: 0 0 5px #0F0; }
+  /* Matrix code rain effect */
+  @keyframes matrixRain {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(1000%); }
+  }
+  .matrix-code {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+  .matrix-code span {
+    color: #0F0;
+    font-size: 1.2rem;
+    position: absolute;
+    opacity: 0.8;
+    animation: matrixRain 15s linear infinite;
+    text-shadow: 0 0 5px #0F0;
+  }
+  .green-button {
+    background-color: rgba(0, 40, 0, 0.8);
+    color: #0F0;
+    padding: 10px 20px;
+    border: 1px solid #0F0;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-family: 'Share Tech Mono', monospace;
+    text-shadow: 0 0 5px #0F0;
+    transition: all 0.3s;
+    box-shadow: 0 0 10px rgba(0,255,0,0.2);
+  }
+  .green-button a {
+    color: #0F0;
+    text-decoration: none;
+    text-shadow: 0 0 3px #0F0;
+  }
+  .green-button:hover {
+    background-color: rgba(0, 80, 0, 0.8);
+    box-shadow: 0 0 15px rgba(0,255,0,0.4);
+  }
+</style>
+<div class="matrix-code" id="matrixCodeContainer"></div>
+<script>
+  // Matrix code rain effect
+  function createMatrixRain() {
+    const container = document.getElementById('matrixCodeContainer');
+    const characters = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
+    const columns = Math.floor(window.innerWidth / 20);
+    for (let i = 0; i < columns; i++) {
+      const span = document.createElement('span');
+      span.innerText = characters.charAt(Math.floor(Math.random() * characters.length));
+      span.style.left = (i * 20) + 'px';
+      span.style.animationDelay = Math.random() * 10 + 's';
+      span.style.animationDuration = Math.random() * 10 + 10 + 's';
+      span.style.opacity = Math.random() * 0.5 + 0.25;
+      container.appendChild(span);
+      setInterval(() => {
+        span.innerText = characters.charAt(Math.floor(Math.random() * characters.length));
+      }, 100 + Math.random() * 2000);
+    }
+  }
+  // Rest of the original script
+  const aitext = {
+    generatePrompt: async () => {
+      console.log("AI text prompt generator called");
+      await new Promise(resolve => setTimeout(resolve, 800));
+      const prompts = [
+        "A crystalline cave illuminated by bioluminescent insects",
+        "A steampunk airship harbor floating among the clouds",
+        "An ancient temple overgrown with flowering vines",
+        "A cyberpunk marketplace with neon-lit food stalls",
+        "A desert oasis under a triple moon sky",
+        "A forgotten library with books that whisper their stories",
+        "A volcanic island with rivers of glowing magma",
+        "A celestial observatory perched on the edge of a cosmic void",
+        "A bamboo forest where time flows backwards",
+        "A subterranean city built inside a massive geode",
+        "A floating garden with gravity-defying waterfalls",
+        "A post-apocalyptic amusement park reclaimed by nature",
+        "A dimension where shadows cast light instead of darkness",
+        "A crystal palace reflecting a thousand different sunsets",
+        "An arctic research station during the aurora borealis",
+        "A hidden valley where mythical creatures roam freely",
+        "A clockwork metropolis powered by impossible mathematics",
+        "A coastal village built on the back of a sleeping sea monster",
+        "A jungle treehouse network connected by rainbow bridges",
+        "A mirrored canyon that shows alternate realities in its reflections",
+        "A magical forest with glowing mushrooms",
+        "A futuristic city with flying cars",
+        "A peaceful mountain lake at sunset",
+        "An underwater scene with colorful coral reef",
+        "A spaceship approaching an alien planet",
+        "A medieval castle on a hill during thunderstorm",
+        "A cozy cabin in the snow with northern lights",
+        "A surreal dreamscape with floating islands"
+      ];
+      return prompts[Math.floor(Math.random() * prompts.length)];
+    }
+  };
+  const imageCache = new Map();
+  function showLoading() {
+    const loadingEl = document.createElement('div');
+    loadingEl.className = 'loading-indicator';
+    loadingEl.id = 'loadingIndicatorEl';
+    loadingEl.innerHTML = '<div>⏳ Generating image...</div>';
+    const imageDisplay = document.querySelector('.image-display');
+    imageDisplay.appendChild(loadingEl);
+  }
+  function hideLoading() {
+    const loadingEl = document.getElementById('loadingIndicatorEl');
+    if (loadingEl) {
+      loadingEl.remove();
+    }
+  }
+  function showError(message) {
+    const errorMessageEl = document.getElementById('errorMessageEl');
+    errorMessageEl.textContent = message;
+    errorMessageEl.hidden = false;
+    setTimeout(() => {
+      errorMessageEl.hidden = true;
+    }, 5000);
+  }
+  async function generateImageFromPrompt(prompt) {
+    if (imageCache.has(prompt)) {
+      console.log("Using cached image for prompt:", prompt);
+      return imageCache.get(prompt);
+    }
+    try {
+      let imageUrl = await generateImage(prompt);
+      imageCache.set(prompt, imageUrl);
+      return imageUrl;
+    } catch (error) {
+      console.error("Error generating image:", error);
+      throw new Error("Failed to generate image. Please try again.");
+    }
+  }
+  async function generateNewImage() {
+    try {
+      const generateRandomBtn = document.getElementById('generateRandomBtn');
+      const generateCustomBtn = document.getElementById('generateCustomBtn');
+      const generatedImageEl = document.getElementById('generatedImageEl');
+      const promptInfoEl = document.getElementById('promptInfoEl');
+      generateRandomBtn.disabled = true;
+      generateCustomBtn.disabled = true;
+      generateRandomBtn.textContent = "⏳ Generating...";
+      showLoading();
+      const prompt = await aitext.generatePrompt();
+      const imageUrl = await generateImageFromPrompt(prompt);
+      generatedImageEl.src = imageUrl;
+      promptInfoEl.textContent = `Prompt: "${prompt}"`;
+      hideLoading();
+      generateRandomBtn.disabled = false;
+      generateCustomBtn.disabled = false;
+      generateRandomBtn.textContent = "Generate Random";
+    } catch (error) {
+      hideLoading();
+      showError(error.message);
+      const generateRandomBtn = document.getElementById('generateRandomBtn');
+      const generateCustomBtn = document.getElementById('generateCustomBtn');
+      generateRandomBtn.disabled = false;
+      generateCustomBtn.disabled = false;
+      generateRandomBtn.textContent = "Generate Random";
+    }
+  }
+  async function generateFromCustomPrompt() {
+    const customPromptInput = document.getElementById('customPromptInput');
+    const generateRandomBtn = document.getElementById('generateRandomBtn');
+    const generateCustomBtn = document.getElementById('generateCustomBtn');
+    const generatedImageEl = document.getElementById('generatedImageEl');
+    const promptInfoEl = document.getElementById('promptInfoEl');
+    const prompt = customPromptInput.value.trim();
+    if (!prompt) {
+      showError("Please enter a prompt before generating.");
+      return;
+    }
+    try {
+      generateRandomBtn.disabled = true;
+      generateCustomBtn.disabled = true;
+      generateCustomBtn.textContent = "⏳ Generating...";
+      showLoading();
+      const imageUrl = await generateImageFromPrompt(prompt);
+      generatedImageEl.src = imageUrl;
+      promptInfoEl.textContent = `Prompt: "${prompt}"`;
+      hideLoading();
+      generateRandomBtn.disabled = false;
+      generateCustomBtn.disabled = false;
+      generateCustomBtn.textContent = "Generate From Prompt";
+    } catch (error) {
+      hideLoading();
+      showError(error.message);
+      generateRandomBtn.disabled = false;
+      generateCustomBtn.disabled = false;
+      generateCustomBtn.textContent = "Generate From Prompt";
+    }
+  }
+  async function generateImageFromText() {
+    const textOutputEl = document.getElementById('textOutputEl');
+    const customPromptInput = document.getElementById('customPromptInput');
+    const prompt = textOutputEl.innerText.trim();
+    if (!prompt) {
+      showError("No text generated yet. Please generate text first.");
+      return;
+    }
+    customPromptInput.value = prompt;
+    await generateFromCustomPrompt();
+  }
+  let currentPromise;
+  let hasGeneratedPrompt = false;
+  function constructPrompt() {
+    const topicInput = document.getElementById('topicInput');
+    let topic = topicInput.value;
+    return `You are a professional HTML/CSS/JavaScript coding assistant specializing in web development best practices and modern coding standards. Analyze this code or answer this coding question: ${topic}. Provide clear, specific solutions focusing on: 1) Syntax corrections, 2) Best practices, 3) Browser compatibility, 4) Modern standards, 5) Performance optimization. Give detailed explanations and working code examples.`;
+  }
+  async function generateTextOutput() {
+    const topicInput = document.getElementById('topicInput');
+    const generateTextBtn = document.getElementById('generateTextBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const textOutputEl = document.getElementById('textOutputEl');
+    const copyPromptBtn = document.getElementById('copyPromptBtn');
+    const generateImageBtn = document.getElementById('generateImageBtn');
+    if (!topicInput.value.trim()) return alert("Please enter your code or coding question");
+    generateTextBtn.disabled = true;
+    generateTextBtn.textContent = "⏳ Analyzing Code...";
+    stopBtn.hidden = false;
+    textOutputEl.innerHTML = "";
+    try {
+      currentPromise = generateText({
+        instruction: constructPrompt(),
+        onChunk: (data) => {
+          textOutputEl.innerHTML += data.textChunk;
+        },
+      });
+      await currentPromise;
+      copyPromptBtn.style.display = "inline-block";
+      generateImageBtn.style.display = "inline-block";
+      hasGeneratedPrompt = true;
+    } catch (error) {
+      console.error("Error generating text:", error);
+      alert("Error generating text: " + error.message);
+    } finally {
+      generateTextBtn.disabled = false;
+      generateTextBtn.textContent = "ANALYZE CODE";
+      stopBtn.hidden = true;
+    }
+  }
+  function copyPrompt() {
+    const textOutputEl = document.getElementById('textOutputEl');
+    let promptText = textOutputEl.innerText;
+    navigator.clipboard.writeText(promptText).then(() => {
+      alert("Code analysis copied to clipboard successfully!");
+    }, (err) => {
+      console.error('Could not copy text: ', err);
+      alert("Failed to copy analysis. Please try again.");
+    });
+  }
+  async function askGPT() {
+    const topicInput = document.getElementById('topicInput');
+    const askGptBtn = document.getElementById('askGptBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const textOutputEl = document.getElementById('textOutputEl');
+    if (!topicInput.value.trim()) return alert("Please enter your HTML/coding question");
+    askGptBtn.disabled = true;
+    askGptBtn.textContent = "⏳ Asking HTML GPT...";
+    stopBtn.hidden = false;
+    textOutputEl.innerHTML = "";
+    try {
+      currentPromise = generateText({
+        instruction: `You are an expert HTML/CSS/JavaScript developer and coding tutor. Answer this web development question with detailed explanations and working code examples: ${topicInput.value}`,
+        onChunk: (data) => {
+          textOutputEl.innerHTML += data.textChunk;
+        },
+      });
+      await currentPromise;
+    } catch (error) {
+      console.error("Error asking GPT:", error);
+      alert("Error asking GPT: " + error.message);
+    } finally {
+      askGptBtn.disabled = false;
+      askGptBtn.textContent = "ASK HTML GPT";
+      stopBtn.hidden = true;
+    }
+  }
+  window.onload = function() {
+    createMatrixRain();
+    generateNewImage();
+    const generateRandomBtn = document.getElementById('generateRandomBtn');
+    const generateCustomBtn = document.getElementById('generateCustomBtn');
+    const customPromptInput = document.getElementById('customPromptInput');
+    generateRandomBtn.addEventListener('click', generateNewImage);
+    generateCustomBtn.addEventListener('click', generateFromCustomPrompt);
+    customPromptInput.addEventListener('keypress', function(event) {
+      if (event.key === 'Enter') {
+        generateFromCustomPrompt();
+      }
+    });
+  };
+</script>
+<!-- TOS -->
+  <center>
+  <hr><br><button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">
+  <a href="https://poe.com/Future-HTML" style="color: white; text-decoration: none;">Future-HTML Coder Assistant</a>
+</button>
+<br><br>
+  <div style="text-align:center;">
+    <div>⚖️ <a href="https://poe.com/s/FCFHKtkp9Cn67SNTQEFf">AI Imagery Rules</a> 👮‍♂️</div>
+    <br><sup><i><strong>Affiliate:</strong></i></sup><br><a href="https://candy.ai/ai-anime?via=youmakeai-friend">
+          <img src="https://user-uploads.perchance.org/file/5c04e64b4a86d317b9a78613d6467259.jpg" height="100px" alt="AI FRIEND">
+        </a>
+        <br>
+       <strong>Not Getting The AI Art You Wanted?</strong><br>
+        Try the Prompt support on our <a href="https://poe.com/youmakeai"><strong><u>POE</u></strong></a>
+    <br>
+    <br>
+    <sub>This is an AI fan site; we are NOT endorsed by,<br>NOR affiliated with any of the following companies:</sub>
+  </div>
+  <h4>
+    <div style="text-align:center;">
+      <a href="https://perchance.org/privacy-policy">Perchance Privacy</a> |
+      <a href="https://poe.com/pages/privacy-center">Poe Privacy</a><br>
+      <a href="https://youmakeaiart.blogspot.com/p/privacy-policy.html?m=1">Our Privacy</a> |
+      <a href="https://nightcafe.studio/policies/terms-of-service">NightCafe TOS</a> |
+      <a href="https://youmakeaiart.blogspot.com/p/terms-of-use.html">Our TOS</a><br>
+      <a href="https://openai.com/policies/terms-of-use/">OpenAI TOS</a> |
+      <a href="https://stability.ai/tos-api-ds">Stability AI TOS</a><br>
+      <a href="https://bfl.ai/legal/terms-of-service">BFL/Flux TOS</a>
+    </div>
+  </h4>
+  <hr>
+  <p>©️ Copyright 2025 YouMake.Ai</p>
+  </center>
+</html>