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! ?
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:
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.
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:
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 ?
Wir verwenden TypeScript, Next.js, React und Tailwind CSS, um unseren AI Sticker Maker zu erstellen und zu entwerfen Plattform.
Das war nur ein kurzer Überblick darüber, was wir verwenden werden. Erfahren Sie hier mehr über jeden von ihnen:
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! ?
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.
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."
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! ?
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
Versuchen wir es mit Panda in Aktion! ?
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! ?
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.
Navigieren Sie zu app/page.tsx und aktualisieren Sie es mit dem folgenden Code:
mkdir aiml-tutorial cd aiml-tutorial
npx create-next-app@latest
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.
Erinnern Sie sich an die Benachrichtigungskomponente, die wir importiert haben? Lass es uns schaffen.
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 .
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 });
}
}
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.“
Bevor Sie nun aufgeregt Ihre App ausführen und sich fragen, warum sie nicht funktioniert, richten wir unsere Umgebungsvariablen ein.
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.
Zeit, dieses Baby in Aktion zu sehen.
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. ?
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.
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!
So ändern Sie C-Sprachsoftware auf Chinesisch
Was ist eine URL?
So legen Sie den CAD-Punktstil fest
Was sind die Gründe, warum ein Mobiltelefon eine leere Nummer hat?
Was tun, wenn die CHM-Datei nicht geöffnet werden kann?
Tutorial zum Festlegen des Startkennworts für Windows 10
Was bedeutet Root-Server?
Win11 „Mein Computer' zum Desktop-Tutorial hinzugefügt
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
