심심했어요. 당신도요? ?
흠... ?
AI 스티커 메이커 플랫폼을 만들어 보면 어떨까요? 솔직히 말해서 정말 흥미로운 아이디어입니다. 그리고 단순히 Stripe를 결제 제공업체로 통합함으로써 약간의 수익을 창출할 수도 있습니다. ? 응, 왜 안돼?
자, 시작해 보겠습니다. 아니면 적어도 시도해 보세요! ?
먼저 의사코드를 스케치하거나 계획을 세우세요(본인이 코딩하는 진정한 개발자가 아닌 이상). 다음과 같이 진행되어야 합니다.
쉽죠? ?
하지만 잠시만 기다려 주세요. 우리는 OpenAI의 GPT-4o와 DALL·E 3 두 가지 모델을 사용할 것입니다. 정말 과장됐어요! ?
우리는 단일 API로 200개의 AI 모델에 대한 액세스를 제공하는 AI/ML API를 사용할 예정입니다. 간단히 말씀드리겠습니다.
AI/ML API는 최첨단 AI 기능을 제품에 통합하려는 개발자와 SaaS 기업가를 위한 판도를 바꾸는 플랫폼입니다. NLP부터 컴퓨터 비전까지 모든 것을 포괄하는 200개 이상의 최첨단 AI 모델에 대한 단일 액세스 지점을 제공합니다.
개발자를 위한 주요 기능:
무료(미화 0달러)로 시작하세요: aimlapi.com ?
AI/ML API 문서 심층 분석(매우 자세하고 더 이상 동의할 수 없음): docs.aimlapi.com ?
TypeScript, Next.js, React 및 Tailwind CSS를 사용하여 AI 스티커 메이커를 구축하고 디자인하겠습니다. 플랫폼입니다.
지금까지 우리가 사용할 기능에 대한 간략한 개요였습니다. 여기에서 각각에 대해 자세히 알아보세요.
손을 더럽히자! 먼저 폴더를 만듭니다. 터미널을 열고 다음을 입력하세요:
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라는 새 폴더를 만들고 그 안에 EnhancedPrompt 및 generateSticker라는 두 개의 새 폴더를 만듭니다. 각각에 대해 Route.ts 파일을 만듭니다.
이제 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."
방금 프롬프트를 입력하셨습니다:
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
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
정말 와우인 것 같아요! ?
프론트엔드가 필요해요 여러분! ?
우리 앱에 얼굴을 넣을 시간입니다! 사용자가 메시지를 입력하고 반짝이는 새 스티커를 받을 수 있는 사용자 인터페이스를 만들어 보겠습니다.
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 .
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에 "멋지네요. 이 이미지가 나와 함께 있습니다."라고 알려줍니다.
이제 앱을 신나게 실행하고 왜 작동하지 않는지 궁금해하기 전에 환경 변수를 설정해 보겠습니다.
프로젝트 루트에 .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 스티커 메이커를 만들었습니다. AI와 Next.js의 세계를 탐구하셨을 뿐만 아니라, 사람들의 얼굴에 미소를 선사할 수 있는 무언가를 만드셨습니다.
이 앱을 구축하는 것은 여러 기술이 결합된 샌드위치를 만드는 것과 같았습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
