<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Private PhotoShot Pro - Advanced AI Image Generator</title>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css rel=stylesheet>
<style>:root{--primary-color:#1a1a1a;--secondary-color:#2d2d2d;--accent-color:#00ff9d;--accent-hover:#00cc7d;--text-color:#ffffff;--error-color:#ff4444;--success-color:#00c853}*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;transition:all .3s ease}body{background:var(--primary-color);color:var(--text-color);min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:20px}nav{display:flex;justify-content:space-between;align-items:center;padding:20px;background:var(--secondary-color);box-shadow:0 2px 20px rgba(0,0,0,.4);position:sticky;top:0;z-index:1000}.logo{font-size:28px;font-weight:700;color:var(--accent-color);text-shadow:0 0 10px rgba(0,255,157,.3)}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}.input-section{background:var(--secondary-color);padding:25px;border-radius:15px;box-shadow:0 4px 25px rgba(0,0,0,.3)}.input-group{margin-bottom:20px}textarea{width:100%;height:120px;background:#383838;border:2px solid #444;border-radius:8px;padding:15px;color:#fff;font-size:16px;resize:vertical;transition:border-color .3s ease}textarea:focus{border-color:var(--accent-color);outline:0;box-shadow:0 0 10px rgba(0,255,157,.2)}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.setting-item{position:relative}label{display:block;margin-bottom:8px;color:var(--accent-color);font-weight:500;font-size:14px}input,select{width:100%;padding:12px;background:#383838;border:2px solid #444;border-radius:8px;color:#fff;font-size:14px;appearance:none}input:focus,select:focus{border-color:var(--accent-color);outline:0;box-shadow:0 0 10px rgba(0,255,157,.2)}.setting-item::after{content:'\f107';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;right:12px;top:40px;color:var(--accent-color);pointer-events:none}.advanced-settings{margin-top:20px;padding-top:20px;border-top:1px solid #444}.advanced-settings-toggle{background:0 0;border:none;color:var(--accent-color);cursor:pointer;font-size:14px;margin-bottom:15px}.advanced-settings-content{display:none}.advanced-settings-content.show{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.generate-btn{background:var(--accent-color);color:var(--primary-color);border:none;padding:15px 30px;border-radius:8px;cursor:pointer;font-weight:700;font-size:16px;width:100%;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px}.generate-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,255,157,.3)}.output-section{background:var(--secondary-color);padding:25px;border-radius:15px;box-shadow:0 4px 25px rgba(0,0,0,.3)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.output-controls{display:flex;gap:10px}.control-btn{background:#383838;border:none;padding:8px 15px;border-radius:5px;color:var(--text-color);cursor:pointer}.control-btn:hover{background:#444}.output-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}.output-image{position:relative;aspect-ratio:1;background:#383838;border-radius:8px;overflow:hidden;cursor:pointer}.output-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.output-image:hover img{transform:scale(1.05)}.image-overlay{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,.8));display:flex;justify-content:space-between;opacity:0;transition:opacity .3s ease}.output-image:hover .image-overlay{opacity:1}.image-actions{display:flex;gap:10px}.image-action-btn{background:0 0;border:none;color:#fff;cursor:pointer;font-size:16px}.loading{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.loading i{color:var(--accent-color);font-size:40px;animation:spin 1s infinite linear}.progress-bar{width:100%;height:4px;background:#383838;margin-top:10px;border-radius:2px;overflow:hidden}.progress{width:0%;height:100%;background:var(--accent-color);transition:width .3s ease}.tooltip{position:absolute;background:#000;color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .3s ease}.setting-item:hover .tooltip{opacity:1}.notification{position:fixed;bottom:20px;right:20px;padding:15px 25px;border-radius:8px;color:#fff;font-weight:500;transform:translateY(100px);opacity:0;transition:all .3s ease}.notification.success{background:var(--success-color)}.notification.error{background:var(--error-color)}.notification.show{transform:translateY(0);opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:992px){.main-content{grid-template-columns:1fr}.settings{grid-template-columns:repeat(2,1fr)}}@media (max-width:576px){.settings{grid-template-columns:1fr}.output-controls{flex-wrap:wrap}}</style>
</head>
<body>
<nav>
<div class=logo>Private PhotoShot Pro</div>
<div class=theme-toggle>
<i class="fas fa-moon"></i>
</div>
</nav>
<div class=container>
<div class=main-content>
<div class=input-section>
<div class=input-group>
<label>Positive Prompt</label>
<textarea id=prompt placeholder="Describe what you want to see in the image..."></textarea>
</div>
<div class=input-group>
<label>Negative Prompt</label>
<textarea id=negative-prompt placeholder="Describe what you don't want to see in the image..."></textarea>
</div>
<div class=settings>
<div class=setting-item>
<label>Image Style</label>
<select id=style>
<option value=photorealistic>Photorealistic</option>
<option value=artistic>Artistic</option>
<option value=anime>Anime</option>
<option value=digital-art>Digital Art</option>
<option value=oil-painting>Oil Painting</option>
<option value=watercolor>Watercolor</option>
<option value=3d-render>3D Render</option>
<option value=concept-art>Concept Art</option>
</select>
</div>
<div class=setting-item>
<label>Quality Level</label>
<select id=quality>
<option value=standard>Standard</option>
<option value=high>High</option>
<option value=ultra>Ultra</option>
<option value=maximum>Maximum</option>
</select>
</div>
<div class=setting-item>
<label>Output Count</label>
<select id=num-images>
<option value=1>1 Image</option>
<option value=2>2 Images</option>
<option value=4>4 Images</option>
<option value=6>6 Images</option>
<option value=9>9 Images</option>
</select>
</div>
<div class=setting-item>
<label>Aspect Ratio</label>
<select id=aspect-ratio>
<option value=1:1>Square (1:1)</option>
<option value=16:9>Landscape (16:9)</option>
<option value=9:16>Portrait (9:16)</option>
<option value=4:3>Standard (4:3)</option>
<option value=3:2>Photo (3:2)</option>
</select>
</div>
</div>
<button class=advanced-settings-toggle>
<i class="fas fa-cog"></i> Advanced Settings
</button>
<div class=advanced-settings-content>
<div class=setting-item>
<label>Guidance Scale</label>
<input type=range id=guidance-scale min=1 max=20 value=7.5 step=0.1>
</div>
<div class=setting-item>
<label>Inference Steps</label>
<input type=range id=inference-steps min=20 max=150 value=50 step=1>
</div>
<div class=setting-item>
<label>Seed</label>
<input type=number id=seed min=-1 value=-1>
</div>
<div class=setting-item>
<label>Upscale Factor</label>
<select id=upscale>
<option value=1>None</option>
<option value=2>2x</option>
<option value=4>4x</option>
</select>
</div>
</div>
<button class=generate-btn onclick=generateImages()>
<i class="fas fa-magic"></i> Generate Images
</button>
</div>
<div class=output-section>
<div class=output-header>
<h3>Generated Images</h3>
<div class=output-controls>
<button class=control-btn onclick=downloadAll()>
<i class="fas fa-download"></i> Download All
</button>
<button class=control-btn onclick=clearAll()>
<i class="fas fa-trash"></i> Clear All
</button>
</div>
</div>
<div class=progress-bar>
<div class=progress></div>
</div>
<div class=loading>
<i class="fas fa-spinner"></i>
<p>Generating your images...</p>
</div>
<div class=output-grid id=output-grid></div>
</div>
</div>
</div>
<div class=notification id=notification></div>
<script>const API_KEY="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",API_URL="https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0";function showNotification(e,t="success"){const n=document.getElementById("notification");n.textContent=e,n.className=`notification ${t}`,n.classList.add("show"),setTimeout((()=>{n.classList.remove("show")}),3e3)}async function generateImages(){const e=document.getElementById("prompt").value,t=document.getElementById("negative-prompt").value,n=document.getElementById("style").value,o=document.getElementById("quality").value,a=parseInt(document.getElementById("num-images").value),i=parseFloat(document.getElementById("guidance-scale").value),c=parseInt(document.getElementById("inference-steps").value),s=parseInt(document.getElementById("seed").value);parseInt(document.getElementById("upscale").value);if(!e)return void showNotification("Please enter a prompt","error");const l=document.querySelector(".loading"),d=document.getElementById("output-grid"),r=document.querySelector(".progress");l.style.display="flex",d.innerHTML="";try{const m=`${n} style, ${o} quality, ${e}`,u=a;let g=0;for(let e=0;e<a;e++)try{const e=await fetch(API_URL,{method:"POST",headers:{Authorization:`Bearer ${API_KEY}`,"Content-Type":"application/json"},body:JSON.stringify({inputs:m,parameters:{negative_prompt:t,num_inference_steps:c,guidance_scale:i,seed:-1===s?Math.floor(1e6*Math.random()):s}})});if(!e.ok)throw new Error("Failed to generate image");const n=await e.blob(),o=URL.createObjectURL(n),a=document.createElement("div");a.className="output-image";const l=document.createElement("img");l.src=o;const p=document.createElement("div");p.className="image-overlay";const f=document.createElement("div");f.className="image-actions";const y=document.createElement("button");y.className="image-action-btn",y.innerHTML='<i class="fas fa-download"></i>',y.onclick=()=>downloadImage(o);const h=document.createElement("button");h.className="image-action-btn",h.innerHTML='<i class="fas fa-copy"></i>',h.onclick=()=>copyToClipboard(o),f.appendChild(y),f.appendChild(h),p.appendChild(f),a.appendChild(l),a.appendChild(p),d.appendChild(a),g++;const w=g/u*100;r.style.width=`${w}%`}catch(e){console.error("Error generating image:",e),showNotification("Failed to generate an image","error")}showNotification("Images generated successfully!")}catch(e){console.error("Error:",e),showNotification("Failed to generate images","error")}finally{l.style.display="none",r.style.width="0%"}}async function downloadImage(e){const t=document.createElement("a");t.href=e,t.download=`generated-image-${Date.now()}.png`,document.body.appendChild(t),t.click(),document.body.removeChild(t)}async function copyToClipboard(e){try{await navigator.clipboard.writeText(e),showNotification("Image URL copied to clipboard")}catch(e){showNotification("Failed to copy URL","error")}}function downloadAll(){document.querySelectorAll(".output-image img").forEach(((e,t)=>{setTimeout((()=>{downloadImage(e.src)}),500*t)})),showNotification("Downloading all images...")}function clearAll(){document.getElementById("output-grid").innerHTML="",showNotification("All images cleared")}document.querySelector(".advanced-settings-toggle").addEventListener("click",(function(){const e=document.querySelector(".advanced-settings-content");e.classList.toggle("show"),this.innerHTML=e.classList.contains("show")?'<i class="fas fa-times"></i> Hide Advanced Settings':'<i class="fas fa-cog"></i> Advanced Settings'})),document.querySelector(".theme-toggle").addEventListener("click",(function(){document.body.classList.toggle("light-theme"),this.innerHTML=document.body.classList.contains("light-theme")?'<i class="fas fa-sun"></i>':'<i class="fas fa-moon"></i>'}))</script>
</body>
</html>