OpenAI GPT および DALL·E モデルを使用して、AI/ML API、Next.js、React、Tailwind CSS を使用して AI ステッカー メーカー プラットフォームを構築します。

もう飽きました。あなたも? ?

うーん...?

AI Sticker Maker プラットフォームを作成してみてはどうでしょうか?正直に言って、それは非常に興味深いアイデアです。そして、Stripe を決済プロバイダーとして統合するだけで、ある程度の利益を生み出す可能性もあります。 ?そうだね、どうして?

それでは、始めましょう。または、少なくとも試してみてください! ?

簡単な紹介 ?

まず最初に、疑似コードをスケッチするか計画を立てましょう (本格的にコーディングする真のビルダーでない限り)。次のようになります:

1. ユーザーはプロンプト (ステッカーがどのように見えるかについてのテキスト説明) を入力します。
2. 私たちの AI ステッカー メーカー は、とてもかわいいステッカーを生成します。タダ！ ?

簡単、簡単ですね。 ?

でも、ちょっと待って、はっきりさせてください。 GPT-4o と DALL·E 3 の 2 つのモデルを使用します。どちらも OpenAI のものです。本当に、彼らは誇大宣伝されています！ ?

AI/ML API を使用します。これは、単一の API で 200 の AI モデルへのアクセスを提供します。それについて簡単に説明しましょう。

AI/ML API との出会い ??

AI/ML API は、最先端の AI 機能を製品に統合したいと考えている開発者や SaaS 起業家のための、革新的なプラットフォームです。 200 を超える最先端の AI モデルへの単一アクセス ポイントを提供し、NLP からコンピューター ビジョンまであらゆるものをカバーします。

開発者向けの主な機能:

• 広範なモデル ライブラリ: 迅速なプロトタイピングと展開のための 200 の事前トレーニング済みモデル。 ?
• カスタマイズ オプション: 特定のユースケースに合わせてモデルを微調整します。 ?
• 開発者に優しい統合: スタックにシームレスに組み込むための RESTful API と SDK。 ?️
• サーバーレス アーキテクチャ: インフラストラクチャ管理ではなく、コーディングに重点を置きます。 ☁️

無料で始めましょう ($0 米ドル): aimlapi.com ?

AI/ML API ドキュメントの詳細 (非常に詳細で、これ以上同意することはできません): docs.aimlapi.com ?

テクノロジースタックの成分?

AI ステッカー メーカーの構築とデザインには、TypeScript、Next.js、React、および Tailwind CSS を使用します。プラットフォーム。

• TypeScript は単なるプログラミング言語ですが、本当に素晴らしい言語です。 ?
• Next.js は、Web 用の React フレームワークです。これにより、React コンポーネントの力を利用して高品質の Web アプリケーションを作成できるようになります。 ?
• React は、Web およびネイティブ ユーザー インターフェイス用のライブラリです。 ?️
• Tailwind CSS はスタイル設定に最適です。真剣に、必要なものを何でも作成してください。 ?

これは、これから使用するものの概要を簡単に説明したものです。それぞれについて詳しくは、こちらをご覧ください:

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

料理が始まりました?

実際に手を動かしてみましょう!まず、フォルダーを作成します。ターミナルを開いて次のように入力します:

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 の実装 ?️

まず最初に、ユーザー プロンプトを強化し、ステッカーを生成するための 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."

ここで何が起こっているのでしょうか？ ?

• NextResponse のインポート: HTTP 応答をスムーズに処理するため。
• POST 関数の定義: ここで、誰かがこのエンドポイントに到達したときに魔法が起こります。
• userPrompt の取得: ユーザーが指定したプロンプトを取得します。
• AI/ML API の API の呼び出し: GPT-4o を使用してユーザーのプロンプトを強化するリクエストを行っています。
• 応答の処理: 応答が正しいかどうかを確認し、データを解析し、アシスタントの応答を抽出します。
• エラー処理: 処理されないエラーでパーティーが台無しになることを好む人はいないからです。

AI がユーザーのプロンプトを強化する実際の例を次に示します。 ???

プロンプトを入力しました:

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 ステッカー メーカーの作成を続けましょう! ?

generateSticker エンドポイント ?️

これで、enhancePrompt エンドポイントがうまくいきました。 generateSticker エンドポイントで話を盛り上げましょう。 api/generateSticker フォルダーに移動し、route.ts を開きます。そこにあるもの (おそらく何も) を次の新しいコードに置き換えます:

mkdir aiml-tutorial
cd aiml-tutorial

ここで何が起こっているのでしょうか？ ?

• NextResponse のインポート: HTTP 応答をスムーズに処理するため。
• POST 関数の定義: ここで、誰かがこのエンドポイントに到達したときに魔法が起こります。
• userPrompt の取得: ユーザーが指定したプロンプトを取得します。
• AI/ML API の API の呼び出し: DALL・E 3 を使用して、プロンプトに基づいて画像を生成するリクエストを行っています。
• 応答の処理: 応答が正しいかどうかを確認し、データを解析し、画像 URL を抽出します。
• エラー処理: 処理されないエラーでパーティーが台無しになることを好む人はいないからです。

パンダを動作させて上記のプロンプトを試してみましょう! ?

かわいいパンダのステッカーはこちらです！ ???

他の例?

プロンプト:

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

本当にすごいですね! ?

フロントエンドが必要です、皆さん！ ?

フロントエンドを構築しますか?

アプリに顔を載せる時が来ました!ユーザーがプロンプトを入力して、ピカピカの新しいステッカーを取得できるユーザー インターフェイスを作成しましょう。

page.tsx ファイル?

app/page.tsx に移動し、次のコードで更新します:

mkdir aiml-tutorial
cd aiml-tutorial

ブレイク・イット・ダウン？

• ローダー: 非常にシンプルですが優れたローダーを使用しています。素敵なアニメーションが付いた 3 つの水平ドット:

npx create-next-app@latest

• 状態管理: useState を使用して、通知、読み込み状態、ユーザーのプロンプト、ステッカー URL を処理します。
• 機能:
  • enhanceUserPrompt: /api/enhancePrompt エンドポイントを呼び出して、ユーザーのプロンプトをさらに表示します...つまり、プロンプト。
  • generateCuteSticker: /api/generateSticker エンドポイントをヒットして、その愛らしいステッカーを取得します。
  • generateSticker: ユーザーがマジック ボタンをクリックしたときにプロセス全体を調整します。
  • handleDownload: ユーザーが新しいステッカーをダウンロードできるようにします。
  • handleClose: ステッカーのモーダルを閉じます。
• UI コンポーネント:
  • 入力フィールド: ユーザーがステッカーの夢を入力する場所です。
  • 生成ボタン: ステッカーの生成をトリガーします。
  • モーダル: ダウンロードまたは閉じるオプションを含むステッカーを表示します。
  • 通知: 何が起こっているかをユーザーに通知するメッセージをポップアップします。

FontAwesome をひと振り?

アイコンには 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 .

これは何のためにあるのですか？ ?

• 目的: 「かわいいステッカーを生成中...」や「エラーが発生しました」などの一時的なメッセージをユーザーに表示します。
• 自動終了機能: 月曜日の朝のモチベーションと同じように、3 秒後に消えます。
• スタイル: 通知の種類に基づいて色を変更します。

画像ドメインを構成する ?️

OpenAI のサーバーから画像を取得しているため、Next.js はそれらを読み込んでも問題がないことを認識する必要があります。

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 });
    }
}

なぜこれを行うのか? ?‍♂️

Next.js は少し過保護で (ヘリコプターペアレントのように)、特に許可しない限り、外部ドメインから画像を読み込まないからです。この設定は Next.js に「素晴らしいですね、これらの画像は私と一緒です。」

と伝えます。

環境変数 ?

アプリを実行してなぜ機能しないのか疑問に思う前に、環境変数を設定しましょう。

AI/ML API キーをセットアップする ?️

プロジェクトのルートに .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 が生成したステッカーが表示されます。その栄光を満喫してください。

トラブルシューティング?️

• 「完了データの取得に失敗しました」: API キーを再確認し、正しく設定されていることを確認してください。
• 画像が読み込まれていません: next.config.ts ファイルが上記のように設定されていることを確認してください。
• アプリのクラッシュ: コンソールを開いて、どのようなエラーが表示されるかを確認します。 Google はあなたの友達です!

まとめ?

おめでとうございます!楽しくて機能的な AI ステッカー メーカーが完成しました。あなたは AI と Next.js の世界を掘り下げるだけでなく、人々の顔に笑顔をもたらすことができるものを作りました。

次は何ですか？ ?

• スタイリング: 見た目と雰囲気をカスタマイズします。素敵にもミニマリストにもお好みで作ってください。
• 機能: ユーザー アカウント、ステッカー ギャラリー、さらにはステッカー パックを作成する機能を追加します。
• 収益化: Stripe を統合し、プレミアム ステッカーの課金を開始します。ムーラを作る時間です!

最終的な考え?

このアプリの構築は、テクノロジーの利点を何層にも重ねてサンドイッチを作るようなものでした。 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 サイトの他の関連記事を参照してください。