Membina Platform Pembuat Pelekat AI dengan API AI/ML, Next.js, React dan CSS Tailwind menggunakan odel OpenAI GPT-dan DALL·E.

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! ?

Pengenalan Pantas?

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:

1. Pengguna memasukkan gesaan (penerangan teks tentang rupa pelekat itu).
2. Pembuat Pelekat AI kami akan menghasilkan pelekat yang sangat comel. Ta-da! ?

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.

Temui AI/ML API ??

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:

• Perpustakaan Model Luas: 200 model pra-latihan untuk prototaip dan penggunaan pantas. ?
• Pilihan Penyesuaian: Perhalusi model agar sesuai dengan kes penggunaan khusus anda. ?
• Integrasi Mesra Pembangun: API dan SDK RESTful untuk penyepaduan yang lancar ke dalam tindanan anda. ?️
• Seni Bina Tanpa Pelayan: Fokus pada pengekodan, bukan pengurusan infrastruktur. ☁️

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 ?

Bahan Timbunan Teknologi ?

Kami akan menggunakan TypeScript, Next.js, React dan Tailwind CSS untuk membina dan mereka bentuk AI Sticker Maker kami platform.

• TypeScript hanyalah bahasa pengaturcaraan—tetapi bahasa yang sangat hebat! ?
• Next.js ialah Rangka Kerja React untuk web. Ia membolehkan kami mencipta aplikasi web berkualiti tinggi dengan kuasa komponen React. ?
• React ialah perpustakaan untuk antara muka pengguna web dan asli. ?️
• Tailwind CSS ialah yang terbaik untuk penggayaan—hanya bina apa sahaja yang anda mahu, dengan serius. ?

Itu hanya gambaran ringkas tentang perkara yang akan kami gunakan. Jangan ragu untuk mengetahui lebih lanjut tentang setiap daripada mereka di sini:

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

Memasak Telah Bermula?

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! ?

Melaksanakan API ?️

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.

Titik Akhir enhancePrompt ?‍♂️

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."

Apa yang Berlaku Di Sini? ?

• Mengimport NextResponse: Untuk mengendalikan respons HTTP kami dengan lancar.
• Mentakrifkan fungsi POST: Di sinilah keajaiban berlaku apabila seseorang mencapai titik akhir ini.
• Mengambil userPrompt: Kami menerima gesaan yang diberikan pengguna.
• Memanggil API AI/ML API: Kami membuat permintaan untuk meningkatkan gesaan pengguna menggunakan GPT-4o.
• Mengendalikan Respons: Kami menyemak sama ada respons itu okey, menghuraikan data dan mengekstrak respons pembantu.
• Pengendalian Ralat: Kerana tiada siapa yang suka kesilapan yang tidak dikendalikan merosakkan parti.

Berikut ialah contoh sebenar bagaimana AI meningkatkan gesaan pengguna. ???

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! ?

generateSticker Endpoint ?️

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

Apa yang Berlaku Di Sini? ?

• Mengimport NextResponse: Untuk mengendalikan respons HTTP kami dengan lancar.
• Mentakrifkan fungsi POST: Di sinilah keajaiban berlaku apabila seseorang mencapai titik akhir ini.
• Mengambil userPrompt: Kami menerima gesaan yang diberikan pengguna.
• Memanggil API AI/ML API: Kami membuat permintaan untuk menjana imej berdasarkan gesaan menggunakan DALL·E 3.
• Mengendalikan Respons: Kami menyemak sama ada respons itu okey, menghuraikan data dan mengekstrak URL imej.
• Pengendalian Ralat: Kerana tiada siapa yang suka kesilapan yang tidak dikendalikan merosakkan parti.

Mari cuba gesaan di atas dengan panda beraksi! ?

Inilah pelekat panda comel kami! ???

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! ?

Membina Frontend ?

Masa untuk meletakkan wajah pada apl kami! Mari buat antara muka pengguna yang membolehkan pengguna memasukkan gesaan mereka dan mendapatkan pelekat baharu yang berkilat.

Fail page.tsx ?

Navigasi ke app/page.tsx dan kemas kini dengan kod berikut:

mkdir aiml-tutorial
cd aiml-tutorial

Memecahkannya?

• Pemuat: Kami menggunakan pemuat yang sangat mudah, tetapi bagus; tiga titik mendatar dengan beberapa animasi yang bagus:

npx create-next-app@latest

• Pengurusan Negeri: Menggunakan useState untuk mengendalikan pemberitahuan, keadaan pemuatan, gesaan pengguna dan URL pelekat.
• Fungsi:
  • enhanceUserPrompt: Panggil /api/enhancePrompt titik akhir kami untuk membuat gesaan pengguna lebih... baik, mengesan.
  • generateCuteSticker: Tekan titik akhir /api/generateSticker untuk mendapatkan pelekat comel itu.
  • generateSticker: Mengatur keseluruhan proses apabila pengguna mengklik butang ajaib.
  • handleMuat turun: Membenarkan pengguna memuat turun pelekat baharu mereka.
  • kendali Tutup: Menutup modal pelekat.
• Komponen UI:
  • Medan Input: Tempat pengguna menaip impian pelekat paling liar mereka.
  • Butang Jana: Mencetuskan penjanaan pelekat.
  • Modal: Memaparkan pelekat dengan pilihan untuk memuat turun atau menutup.
  • Pemberitahuan: Menimbulkan mesej untuk memaklumkan pengguna apa yang sedang berlaku.

Taburan FontAwesome ?

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.

Mengendalikan Pemberitahuan ?

Ingat komponen pemberitahuan yang kami import? Mari kita ciptanya.

Mencipta Komponen Pemberitahuan ?

Buat folder baharu yang dipanggil utils di dalam direktori apl anda. Di dalam utils, buat fail bernama notify.tsx dan tampal:

code .

Untuk Apa Ini? ?

• Tujuan: Untuk memaparkan mesej sementara kepada pengguna, seperti "Menjana pelekat comel..." atau "Ralat berlaku."
• Ciri Auto-Tutup: Ia hilang selepas 3 saat, sama seperti motivasi saya pada pagi Isnin.
• Penggayaan: Menukar warna berdasarkan jenis pemberitahuan.

Mengkonfigurasi Domain Imej ?️

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

Mengapa Lakukan Ini? ?‍♂️

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."

Pembolehubah Persekitaran ?

Sekarang, sebelum anda menjalankan apl anda dengan teruja dan tertanya-tanya mengapa ia tidak berfungsi, mari sediakan pembolehubah persekitaran kami.

Menyediakan Kunci API AI/ML Anda ?️

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.

Apikan! ?

Masa untuk melihat bayi ini beraksi.

Menjalankan Pelayan Pembangunan ?‍♀️

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. ?

Mengujinya?

• Masukkan Prompt: Sesuatu seperti "Seorang gadis berambut kelabu putih pendek memakai baju bersaiz besar". Menjadi liar!

• Klik Butang: Tekan butang jana itu dan saksikan keajaiban berlaku.
• Tunggu Ia...: Anda akan melihat pemberitahuan yang memastikan anda disiarkan.
• Voilà!: Pelekat yang dijana AI anda akan muncul. Nikmati kemuliaannya.

Penyelesaian masalah ?️

• "Gagal mengambil data penyiapan": Semak semula kunci API anda dan pastikan ia ditetapkan dengan betul.
• Imej Tidak Memuat: Pastikan fail next.config.ts anda disediakan seperti yang ditunjukkan di atas.
• Ranap Apl: Buka konsol anda dan lihat ralat yang timbul. Google ialah rakan anda!

Membungkus?

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.

Apa Seterusnya? ?

• Penggayaan: Sesuaikan rupa dan rasa. Jadikan ia sehebat atau minimalis yang anda suka.
• Ciri: Tambahkan akaun pengguna, galeri pelekat atau malah ciri untuk membuat pek pelekat.
• Pengewangan: Sepadukan Stripe dan mulakan pengecasan untuk pelekat premium. Masa untuk membuat sedikit moolah!

Fikiran Akhir?

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!