Update index.html

index.html

@@ -1,17 +1,48 @@
-import streamlit as st
-from diffusers import StableDiffusionPipeline
-import torch
-
-# Load the model
-model_id = "runwayml/stable-diffusion-v1-5"
-pipe = StableDiffusionPipeline.from_pretrained(model_id)
-pipe = pipe.to("cuda")  # Runs on Hugging Face's GPU servers
-
-# Streamlit UI
-st.title("Free AI Image Generator")
-prompt = st.text_input("Describe your image...")
-
-if prompt:
-    with st.spinner("Generating..."):
-        image = pipe(prompt).images[0]
-        st.image(image, caption=prompt, use_column_width=True)
+<script>
+  const HF_TOKEN = "YOUR_HUGGING_FACE_TOKEN"; // Replace with your token
+
+  async function generateImage() {
+    const prompt = document.getElementById("prompt").value;
+    const imageContainer = document.getElementById("image");
+    
+    if (!prompt) {
+      imageContainer.innerHTML = "Please enter a prompt.";
+      return;
+    }
+
+    imageContainer.innerHTML = "Generating...";
+
+    try {
+      // Generate a RANDOM SEED (0 to 1,000,000)
+      const randomSeed = Math.floor(Math.random() * 1000000);
+
+      // Add parameters for randomness
+      const response = await fetch(
+        "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5",
+        {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${HF_TOKEN}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            inputs: prompt,
+            parameters: {
+              seed: randomSeed,       // Random seed for variation
+              guidance_scale: 7.5,   // Controls creativity (7-15)
+              num_inference_steps: 50 // More steps = more details (20-100)
+            }
+          }),
+        }
+      );
+
+      if (!response.ok) throw new Error("API error: " + response.status);
+
+      const imageBlob = await response.blob();
+      const imageUrl = URL.createObjectURL(imageBlob);
+      imageContainer.innerHTML = `<img src="${imageUrl}" style="max-width:100%;">`;
+    } catch (error) {
+      imageContainer.innerHTML = "Error: " + error.message;
+    }
+  }
+</script>