Aufbau einer AI Sticker Maker-Plattform mit AI/ML-API, Next.js, React und Tailwind CSS unter Verwendung von OpenAI GPT- und DALL·E-Modellen.

Mir wurde langweilig. Du auch? ?

Hmm... ?

Wie wäre es mit der Erstellung einer AI Sticker Maker-Plattform? Ehrlich gesagt ist es eine wirklich interessante Idee. Und hey, vielleicht generieren wir sogar etwas Gewinn, indem wir einfach Stripe als Zahlungsanbieter integrieren. ? Ja, warum nicht?

Also, fangen wir an. Oder versuchen Sie es zumindest! ?

Kurze Einführung?

Das Wichtigste zuerst: Lassen Sie uns einen Pseudocode skizzieren oder einen Plan erstellen (es sei denn, Sie sind ein echter Baumeister, der aus der Hüfte programmiert). Es sollte ungefähr so ​​aussehen:

1. Der Benutzer gibt eine Eingabeaufforderung ein (eine Textbeschreibung, wie der Aufkleber aussehen soll).
2. Unser AI Sticker Maker generiert einen wirklich niedlichen Aufkleber. Ta-da! ?

Ein Kinderspiel, nicht wahr? ?

Aber warten Sie, lassen Sie mich das klarstellen. Wir werden zwei Modelle verwenden: GPT-4o und DALL·E 3, beide von OpenAI. Sie sind wirklich gehyped! ?

Wir verwenden die AI/ML-API, die den Zugriff auf 200 KI-Modelle mit einer einzigen API ermöglicht. Lassen Sie mich kurz davon erzählen.

Lernen Sie die AI/ML-API kennen?

AI/ML API ist eine bahnbrechende Plattform für Entwickler und SaaS-Unternehmer, die modernste KI-Funktionen in ihre Produkte integrieren möchten. Es bietet einen zentralen Zugangspunkt zu über 200 hochmodernen KI-Modellen, die alles von NLP bis Computer Vision abdecken.

Hauptfunktionen für Entwickler:

• Umfangreiche Modellbibliothek: 200 vorab trainierte Modelle für schnelles Prototyping und Bereitstellung. ?
• Anpassungsoptionen: Passen Sie Modelle genau an Ihren spezifischen Anwendungsfall an. ?
• Entwicklerfreundliche Integration: RESTful APIs und SDKs für die nahtlose Integration in Ihren Stack. ?️
• Serverlose Architektur: Konzentrieren Sie sich auf die Codierung, nicht auf das Infrastrukturmanagement. ☁️

Loslegen Sie KOSTENLOS (0 US-Dollar): goallapi.com ?

Tiefer Einblick in die AI/ML-API-Dokumentation (sehr detailliert, ich kann nur zustimmen): docs.aimlapi.com ?

Tech-Stack-Zutaten?

Wir verwenden TypeScript, Next.js, React und Tailwind CSS, um unseren AI Sticker Maker zu erstellen und zu entwerfen Plattform.

• TypeScript ist nur eine Programmiersprache – aber eine wirklich tolle! ?
• Next.js ist das React Framework für das Web. Es ermöglicht uns, hochwertige Webanwendungen mit der Leistungsfähigkeit von React-Komponenten zu erstellen. ?
• React ist die Bibliothek für Web- und native Benutzeroberflächen. ?️
• Tailwind CSS eignet sich am besten für das Styling – bauen Sie einfach alles, was Sie wollen, im Ernst. ?

Das war nur ein kurzer Überblick darüber, was wir verwenden werden. Erfahren Sie hier mehr über jeden von ihnen:

• TypeScript: typescriptlang.org ?
• Next.js: nextjs.org ⏭️
• Reagieren: reagieren.dev ⚛️
• Tailwind CSS: tailwindcss.com ?️

Das Kochen hat begonnen?

Machen wir uns die Hände schmutzig! Erstellen Sie zunächst einen Ordner. Öffnen Sie Ihr Terminal und geben Sie Folgendes ein:

mkdir aiml-tutorial
cd aiml-tutorial

Jetzt erstellen wir eine neue Next.js-App:

npx create-next-app@latest

Es werden Ihnen einige Fragen gestellt:

✔ Wie heißt Ihr Projekt? Hier sollten Sie Ihren App-Namen eingeben. Zum Beispiel: aistickermaker. Für die restlichen Fragen drücken Sie einfach die Eingabetaste.

Das sehen Sie:

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Profi-Tipp: Wählen Sie je nach Ihren Vorlieben Ja oder Nein. Ich werde nicht urteilen! ?

Öffnen wir das Projekt mit VSCode:

code .

Jetzt sollte Visual Studio Code direkt mit dieser App starten. Zeit, mit dem Codieren zu beginnen! ?

APIs implementieren ?️

Das Wichtigste zuerst: Lassen Sie uns APIs erstellen, um die Benutzeraufforderung zu verbessern und den Aufkleber zu generieren. Gehen Sie zum App-Ordner, erstellen Sie einen neuen Ordner mit dem Namen „api“ und erstellen Sie darin zwei neue Ordner: „EnhancePrompt“ und „GenerateSticker“. Erstellen Sie für jede eine route.ts-Datei.

Der EnhancePrompt-Endpunkt ?‍♂️

Jetzt beginnen wir mit dem EnhancePrompt-Endpunkt. Öffnen Sie route.ts im Ordner „EnhancePrompt“ und geben Sie den folgenden Code ein:

import { NextResponse } from 'next/server';

const systemPrompt = `
You are tasked with enhancing user prompts to generate clear, detailed, and creative descriptions for a sticker creation AI. The final prompt should be imaginative, visually rich, and aligned with the goal of producing a cute, stylized, and highly personalized sticker based on the user's input.

Instructions:

Visual Clarity: The enhanced prompt must provide clear visual details that can be directly interpreted by the image generation model. Break down and elaborate on specific elements of the scene, object, or character based on the user input.

Example: If the user says "A girl with pink hair," elaborate by adding features like "short wavy pink hair with soft, pastel hues."
Style & Theme:

Emphasize that the final output should reflect a cute, playful, and approachable style.
Add terms like "adorable," "cartoonish," "sticker-friendly," or "chibi-like" to guide the output to a lighter, cuter aesthetic.
Include styling prompts like “minimalistic lines,” “soft shading,” and “vibrant yet soothing colors.”
Personalization:

If a reference or context is given, enhance it to make the sticker feel personalized.
Add context-appropriate descriptors like “wearing a cozy blue hoodie,” “soft pink blush on cheeks,” or “a playful expression.”
Expression & Pose:

Where applicable, refine prompts with suggestions about facial expressions or body language. For example, “Smiling softly with big sparkling eyes” or “A cute wink and a slight tilt of the head.”
Background & Accessories:

Optionally suggest simple, complementary backgrounds or accessories, depending on user input. For instance, "A light pastel background with small, floating hearts" or "Holding a tiny, sparkling star."
Colors:

Emphasize the color scheme based on the user's description, making sure it's consistent with a cute, playful style.
Use descriptors like “soft pastels,” “bright and cheerful,” or “warm and friendly hues” to set the mood.
Avoid Overcomplication:

Keep the descriptions short enough to be concise and not overly complex, as the output should retain a sticker-friendly quality.
Avoid unnecessary details that could clutter the design.
Tone and Language:

The tone should be light, imaginative, and fun, matching the playful nature of stickers.

Example:
User Input:
"A girl with pink hair wearing a hoodie."

Enhanced Prompt:
"An adorable girl with short, wavy pink hair in soft pastel hues, wearing a cozy light blue hoodie. She has a sweet smile with big, sparkling eyes, and a playful expression. The sticker style is cartoonish with minimalistic lines and soft shading. The background is a simple light pastel color with small floating hearts, creating a cute and inviting look."
`;

export async function POST(request: Request) {
    try {
        const { userPrompt } = await request.json();
        console.log("/api/enhancePrompt/route.ts userPrompt: ", userPrompt);

        // Make the API call to the external service
          const response = await fetch('https://api.aimlapi.com/chat/completions', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${process.env.NEXT_PUBLIC_AIML_API_KEY}`
            },
            body: JSON.stringify({
              model: 'gpt-4o-mini',
              messages: [
                {
                  role: 'system',
                  content: systemPrompt
                },
                {
                  role: 'user',
                  content: userPrompt
                }
              ]
            })
          });

        console.log("response: ", response);

        if (!response.ok) {
            // If the API response isn't successful, return an error response
            return NextResponse.json({ error: "Failed to fetch completion data" }, { status: response.status });
        }

        const data = await response.json();
        console.log("data: ", data);

        const assistantResponse = data.choices[0]?.message?.content || "No response available";

        // Return the assistant's message content
        return NextResponse.json({ message: assistantResponse });
    } catch (error) {
        console.error("Error fetching the data:", error);
        return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 });
    }
}

Hier ist die getrennte Eingabeaufforderung:

You are tasked with enhancing user prompts to generate clear, detailed, and creative descriptions for a sticker creation AI. The final prompt should be imaginative, visually rich, and aligned with the goal of producing a cute, stylized, and highly personalized sticker based on the user's input.

Instructions:

Visual Clarity: The enhanced prompt must provide clear visual details that can be directly interpreted by the image generation model. Break down and elaborate on specific elements of the scene, object, or character based on the user input.

Example: If the user says "A girl with pink hair," elaborate by adding features like "short wavy pink hair with soft, pastel hues."
Style & Theme:

Emphasize that the final output should reflect a cute, playful, and approachable style.
Add terms like "adorable," "cartoonish," "sticker-friendly," or "chibi-like" to guide the output to a lighter, cuter aesthetic.
Include styling prompts like “minimalistic lines,” “soft shading,” and “vibrant yet soothing colors.”
Personalization:

If a reference or context is given, enhance it to make the sticker feel personalized.
Add context-appropriate descriptors like “wearing a cozy blue hoodie,” “soft pink blush on cheeks,” or “a playful expression.”
Expression & Pose:

Where applicable, refine prompts with suggestions about facial expressions or body language. For example, “Smiling softly with big sparkling eyes” or “A cute wink and a slight tilt of the head.”
Background & Accessories:

Optionally suggest simple, complementary backgrounds or accessories, depending on user input. For instance, "A light pastel background with small, floating hearts" or "Holding a tiny, sparkling star."
Colors:

Emphasize the color scheme based on the user's description, making sure it's consistent with a cute, playful style.
Use descriptors like “soft pastels,” “bright and cheerful,” or “warm and friendly hues” to set the mood.
Avoid Overcomplication:

Keep the descriptions short enough to be concise and not overly complex, as the output should retain a sticker-friendly quality.
Avoid unnecessary details that could clutter the design.
Tone and Language:

The tone should be light, imaginative, and fun, matching the playful nature of stickers.

Example:
User Input:
"A girl with pink hair wearing a hoodie."

Enhanced Prompt:
"An adorable girl with short, wavy pink hair in soft pastel hues, wearing a cozy light blue hoodie. She has a sweet smile with big, sparkling eyes, and a playful expression. The sticker style is cartoonish with minimalistic lines and soft shading. The background is a simple light pastel color with small floating hearts, creating a cute and inviting look."

Was passiert hier? ?

• NextResponse importieren: Um unsere HTTP-Antworten reibungslos zu verarbeiten.
• Definieren der POST-Funktion: Hier passiert die Magie, wenn jemand diesen Endpunkt erreicht.
• Benutzeraufforderung abrufen: Wir greifen auf die vom Benutzer bereitgestellte Eingabeaufforderung zu.
• Aufruf der API der AI/ML-API: Wir stellen eine Anfrage, um die Eingabeaufforderung des Benutzers mithilfe von GPT-4o zu verbessern.
• Umgang mit Antworten: Wir prüfen, ob die Antwort in Ordnung ist, analysieren die Daten und extrahieren die Antwort des Assistenten.
• Fehlerbehandlung: Denn niemand mag es, wenn unbehandelte Fehler die Party ruinieren.

Hier ist ein konkretes Beispiel dafür, wie die KI die Eingabeaufforderung des Benutzers verbessert. ???

Sie haben gerade eine Eingabeaufforderung eingegeben:

A cute panda eating ice cream under a rainbow

Die KI wird es verbessern, um es detaillierter und visuell ansprechender zu machen. Als Ergebnis sollten Sie eine Antwort erhalten wie:

An adorable, chibi-like panda with big, sparkling eyes and a joyful expression, savoring a colorful scoop of ice cream. The panda is fluffy and round, with classic black-and-white markings, sitting contentedly. The ice cream cone features vibrant, swirling flavors in pastel pink, mint green, and sunny yellow. Above, a playful, cartoonish rainbow arcs across a soft blue sky, adding a cheerful splash of color. The design is sticker-friendly with minimalistic lines and soft shading, ensuring a cute and delightful aesthetic perfect for capturing the joyful scene.

Okay, tauchen wir zurück in den Code-Kessel und kochen weiter an unserem AI Sticker Maker! ?

Der generateSticker Endpunkt ?️

Also, unser enhancePrompt-Endpunkt läuft gut. Zeit, die Dinge mit dem generateSticker-Endpunkt aufzupeppen. Gehen Sie zum Ordner api/generateSticker und öffnen Sie route.ts. Ersetzen Sie alles, was sich darin befindet (wahrscheinlich nichts), durch diesen neuen Code:

mkdir aiml-tutorial
cd aiml-tutorial

Was passiert hier? ?

• NextResponse importieren: Um unsere HTTP-Antworten reibungslos zu verarbeiten.
• Definieren der POST-Funktion: Hier passiert die Magie, wenn jemand diesen Endpunkt erreicht.
• Benutzeraufforderung abrufen: Wir greifen auf die vom Benutzer bereitgestellte Eingabeaufforderung zu.
• API der AI/ML-API aufrufen: Wir stellen eine Anfrage zum Generieren eines Bildes basierend auf der Eingabeaufforderung mit DALL·E 3.
• Umgang mit Antworten: Wir prüfen, ob die Antwort in Ordnung ist, analysieren die Daten und extrahieren die Bild-URL.
• Fehlerbehandlung: Denn niemand mag es, wenn unbehandelte Fehler die Party ruinieren.

Versuchen wir es mit Panda in Aktion! ?

Hier ist unser süßer Panda-Aufkleber! ???

Andere Beispiele ?

Eingabeaufforderung:

npx create-next-app@latest

Eingabeaufforderung:

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Scheint wirklich WOW zu sein! ?

Wir brauchen ein Frontend, Leute! ?

Aufbau des Frontends?

Zeit, unserer App ein Gesicht zu geben! Lassen Sie uns eine Benutzeroberfläche erstellen, in der Benutzer ihre Eingabeaufforderung eingeben und einen glänzenden neuen Aufkleber erhalten können.

Die Datei page.tsx?

Navigieren Sie zu app/page.tsx und aktualisieren Sie es mit dem folgenden Code:

mkdir aiml-tutorial
cd aiml-tutorial

Aufschlüsseln?

• Loader: Wir verwenden einen wirklich einfachen, aber schönen Loader; drei horizontale Punkte mit einer schönen Animation:

npx create-next-app@latest

• Statusverwaltung: Verwendung von useState zur Verarbeitung von Benachrichtigungen, Ladestatus, der Benutzeraufforderung und der Aufkleber-URL.
• Funktionen:
  • enhanceUserPrompt: Ruft unseren Endpunkt /api/enhancePrompt auf, um die Eingabeaufforderung des Benutzers ... nun ja, Eingabeaufforderung zu gestalten.
  • generateCuteSticker: Trifft den Endpunkt /api/generateSticker, um diesen entzückenden Aufkleber zu erhalten.
  • generateSticker: Orchestriert den gesamten Prozess, wenn der Benutzer auf die magische Schaltfläche klickt.
  • handleDownload: Ermöglicht dem Benutzer, seinen neuen Aufkleber herunterzuladen.
  • handleClose: Schließt das Sticker-Modal.
• UI-Komponenten:
  • Eingabefeld: Hier gibt der Benutzer seine wildesten Sticker-Träume ein.
  • Schaltfläche „Generieren“: Löst die Sticker-Generierung aus.
  • Modal: Zeigt den Aufkleber mit Optionen zum Herunterladen oder Schließen an.
  • Benachrichtigungen: Popup-Nachrichten, um den Benutzer darüber zu informieren, was gerade passiert.

Eine Prise Schriftart. Großartig?

Wir verwenden FontAwesome für Symbole. Stellen Sie sicher, dass Sie es installieren:

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Weitere Informationen finden Sie auch in der FontAwesome-Dokumentation. Oder suchen Sie nach anderen Symbolen. Suchen Sie nach Symbolen.

Umgang mit Benachrichtigungen?

Erinnern Sie sich an die Benachrichtigungskomponente, die wir importiert haben? Lass es uns schaffen.

Benachrichtigungskomponente erstellen?

Erstellen Sie einen neuen Ordner mit dem Namen utils in Ihrem app-Verzeichnis. Erstellen Sie in utils eine Datei mit dem Namen notify.tsx und fügen Sie Folgendes ein:

code .

Wozu dient das? ?

• Zweck: Dem Benutzer temporäre Nachrichten anzeigen, z. B. „Niedlicher Aufkleber wird erstellt …“ oder „Ein Fehler ist aufgetreten.“
• Auto-Close-Funktion: Es verschwindet nach 3 Sekunden, genau wie meine Motivation am Montagmorgen.
• Styling: Ändert die Farbe basierend auf der Art der Benachrichtigung.

Bilddomänen konfigurieren ?️

Da wir Bilder von den Servern von OpenAI abrufen, muss Next.js wissen, dass es in Ordnung ist, sie zu laden. Öffnen Sie next.config.ts und fügen Sie Folgendes hinzu:

import { NextResponse } from 'next/server';

const systemPrompt = `
You are tasked with enhancing user prompts to generate clear, detailed, and creative descriptions for a sticker creation AI. The final prompt should be imaginative, visually rich, and aligned with the goal of producing a cute, stylized, and highly personalized sticker based on the user's input.

Instructions:

Visual Clarity: The enhanced prompt must provide clear visual details that can be directly interpreted by the image generation model. Break down and elaborate on specific elements of the scene, object, or character based on the user input.

Example: If the user says "A girl with pink hair," elaborate by adding features like "short wavy pink hair with soft, pastel hues."
Style & Theme:

Emphasize that the final output should reflect a cute, playful, and approachable style.
Add terms like "adorable," "cartoonish," "sticker-friendly," or "chibi-like" to guide the output to a lighter, cuter aesthetic.
Include styling prompts like “minimalistic lines,” “soft shading,” and “vibrant yet soothing colors.”
Personalization:

If a reference or context is given, enhance it to make the sticker feel personalized.
Add context-appropriate descriptors like “wearing a cozy blue hoodie,” “soft pink blush on cheeks,” or “a playful expression.”
Expression & Pose:

Where applicable, refine prompts with suggestions about facial expressions or body language. For example, “Smiling softly with big sparkling eyes” or “A cute wink and a slight tilt of the head.”
Background & Accessories:

Optionally suggest simple, complementary backgrounds or accessories, depending on user input. For instance, "A light pastel background with small, floating hearts" or "Holding a tiny, sparkling star."
Colors:

Emphasize the color scheme based on the user's description, making sure it's consistent with a cute, playful style.
Use descriptors like “soft pastels,” “bright and cheerful,” or “warm and friendly hues” to set the mood.
Avoid Overcomplication:

Keep the descriptions short enough to be concise and not overly complex, as the output should retain a sticker-friendly quality.
Avoid unnecessary details that could clutter the design.
Tone and Language:

The tone should be light, imaginative, and fun, matching the playful nature of stickers.

Example:
User Input:
"A girl with pink hair wearing a hoodie."

Enhanced Prompt:
"An adorable girl with short, wavy pink hair in soft pastel hues, wearing a cozy light blue hoodie. She has a sweet smile with big, sparkling eyes, and a playful expression. The sticker style is cartoonish with minimalistic lines and soft shading. The background is a simple light pastel color with small floating hearts, creating a cute and inviting look."
`;

export async function POST(request: Request) {
    try {
        const { userPrompt } = await request.json();
        console.log("/api/enhancePrompt/route.ts userPrompt: ", userPrompt);

        // Make the API call to the external service
          const response = await fetch('https://api.aimlapi.com/chat/completions', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${process.env.NEXT_PUBLIC_AIML_API_KEY}`
            },
            body: JSON.stringify({
              model: 'gpt-4o-mini',
              messages: [
                {
                  role: 'system',
                  content: systemPrompt
                },
                {
                  role: 'user',
                  content: userPrompt
                }
              ]
            })
          });

        console.log("response: ", response);

        if (!response.ok) {
            // If the API response isn't successful, return an error response
            return NextResponse.json({ error: "Failed to fetch completion data" }, { status: response.status });
        }

        const data = await response.json();
        console.log("data: ", data);

        const assistantResponse = data.choices[0]?.message?.content || "No response available";

        // Return the assistant's message content
        return NextResponse.json({ message: assistantResponse });
    } catch (error) {
        console.error("Error fetching the data:", error);
        return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 });
    }
}

Warum das tun? ?‍♂️

Weil Next.js etwas überfürsorglich ist (wie ein Helikopter-Elternteil) und keine Bilder von externen Domänen lädt, es sei denn, Sie erlauben dies ausdrücklich. Diese Einstellung sagt Next.js: „Es ist cool, diese Bilder sind bei mir.“

Umgebungsvariablen?

Bevor Sie nun aufgeregt Ihre App ausführen und sich fragen, warum sie nicht funktioniert, richten wir unsere Umgebungsvariablen ein.

Einrichten Ihres AI/ML-API-Schlüssels ?️

Erstellen Sie eine Datei mit dem Namen .env.local im Stammverzeichnis Ihres Projekts und fügen Sie Folgendes hinzu:

mkdir aiml-tutorial
cd aiml-tutorial

Ersetzen Sie your_api_key_here durch Ihren tatsächlichen AI/ML-API-Schlüssel. Wenn Sie noch keins haben, müssen Sie sich möglicherweise bei AI/ML API anmelden und es sich holen. Der Einstieg ist absolut KOSTENLOS!

Hier ist eine kurze Anleitung, wie Sie Ihren API-Schlüssel erhalten: So erhalten Sie einen API-Schlüssel von der AI/ML-API. Kurze Schritt-für-Schritt-Anleitung mit Screenshots zum besseren Verständnis.

Warnung: Halten Sie diesen Schlüssel geheim! Teilen Sie es nicht öffentlich und übergeben Sie es nicht an Git. Behandeln Sie es wie Ihr Netflix-Passwort.

Feuern Sie es an! ?

Zeit, dieses Baby in Aktion zu sehen.

Ausführen des Entwicklungsservers ?‍♀️

Führen Sie in Ihrem Terminal Folgendes aus:

npx create-next-app@latest

Dadurch wird der Entwicklungsserver gestartet. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000.

Sie sollten Ihre AI Sticker Maker-Plattform sehen. ?

Ausprobieren?

• Geben Sie eine Eingabeaufforderung ein: So etwas wie „Ein Mädchen mit kurzen weißen grauen Haaren, das ein übergroßes Hemd trägt“. Gehen Sie wild!

• Klicken Sie auf die Schaltfläche: Klicken Sie auf die Schaltfläche „Generieren“ und beobachten Sie, wie sich die Magie entfaltet.
• Warten Sie darauf...: Sie werden Benachrichtigungen sehen, die Sie auf dem Laufenden halten.
• Voilà!: Ihr KI-generierter Aufkleber sollte erscheinen. Genießen Sie seinen Glanz.

Fehlerbehebung ?️

• „Abruf der Abschlussdaten fehlgeschlagen“: Überprüfen Sie Ihren API-Schlüssel noch einmal und stellen Sie sicher, dass er richtig eingestellt ist.
• Bilder werden nicht geladen: Stellen Sie sicher, dass Ihre next.config.ts-Datei wie oben gezeigt eingerichtet ist.
• App-Abstürze: Öffnen Sie Ihre Konsole und sehen Sie, welche Fehler auftreten. Google ist dein Freund!

Zusammenfassung?

Herzlichen Glückwunsch! Sie haben gerade einen AI Sticker Maker erstellt, der sowohl Spaß macht als auch funktional ist. Du bist nicht nur in die Welt der KI und Next.js eingetaucht, sondern hast auch etwas geschaffen, das den Menschen ein Lächeln ins Gesicht zaubern kann.

Was kommt als nächstes? ?

• Styling: Passen Sie das Erscheinungsbild an. Machen Sie es so fabelhaft oder minimalistisch, wie Sie möchten.
• Funktionen: Fügen Sie Benutzerkonten, Sticker-Galerien oder sogar eine Funktion zum Erstellen von Sticker-Paketen hinzu.
• Monetarisierung: Integrieren Sie Stripe und beginnen Sie mit der Gebühr für Premium-Aufkleber. Zeit, etwas Moolah zuzubereiten!

Letzte Gedanken?

Die Entwicklung dieser App war, als würde man ein Sandwich mit vielen Schichten technischer Güte zubereiten. Wir haben KI-Modelle als Füllung, Next.js als Brot und eine Prise Humor als geheime Soße.

Denken Sie daran, die Welt liegt Ihnen (oder Ihrem Aufkleber) zu Füßen. Experimentieren Sie weiter, bauen Sie weiter und vor allem: Haben Sie Spaß!

Viel Spaß beim Codieren! ?

Vollständige Implementierung verfügbar auf Github AI Sticker Maker.

Der Einstieg ist absolut KOSTENLOS! Probieren Sie es jetzt aus und klicken Sie auf

Schauen Sie sich auch dieses Tutorial an, es ist sehr interessant! Erstellen Sie eine Chrome-Erweiterung von Grund auf mit AI/ML-API, Deepgram Aura und IndexedDB-Integration

Sollten Sie Fragen haben oder weitere Hilfe benötigen, zögern Sie nicht, uns per E-Mail an abdibrokhim@gmail.com zu kontaktieren.

Das obige ist der detaillierte Inhalt vonAufbau einer AI Sticker Maker-Plattform mit AI/ML-API, Next.js, React und Tailwind CSS unter Verwendung von OpenAI GPT- und DALL·E-Modellen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!