Saya bosan. Anda juga? ?
Hmm... ?
Bagaimana pula dengan mencipta platform AI Sticker Maker? Sejujurnya, ia adalah idea yang sangat menarik. Dan hei, kami mungkin menjana sedikit keuntungan dengan hanya menyepadukan Stripe sebagai penyedia pembayaran. ? Ya, kenapa tidak?
Jadi, mari kita mulakan. Atau sekurang-kurangnya cuba! ?
Perkara pertama dahulu, mari kita lakarkan beberapa pseudokod atau buat rancangan (melainkan anda seorang pembina sejati yang membuat kod dari pinggul). Ia sepatutnya seperti ini:
Mudah-mudah, bukan? ?
Tetapi tunggu, biar saya jelaskan. Kami akan menggunakan dua model: GPT-4o dan DALL·E 3, kedua-duanya daripada OpenAI. Mereka digembar-gemburkan, sebenarnya! ?
Kami akan menggunakan AI/ML API, yang menyediakan akses kepada 200 model AI dengan satu API. Biar saya ceritakan secara ringkas mengenainya.
AI/ML API ialah platform mengubah permainan untuk pembangun dan usahawan SaaS yang ingin menyepadukan keupayaan AI termaju ke dalam produk mereka. Ia menawarkan satu titik akses kepada lebih 200 model AI tercanggih, merangkumi segala-galanya daripada NLP hingga penglihatan komputer.
Ciri Utama untuk Pembangun:
Mulakan dengan PERCUMA ($0 dolar AS): aimlapi.com ?
Selam Lebih Dalam ke dalam Dokumentasi API AI/ML (sangat terperinci, tidak boleh bersetuju lagi): docs.aimlapi.com ?
Kami akan menggunakan TypeScript, Next.js, React dan Tailwind CSS untuk membina dan mereka bentuk AI Sticker Maker kami platform.
Itu hanya gambaran ringkas tentang perkara yang akan kami gunakan. Jangan ragu untuk mengetahui lebih lanjut tentang setiap daripada mereka di sini:
Jom kotorkan tangan kita! Pertama, buat folder. Buka terminal anda dan masukkan ini:
mkdir aiml-tutorial cd aiml-tutorial
Sekarang, mari buat apl Next.js baharu:
npx create-next-app@latest
Ia akan menanyakan beberapa soalan kepada anda:
✔ Apakah nama projek anda? Di sini, anda harus memasukkan nama apl anda. Contohnya: aistickermaker. Untuk soalan lain, hanya tekan enter.
Ini perkara yang anda akan lihat:
✔ 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
Petua Pro: Jangan ragu untuk memilih Ya atau Tidak berdasarkan pilihan anda. Saya tidak akan menilai! ?
Jom buka projek dengan VSCode:
code .
Kini, Kod Visual Studio sepatutnya dilancarkan terus dengan apl ini. Masa untuk memulakan pengekodan! ?
Perkara pertama dahulu, mari buat API untuk meningkatkan gesaan pengguna dan menjana pelekat. Pergi ke folder aplikasi, kemudian buat folder baharu yang dipanggil api, dan di dalamnya, buat dua folder baharu: enhancePrompt dan generateSticker. Untuk setiap satu, cipta fail route.ts.
Sekarang, mari kita mulakan dengan titik akhir enhancePrompt. Buka route.ts di dalam folder enhancePrompt dan masukkan kod berikut:
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 });
}
}
Berikut ialah gesaan yang dipisahkan:
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."
Anda baru sahaja memasukkan gesaan:
A cute panda eating ice cream under a rainbow
AI akan meningkatkannya untuk menjadikannya lebih terperinci dan kaya secara visual. Akibatnya, anda harus memberikan respons seperti:
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.
Baiklah, mari selami semula ke dalam kawah kod dan teruskan memasak AI Sticker Maker kami! ?
Jadi, kami mempunyai enhancePrompt titik akhir kami yang mereneh dengan baik. Masa untuk menyerikan dengan titik akhir generateSticker. Pergi ke folder api/generateSticker dan buka route.ts. Gantikan apa sahaja yang ada di sana (mungkin tiada apa-apa) dengan kod baharu ini:
mkdir aiml-tutorial cd aiml-tutorial
Mari cuba gesaan di atas dengan panda beraksi! ?
Contoh lain ?
Gesaan:
npx create-next-app@latest
Gesaan:
✔ 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
Nampaknya, sangat WOW! ?
Kami memerlukan bahagian hadapan, GUYS! ?
Masa untuk meletakkan wajah pada apl kami! Mari buat antara muka pengguna yang membolehkan pengguna memasukkan gesaan mereka dan mendapatkan pelekat baharu yang berkilat.
Navigasi ke app/page.tsx dan kemas kini dengan kod berikut:
mkdir aiml-tutorial cd aiml-tutorial
npx create-next-app@latest
Kami menggunakan FontAwesome untuk ikon. Pastikan anda memasangnya:
✔ 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
Anda juga boleh menyemak dokumentasi FontAwesome untuk mendapatkan butiran lanjut. Atau cari ikon lain Cari ikon.
Ingat komponen pemberitahuan yang kami import? Mari kita ciptanya.
Buat folder baharu yang dipanggil utils di dalam direktori apl anda. Di dalam utils, buat fail bernama notify.tsx dan tampal:
code .
Memandangkan kami sedang mengambil imej daripada pelayan OpenAI, Next.js perlu tahu tidak mengapa untuk memuatkannya. Buka next.config.ts dan tambah:
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 });
}
}
Kerana Next.js agak terlalu melindungi (seperti ibu bapa helikopter) dan tidak akan memuatkan imej daripada domain luaran melainkan anda membenarkannya secara khusus. Tetapan ini memberitahu Next.js, "Memang bagus, imej ini ada bersama saya."
Sekarang, sebelum anda menjalankan apl anda dengan teruja dan tertanya-tanya mengapa ia tidak berfungsi, mari sediakan pembolehubah persekitaran kami.
Buat fail bernama .env.local dalam akar projek anda dan tambah:
mkdir aiml-tutorial cd aiml-tutorial
Ganti kunci_api_anda_di sini dengan kunci API AI/ML sebenar anda. Jika anda tidak mempunyainya, anda mungkin perlu mendaftar di AI/ML API dan mengambilnya. Ia sememangnya PERCUMA untuk bermula!
Berikut ialah Tutorial Pantas tentang cara mendapatkan kunci API anda: Cara mendapatkan Kunci API daripada API AI/ML. Tutorial langkah demi langkah pantas dengan tangkapan skrin untuk pemahaman yang lebih baik.
Amaran: Simpan rahsia utama ini! Jangan kongsikannya secara terbuka atau serahkan kepada Git. Anggap ia seperti kata laluan Netflix anda.
Masa untuk melihat bayi ini beraksi.
Dalam terminal anda, jalankan:
npx create-next-app@latest
Ini memulakan pelayan pembangunan. Buka penyemak imbas anda dan navigasi ke http://localhost:3000.
Anda sepatutnya melihat platform AI Sticker Maker anda. ?
Tahniah! Anda baru sahaja membina AI Sticker Maker yang menyeronokkan dan berfungsi. Anda bukan sahaja mendalami dunia AI dan Next.js, tetapi anda juga membuat sesuatu yang boleh membawa senyuman kepada orang ramai.
Membina apl ini seperti membuat sandwic dengan lapisan kebaikan teknologi. Kami mempunyai model AI sebagai pengisian, Next.js sebagai roti dan taburan jenaka sebagai sos rahsia.
Ingat, dunia ialah tiram (atau pelekat) anda. Teruskan mencuba, teruskan membina dan yang paling penting, berseronoklah!
Selamat pengekodan! ?
Pelaksanaan penuh tersedia pada Github AI Sticker Maker.
Ianya PERCUMA untuk bermula! Cuba Sekarang klik
Lihat juga tutorial ini, ia sangat menarik! Membina Sambungan Chrome daripada Scratch dengan API AI/ML, Deepgram Aura dan Integrasi IndexedDB
Sekiranya anda mempunyai sebarang pertanyaan atau memerlukan bantuan lanjut, jangan teragak-agak untuk menghubungi melalui e-mel di abdibrokhim@gmail.com.
Atas ialah kandungan terperinci Membina Platform Pembuat Pelekat AI dengan API AI/ML, Next.js, React dan CSS Tailwind menggunakan odel OpenAI GPT-dan DALL·E.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kaedah tetapan ruang HTML
IIS penyelesaian ralat tidak dijangka 0x8ffe2740
Kaedah pelaksanaan fungsi benteng js
Senarai lengkap arahan operasi dan penyelenggaraan pelayan linux
Penggunaan fungsi rawak bahasa C
Apakah kata laluan perkhidmatan mudah alih?
Bagaimana untuk mengunci skrin pada oppo11
Bagaimana untuk melaraskan kecerahan skrin komputer
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
