Comment utiliser Cloudinary AI pour rédiger de meilleures légendes d'images

Avez-vous toujours trouvé difficile d'ajouter des légendes à vos images sur les plateformes de médias sociaux comme X et LinkedIn pour l'accessibilité à l'aide du texte alternatif ?

Caption Image est une application qui résout automatiquement ce problème en analysant votre image et ses détails à l'aide de Cloudinary AI pour fournir automatiquement une description parfaite.

Ce guide couvrira la connexion du code serveur (API) au côté client pour créer une application full-stack robuste pour les légendes d'images.

Vous voulez essayer ? Découvrez l'application Caption Image ici.

Avant de commencer

Prérequis

• Compréhension de base de React

• Node.js installé sur votre machine locale

• Créer un compte Cloudinary

Création du serveur

Exécutez cette commande pour créer votre projet comme suit :

mkdir caption-image-server
cd caption-image-server

npm init -y // initialize the folder

Après cette configuration, installez les dépendances suivantes pour pouvoir construire l'API :

npm install nodemon --save-dev

Nodemon : exécute votre serveur de développement et surveille les modifications pour tout changement dans le code

npm install cors cloudinary dotenv express

• cors : il permet d'effectuer des requêtes cross-domaines dans les applications web

• cloudinary : stockage cloud pour les images et les vidéos

• dotenv : charger les variables d'environnement à partir d'un fichier .env

• express : un framework node.js pour créer des API

Dans le package.json, mettez à jour les objets de script avec ce qui suit :

{
  ...
  "scripts": {
    "start": "node index",
    "start:dev": "nodemon index"
  },
  ...
}

L'index représente le fichier utilisé pour créer le code backend. Exécutez ce code pour créer le fichier :

touch index.js

Variables d'environnement

Les variables d'environnement gardent nos informations d'identification secrètes et empêchent leur fuite lorsqu'elles sont transmises à GitHub.

.env

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Allez sur votre tableau de bord Cloudinary, et vous aurez accès à vos valeurs. Remplacez le texte d'espace réservé après le signe égal.

Créons le serveur. Copiez-collez ce code dans votre fichier index.js :

import express from "express";
import { v2 as cloudinary } from "cloudinary";
import * as dotenv from "dotenv";
import cors from "cors";

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

app.get("/", (req, res) => {
  res.status(200).json({
    message: "Upload and generate image caption with Cloudinary AI",
  });
});

app.post("/api/v1/caption", async (req, res) => {
  try {
    const { imageUrl } = req.body;

    if (!imageUrl) {
      return res.status(400).json({
        success: false,
        message: "Image URL is required",
      });
    }

    const result = await cloudinary.uploader.upload(imageUrl, {
      detection: "captioning",
    });

    res.status(200).json({
      success: true,
      caption: result.info.detection.captioning.data.caption,
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      message: "Unable to generate image caption",
      error: error.message,
    });
  }
});

const startServer = async () => {
  try {
    app.listen(8080, () => console.log("Server started on port 8080"));
  } catch (error) {
    console.log("Error starting server:", error);
  }
};

startServer();

L'extrait de code montre les points de terminaison des méthodes HTTP GET et POST. La méthode POST lit l'image et crée une légende. Consultez Cloudinary AI Content Analysis pour en savoir plus sur le cas d'utilisation pratique de cette technologie.

Démarrer le serveur de développement

Dans votre terminal, utilisez la commande pour exécuter le serveur à l'adresse http://localhost:8080.

mkdir caption-image-server
cd caption-image-server

npm init -y // initialize the folder

Création de l'interface utilisateur

Next.js est un framework populaire parmi les développeurs frontend car il permet de créer des interfaces belles et conviviales avec des composants réutilisables.

Installation

Comme pour tout projet, nous devons créer le code passe-partout qui inclut les fichiers et dossiers avec cette commande :

npm install nodemon --save-dev

Lors de l'installation, certaines invites apparaîtront, vous permettant de choisir vos préférences pour le projet.

Ensuite, installez ces dépendances :

npm install cors cloudinary dotenv express

• réagir-toastify : pour notification

• next-cloudinary : Le package Cloudinary est développé pour une diffusion d'images et de vidéos hautes performances

• copier dans le presse-papier : copier le texte dans le presse-papiers

Variables d'environnement

De la même manière, comme pour le code backend, nous devons créer les variables d'environnement dans le répertoire racine avec ce qui suit :

.env

{
  ...
  "scripts": {
    "start": "node index",
    "start:dev": "nodemon index"
  },
  ...
}

Ces variables nous aideront à signer nos demandes car nous utiliserons les téléchargements signés Cloudinary pour envoyer des fichiers vers le cloud. Les téléchargements signés ajoutent une couche de sécurité supplémentaire aux téléchargements de fichiers au lieu des téléchargements non signés.

Configuration de Cloudinary

Créez un dossier lib dans le répertoire racine, et lui, un nom de fichier cloudinary.js

lib/cloudinary.js

touch index.js

Ensuite, dans le routeur de l'application, créez une nouvelle route API avec ce nom de fichier, api/sign-cloudinary-params/route.js :

app/api/sign-cloudinary-params/route.js

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Affichage du contenu de l'interface utilisateur

Ici, l'itinéraire d'accueil affichera le contenu avec lequel les utilisateurs peuvent interagir au sein de l'application.

app/page.js

import express from "express";
import { v2 as cloudinary } from "cloudinary";
import * as dotenv from "dotenv";
import cors from "cors";

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

app.get("/", (req, res) => {
  res.status(200).json({
    message: "Upload and generate image caption with Cloudinary AI",
  });
});

app.post("/api/v1/caption", async (req, res) => {
  try {
    const { imageUrl } = req.body;

    if (!imageUrl) {
      return res.status(400).json({
        success: false,
        message: "Image URL is required",
      });
    }

    const result = await cloudinary.uploader.upload(imageUrl, {
      detection: "captioning",
    });

    res.status(200).json({
      success: true,
      caption: result.info.detection.captioning.data.caption,
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      message: "Unable to generate image caption",
      error: error.message,
    });
  }
});

const startServer = async () => {
  try {
    app.listen(8080, () => console.log("Server started on port 8080"));
  } catch (error) {
    console.log("Error starting server:", error);
  }
};

startServer();

Maintenant que nous avons le code de la page d'accueil, cliquer sur le bouton "Télécharger une image" ouvre l'interface du widget Cloudinary qui offre de nombreuses options pour télécharger une image. Une fois que vous avez sélectionné une image, il traite les données avec Cloudinary, générant à la fois l'image et la légende côte à côte. Ensuite, une notification apparaît lorsque vous « Copier la légende » dans le presse-papiers pour une utilisation ultérieure comme texte alternatif pour votre image.

Pile technologique

Voici les technologies suivantes qui ont permis de créer le sous-titreur de photos amélioré par l'IA :

• Suivant.js

• Cloudinaire

• Vercel

• Rendu

• Express

Liens importants

Image de légende : https://caption-image-gamma.vercel.app/

Code du serveur : https://github.com/Terieyenike/caption-image-server

Dépôt GitHub : https://github.com/Terieyenike/caption-image-client

API : https://caption-image-server.onrender.com/

Déploiement

Ces deux technologies ont géré le déploiement de l'application sur le web.

• Vercel : aide au déploiement d'applications web frontend

• Render : hébergement du code serveur (API) dans le cloud

Conclusion

Tout est rendu possible grâce à l'utilisation de l'IA. Cela montre avec quelle efficacité l’IA est utilisée à notre avantage dans la création pour les humains.

Le sous-titreur de photos amélioré par l'IA est un exemple de la puissance des API et des outils Cloudinary pour créer votre prochaine application. Cela supprime le besoin d'utiliser d'autres outils fournissant des services similaires lors du regroupement du tout dans Cloudinary.

Bon codage !

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!