KI Bild Ersteller V2
by StealthOtter57384 lines12.4 KB
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KI Bild Ersteller V2</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #0f1117;
--box-color: #1a1d26;
--box-border: #2a2f3d;
--accent-color: #f59e0b;
--accent-hover: #d97706;
--text-color: #f3f4f6;
--text-muted: #9ca3af;
--gray-color: #212631;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
margin: 0;
min-height: 100vh;
box-sizing: border-box;
}
h1 {
color: var(--text-color);
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
h1 span {
color: var(--accent-color);
}
.tabs {
display: flex;
gap: 6px;
background: var(--box-color);
padding: 6px;
border-radius: 14px;
border: 1px solid var(--box-border);
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.tab {
padding: 10px 24px;
background: transparent;
color: var(--text-muted);
border-radius: 10px;
cursor: pointer;
transition: all 0.25s ease;
font-size: 14px;
font-weight: 600;
}
.tab:hover {
color: var(--text-color);
}
.tab.active {
background: var(--accent-color);
color: #000;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}
.box {
background: var(--box-color);
padding: 28px;
border-radius: 20px;
width: 100%;
max-width: 520px;
display: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
border: 1px solid var(--box-border);
box-sizing: border-box;
animation: fadeIn 0.3s ease;
}
.box.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
label {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
display: block;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.field-margin {
margin-top: 20px;
}
input, textarea {
width: 100%;
padding: 14px;
border-radius: 12px;
border: 1px solid var(--box-border);
background: #141720;
color: white;
font-size: 15px;
box-sizing: border-box;
font-family: inherit;
transition: all 0.2s ease;
}
input:focus, textarea:focus {
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
button {
width: 100%;
padding: 14px;
background: var(--accent-color);
color: #000;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
font-size: 15px;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
button:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
.result-container {
margin-top: 12px;
min-height: 220px;
background: #141720;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 14px;
text-align: center;
color: var(--text-muted);
border: 1px dashed var(--box-border);
position: relative;
}
.result-container img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.upload-area {
border: 2px dashed var(--box-border);
padding: 30px;
text-align: center;
border-radius: 12px;
cursor: pointer;
margin-bottom: 5px;
background: #141720;
transition: all 0.2s ease;
}
.upload-area:hover {
border-color: var(--accent-color);
background: #181c27;
}
/* Ladebalken Styles */
.loader-wrapper {
width: 85%;
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--box-border);
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
width: 0%;
height: 100%;
background: var(--accent-color);
transition: width 0.1s linear;
border-radius: 4px;
}
.progress-text {
font-size: 13px;
color: var(--accent-color);
font-weight: 600;
}
.secondary-btn {
background: #2a2f3d;
color: var(--text-color);
box-shadow: none;
}
.secondary-btn:hover {
background: #343b4c;
}
</style>
</head>
<body>
<h1>KI Bild Tool <span>V2</span></h1>
<div class="tabs">
<div class="tab active" onclick="switchTab(0)">Text → Bild</div>
<div class="tab" onclick="switchTab(1)">Bild → Text</div>
</div>
<!-- Box 1: Text zu Bild -->
<div class="box active" id="box1">
<label for="prompt">Bildbeschreibung (Prompt)</label>
<textarea id="prompt" rows="3" placeholder="Z. B. Ein futuristischer Cyberpunk-Pinguin mit Neon-Brille..."></textarea>
<button onclick="generateImage()">Bild generieren</button>
<label class="field-margin">Ergebnis</label>
<div class="result-container" id="result">
<span id="resultText">Dein generiertes Bild erscheint hier...</span>
<div class="loader-wrapper" id="loaderWrapper">
<div class="progress-text" id="progressText">Generiere Bild... 0%</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
<button id="dlBtn" class="secondary-btn" style="display:none; margin-top:12px;" onclick="downloadImg()">Herunterladen</button>
</div>
<!-- Box 2: Bild zu Text -->
<div class="box" id="box2">
<label>Bild hochladen</label>
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
<span id="uploadText">Klicken oder Bild hierher ziehen</span>
<input type="file" id="fileInput" accept="image/*" style="display: none;" onchange="handleFileSelect(event)">
</div>
<div class="result-container" id="preview" style="min-height: 150px; margin-top: 15px;">Vorschau erscheint hier</div>
<button onclick="analyzeImage()" class="field-margin">Bild analysieren</button>
<label class="field-margin">Beschreibung / Analyse</label>
<div class="result-container" id="descResult">Die Bildanalyse erscheint hier...</div>
<button id="useBtn" style="display:none; margin-top:12px;" onclick="useForGen()">Damit neues Bild generieren →</button>
</div>
<script>
let lastImageUrl = "";
let lastBase64 = "";
let lastDescription = "";
function switchTab(index) {
document.querySelectorAll('.tab').forEach((t,i)=>t.classList.toggle('active', i===index));
document.querySelectorAll('.box').forEach((b,i)=>b.classList.toggle('active', i===index));
}
function generateImage(override) {
const prompt = override || document.getElementById('prompt').value;
const resultDiv = document.getElementById('result');
const resultText = document.getElementById('resultText');
const loaderWrapper = document.getElementById('loaderWrapper');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
if (!prompt.trim()) return alert('Bitte gib zuerst eine Beschreibung ein!');
const oldImg = resultDiv.querySelector('img');
if (oldImg) oldImg.remove();
resultText.style.display = 'none';
loaderWrapper.style.display = 'flex';
progressBar.style.width = '0%';
progressText.innerText = 'Generiere Bild... 0%';
document.getElementById('dlBtn').style.display = 'none';
let seed = Math.floor(Math.random()*1000000);
lastImageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?seed=${seed}&width=768&height=768&nologo=true`;
let progress = 0;
let interval = setInterval(() => {
if (progress < 90) {
progress += Math.floor(Math.random() * 5) + 2;
if (progress > 90) progress = 90;
progressBar.style.width = progress + '%';
progressText.innerText = `Generiere Bild... ${progress}%`;
}
}, 100);
let img = new Image();
img.src = lastImageUrl;
img.onload = () => {
clearInterval(interval);
progressBar.style.width = '100%';
progressText.innerText = 'Fertig! 100%';
setTimeout(() => {
loaderWrapper.style.display = 'none';
resultDiv.appendChild(img);
document.getElementById('dlBtn').style.display = 'block';
}, 300);
};
}
function downloadImg() {
window.open(lastImageUrl, '_blank');
}
function handleFileSelect(event) {
const file = event.target.files[0];
if (!file) return;
document.getElementById('uploadText').innerText = file.name;
const reader = new FileReader();
reader.onload = e => {
lastBase64 = e.target.result;
document.getElementById('preview').innerHTML = `<img src="${lastBase64}">`;
};
reader.readAsDataURL(file);
}
async function analyzeImage() {
if (!lastBase64) return alert('Bitte wähle zuerst ein Bild aus!');
const descResult = document.getElementById('descResult');
descResult.innerHTML = '⏳ KI analysiert...';
try {
let res = await fetch('https://text.pollinations.ai/openai', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model: 'openai',
messages: [{ role: 'user', content: [
{ type: 'text', text: 'Beschreibe dieses Bild sehr detailliert auf Deutsch. Was ist zu sehen, Farben, Stil, Stimmung?' },
{ type: 'image_url', image_url: { url: lastBase64 } }
]}]
})
});
let data = await res.json();
lastDescription = data.choices?.[0]?.message?.content || 'Konnte nicht beschrieben werden.';
descResult.innerHTML = `<p style="color:white; text-align: left; margin: 0; line-height: 1.5;">${lastDescription}</p>`;
document.getElementById('useBtn').style.display = 'block';
} catch(e) {
descResult.innerHTML = '<p style="color:#ef4444;">Fehler bei Analyse. Versuch es nochmal.</p>';
}
}
function useForGen() {
document.getElementById('prompt').value = lastDescription;
switchTab(0);
generateImage(lastDescription);
}
</script>
</body>
</html>Game Source: KI Bild Ersteller V2
Creator: StealthOtter57
Libraries: none
Complexity: complex (384 lines, 12.4 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: ki-bild-ersteller-v2-stealthotter57" to link back to the original. Then publish at arcadelab.ai/publish.