Webleb - UI Elements - Ai Image Generator

HTML

<!DOCTYPE html>

<head>

<title>AI Image Synthesizer</title>

<style>

:root {

--primary: #6366f1;

--bg: #0f172a;

--card: #1e293b;

--text: #f8fafc;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: var(--bg);

color: var(--text);

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

margin: 0;

padding: 20px;

}

.container {

max-width: 800px;

width: 100%;

text-align: center;

}

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

background: linear-gradient(to right, #818cf8, #c084fc);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.input-group {

background: var(--card);

padding: 30px;

border-radius: 16px;

box-shadow: 0 10px 25px rgba(0,0,0,0.3);

margin-bottom: 30px;

}

.inputs {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 15px;

margin-bottom: 20px;

}

input {

padding: 12px;

border-radius: 8px;

border: 1px solid #334155;

background: #0f172a;

color: white;

outline: none;

width: 100%;

box-sizing: border-box;

}

input:focus {

border-color: var(--primary);

}

button {

background: var(--primary);

color: white;

border: none;

padding: 12px 30px;

border-radius: 8px;

font-weight: bold;

cursor: pointer;

transition: transform 0.2s, background 0.2s;

}

button:hover {

background: #4f46e5;

transform: translateY(-2px);

}

button:disabled {

background: #475569;

cursor: not-allowed;

}

.image-area {

position: relative;

height: 512px;

width: 100%;

background: #1e293b;

border-radius: 16px;

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

border: 2px dashed #334155;

}

.generated-image {

width: 100%;

height: 100%;

object-fit: cover;

transition: opacity 0.5s;

opacity: 0;

}

.generated-image.visible {

opacity: 1;

}

#loader {

display: none;

flex-direction: column;

align-items: center;

position: absolute;

}

.spinner {

width: 40px;

height: 40px;

border: 4px solid #334155;

border-top: 4px solid var(--primary);

border-radius: 50%;

animation: spin 1s linear infinite;

margin-bottom: 10px;

}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.placeholder-text { color: #64748b; }

</style>

</head>

<body>

<h1>AI Image Generator</h1>

<p>Combine three ideas into a single masterpiece</p>

</div>

<button id="generateBtn" onclick="generateImage()">Generate AI Image</button>

</div>

<p>AI is synthesizing your image...</p>

</div>

<p class="placeholder-text" id="placeholder">Your masterpiece will appear here</p>

</div>

async function generateImage() {

const p1 = document.getElementById('prompt1').value;

const p2 = document.getElementById('prompt2').value;

const p3 = document.getElementById('prompt3').value;

const btn = document.getElementById('generateBtn');

const display = document.getElementById('imageDisplay');

const loader = document.getElementById('loader');

const placeholder = document.getElementById('placeholder');

const generatedImage = document.getElementById('generatedImage'); // We'll need an ID for the image

if (!p1 || !p2 || !p3) {

alert("Please fill in all three fields!");

return;

}

btn.disabled = true;

placeholder.style.display = 'none';

loader.style.display = 'flex';

// Remove old image if it exists

const oldImg = display.querySelector('img');

if(oldImg) oldImg.remove();

// 1. Create a "Smart" Prompt

// We add keywords to help the AI understand style

const fullPrompt = `masterpiece, best quality, ${p1}, ${p2}, ${p3}, detailed, 8k resolution`;

try {

// 2. Create the Image Object

const img = new Image();

img.className = 'generated-image';

// 3. The Magic URL (Pollinations.ai)

// We use a random seed number to ensure it generates a NEW image every time

const randomSeed = Math.floor(Math.random() * 1000000);

// This URL is specific for clearer, better images

img.src = `https://image.pollinations.ai/prompt/${encodeURIComponent(fullPrompt)}?width=1024&height=1024&seed=${randomSeed}&nologo=true&model=flux`;

// 4. Wait for it to load

await new Promise((resolve, reject) => {

img.onload = () => resolve();

img.onerror = () => reject();

});

// 5. Show it

loader.style.display = 'none';

display.appendChild(img);

// Trigger animation

setTimeout(() => {

img.classList.add('visible');

}, 50);

} catch (error) {

console.error(error);

alert("The school network might be blocking the AI service. Try using a mobile hotspot or home network.");

loader.style.display = 'none';

placeholder.style.display = 'block';

} finally {

btn.disabled = false;

}

</script>

</body>

</html>

CSS

JS

Ai Image Generator

Recommended