index.html

<style>
  body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: Arial, sans-serif;
  }
  
  input {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 5px;
  }
  
  button {
    background-color: #ff0000;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
  }
  
  button:disabled {
    background-color: #800000;
    cursor: not-allowed;
  }
</style>

<h1>Lego-Man AI Image Generator</h1>

<div>
  <input id="promptInput" placeholder="Enter image description..." style="width:300px;">
  <button id="generateBtn" onclick="generateImages()">Generate 6 Lego-Man Images</button>
</div>

<div id="imageGrid" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:20px;">
  <img id="img1" style="width:100%; aspect-ratio:1; object-fit:cover;">
  <img id="img2" style="width:100%; aspect-ratio:1; object-fit:cover;">
  <img id="img3" style="width:100%; aspect-ratio:1; object-fit:cover;">
  <img id="img4" style="width:100%; aspect-ratio:1; object-fit:cover;">
  <img id="img5" style="width:100%; aspect-ratio:1; object-fit:cover;">
  <img id="img6" style="width:100%; aspect-ratio:1; object-fit:cover;">
</div>

<script>
  async function generateImages() {
    generateBtn.disabled = true;
    generateBtn.textContent = "⏳ Generating...";

    let prompt = promptInput.value + " in lego-man art style";
    
    for (let i = 1; i <= 6; i++) {
      let imgEl = document.getElementById(`img${i}`);
      imgEl.src = "https://placehold.co/400x400?text=Generating...";
      generateImage(prompt).then(dataUrl => {
        imgEl.src = dataUrl;
      });
    }

    generateBtn.disabled = false;
    generateBtn.textContent = "Generate 6 Lego-Man Images";
  }
</script>

<!-- For Hugging Face hosting, we need to add this script -->
<script src="https://cdn.jsdelivr.net/npm/@huggingface/inference@1.5.2/dist/index.min.js"></script>
<script>
  // Initialize the Hugging Face Inference SDK
  const HF = new HfInference(Process.env);
  
  // Override the generateImage function to use Hugging Face's text-to-image model
  async function generateImage(prompt) {
    const result = await HF.textToImage({
      inputs: prompt,
      model: "stabilityai/stable-diffusion-2-1",
    });
    return URL.createObjectURL(result);
  }
</script>