File: /home/kiwerkzeuge.de/public_html/stable-diffusion.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bildgenerator lokal | Text zu Bild & Inpainting</title>
<meta name="description" content="Erstelle Bilder aus Text oder bearbeite Bildbereiche per Inpainting. Jeder GPU-Auftrag läuft ausschließlich seriell lokal." />
<link rel="canonical" href="https://kiwerkzeuge.de/stable-diffusion.html" />
<link rel="stylesheet" href="/assets/fonts/inter.css" />
<script src="/assets/theme.js"></script>
<link rel="stylesheet" href="/assets/styles.css?v=20260206" />
<script defer src="/assets/sd-app.js?v=20260716"></script>
</head>
<body>
<div class="page">
<header class="site-header">
<div class="brand">
<div class="logo">SD</div>
<div>
<h1>Bildgenerator</h1>
<p>Bilder seriell lokal erstellen und bearbeiten.</p>
</div>
</div>
<div class="header-actions">
<button class="icon-button" id="themeToggle" type="button" aria-label="Design umschalten" title="Design umschalten">
<svg class="icon icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
<svg class="icon icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 3a7 7 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
</svg>
</button>
<div class="status-pill" id="serviceStatus">
<span class="dot"></span>
<span>Status wird geprüft…</span>
</div>
</div>
</header>
<nav class="nav-tabs" aria-label="Hauptnavigation">
<a href="/" class="nav-tab">Start</a>
<a href="/tiefenkarte.html" class="nav-tab">Tiefenkarte</a>
<a href="/stable-diffusion.html" class="nav-tab active" aria-current="page">Bildgenerator</a>
<a href="/music.html" class="nav-tab">Musik</a>
<a href="/video-studio.html" class="nav-tab">Video Studio</a>
<a href="/ki-tools.html" class="nav-tab">Business-Werkzeuge</a>
<a href="/preise.html" class="nav-tab">Preise</a>
</nav>
<main class="main">
<!-- Sub-Tab Navigation -->
<nav class="sub-tabs" id="subTabs">
<button class="sub-tab active" data-tab="generate">Bild erstellen</button>
<button class="sub-tab" data-tab="inpaint">Inpainting</button>
</nav>
<!-- ═══════════════════════════════════════════ -->
<!-- TAB 1: Bild erstellen -->
<!-- ═══════════════════════════════════════════ -->
<div class="tab-content active" id="tab-generate">
<div class="layout">
<section class="panel txt2img" id="txt2img">
<div>
<h2>Bild aus Text</h2>
<p>Beschreibe kurz, was du sehen möchtest – wir erzeugen daraus ein Bild.</p>
</div>
<div class="form-group">
<label for="promptInput">Beschreibung</label>
<textarea id="promptInput" rows="3" placeholder="z.B. Ein sonniger Strand mit Palmen, fotorealistisch, hohe Details"></textarea>
</div>
<div class="form-group">
<label for="negativePromptInput">Was soll NICHT im Bild sein? (optional)</label>
<textarea id="negativePromptInput" rows="2" placeholder="z.B. verschwommen, Verzerrungen, Text, Wasserzeichen"></textarea>
</div>
<details class="details">
<summary>Erweiterte Einstellungen</summary>
<div class="form-row">
<div class="form-group">
<label for="widthInput">Breite</label>
<select id="widthInput">
<option value="512">512px</option>
<option value="768">768px</option>
<option value="1024">1024px</option>
</select>
</div>
<div class="form-group">
<label for="heightInput">Höhe</label>
<select id="heightInput">
<option value="512">512px</option>
<option value="768">768px</option>
<option value="1024">1024px</option>
</select>
</div>
<div class="form-group">
<label for="stepsInput">Qualität (Schritte)</label>
<input type="number" id="stepsInput" min="10" max="50" value="20" />
</div>
<div class="form-group">
<label for="cfgScaleInput">Treue zur Beschreibung</label>
<input type="number" id="cfgScaleInput" min="1" max="20" step="0.5" value="7" />
</div>
</div>
<p class="hint">Tipp: Mehr Schritte = meist bessere Details, dauert aber länger.</p>
</details>
<div class="button-row">
<button id="generateBtn" class="primary">
<span>Bild erstellen</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<button id="sendToInpaintBtn" class="secondary" hidden>Zum Inpainting senden</button>
</div>
<div class="progress" id="txt2imgProgress" hidden>
<div class="spinner"></div>
<div>
<p id="txt2imgProgressTitle">Generiere Bild…</p>
<small id="txt2imgProgressSub">Das kann je nach Auslastung etwas dauern.</small>
</div>
</div>
</section>
<section class="panel results">
<h2>Ergebnisse</h2>
<div class="results-grid">
<article class="result-card" id="txt2imgCard">
<header>
<h3>Generiertes Bild</h3>
<button class="ghost" id="downloadTxt2img" disabled>PNG herunterladen</button>
</header>
<div class="result-preview" id="txt2imgPreview">
<p class="placeholder">Das generierte Bild wird hier angezeigt.</p>
</div>
</article>
</div>
</section>
</div>
</div>
<!-- ═══════════════════════════════════════════ -->
<!-- TAB 2: Inpainting -->
<!-- ═══════════════════════════════════════════ -->
<div class="tab-content" id="tab-inpaint">
<div class="layout">
<section class="panel inpaint-panel" id="inpaintSection">
<div>
<h2>Inpainting</h2>
<p>Male über den Bereich, den du ändern möchtest, und beschreibe per Text oder Sprache, was dort erscheinen soll.</p>
</div>
<!-- Image source -->
<div class="form-group">
<label>Ausgangsbild</label>
<div class="inpaint-source-row">
<input type="file" accept="image/*" id="inpaintImageInput" class="sr-only" />
<div class="dropzone dropzone--small" id="inpaintDropzone">
<div class="dropzone__content">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14" /><path d="M5 12h14" /></svg>
<p>Bild hochladen</p>
</div>
</div>
<span class="inpaint-or">oder</span>
<button class="secondary" id="useGeneratedForInpaint" disabled>Generiertes Bild verwenden</button>
</div>
</div>
<!-- Canvas area -->
<div class="inpaint-canvas-wrap" id="inpaintCanvasWrap" hidden>
<div class="inpaint-toolbar">
<button class="tool-btn active" id="brushTool" title="Pinsel">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/></svg>
</button>
<button class="tool-btn" id="eraserTool" title="Radierer">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>
</button>
<div class="tool-separator"></div>
<label class="tool-range" title="Pinselgröße">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
<input type="range" id="brushSize" min="5" max="100" value="30" />
<span id="brushSizeLabel">30</span>
</label>
<div class="tool-separator"></div>
<button class="tool-btn" id="undoMask" title="Rückgängig">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
</button>
<button class="tool-btn" id="clearMask" title="Maske löschen">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
</button>
</div>
<div class="inpaint-canvas-container">
<canvas id="inpaintCanvas"></canvas>
</div>
</div>
<!-- Prompt with speech -->
<div class="form-group">
<label for="inpaintPrompt">Was soll in der markierten Region erscheinen?</label>
<div class="prompt-with-speech">
<textarea id="inpaintPrompt" rows="2" placeholder="z.B. ein roter Hut, fotorealistisch"></textarea>
<button class="icon-button speech-btn" id="speechBtn" type="button" title="Spracheingabe">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
</button>
</div>
<small class="speech-status" id="speechStatus" hidden>Aufnahme läuft…</small>
</div>
<details class="details">
<summary>Erweiterte Einstellungen</summary>
<div class="form-row">
<div class="form-group">
<label for="inpaintStrength">Änderungsstärke</label>
<input type="range" id="inpaintStrength" min="0.1" max="1.0" step="0.05" value="0.75" />
<small id="inpaintStrengthLabel">0.75</small>
</div>
<div class="form-group">
<label for="inpaintSteps">Schritte</label>
<input type="number" id="inpaintSteps" min="10" max="50" value="25" />
</div>
<div class="form-group">
<label for="inpaintCfg">Treue</label>
<input type="number" id="inpaintCfg" min="1" max="20" step="0.5" value="7" />
</div>
</div>
</details>
<button id="inpaintBtn" class="primary" disabled>
<span>Inpainting starten</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<div class="progress" id="inpaintProgress" hidden>
<div class="spinner"></div>
<div>
<p id="inpaintProgressTitle">Inpainting läuft…</p>
<small id="inpaintProgressSub">Das kann etwas dauern.</small>
</div>
</div>
</section>
<section class="panel results">
<h2>Inpainting-Ergebnis</h2>
<article class="result-card" id="inpaintResultCard">
<header>
<h3>Bearbeitetes Bild</h3>
<button class="ghost" id="downloadInpaint" disabled>PNG herunterladen</button>
</header>
<div class="result-preview" id="inpaintPreview">
<p class="placeholder">Das bearbeitete Bild wird hier angezeigt.</p>
</div>
</article>
</section>
</div>
</div>
<!-- ═══════════════════════════════════════════ -->
<section class="panel info" aria-labelledby="image-safety-title">
<h2 id="image-safety-title">Sicherer sicherer Betrieb</h2>
<p>Text-zu-Bild und Inpainting laufen ausschließlich als serielle die lokale Warteschlange-Aufträge. Offenes LoRA-Training und direkte Hintergrundentfernung sind aus Sicherheitsgründen nicht freigeschaltet.</p>
</section>
</main>
<footer class="site-footer">
<p>© 2026 Panomity GmbH</p>
<nav aria-label="Footer">
<a href="/preise.html">Preise</a>
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</nav>
</footer>
</div>
<!-- Matomo Analytics -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://statsdeluxe.com/statistics/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '149']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://statsdeluxe.com/statistics/matomo.php?idsite=149&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
</body>
</html>