So verwenden Sie Cloudinary AI, um bessere Bildunterschriften zu schreiben

Fand es für Sie schon immer eine Herausforderung, Ihren Bildern auf Social-Media-Plattformen wie X und LinkedIn Bildunterschriften hinzuzufügen, um sie mithilfe von Alt-Text barrierefrei zu gestalten?

Caption Image ist eine App, die dieses Problem automatisch löst, indem sie Ihr Bild und seine Details mithilfe von Cloudinary AI analysiert, um automatisch eine perfekte Beschreibung bereitzustellen.

Diese Anleitung behandelt die Verbindung des Servercodes (API) mit der Clientseite, um eine robuste Full-Stack-Anwendung für Bildunterschriften zu erstellen.

Möchten Sie es versuchen? Schauen Sie sich hier die Caption Image-App an.

Bevor Sie beginnen

Voraussetzungen

• Grundlegendes Verständnis von React

• Node.js auf Ihrem lokalen Computer installiert

• Richten Sie ein Cloudinary-Konto ein

Erstellen des Servers

Führen Sie diesen Befehl aus, um Ihr Projekt wie folgt zu erstellen:

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

npm init -y // initialize the folder

Nach diesem Setup installieren Sie die folgenden Abhängigkeiten, um die API erstellen zu können:

npm install nodemon --save-dev

Nodemon: Führt Ihren Entwicklungsserver aus und überwacht Änderungen auf Änderungen im Code

npm install cors cloudinary dotenv express

• cors: Damit können Sie domänenübergreifende Anfragen in Webanwendungen ausführen

• cloudinary: Cloud-Speicher für Bilder und Videos

• dotenv: Umgebungsvariablen aus einer .env-Datei laden

• Express: ein Node.js-Framework zum Erstellen von APIs

Aktualisieren Sie in package.json die Skriptobjekte wie folgt:

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

Der Index stellt die Datei dar, die zum Erstellen des Backend-Codes verwendet wird. Führen Sie diesen Code aus, um die Datei zu erstellen:

touch index.js

Umgebungsvariablen

Die Umgebungsvariablen halten unsere Anmeldeinformationen geheim und verhindern, dass sie durchsickern, wenn sie an GitHub übertragen werden.

.env

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Gehen Sie zu Ihrem Cloudinary-Dashboard und Sie haben Zugriff auf Ihre Werte. Ersetzen Sie den Platzhaltertext nach dem Gleichheitszeichen.

Lassen Sie uns den Server erstellen. Kopieren Sie diesen Code und fügen Sie ihn in Ihre index.js-Datei ein:

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

Das Code-Snippet zeigt die Endpunkte zu den HTTP-Methoden GET und POST. Die POST-Methode liest das Bild und erstellt eine Beschriftung. Schauen Sie sich Cloudinary AI Content Analysis an, um mehr über den praktischen Anwendungsfall dieser Technologie zu erfahren.

Starten Sie den Entwicklungsserver

Verwenden Sie in Ihrem Terminal den Befehl, um den Server unter http://localhost:8080 auszuführen.

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

npm init -y // initialize the folder

Erstellen der Benutzeroberfläche

Next.js ist ein beliebtes Framework unter Frontend-Entwicklern, da es dabei hilft, schöne und benutzerfreundliche Schnittstellen mit wiederverwendbaren Komponenten zu erstellen.

Installation

Wie bei jedem Projekt müssen wir mit diesem Befehl den Boilerplate-Code erstellen, der die Dateien und Ordner enthält:

npm install nodemon --save-dev

Während der Installation werden einige Eingabeaufforderungen angezeigt, mit denen Sie Ihre Einstellungen für das Projekt auswählen können.

Als nächstes installieren Sie diese Abhängigkeiten:

npm install cors cloudinary dotenv express

• react-toastify: zur Benachrichtigung

• next-cloudinary: Das Cloudinary-Paket wurde für die leistungsstarke Bild- und Videobereitstellung entwickelt

• In die Zwischenablage kopieren: Text in die Zwischenablage kopieren

Umgebungsvariablen

Auf die gleiche Weise wie beim Backend-Code müssen wir die Umgebungsvariablen im Stammverzeichnis wie folgt erstellen:

.env

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

Diese Variablen helfen beim Signieren unserer Anfragen, da wir von Cloudinary signierte Uploads verwenden, um Dateien an die Cloud zu senden. Die signierten Uploads fügen Datei-Uploads eine zusätzliche Sicherheitsebene hinzu, im Gegensatz zu nicht signierten Uploads.

Cloudinary konfigurieren

Erstellen Sie einen lib-Ordner im Stammverzeichnis und geben Sie ihm einen Dateinamen mit dem Namen cloudinary.js

lib/cloudinary.js

touch index.js

Als nächstes erstellen Sie im App-Router eine neue API-Route mit diesem Dateinamen, 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

Anzeige des UI-Inhalts

Hier zeigt die Home-Route die Inhalte an, mit denen Benutzer innerhalb der App interagieren können.

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

Da wir nun den Code für die Startseite haben, öffnet sich durch Klicken auf die Schaltfläche „Bild hochladen“ die Cloudinary-Widget-Oberfläche, die viele Optionen zum Hochladen eines Bildes bietet. Sobald Sie ein Bild ausgewählt haben, verarbeitet es die Daten mit Cloudinary und generiert gleichzeitig das Bild und die Bildunterschrift. Dann erscheint eine Benachrichtigung, wenn Sie „Beschriftung kopieren“ in die Zwischenablage kopieren, um sie später als alternativen Text für Ihr Bild zu verwenden.

Tech-Stack

Dies sind die folgenden Technologien, die es ermöglicht haben, den KI-gestützten Bilduntertitel zu erstellen:

• Next.js

• Wolkig

• Vercel

• Rendern

• Express

Wichtige Links

Bildunterschrift: https://caption-image-gamma.vercel.app/

Servercode: https://github.com/Terieyenike/caption-image-server

GitHub-Repo: https://github.com/Terieyenike/caption-image-client

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

Einsatz

Diese beiden Technologien verwalteten die Bereitstellung der App im Web.

• Vercel: hilft bei der Bereitstellung von Frontend-Webanwendungen

• Rendern: Hosten des Servercodes (API) in der Cloud

Abschluss

Alles wird durch den Einsatz von KI ermöglicht. Es zeigt, wie effizient KI zu unserem Vorteil beim Schaffen für Menschen eingesetzt wird.

Der KI-gestützte Bilduntertitel ist ein Beispiel für die Leistungsfähigkeit der Cloudinary-APIs und -Tools zum Erstellen Ihrer nächsten App. Dadurch entfällt die Notwendigkeit, andere Tools zu verwenden, die ähnliche Dienste bereitstellen, wenn alles in Cloudinary gebündelt wird.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Cloudinary AI, um bessere Bildunterschriften zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!