Spaces:

Sourav6861
/

ImgGenPro

Running

App Files Files Community

Sourav6861 commited on Aug 27, 2025

Commit

95ad280

verified ·

1 Parent(s): cd948f7

Create index.html

Browse files

Files changed (1) hide show

index.html +511 -0

index.html ADDED Viewed

	@@ -0,0 +1,511 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>imgGenPro — Free AI Image Generator</title>
+  <!-- TailwindCSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
+</head>
+<style>
+.blur-nsfw {
+  filter: blur(12px);
+  position: relative;
+}
+.blur-nsfw::after {
+  content: "⚠️ NSFW — Click to reveal";
+  position: absolute;
+  top:50%; left:50%;
+  transform: translate(-50%, -50%);
+  color:white;
+  font-weight:bold;
+}
+</style>
+<body class="min-h-screen bg-black text-white selection:bg-fuchsia-400/30">
+  <!-- Topbar -->
+  <header class="sticky top-0 z-50 backdrop-blur bg-black/40 border-b border-white/10">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-400 glow"></div>
+        <span class="font-semibold tracking-wide">imgGenPro</span>
+      </div>
+      <nav class="hidden md:flex items-center gap-2">
+        <a class="px-3 py-2 rounded-lg hover:bg-white/5 text-sm" href="https://aniwall.free.nf" target="_blank" rel="noopener">
+          <i class="fa-solid fa-image mr-2"></i>Wallpapers
+        </a>
+        <button id="openSettings" class="px-3 py-2 rounded-lg hover:bg-white/5 text-sm">
+          <i class="fa-solid fa-gear mr-2"></i>Settings
+        </button>
+        <a class="px-3 py-2 rounded-lg hover:bg-white/5 text-sm" href="#" id="openHistory">
+          <i class="fa-solid fa-clock-rotate-left mr-2"></i>History
+        </a>
+        <a class="px-3 py-2 rounded-lg hover:bg-white/5 text-sm" href="#" id="clearGallery">
+          <i class="fa-solid fa-trash mr-2"></i>Clear
+        </a>
+      </nav>
+      <button id="openSettingsSm" class="md:hidden px-3 py-2 rounded-lg hover:bg-white/5">
+        <i class="fa-solid fa-sliders"></i>
+      </button>
+    </div>
+  </header>
+  <!-- Main -->
+  <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
+    <!-- Prompt card -->
+    <section class="rounded-2xl border border-white/10 bg-white/5 p-4 md:p-6">
+      <div class="flex flex-col md:flex-row gap-3">
+        <div class="flex-1">
+          <label for="prompt" class="sr-only">Prompt</label>
+          <div class="relative">
+            <textarea id="prompt" rows="2" placeholder="Describe what you want to create (e.g., 'a cyberpunk city alley with neon reflections, rainy night')"
+              class="w-full resize-y rounded-xl bg-black/50 border border-white/10 focus:border-fuchsia-400/60 outline-none p-4 pr-12 placeholder-white/40"></textarea>
+            <button id="enhanceToggle" class="absolute right-2 top-2 text-xs px-2 py-1 rounded-lg border border-white/10 hover:bg-white/5">
+              <i class="fa-solid fa-wand-magic-sparkles mr-1"></i>Enhance
+            </button>
+          </div>
+          <!-- Quick styles -->
+          <div class="mt-3 flex flex-wrap gap-2">
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="">No style</button>
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="cinematic shot, moody tone, film still">Cinema</button>
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="photo, candid, natural look, unposed">Realistic</button>
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="studio portrait, soft tone, subject centered">Portrait</button>
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="anime style, vibrant cel shading">Anime</button>
+            <button class="style-btn px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs hover:bg-white/10" data-style="fantasy concept art, painterly">Fantasy</button>
+          </div>
+        </div>
+        <div class="w-full md:w-56 flex md:flex-col gap-2">
+          <button id="generateBtn"
+                  class="flex-1 md:h-[66px] p-4 rounded-xl bg-white text-black font-semibold hover:opacity-90 active:opacity-100 transition mb-2">
+            <span class="inline-flex items-center gap-2"><i class="fa-solid fa-bolt"></i> Generate</span>
+          </button> <br>
+          <button id="randomPrompt" class="flex-1 md:h-[56px] rounded-xl bg-white/5 border border-white/10 hover:bg-white/10">
+            <i class="fa-solid fa-shuffle mr-2"></i>Random
+          </button>
+          <button id="downloadAll" class="hidden md:block h-[56px] rounded-xl bg-white/5 border border-white/10 hover:bg-white/10">
+            <i class="fa-solid fa-download mr-2"></i>Download All
+          </button>
+        </div>
+      </div>
+      <p class="mt-3 text-xs text-white/60">
+        Tip: NSFW may be filtered by models.
+      </p>
+    </section>
+    <!-- Gallery -->
+    <section class="mt-6">
+      <div id="gallery" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
+      <div id="emptyState" class="text-center py-16 text-white/50">
+        <i class="fa-regular fa-images text-4xl mb-3 block"></i>
+        <p>No images yet — start by generating something ✨</p>
+      </div>
+    </section>
+  </main>
+  <!-- Settings Drawer -->
+  <div id="settingsDrawer" class="fixed inset-0 hidden">
+    <div class="absolute inset-0 backdrop"></div>
+    <aside class="ml-auto h-full w-full sm:w-[420px] bg-black/90 border-l border-white/10 p-5 overflow-y-auto">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold"><i class="fa-solid fa-sliders mr-2"></i>Settings</h2>
+        <button id="closeSettings" class="p-2 rounded-lg hover:bg-white/5">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <div class="space-y-4">
+        <label class="block text-sm">
+          <span class="text-white/70">Model</span>
+          <select id="model" class="mt-1 w-full rounded-lg bg-black/50 border border-white/10 p-2">
+            <!-- Popular, fast models -->
+            <option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell (fast)</option>
+            <option value="stabilityai/stable-diffusion-xl-base-1.0">SDXL Base 1.0</option>
+            <option value="runwayml/stable-diffusion-v1-5">SD 1.5</option>
+          </select>
+        </label>
+        <div class="grid grid-cols-2 gap-3">
+          <label class="block text-sm">
+            <span class="text-white/70">Width</span>
+            <input id="width" type="number" min="64" max="2048" value="1024"
+                   class="mt-1 w-full rounded-lg bg-black/50 border border-white/10 p-2">
+          </label>
+          <label class="block text-sm">
+            <span class="text-white/70">Height</span>
+            <input id="height" type="number" min="64" max="2048" value="1024"
+                   class="mt-1 w-full rounded-lg bg-black/50 border border-white/10 p-2">
+          </label>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+          <label class="block text-sm">
+            <span class="text-white/70">Seed</span>
+            <input id="seed" type="number" value="42"
+                   class="mt-1 w-full rounded-lg bg-black/50 border border-white/10 p-2">
+          </label>
+          <label class="flex items-center gap-2 text-sm mt-7">
+            <input id="randomSeed" type="checkbox" class="size-4 accent-fuchsia-500" checked>
+            Random seed
+          </label>
+        </div>
+        <label class="block text-sm">
+          <span class="text-white/70">Negative Prompt (optional)</span>
+          <input id="negPrompt" type="text" placeholder="blurry, low quality, watermark"
+                 class="mt-1 w-full rounded-lg bg-black/50 border border-white/10 p-2">
+        </label>
+        <div class="flex items-center justify-between">
+          <label class="flex items-center gap-2 text-sm">
+            <input id="enhance" type="checkbox" class="size-4 accent-fuchsia-500">
+            Enhance prompt (client-side)
+          </label>
+          <button id="saveSettings" class="px-3 py-2 rounded-lg border border-white/10 hover:bg-white/5">
+            <i class="fa-regular fa-floppy-disk mr-2"></i>Save
+          </button>
+        </div>
+      </div>
+    </aside>
+  </div>
+  <!-- Image Modal -->
+  <div id="imageModal" class="fixed inset-0 hidden">
+    <div class="absolute inset-0 backdrop"></div>
+    <div class="relative z-10 h-full w-full flex items-center justify-center p-4">
+      <div class="max-w-5xl w-full rounded-2xl bg-black/90 border border-white/10 p-4">
+        <div class="flex justify-between items-center mb-3">
+          <h3 class="font-semibold"><i class="fa-regular fa-image mr-2"></i>Preview</h3>
+          <button id="closeModal" class="p-2 rounded-lg hover:bg-white/5">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <img id="modalImg" src="" alt="Preview" class="w-full rounded-xl border border-white/10">
+        <div class="mt-3 flex gap-2">
+          <button id="downloadBtn" class="px-3 py-2 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10">
+            <i class="fa-solid fa-download mr-2"></i>Download
+          </button>
+          <button id="copyPromptBtn" class="px-3 py-2 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10">
+            <i class="fa-solid fa-quote-left mr-2"></i>Copy Prompt
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Toast -->
+  <div id="toast" class="fixed bottom-4 left-1/2 -translate-x-1/2 hidden">
+    <div class="rounded-xl bg-white/10 border border-white/10 px-4 py-2 text-sm">
+      <span id="toastMsg">Saved</span>
+    </div>
+  </div>
+<footer class="text-center text-white-600 pt-8 border-t border-gray-200"><p>ImgGenPro &copy; 2025 - All rights reserved</p><p class="mt-2">Created by <a href="https://souravs.great-site.net"> SouRav </a></p></footer></div>
+  <!-- JS -->
+  <script>
+  // ------------ State ------------
+  const el = {
+    prompt: document.getElementById('prompt'),
+    model: document.getElementById('model'),
+    width: document.getElementById('width'),
+    height: document.getElementById('height'),
+    seed: document.getElementById('seed'),
+    randomSeed: document.getElementById('randomSeed'),
+    negPrompt: document.getElementById('negPrompt'),
+    enhance: document.getElementById('enhance'),
+    enhanceToggle: document.getElementById('enhanceToggle'),
+    generateBtn: document.getElementById('generateBtn'),
+    randomPrompt: document.getElementById('randomPrompt'),
+    downloadAll: document.getElementById('downloadAll'),
+    gallery: document.getElementById('gallery'),
+    emptyState: document.getElementById('emptyState'),
+    openSettings: document.getElementById('openSettings'),
+    openSettingsSm: document.getElementById('openSettingsSm'),
+    settingsDrawer: document.getElementById('settingsDrawer'),
+    closeSettings: document.getElementById('closeSettings'),
+    saveSettings: document.getElementById('saveSettings'),
+    openHistory: document.getElementById('openHistory'),
+    clearGallery: document.getElementById('clearGallery'),
+    imageModal: document.getElementById('imageModal'),
+    modalImg: document.getElementById('modalImg'),
+    closeModal: document.getElementById('closeModal'),
+    downloadBtn: document.getElementById('downloadBtn'),
+    copyPromptBtn: document.getElementById('copyPromptBtn'),
+    toast: document.getElementById('toast'),
+    toastMsg: document.getElementById('toastMsg'),
+  };
+  let currentStyle = "";
+  let history = JSON.parse(localStorage.getItem('img_history') || '[]');
+  // ------------ Helpers ------------
+  function showToast(msg){
+    el.toastMsg.textContent = msg;
+    el.toast.classList.remove('hidden');
+    setTimeout(()=>el.toast.classList.add('hidden'), 1600);
+  }
+  function randInt(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
+  function saveSettings(){
+    const s = {
+      model: el.model.value,
+      width: +el.width.value || 1024,
+      height: +el.height.value || 1024,
+      seed: +el.seed.value || 42,
+      randomSeed: el.randomSeed.checked,
+      negPrompt: el.negPrompt.value || '',
+      enhance: el.enhance.checked
+    };
+    localStorage.setItem('img_settings', JSON.stringify(s));
+    showToast('Settings saved');
+  }
+  function loadSettings(){
+    try{
+      const s = JSON.parse(localStorage.getItem('img_settings')||'{}');
+      if(s.model) el.model.value = s.model;
+      if(s.width) el.width.value = s.width;
+      if(s.height) el.height.value = s.height;
+      if(s.seed !== undefined) el.seed.value = s.seed;
+      if(s.randomSeed !== undefined) el.randomSeed.checked = s.randomSeed;
+      if(s.negPrompt !== undefined) el.negPrompt.value = s.negPrompt;
+      if(s.enhance !== undefined) el.enhance.checked = s.enhance;
+    }catch(e){}
+  }
+  loadSettings();
+  // Random prompt pool (30 mixed)
+  const promptPool = [
+    "a cozy reading nook by a window with rain outside",
+    "a neon-lit ramen shop alley in Tokyo at night, reflections on wet ground",
+    "a majestic dragon soaring above snow-capped mountains, fantasy concept",
+    "a retro-futuristic living room, 80s aesthetic meets sci-fi",
+    "a cute corgi astronaut floating in space",
+    "a cyberpunk cityscape with neon signs and flying cars",
+    "a serene waterfall in a mystical forest, foggy morning",
+    "an ancient temple on a cliff during sunset, epic lighting",
+    "a photorealistic portrait of an old wise wizard",
+    "a futuristic robot chef cooking in a sleek kitchen",
+    "a fantasy castle floating above clouds, glowing lights",
+    "a retro diner interior, 50s style with neon lights",
+    "a giant mech battling dragons in a ruined city",
+    "a cozy cabin in snowy mountains with smoke from chimney",
+    "a glowing jellyfish underwater, ethereal lighting",
+    "a mystical portal opening in a dark forest",
+    "a cute kitten astronaut exploring Mars",
+    "an epic spaceship battle in outer space",
+    "a painterly landscape of a lavender field at sunrise",
+    "a realistic lion sitting on a cliff, dramatic sky",
+    "a neon anime girl with a futuristic city background",
+    "a steampunk airship flying above mountains",
+    "a magical library with floating books and candles",
+    "a cinematic scene of a samurai duel at sunset",
+    "a cozy coffee shop interior with warm lighting",
+    "a fantasy elf archer in a misty forest",
+    "a cyberpunk hacker in a dark room with neon monitors",
+    "a whimsical fairy village in the trees",
+    "a majestic phoenix rising from flames",
+    "a realistic portrait of a smiling elderly woman"
+  ];
+  function promptVariants(){ return promptPool[randInt(0, promptPool.length-1)]; }
+  function buildPrompt(){
+    let p = el.prompt.value.trim();
+    if(currentStyle) p += `, ${currentStyle}`;
+    const neg = el.negPrompt.value.trim();
+    return { prompt: p, negative_prompt: neg };
+  }
+  function addCardSkeleton(){
+    el.emptyState.classList.add('hidden');
+    const card = document.createElement('div');
+    card.className = "group relative rounded-2xl border border-white/10 bg-white/5 overflow-hidden";
+    card.innerHTML = `
+      <div class="aspect-[4/3] skeleton"></div>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <div class="w-14 h-14 rounded-full skeleton"></div>
+      </div>
+      <div class="p-3 text-xs text-white/50">Generating...</div>
+    `;
+    el.gallery.prepend(card);
+    return card;
+  }
+  function addCard(imgUrl, meta){
+    el.emptyState.classList.add('hidden');
+    const card = document.createElement('div');
+    card.className = "group relative rounded-2xl border border-white/10 bg-white/5 overflow-hidden hover:border-fuchsia-400/40 transition";
+    card.innerHTML = `
+      <img src="${imgUrl}" alt="AI image" class="w-full h-auto block">
+      <div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition">
+        <button class="px-2 py-1 rounded-lg bg-black/60 hover:bg-black/80 border border-white/10 text-xs" data-act="download"><i class="fa-solid fa-download"></i></button>
+        <button class="px-2 py-1 rounded-lg bg-black/60 hover:bg-black/80 border border-white/10 text-xs" data-act="open"><i class="fa-regular fa-image"></i></button>
+        <button class="px-2 py-1 rounded-lg bg-black/60 hover:bg-black/80 border border-white/10 text-xs" data-act="copy"><i class="fa-solid fa-quote-left"></i></button>
+      </div>
+      <div class="p-3 text-[11px] text-white/60 line-clamp-2">${meta.prompt}</div>
+    `;
+    const imgEl = card.querySelector("img");
+    if(isNSFW(meta.prompt)) imgEl.classList.add("blur-nsfw");
+    imgEl.addEventListener("click", () => imgEl.classList.remove("blur-nsfw"));
+    card.addEventListener('click', e=>{
+      const btn = e.target.closest('button');
+      if(!btn) return;
+      const act = btn.dataset.act;
+      if(act==='download'){
+        const a = document.createElement('a');
+        a.href = imgUrl; a.download = 'imggenpro.png'; a.click();
+      } else if(act==='open'){
+        openModal(imgUrl, meta.prompt);
+      } else if(act==='copy'){
+        navigator.clipboard.writeText(meta.prompt);
+        showToast('Prompt copied');
+      }
+    });
+    el.gallery.prepend(card);
+    return card;
+  }
+  function openModal(src, prompt){
+    el.modalImg.src = src;
+    el.copyPromptBtn.dataset.prompt = prompt;
+    el.imageModal.classList.remove('hidden');
+  }
+  function closeModal(){ el.imageModal.classList.add('hidden'); }
+  // ------------ Events ------------
+  document.querySelectorAll('.style-btn').forEach(b=>{
+    b.addEventListener('click', ()=>{
+      document.querySelectorAll('.style-btn').forEach(x=>x.classList.remove('ring-2','ring-fuchsia-400/60'));
+      b.classList.add('ring-2','ring-fuchsia-400/60');
+      currentStyle = b.dataset.style || "";
+    });
+  });
+  el.enhanceToggle.addEventListener('click', ()=>{
+    el.enhance.checked = !el.enhance.checked;
+    el.enhanceToggle.classList.toggle('bg-white/10', el.enhance.checked);
+  });
+  el.openSettings?.addEventListener('click', ()=> el.settingsDrawer.classList.remove('hidden'));
+  el.openSettingsSm?.addEventListener('click', ()=> el.settingsDrawer.classList.remove('hidden'));
+  el.closeSettings.addEventListener('click', ()=> el.settingsDrawer.classList.add('hidden'));
+  el.saveSettings.addEventListener('click', ()=>{ saveSettings(); el.settingsDrawer.classList.add('hidden'); });
+  el.openHistory?.addEventListener('click', ()=>{
+    if(!history.length){ showToast('No history yet'); return; }
+    el.gallery.innerHTML = '';
+    el.emptyState.classList.add('hidden');
+    history.forEach(h=> addCard(h.url, {prompt: h.prompt}));
+  });
+  el.clearGallery?.addEventListener('click', ()=>{
+    el.gallery.innerHTML = '';
+    el.emptyState.classList.remove('hidden');
+  });
+  el.randomPrompt.addEventListener('click', ()=>{ el.prompt.value = promptVariants(); });
+  el.downloadAll.addEventListener('click', ()=>{
+    const imgs = el.gallery.querySelectorAll('img');
+    if(!imgs.length){ showToast('Nothing to download'); return; }
+    imgs.forEach((img,i)=>{
+      const a = document.createElement('a');
+      a.href = img.src; a.download = `imggenpro_${i+1}.png`; a.click();
+    });
+  });
+  document.addEventListener('keydown', (e)=>{
+    if(e.key==='Escape'){ closeModal(); el.settingsDrawer.classList.add('hidden'); }
+  });
+  el.closeModal.addEventListener('click', closeModal);
+  el.downloadBtn.addEventListener('click', ()=>{
+    const a = document.createElement('a'); a.href = el.modalImg.src; a.download='imggenpro.png'; a.click();
+  });
+  el.copyPromptBtn.addEventListener('click', ()=>{
+    const p = el.copyPromptBtn.dataset.prompt || '';
+    navigator.clipboard.writeText(p);
+    showToast('Prompt copied');
+  });
+  function isNSFW(prompt){
+    const nsfwWords = ["bikini","nude","nsfw","sex","erotic","porn"];
+    return nsfwWords.some(w=>prompt.toLowerCase().includes(w));
+  }
+  async function doGenerate(){
+    const card = addCardSkeleton();
+    try{
+      el.generateBtn.disabled = true;
+      el.generateBtn.innerHTML = '<span class="inline-flex items-center gap-2"><i class="fa-solid fa-spinner animate-spin"></i> Generating…</span>';
+      let { prompt } = buildPrompt();
+      if(!prompt){ throw new Error('Please enter a prompt'); }
+      const model = el.model.value;
+      const res = await fetch('/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt, model })
+      });
+      if(!res.ok){ throw new Error('Generation failed'); }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      card.remove();
+      addCard(url, { prompt });
+      history.unshift({ url, prompt });
+      history = history.slice(0, 30);
+      localStorage.setItem('img_history', JSON.stringify(history));
+    } catch(err){
+      card.remove();
+      showToast(err.message);
+      console.error(err);
+    } finally{
+      el.generateBtn.disabled = false;
+      el.generateBtn.innerHTML = '<span class="inline-flex items-center gap-2"><i class="fa-solid fa-bolt"></i> Generate</span>';
+    }
+  }
+  el.generateBtn.addEventListener('click', doGenerate);
+  el.prompt.addEventListener('keydown', e=>{
+    if((e.ctrlKey||e.metaKey) && e.key==='Enter'){ doGenerate(); }
+  });
+</script>
+  </body>
+</html>