Baue einen Bildgenerator mit Stable Diffusion, Next.js und Vercel

Wie man eine Webanwendung zur Bilderzeugung mit Stable Diffusion erstellt

In diesem Tutorial führen wir Sie durch den Prozess der Erstellung einer Webanwendung, die Bilder basierend auf Textvorgaben generiert, indem wir die Leistung von Stable Diffusion nutzen, einem hochmodernen Deep-Learning-Text-zu-Bild-Modell. Wir verwenden Next.js sowohl für die Frontend- als auch für die Backend-Entwicklung und bringen unsere Anwendung bei Vercel in Betrieb.

Inhaltsverzeichnis

• Einleitung
• Voraussetzungen
• Einrichten des Next.js-Projekts
• Installation von Tailwind CSS
• Erstellen des Formulars zur Bilderzeugung
• Erstellen der API-Route für Stable Diffusion
• Bereitstellung der Anwendung auf Vercel
• Fazit

Einleitung

Stable Diffusion ist bekannt für seine Fähigkeit, komplexe Bilder basierend auf einfachen Textbeschreibungen zu erzeugen. Dieses Tutorial zeigt, wie Sie eine benutzerfreundliche Webanwendung erstellen können, mit der Benutzer ihre eigenen Textvorgaben eingeben und atemberaubende Bilder erhalten können, die von Stable Diffusion generiert werden.

Diese Anwendung dient als grundlegendes Projekt für die weitere Erkundung und Entwicklung kreativer Anwendungen, die um verschiedene Stable Diffusion-Modelle herum gebaut werden.

Voraussetzungen

Bevor wir in den Code eintauchen, stellen Sie sicher, dass Sie Folgendes auf Ihrem Computer installiert haben:

• Node.js
• npm (Node Package Manager)

Außerdem müssen Sie sich bei einem Vercel-Konto anmelden, falls Sie dies noch nicht getan haben.

Einrichten des Next.js-Projekts

Beginnen wir damit, ein neues Next.js-Projekt zu erstellen, das TypeScript und ESLint für eine bessere Codequalität umfasst:

npx create-next-app@latest my-project --ts --eslint

Dieser Befehl erstellt ein neues Next.js-Projekt in einem Verzeichnis mit dem Namen my-project.

Installation von Tailwind CSS

Als Nächstes installieren wir Tailwind CSS, um das Styling unserer Anwendung zu verbessern. Hier sind die Schritte:

1. Installieren Sie Tailwind CSS zusammen mit seinen Peer-Abhängigkeiten:

npm install -D tailwindcss postcss autoprefixer

2. Konfigurieren Sie Ihre Template-Pfade in tailwind.config.js:
3. Fügen Sie Tailwind-Direktiven zu Ihrer globals.css-Datei hinzu:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Starten Sie den Entwicklungsserver:

npm run dev

Ihr Next.js-Projekt ist jetzt vollständig mit Tailwind CSS konfiguriert!

Erstellen des Formulars zur Bilderzeugung

Jetzt erstellen wir ein Formular, das es Benutzern ermöglicht, ihre Textvorgaben einzugeben. Aktualisieren Sie Ihre pages/index.tsx-Datei mit folgendem Code:

// Code-Snippet zum Erstellen des Formulars zur Bilderzeugung

Dieses Snippet stellt ein Formular zur Eingabe von Textvorgaben zur Verfügung und sendet es zur Bilderzeugung. Es zeigt auch einen Ladeindikator, während das Bild verarbeitet wird.

Erstellen der API-Route für Stable Diffusion

Als Nächstes müssen wir eine API-Route erstellen, die die Kommunikation mit der Stable Diffusion-Engine ermöglicht, um Bilder zu erzeugen. Erstellen Sie eine neue Datei mit dem Namen pages/api/stablediffusion.ts und implementieren Sie den folgenden Code:

// Code-Snippet für die API-Route für Stable Diffusion

Vergessen Sie nicht, Ihren Replicate-API-Token in der .env-Datei zur Authentifizierung einzufügen:

REPLICATE_API_TOKEN=your_token_here

Diese API-Route fungiert als Backend-Handler für Anfragen, die von der Frontend-Anwendung gesendet werden, um visuelle Darstellungen mithilfe des Stable Diffusion-Modells zu generieren.

Bereitstellung der Anwendung auf Vercel

Um Ihre Anwendung erfolgreich auf Vercel bereitzustellen, befolgen Sie diese Schritte:

1. Installieren Sie die Vercel CLI:

npm i -g vercel

2. Loggen Sie sich über die CLI in Ihr Vercel-Konto ein:

vercel login

3. Führen Sie in Ihrem Projektverzeichnis den folgenden Befehl aus, um zu deployen:

vercel

Befolgen Sie die Anweisungen auf dem Bildschirm, um Ihr Projekt entweder mit einem vorhandenen Vercel-Projekt zu verknüpfen oder um ein neues zu erstellen. Ihre Anwendung wird unter einer einzigartigen URL live sein, die über Ihren Webbrowser zugänglich ist.

Für einen vollständigen Codeverweis schauen Sie sich das vollständige Projekt auf GitHub an.

Fazit

In diesem Tutorial haben wir erfolgreich eine Webanwendung erstellt, die Bilder basierend auf Textvorgaben unter Nutzung der Fähigkeiten von Stable Diffusion generiert. Wir haben Next.js für die Frontend-Entwicklung, Tailwind CSS für das Styling verwendet und unsere Anwendung auf Vercel gehostet.

Jetzt können Sie diese interaktive Anwendung nutzen, um faszinierende Bilder aus Ihren Textbeschreibungen zu generieren und die beeindruckenden Funktionen, die das Stable Diffusion-Modell bietet, weiter zu erkunden.

Darüber hinaus laden wir Sie zu unserem speziellen Stable Diffusion AI Hackathon ein. Dieses einwöchige Event bietet Ihnen die perfekte Gelegenheit, zu experimentieren und einen funktionsfähigen Prototyp der Anwendung unter Verwendung von Vercel und Stable Diffusion zusammen mit einem globalen Netzwerk von Enthusiasten zu erstellen!

Besuchen Sie unsere AI-App-Seite, um weitere Projekte zu entdecken, die von unseren Community-Mitgliedern unter Einbeziehung von Stable Diffusion, ChatGPT und anderen hochmodernen KI-Technologien entwickelt wurden! Vielleicht finden Sie Inspiration oder sogar ein Projekt, das Sie weiter innovieren möchten.

Wir laden Sie ein, Teil unserer lebendigen Gemeinschaft von Schöpfern und Innovatoren zu werden, die die transformierenden Fähigkeiten von KI nutzen, um die Zukunft zu gestalten!