もう飽きました。あなたも? ?
うーん...?
AI Sticker Maker プラットフォームを作成してみてはどうでしょうか?正直に言って、それは非常に興味深いアイデアです。そして、Stripe を決済プロバイダーとして統合するだけで、ある程度の利益を生み出す可能性もあります。 ?そうだね、どうして?
それでは、始めましょう。または、少なくとも試してみてください! ?
まず最初に、疑似コードをスケッチするか計画を立てましょう (本格的にコーディングする真のビルダーでない限り)。次のようになります:
簡単、簡単ですね。 ?
でも、ちょっと待って、はっきりさせてください。 GPT-4o と DALL·E 3 の 2 つのモデルを使用します。どちらも OpenAI のものです。本当に、彼らは誇大宣伝されています！ ?
AI/ML API を使用します。これは、単一の API で 200 の AI モデルへのアクセスを提供します。それについて簡単に説明しましょう。
AI/ML API は、最先端の AI 機能を製品に統合したいと考えている開発者や SaaS 起業家のための、革新的なプラットフォームです。 200 を超える最先端の AI モデルへの単一アクセス ポイントを提供し、NLP からコンピューター ビジョンまであらゆるものをカバーします。
開発者向けの主な機能:
無料で始めましょう ($0 米ドル): aimlapi.com ?
AI/ML API ドキュメントの詳細 (非常に詳細で、これ以上同意することはできません): docs.aimlapi.com ?
AI ステッカー メーカーの構築とデザインには、TypeScript、Next.js、React、および Tailwind CSS を使用します。プラットフォーム。
これは、これから使用するものの概要を簡単に説明したものです。それぞれについて詳しくは、こちらをご覧ください:
実際に手を動かしてみましょう!まず、フォルダーを作成します。ターミナルを開いて次のように入力します:
mkdir aiml-tutorial cd aiml-tutorial
それでは、新しい Next.js アプリを作成しましょう:
npx create-next-app@latest
いくつかの質問が表示されます:
✔ プロジェクトの名前は何ですか? ここでは、アプリ名を入力する必要があります。例: aistickermaker。残りの質問については、Enter キーを押してください。
ここに表示される内容は次のとおりです:
✔ 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
プロのヒント: 好みに応じて [はい] または [いいえ] を自由に選択してください。私は判断しません！ ?
VSCode でプロジェクトを開いてみましょう:
code .
これで、Visual Studio Code がこのアプリで直接起動するはずです。コーディングを始めましょう! ?
まず最初に、ユーザー プロンプトを強化し、ステッカーを生成するための API を作成しましょう。 app フォルダーに移動し、api という名前の新しいフォルダーを作成し、その中に、enhancedPrompt とgenerateSticker という 2 つの新しいフォルダーを作成します。それぞれに対して、route.ts ファイルを作成します。
それでは、enhancedPrompt エンドポイントから始めましょう。 EnhancePrompt フォルダー内の Route.ts を開き、次のコードを入力します:
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 });
}
}
これが分離されたプロンプトです:
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."
プロンプトを入力しました:
A cute panda eating ice cream under a rainbow
AI がそれを強化して、より詳細で視覚的に豊かになります。その結果、次のような応答が返されるはずです:
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.
それでは、コードの大釜に戻って AI ステッカー メーカーの作成を続けましょう! ?
これで、enhancePrompt エンドポイントがうまくいきました。 generateSticker エンドポイントで話を盛り上げましょう。 api/generateSticker フォルダーに移動し、route.ts を開きます。そこにあるもの (おそらく何も) を次の新しいコードに置き換えます:
mkdir aiml-tutorial cd aiml-tutorial
パンダを動作させて上記のプロンプトを試してみましょう! ?
他の例?
プロンプト:
npx create-next-app@latest
プロンプト:
✔ 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
本当にすごいですね! ?
フロントエンドが必要です、皆さん！ ?
アプリに顔を載せる時が来ました!ユーザーがプロンプトを入力して、ピカピカの新しいステッカーを取得できるユーザー インターフェイスを作成しましょう。
app/page.tsx に移動し、次のコードで更新します:
mkdir aiml-tutorial cd aiml-tutorial
npx create-next-app@latest
アイコンには FontAwesome を使用しています。必ずインストールしてください:
✔ 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
詳細については、FontAwesome のドキュメントを確認することもできます。または、他のアイコンを検索します アイコンを検索します。
インポートした通知コンポーネントを覚えていますか?作ってみましょう。
app ディレクトリ内に utils という新しいフォルダーを作成します。 utils 内に、notify.tsx というファイルを作成し、次のように貼り付けます。
code .
next.config.ts を開き、以下を追加します:
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 });
}
}
と伝えます。
アプリを実行してなぜ機能しないのか疑問に思う前に、環境変数を設定しましょう。
プロジェクトのルートに .env.local というファイルを作成し、以下を追加します。
mkdir aiml-tutorial cd aiml-tutorial
your_api_key_here を実際の AI/ML API キーに置き換えます。お持ちでない場合は、AI/ML API にサインアップして取得する必要がある場合があります。始めるのは完全に無料です!
API キーを取得する方法に関するクイック チュートリアルは次のとおりです: AI/ML API から API キーを取得する方法。理解を深めるためのスクリーンショット付きの簡単なステップバイステップのチュートリアル。
警告: この鍵は秘密にしてください。公開して共有したり、Git にコミットしたりしないでください。 Netflix のパスワードのように扱ってください。
この赤ちゃんが実際に動いているところを見てみましょう。
ターミナルで次を実行します:
npx create-next-app@latest
これにより、開発サーバーが起動します。ブラウザを開いて、http://localhost:3000 に移動します。
AI Sticker Maker プラットフォームが表示されるはずです。 ?
おめでとうございます!楽しくて機能的な AI ステッカー メーカーが完成しました。あなたは AI と Next.js の世界を掘り下げるだけでなく、人々の顔に笑顔をもたらすことができるものを作りました。
このアプリの構築は、テクノロジーの利点を何層にも重ねてサンドイッチを作るようなものでした。 AI モデルを詰め物として、Next.js をパンとして、そしてユーモアを秘密のソースとして散りばめています。
覚えておいてください、世界はあなたのカキ（またはステッカー）です。実験を続け、構築を続け、そして最も重要なのは楽しんでください!
コーディングを楽しんでください! ?
完全な実装は Github AI Sticker Maker で利用できます。
始めるのは完全に無料です!今すぐ試してみる
をクリックしてくださいこのチュートリアルもチェックしてください。とても興味深いです。 AI/ML API、Deepgram Aura、IndexedDB 統合を使用して Chrome 拡張機能をゼロから構築する
ご質問がある場合、またはさらにサポートが必要な場合は、お気軽に abdibrokhim@gmail.com まで電子メールでお問い合わせください。
以上がOpenAI GPT および DALL·E モデルを使用して、AI/ML API、Next.js、React、Tailwind CSS を使用して AI ステッカー メーカー プラットフォームを構築します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
