Création d'une plate-forme AI Sticker Maker avec l'API AI/ML, Next.js, React et Tailwind CSS à l'aide des modèles OpenAI GPT et DALL·E.

Je me suis ennuyé. Toi aussi ? ?

Hmm... ?

Que diriez-vous de créer une plateforme AI Sticker Maker ? Pour être honnête, c'est une idée vraiment intéressante. Et bon, nous pourrions même générer des bénéfices en intégrant simplement Stripe en tant que fournisseur de paiement. ? Ouais, pourquoi pas ?

Alors, commençons. Ou du moins, essayez-le ! ?

Introduction rapide ?

Tout d'abord, esquissons un pseudo-code ou faisons un plan (à moins que vous ne soyez un vrai constructeur qui code à la mode). Cela devrait ressembler à ceci :

1. L'utilisateur saisit une invite (une description textuelle de l'apparence de l'autocollant).
2. Notre AI Sticker Maker générera un autocollant vraiment mignon. Ta-da ! ?

C'est facile, n'est-ce pas ? ?

Mais attendez, laissez-moi clarifier. Nous allons utiliser deux modèles : GPT-4o et DALL·E 3, tous deux issus d'OpenAI. Ils sont excités, pour de vrai ! ?

Nous utiliserons l'API AI/ML, qui donne accès à 200 modèles d'IA avec une seule API. Laissez-moi vous en parler brièvement.

Rencontrez l'API AI/ML ??

AI/ML API est une plateforme révolutionnaire pour les développeurs et les entrepreneurs SaaS qui cherchent à intégrer des capacités d'IA de pointe dans leurs produits. Il offre un point d'accès unique à plus de 200 modèles d'IA de pointe, couvrant tout, de la PNL à la vision par ordinateur.

Fonctionnalités clés pour les développeurs :

• Bibliothèque de modèles étendue : 200 modèles pré-entraînés pour un prototypage et un déploiement rapides. ?
• Options de personnalisation : affinez les modèles pour les adapter à votre cas d'utilisation spécifique. ?
• Intégration conviviale pour les développeurs : API et SDK RESTful pour une intégration transparente dans votre pile. ?️
• Architecture sans serveur : concentrez-vous sur le codage, pas sur la gestion de l'infrastructure. ☁️

Commencez GRATUIT ($0 dollars américains) : aimlapi.com ?

Plongée approfondie dans la documentation de l'API AI/ML (très détaillée, je ne peux pas être plus d'accord) : docs.aimlapi.com ?

Ingrédients de la pile technologique ?

Nous utiliserons TypeScript, Next.js, React et Tailwind CSS pour créer et concevoir notre créateur d'autocollants IA. plateforme.

• TypeScript n'est qu'un langage de programmation, mais il est vraiment génial ! ?
• Next.js est le React Framework pour le web. Cela nous permet de créer des applications Web de haute qualité avec la puissance des composants React. ?
• React est la bibliothèque pour les interfaces utilisateur Web et natives. ?️
• Tailwind CSS est le meilleur pour le style : créez simplement ce que vous voulez, sérieusement. ?

Ce n'était qu'un bref aperçu de ce que nous allons utiliser. N'hésitez pas à en savoir plus sur chacun d'eux ici :

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

La cuisine a commencé ?

Mettons la main à la pâte ! Tout d’abord, créez un dossier. Ouvrez votre terminal et saisissez ceci :

mkdir aiml-tutorial
cd aiml-tutorial

Maintenant, créons une nouvelle application Next.js :

npx create-next-app@latest

Il vous posera quelques questions :

✔ Comment s'appelle votre projet ? Ici, vous devez saisir le nom de votre application. Par exemple : aistickermaker. Pour le reste des questions, appuyez simplement sur Entrée.

Voici ce que vous verrez :

✔ 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

Conseil de pro : N'hésitez pas à choisir Oui ou Non en fonction de vos préférences. Je ne jugerai pas ! ?

Ouvrons le projet avec VSCode :

code .

Maintenant, Visual Studio Code devrait se lancer directement avec cette application. Il est temps de commencer à coder ! ?

Implémentation d'API ?️

Tout d'abord, créons des API pour améliorer l'invite utilisateur et générer l'autocollant. Accédez au dossier de l'application, puis créez un nouveau dossier appelé api, et à l'intérieur de celui-ci, créez deux nouveaux dossiers : EnhancedPrompt et generateSticker. Pour chacun, créez un fichier route.ts.

Le point de terminaison EnhancePrompt ?‍♂️

Maintenant, commençons par le point de terminaison EnhancePrompt. Ouvrez route.ts dans le dossier EnhancedPrompt et entrez le code suivant :

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

Voici une invite séparée :

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

Que se passe-t-il ici ? ?

• Importation de NextResponse : Pour gérer nos réponses HTTP en douceur.
• Définition de la fonction POST : C'est là que la magie opère lorsque quelqu'un atteint ce point de terminaison.
• Récupération de l'invite utilisateur : nous récupérons l'invite fournie par l'utilisateur.
• Appel de l'API de l'API AI/ML : nous faisons une demande pour améliorer l'invite de l'utilisateur à l'aide de GPT-4o.
• Traitement des réponses : nous vérifions si la réponse est correcte, analysons les données et extrayons la réponse de l'assistant.
• Gestion des erreurs : Parce que personne n'aime que les erreurs non gérées gâchent la fête.

Voici un exemple concret de la façon dont l'IA améliore l'invite de l'utilisateur. ???

Vous venez de saisir une invite :

A cute panda eating ice cream under a rainbow

L'IA l'améliorera pour le rendre plus détaillé et visuellement riche. En conséquence, vous devriez obtenir une réponse du type :

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.

Très bien, replongeons dans le chaudron de code et continuons à préparer notre créateur d'autocollants AI ! ?

Le point de terminaison generateSticker ?️

Donc, notre point de terminaison enhancePrompt mijote bien. Il est temps de pimenter les choses avec le point de terminaison generateSticker. Rendez-vous dans le dossier api/generateSticker et ouvrez route.ts. Remplacez tout ce qu'il y a dedans (probablement rien) par ce nouveau code :

mkdir aiml-tutorial
cd aiml-tutorial

Que se passe-t-il ici ? ?

• Importation de NextResponse : Pour gérer nos réponses HTTP en douceur.
• Définition de la fonction POST : C'est là que la magie opère lorsque quelqu'un atteint ce point de terminaison.
• Récupération de l'invite utilisateur : nous récupérons l'invite fournie par l'utilisateur.
• Appel de l'API de l'API AI/ML : nous faisons une demande pour générer une image basée sur l'invite à l'aide de DALL·E 3.
• Traitement des réponses : nous vérifions si la réponse est correcte, analysons les données et extrayons l'URL de l'image.
• Gestion des erreurs : Parce que personne n'aime que les erreurs non gérées gâchent la fête.

Essayons l'invite ci-dessus avec le panda en action ! ?

Voici notre adorable autocollant panda ! ???

D'autres exemples ?

Invite :

npx create-next-app@latest

Invite :

✔ 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

On dirait vraiment WOW ! ?

Nous avons besoin d'un frontend, les gars ! ?

Construire le front-end ?

Il est temps de mettre un visage sur notre application ! Créons une interface utilisateur dans laquelle les utilisateurs peuvent saisir leur invite et obtenir un nouvel autocollant brillant.

Le fichier page.tsx ?

Accédez à app/page.tsx et mettez-le à jour avec le code suivant :

mkdir aiml-tutorial
cd aiml-tutorial

Le décomposer ?

• Loader : Nous utilisons un chargeur vraiment simple, mais sympa ; trois points horizontaux avec une jolie animation :

npx create-next-app@latest

• Gestion de l'état : utilisation de useState pour gérer les notifications, l'état de chargement, l'invite de l'utilisateur et l'URL de l'autocollant.
• Fonctions :
  • enhanceUserPrompt : appelle notre point de terminaison /api/enhancePrompt pour rendre l'invite de l'utilisateur plus... enfin, invite.
  • generateCuteSticker : atteint le point de terminaison /api/generateSticker pour obtenir cet adorable autocollant.
  • generateSticker : orchestre l'ensemble du processus lorsque l'utilisateur clique sur le bouton magique.
  • handleDownload : permet à l'utilisateur de télécharger son nouvel autocollant.
  • handleClose : ferme le modal de l'autocollant.
• Composants de l'interface utilisateur :
  • Champ de saisie : où l'utilisateur saisit ses rêves d'autocollants les plus fous.
  • Bouton Générer : Déclenche la génération d'autocollants.
  • Modal : affiche l'autocollant avec des options de téléchargement ou de fermeture.
  • Notifications : affiche des messages pour informer l'utilisateur de ce qui se passe.

Une pincée de FontAwesome ?

Nous utilisons FontAwesome pour les icônes. Assurez-vous de l'installer :

✔ 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

Vous pouvez également consulter la documentation FontAwesome pour plus de détails. Ou recherchez d'autres icônes Recherchez des icônes.

Gérer les notifications ?

Vous vous souvenez du composant de notification que nous avons importé ? Créons-le.

Créer le composant de notification ?

Créez un nouveau dossier appelé utils dans votre répertoire app. Dans utils, créez un fichier appelé notify.tsx et collez :

code .

À quoi ça sert ? ?

• Objectif : Afficher des messages temporaires à l'utilisateur, comme "Génération d'un joli autocollant..." ou "Une erreur s'est produite."
• Fonction de fermeture automatique : Elle disparaît au bout de 3 secondes, tout comme ma motivation le lundi matin.
• Style : change de couleur en fonction du type de notification.

Configuration des domaines d'images ?️

Puisque nous récupérons les images des serveurs OpenAI, Next.js doit savoir que vous pouvez les charger. Ouvrez next.config.ts et ajoutez :

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

Pourquoi faire ça ? ?‍♂️

Parce que Next.js est un peu surprotecteur (comme un parent hélicoptère) et ne chargera pas d'images provenant de domaines externes, sauf si vous l'autorisez spécifiquement. Ce paramètre indique à Next.js : "C'est cool, ces images sont avec moi."

Variables d'environnement ?

Maintenant, avant d'exécuter votre application avec enthousiasme et de vous demander pourquoi elle ne fonctionne pas, configurons nos variables d'environnement.

Configurer votre clé API AI/ML ?️

Créez un fichier appelé .env.local à la racine de votre projet et ajoutez :

mkdir aiml-tutorial
cd aiml-tutorial

Remplacez your_api_key_here par votre clé API AI/ML actuelle. Si vous n'en avez pas, vous devrez peut-être vous inscrire à l'API AI/ML et le récupérer. C'est absolument GRATUIT pour commencer !

Voici un didacticiel rapide sur la façon d'obtenir votre clé API : Comment obtenir une clé API à partir de l'API AI/ML. Tutoriel rapide étape par étape avec des captures d'écran pour une meilleure compréhension.

Attention : Gardez cette clé secrète ! Ne le partagez pas publiquement et ne le confiez pas à Git. Traitez-le comme votre mot de passe Netflix.

Allumez-le ! ?

Il est temps de voir ce bébé en action.

Vous exécutez le serveur de développement ?‍♀️

Dans votre terminal, exécutez :

npx create-next-app@latest

Cela démarre le serveur de développement. Ouvrez votre navigateur et accédez à http://localhost:3000.

Vous devriez voir votre plateforme AI Sticker Maker. ?

Le tester ?

• Entrez une invite : quelque chose comme "Une fille aux cheveux gris blancs courts portant une chemise surdimensionnée". Déchaînez-vous !

• Cliquez sur le bouton : appuyez sur ce bouton de génération et regardez la magie se dérouler.
• Attendez... : vous verrez des notifications vous tenir au courant.
• Voilà ! : Votre autocollant généré par l'IA devrait apparaître. Imprégnez-vous de sa gloire.

Dépannage ?️

• "Échec de la récupération des données d'achèvement" : vérifiez votre clé API et assurez-vous qu'elle est correctement définie.
• Les images ne se chargent pas : assurez-vous que votre fichier next.config.ts est configuré comme indiqué ci-dessus.
• Crashs d'application : ouvrez votre console et voyez quelles erreurs apparaissent. Google est votre ami !

Conclusion ?

Félicitations ! Vous venez de créer un créateur d'autocollants AI à la fois amusant et fonctionnel. Non seulement vous avez plongé dans le monde de l'IA et de Next.js, mais vous avez également créé quelque chose qui peut faire sourire les gens.

Quelle est la prochaine étape ? ?

• Style : personnalisez l'apparence et la convivialité. Rendez-le aussi fabuleux ou minimaliste que vous le souhaitez.
• Fonctionnalités : ajoutez des comptes d'utilisateurs, des galeries d'autocollants ou même une fonctionnalité pour créer des packs d'autocollants.
• Monétisation : intégrez Stripe et commencez à facturer des autocollants premium. Il est temps de faire du moolah !

Pensées finales ?

Créer cette application, c'était comme préparer un sandwich avec des couches de qualité technologique. Nous avons des modèles d'IA comme garniture, Next.js comme pain et une pincée d'humour comme sauce secrète.

N'oubliez pas que le monde est votre huître (ou votre autocollant). Continuez à expérimenter, continuez à construire et, surtout, amusez-vous !

Bon codage ! ?

Implémentation complète disponible sur Github AI Sticker Maker.

C'est absolument GRATUIT pour commencer ! Essayez-le maintenant, cliquez

Regardez aussi ce tuto, il est très intéressant ! Créer une extension Chrome à partir de zéro avec l'API AI/ML, Deepgram Aura et l'intégration IndexedDB

Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à nous contacter par e-mail à abdibrokhim@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!