Wie erstelle ich einen KI-Bildgenerator von Grund auf neu? 🤔
Lassen Sie uns Schritt für Schritt herausfinden, wie Sie Ihre eigene Webanwendung erstellen, die eine Textbeschreibung mithilfe der Hugging Face-API in Bilder umwandelt. Alles, was Sie brauchen, sind ein paar Kenntnisse in HTML, CSS und JavaScript. Dies ist ein großartiges Projekt für Anfänger: einfach zu implementieren und mit beeindruckenden Ergebnissen!
Sie können den gesamten Code der Projekte am Ende des Artikels herunterladen
📚 Inhalt
🚀 Warum ein solches Projekt?
🛠️ Was werden wir tun?
📁 Projektstruktur
1️⃣ HTML (index.html)
2️⃣ CSS (style.css)
3️⃣ JavaScript (script.js)
💡 Ergebnis
📌 Tipps und Ideen zur Verbesserung
🙋 Häufig gestellte Fragen (FAQ)
✅ Fazit
🚀 Warum ein solches Projekt?
Stell dir vor, du erstellst in nur wenigen Stunden eine Webanwendung, die Text mithilfe künstlicher Intelligenz in Bilder umwandelt. Klingt nach Magie? Und das ist nur eine Kombination aus HTML, CSS, JavaScript und einer externen API. 🤖✨
Deshalb ist ein solches Projekt ein echter Glücksgriff für einen Neuling:
Übung mit API — Du lernst, Anfragen an einen externen Server zu senden und Antworten zu verarbeiten. Dies ist eine Schlüsselkompetenz eines modernen Webentwicklers!
Cooles Bild - Das Ergebnis deiner Arbeit ist sofort sichtbar. Du gibst Text ein - du bekommst ein helles Bild. Das ist sehr faszinierend und inspirierend.
Wissensfestigung - HTML, CSS, JS - alles an einem Ort. Und das nicht in abstrakten Beispielen, sondern in einer echten Mini-App.
Helles und dunkles Thema - ein Trend der letzten Jahre. Wir werden eine Umschalttaste zwischen ihnen erstellen - und Sie werden lernen, wie dies in der Praxis umgesetzt wird.
Portfolio – ein solches Projekt wird definitiv nicht unbemerkt bleiben. Es zeigt, dass Sie mit APIs arbeiten, Schnittstellen erstellen und an den Benutzer denken können.
Wenn Sie nach einem Projekt gesucht haben, das sowohl nützlich als auch schön und wirklich interessant ist, haben Sie es gefunden.
🛠️ Was werden wir tun?
Stellen wir uns vor: Sie öffnen eine Seite, geben einen Satz wie „Schloss in den Wolken bei Sonnenuntergang“ ein, klicken auf eine Schaltfläche – und nach ein paar Sekunden erhalten Sie einzigartige Bilder, die von KI erstellt wurden. Genau das werden wir umsetzen!
Wir erstellen eine vollwertige Webanwendung, in der der Benutzer:
Geben Sie eine Textbeschreibung (prompt) ein, die eine imaginäre Szene beschreibt
Wählen Sie ein Bildgenerierungsmodell (z. B. Stable Diffusion)
Anzahl der Bilder einstellen - von eins bis vier
Stellen Sie das gewünschte Seitenverhältnis ein: quadratisch, horizontal oder vertikal
Klicken Sie auf die Schaltfläche „Generieren“ und sehen Sie sofort das Ergebnis
Bilder auf Ihrem Computer speichern 💾
Und außerdem kannst du zwischen einem hellen und einem dunklen Thema wechseln. Bequem, modern und schön.
Ein solches Projekt wird dir helfen, echte Web-Entwicklungskenntnisse zu erwerben und zu verstehen, wie moderne KI-Tools funktionieren.
📁 Projektstruktur
Bevor Sie Code schreiben, müssen Sie das Projekt richtig organisieren. Dies ist ein wichtiger Schritt: Eine klare Struktur hilft Ihnen, sich in Zukunft leichter zurechtzufinden und Änderungen vorzunehmen.
Erstelle einen separaten Ordner und nenne ihn beispielsweise ai-image-generator. Erstellen Sie in diesem Ordner 3 Hauptdateien:
index.html- Hier befindet sich das Hauptlayout: Seitenstruktur, Schaltflächen, Eingabefelder und Dropdown-Listenstyle.css— eine Datei mit Stilen, in der wir ein modernes und adaptives Design erstellen und auch ein dunkles und helles Thema implementierenscript.js— JavaScript-Datei, die für die Logik verantwortlich ist: Datenverarbeitung, Verbindung zur API, Bilderstellung und Interaktion mit der Schnittstelle
Alles ist einfach und klar. In wenigen Minuten hast du eine Grundlage, mit der du kreativ werden kannst!
1️⃣ HTML (index.html)
Beginnen wir mit dem Wichtigsten - dem Rahmen unserer Anwendung. HTML ist für die Struktur der Seite verantwortlich: wie alles aussieht, wo sich die Schaltflächen, Felder und Überschriften befinden. Hier beschreiben wir, was der Benutzer im Browser sehen wird.
HTML ist die Grundlage, auf die dann Stile (CSS) und Logik (JavaScript) „aufgesetzt“ werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Image Generator Kodik APP</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h1>AI Image Generator</h1>
</div>
<button class="theme-toggle">
<i class="fa-solid fa-moon"></i>
</button>
</header>
<div class="main-content">
<form action="#" class="prompt-form">
<!-- Prompt Textarea Container -->
<div class="prompt-container">
<textarea class="prompt-input" placeholder="Describe your imagination in detail..." spellcheck="false" autofocus required></textarea>
<button type="button" class="prompt-btn" title="Get Random Prompt">
<i class="fa-solid fa-dice"></i>
</button>
</div>
<!-- Prompt Actions / Buttons -->
<div class="prompt-actions">
<div class="select-wrapper">
<select class="custom-select" id="model-select" required>
<option value="" selected disabled>Select Model</option>
<option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
<option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
<option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
<option value="stabilityai/stable-diffusion-3-medium-diffusers">Stable Diffusion 3</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="count-select" required>
<option value="" selected disabled>Image Count</option>
<option value="1">1 Image</option>
<option value="2">2 Images</option>
<option value="3">3 Images</option>
<option value="4">4 Images</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="ratio-select" required>
<option value="" selected disabled>Aspect Ratio</option>
<option value="1/1">Square (1:1)</option>
<option value="16/9">Landscape (16:9)</option>
<option value="9/16">Portrait (9:16)</option>
</select>
</div>
<button type="submit" class="generate-btn">
<i class="fa-solid fa-wand-sparkles"></i>
Generate
</button>
</div>
</form>
<!-- Result Gallery Grid -->
<div class="gallery-grid"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>2️⃣ CSS (style.css)
Jetzt, da wir die Struktur haben, ist es an der Zeit, die App wirklich schön und angenehm für die Augen zu machen. CSS ist für das Erscheinungsbild aller Elemente verantwortlich: von den Schaltflächen bis zum Hintergrund.
In unserem Fall erstellen wir ein modernes Design mit:
Flüssige Animationen
Adaptives Layout, damit alles sowohl auf dem Computer als auch auf dem Telefon gut aussieht
Helles und dunkles Thema, zwischen denen der Benutzer mit einem Klick wechseln kann
Stilvolle Schaltflächen, Eingabefelder und Karten mit Bildern
Wir werden auch die Schriftart einbinden Inter mit Google Fonts — es sieht modern und lesbar aus.
Eine solche Schnittstelle ist angenehm zu bedienen und steht den externen Diensten im Internet in nichts nach!
/* Importing Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--color-primary: #5C56E1;
--color-primary-dark: #5b21b6;
--color-accent: #8B5CF6;
--color-card: #FFFFFF;
--color-input: #F1F1FF;
--color-text: #09090E;
--color-placeholder: #5C5A87;
--color-border: #D4D4ED;
--color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}
body.dark-theme {
--color-card: #1E293B;
--color-input: #141B2D;
--color-text: #F3F4F6;
--color-placeholder: #A3B6DC;
--color-border: #334155;
background: var(--color-card);
background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
}(Der vollständige Code kann auf github gefunden werden. Link am Ende des Artikels - füge ihn einfach in style.css ein)
3️⃣ JavaScript (script.js)
HTML ist für die Struktur verantwortlich, CSS für das Erscheinungsbild, aber JavaScript wird unserer Anwendung echtes Leben einhauchen.
Mit seiner Hilfe können wir:
Wir verarbeiten die Benutzereingabe — Textbeschreibung, ausgewähltes Modell und Generierungsparameter
Wir senden eine Anfrage an die Hugging Face-API, um Bilder zu erhalten
Wir zeigen die Bilder in einem schönen Raster mit Ladeeffekten an
Wir fügen die Funktionalität der Schaltfläche "Zufällige Eingabeaufforderung" hinzu, die automatisch interessante Ideen eingibt
Wir implementieren das Umschalten zwischen hellem und dunklem Thema
Hier arbeitest du mit DOM, Ereignissen, asynchronen Anfragen (fetch) und vielem mehr. Dies ist ein großartiges Training, um echte JavaScript-Entwicklungskenntnisse zu entwickeln!
👉 Füge deinen Hugging Face-API-Schlüssel anstelle von PASTE-YOUR-API-KEY ein:
const promptForm = document.querySelector(".prompt-form");
const themeToggle = document.querySelector(".theme-toggle");
const promptBtn = document.querySelector(".prompt-btn");
const promptInput = document.querySelector(".prompt-input");
const generateBtn = document.querySelector(".generate-btn");
const galleryGrid = document.querySelector(".gallery-grid");
const modelSelect = document.getElementById("model-select");
const countSelect = document.getElementById("count-select");
const ratioSelect = document.getElementById("ratio-select");
const API_KEY = "PASTE-YOUR-API-KEY"; // Hugging Face API Key
// Example prompts
const examplePrompts = [
"A magic forest with glowing plants and fairy homes among giant mushrooms",
"An old steampunk airship floating through golden clouds at sunset",
"A future Mars colony with glass domes and gardens against red mountains",
"A dragon sleeping on gold coins in a crystal cave",
"An underwater kingdom with merpeople and glowing coral buildings",
"A floating island with waterfalls pouring into clouds below",
"A witch's cottage in fall with magic herbs in the garden",
"A robot painting in a sunny studio with art supplies around it",
"A magical library with floating glowing books and spiral staircases",
"A Japanese shrine during cherry blossom season with lanterns and misty mountains",
"A cosmic beach with glowing sand and an aurora in the night sky",
"A medieval marketplace with colorful tents and street performers",
"A cyberpunk city with neon signs and flying cars at night",
"A peaceful bamboo forest with a hidden ancient temple",
"A giant turtle carrying a village on its back in the ocean",
];Wenn Sie keinen Schlüssel haben, registrieren Sie sich kostenlos auf huggingface.co und erhalte es im Bereich Access Tokens
(Der vollständige Code kann auf Github abgerufen werden. Link am Ende des Artikels)
💡 Ergebnis
Wenn du dieses Projekt abgeschlossen hast, hast du nicht nur eine Reihe von Dateien, sondern eine echte Mini-App, die professionell aussieht und mit echter künstlicher Intelligenz arbeitet.
Du kannst:
Geben Sie eine beliebige imaginäre Beschreibung ein und erhalten Sie ein generiertes Bild, als wäre es aus der Fantasie
Verwenden Sie verschiedene Modelle für die Generierung, einschließlich beliebter Versionen von Stable Diffusion
Speichern Sie Ihre Lieblingsbilder und teilen Sie sie mit Freunden
Wechseln Sie das Design je nach Tageszeit oder Stimmung 🌞🌙
Und das Wichtigste ist, dass du es selbst gemacht hast. Von Anfang bis Ende. Ein solches Ergebnis gibt einen mächtigen Schub an Selbstvertrauen und Motivation, weiterzumachen!
📌 Tipps und Ideen zur Verbesserung
Das Projekt ist bereits fertig, aber Sie müssen nicht damit aufhören. So kannst du es weiter verbessern:
Favoriten — Möglichkeit, die besten Bilder in eine separate Galerie hinzuzufügen
Anfragen bearbeiten - Fügen Sie eine Schaltfläche zum erneuten Generieren hinzu, mit der Sie die Eingabeaufforderung ändern können, ohne das Formular vollständig neu zu laden
Geschichte — Speichern Sie vorherige Anfragen und Bilder in
localStorage, damit der Benutzer später darauf zurückgreifen kannFeedback - dem Benutzer erlauben, das Ergebnis zu bewerten oder einen Kommentar zu hinterlassen
Teilen - Möglichkeit hinzufügen, ein Bild über einen Link zu teilen oder in soziale Netzwerke zu exportieren
Dies ist eine großartige Möglichkeit, ein Projekt zu entwickeln und gleichzeitig Ihre Fähigkeiten zu verbessern!
🙋 Häufig gestellte Fragen (FAQ)
🔑 Wo bekomme ich den Hugging Face API-Schlüssel?
Zur Website huggingface.co, erstelle ein Konto (falls du noch keins hast) und gehe dann zum Abschnitt Settings > Access Tokens und generiere einen neuen Schlüssel. Füge ihn in die Variable API_KEY in script.js ein.
🖼️ Wie viele Bilder können gleichzeitig generiert werden?
Du kannst zwischen 1 und 4 Bildern wählen. Dieser Wert wird in der Dropdown-Liste auf der Seite konfiguriert.
⚠️ Warum wird das Bild nicht geladen?
Mögliche Ursachen:
Falscher API-Schlüssel
Instabile Internetverbindung
Fehler auf der Modellseite (Details können in den Protokollen der Browserkonsole angezeigt werden)
🌗 Wie funktioniert das Umschalten des Designs?
Die Website speichert das ausgewählte Thema (hell oder dunkel) und speichert es in localStorage und berücksichtigt auch die Systemeinstellungen des Browsers.
📱 Funktioniert das auf Mobilgeräten?
Ja, die Benutzeroberfläche ist für mobile Geräte angepasst. Alle Elemente werden skaliert und die Bildergalerie wird an den Bildschirm angepasst.
📤 Kann ich die Ergebnisse teilen?
Natürlich! Klicke auf das Download-Symbol unter dem Bild — die Datei wird gespeichert und du kannst sie an Freunde senden oder in sozialen Netzwerken veröffentlichen.
✅ Fazit
Das war's schon – du bist gerade von einem leeren Ordner zu einer fertigen KI-App übergegangen, die Bilder aus Text generiert. 🔥
Sie haben herausgefunden, wie:
HTML zum Erstellen der Benutzeroberfläche verwenden
CSS anwenden, um ein ansprechendes und modernes Design zu erstellen
JavaScript aktivieren und mit einer externen API interagieren
Dieses Projekt ist nicht nur ein Lernprojekt. Es sieht anständig aus, funktioniert stabil und zeigt, dass man echte Web-Tools bauen kann.
Experimentiere weiter:
Probiere neue Modelle aus
Ändere die Benutzeroberfläche
füge neue Funktionen hinzu
Jede Verbesserung wird dich als Entwickler stärker machen. Viel Glück auf deinem Weg! 🚀
Sie können den Quellcode von unserer GitHub