OpenAI GPT 및 DALL·E 모델을 사용하여 AI/ML API, Next.js, React 및 Tailwind CSS로 AI 스티커 메이커 플랫폼을 구축합니다.

심심했어요. 당신도요? ?

흠... ?

AI 스티커 메이커 플랫폼을 만들어 보면 어떨까요? 솔직히 말해서 정말 흥미로운 아이디어입니다. 그리고 단순히 Stripe를 결제 제공업체로 통합함으로써 약간의 수익을 창출할 수도 있습니다. ? 응, 왜 안돼?

자, 시작해 보겠습니다. 아니면 적어도 시도해 보세요! ?

빠른 소개?

먼저 의사코드를 스케치하거나 계획을 세우세요(본인이 코딩하는 진정한 개발자가 아닌 이상). 다음과 같이 진행되어야 합니다.

1. 사용자가 프롬프트를 입력합니다(스티커 모양에 대한 텍스트 설명).
2. 저희 AI 스티커 메이커가 정말 귀여운 스티커를 만들어드립니다. 짜잔! ?

쉽죠? ?

하지만 잠시만 기다려 주세요. 우리는 OpenAI의 GPT-4o와 DALL·E 3 두 가지 모델을 사용할 것입니다. 정말 과장됐어요! ?

우리는 단일 API로 200개의 AI 모델에 대한 액세스를 제공하는 AI/ML API를 사용할 예정입니다. 간단히 말씀드리겠습니다.

AI/ML API를 만나보세요 ??

AI/ML API는 최첨단 AI 기능을 제품에 통합하려는 개발자와 SaaS 기업가를 위한 판도를 바꾸는 플랫폼입니다. NLP부터 컴퓨터 비전까지 모든 것을 포괄하는 200개 이상의 최첨단 AI 모델에 대한 단일 액세스 지점을 제공합니다.

개발자를 위한 주요 기능:

• 광범위한 모델 라이브러리: 신속한 프로토타이핑 및 배포를 위해 사전 훈련된 200개 모델. ?
• 사용자 정의 옵션: 특정 사용 사례에 맞게 모델을 미세 조정합니다. ?
• 개발자 친화적인 통합: 스택에 원활하게 통합하기 위한 RESTful API 및 SDK. ?️
• 서버리스 아키텍처: 인프라 관리가 아닌 코딩에 중점을 둡니다. ☁️

무료(미화 0달러)로 시작하세요: aimlapi.com ?

AI/ML API 문서 심층 분석(매우 자세하고 더 이상 동의할 수 없음): docs.aimlapi.com ?

테크 스택 재료?

TypeScript, Next.js, React 및 Tailwind CSS를 사용하여 AI 스티커 메이커를 구축하고 디자인하겠습니다. 플랫폼입니다.

• TypeScript는 단순한 프로그래밍 언어이지만 정말 훌륭한 언어입니다! ?
• Next.js는 웹용 React Framework입니다. 이를 통해 React 구성 요소의 강력한 기능으로 고품질 웹 애플리케이션을 만들 수 있습니다. ?
• React는 웹 및 기본 사용자 인터페이스용 라이브러리입니다. ?️
• Tailwind CSS는 스타일링에 가장 적합합니다. 원하는 것을 무엇이든 구축하세요. ?

지금까지 우리가 사용할 기능에 대한 간략한 개요였습니다. 여기에서 각각에 대해 자세히 알아보세요.

• TypeScript: typescriptlang.org ?
• Next.js: nextjs.org ⏭️
• 반응: React.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를 만들어 보겠습니다. 앱 폴더로 이동한 다음 api라는 새 폴더를 만들고 그 안에 EnhancedPrompt 및 generateSticker라는 두 개의 새 폴더를 만듭니다. 각각에 대해 Route.ts 파일을 만듭니다.

EnhancedPrompt 엔드포인트 ?‍♂️

이제 EnhancedPrompt 엔드포인트부터 시작해 보겠습니다. EnhancedPrompt 폴더 내에서 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 함수 정의: 누군가가 이 끝점에 도달하면 마법이 일어나는 곳입니다.
• 사용자 프롬프트 가져오기: 사용자가 제공한 프롬프트를 가져오는 중입니다.
• 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 함수 정의: 누군가가 이 끝점에 도달하면 마법이 일어나는 곳입니다.
• 사용자 프롬프트 가져오기: 사용자가 제공한 프롬프트를 가져오는 중입니다.
• AI/ML API API 호출: DALL·E 3을 사용하여 프롬프트에 따라 이미지 생성을 요청합니다.
• 응답 처리: 응답이 괜찮은지 확인하고 데이터를 파싱한 후 이미지 URL을 추출합니다.
• 오류 처리: 파티를 망치는 처리되지 않은 오류를 좋아하는 사람은 아무도 없기 때문입니다.

Panda가 실제로 작동하는 상황에서 위의 프롬프트를 시도해 보세요! ?

여기 귀여운 팬더 스티커가 있어요! ???

다른 예 ?

프롬프트:

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

그것을 무너뜨리는가?

• 로더: 우리는 정말 간단하지만 멋진 로더를 사용하고 있습니다. 멋진 애니메이션이 있는 세 개의 수평 점:

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 스티커 메이커 플랫폼이 보일 것입니다. ?

그것을 테스트 하시겠습니까?

• 프롬프트 입력: "오버사이즈 셔츠를 입은 짧은 흰색 회색 머리의 소녀"와 같은 것입니다. 마음껏 뛰어보세요!

• 버튼 클릭: 생성 버튼을 누르고 마법이 펼쳐지는 모습을 지켜보세요.
• 기다려 보세요...: 계속해서 소식을 알리는 알림이 표시됩니다.
• 짜잔!: AI가 생성한 스티커가 나타납니다. 그 영광을 만끽하세요.

문제 해결 ?️

• '완료 데이터를 가져오지 못했습니다': API 키를 다시 확인하고 올바르게 설정되었는지 확인하세요.
• 이미지가 로드되지 않음: next.config.ts 파일이 위와 같이 설정되어 있는지 확인하세요.
• 앱 충돌: 콘솔을 열고 어떤 오류가 나타나는지 확인하세요. Google은 당신의 친구입니다!

마무리?

축하합니다! 재미있고 기능적인 AI 스티커 메이커를 만들었습니다. AI와 Next.js의 세계를 탐구하셨을 뿐만 아니라, 사람들의 얼굴에 미소를 선사할 수 있는 무언가를 만드셨습니다.

다음은 무엇입니까? ?

• 스타일링: 모양과 느낌을 맞춤화하세요. 원하는 대로 멋지거나 미니멀하게 만들어보세요.
• 기능: 사용자 계정, 스티커 갤러리 또는 스티커 팩 생성 기능을 추가하세요.
• 수익화: Stripe을 통합하고 프리미엄 스티커 비용을 청구하세요. 돈을 벌 시간입니다!

최종 생각?

이 앱을 구축하는 것은 여러 기술이 결합된 샌드위치를 ​​만드는 것과 같았습니다. AI 모델이 채우기 역할을 하고, Next.js가 빵 역할을 하며, 약간의 유머가 비결입니다.

세상이 당신의 굴(또는 스티커)이라는 것을 기억하세요. 계속 실험하고, 계속해서 구축하고, 가장 중요하게는 즐거운 시간을 보내세요!

즐거운 코딩하세요! ?

Github AI 스티커 메이커에서 전체 구현이 가능합니다.

시작하는 것은 완전 무료입니다! 지금 사용해 보세요

이 튜토리얼도 확인해 보세요. 매우 흥미롭습니다! AI/ML API, Deepgram Aura 및 IndexedDB 통합을 사용하여 처음부터 Chrome 확장 프로그램 구축

질문이 있거나 추가 지원이 필요한 경우 주저하지 말고 이메일(abdibrokhim@gmail.com)로 문의하세요.

위 내용은 OpenAI GPT 및 DALL·E 모델을 사용하여 AI/ML API, Next.js, React 및 Tailwind CSS로 AI 스티커 메이커 플랫폼을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!