Cloudinary AI を使用してより良い画像キャプションを作成する方法-jsチュートリアル-php.cn

X や LinkedIn などのソーシャルメディアプラットフォームで、代替テキストを使用してアクセシビリティを確保するために画像にキャプションを追加するのが難しいと感じたことはありませんか?

Caption Image は、Cloudinary AI を使用して画像とその詳細を分析し、完璧な説明を自動的に提供することで、この問題を自動的に解決するアプリです。

このガイドでは、サーバーコード (API) をクライアント側に接続して、画像キャプション用の堅牢なフルスタックアプリケーションを構築する方法について説明します。

How to Use Cloudinary AI to Write Better Image Captions

試してみませんか?ここでキャプション画像アプリをチェックしてください。

始める前に

前提条件

React の基本的な理解
ローカルマシンにインストールされている Node.js
Cloudinary アカウントをセットアップする

サーバーの作成

このコマンドを実行して、次のようにプロジェクトを作成します:

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

npm init -y // initialize the folder

ログイン後にコピー

このセットアップ後、API を構築できるように次の依存関係をインストールします。

npm install nodemon --save-dev

ログイン後にコピー

ノード: 開発サーバーを実行し、コード内の変更を監視します

npm install cors cloudinary dotenv express

ログイン後にコピー

cors: Web アプリケーションでクロスドメインリクエストを実行できるようにします
cloudinary: 画像とビデオ用のクラウドストレージ
dotenv: .env ファイルから環境変数をロードします
express: API を構築するための Node.js フレームワーク

package.json で、次のようにスクリプトオブジェクトを更新します。

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

ログイン後にコピー

インデックスは、バックエンドコードの作成に使用されるファイルを表します。次のコードを実行してファイルを作成します:

touch index.js

ログイン後にコピー

環境変数

環境変数は認証情報を秘密にし、GitHub にプッシュされたときに認証情報が漏洩するのを防ぎます。

.env

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

ログイン後にコピー

Cloudinary ダッシュボードに移動すると、値にアクセスできます。等号の後のプレースホルダーテキストを置き換えます。

How to Use Cloudinary AI to Write Better Image Captions

サーバーを作成しましょう。このコードをコピーして、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();

ログイン後にコピー

コードスニペットは、GET および POST HTTP メソッドへのエンドポイントを示しています。 POST メソッドは画像を読み取り、キャプションを作成します。このテクノロジーの実際の使用例について詳しくは、クラウド AI コンテンツ分析 をご覧ください。

開発サーバーを起動します

ターミナルでコマンドを使用して、http://localhost:8080 でサーバーを実行します。

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

npm init -y // initialize the folder

ログイン後にコピー

UIの作成

Next.js は、再利用可能なコンポーネントを使用して美しくユーザーフレンドリーなインターフェイスを作成するのに役立つため、フロントエンド開発者の間で人気のあるフレームワークです。

インストール

他のプロジェクトと同様に、次のコマンドを使用してファイルとフォルダーを含む定型コードを作成する必要があります。

npm install nodemon --save-dev

ログイン後にコピー

インストール中に、いくつかのプロンプトが表示され、プロジェクトの設定を選択できます。

次に、これらの依存関係をインストールします。

npm install cors cloudinary dotenv express

ログイン後にコピー

react-toastify: 通知用
next-cloudinary: Cloudinary パッケージは、高性能の画像およびビデオ配信用に開発されました
copy-to-clipboard: テキストをクリップボードにコピーします

環境変数

バックエンドコードの場合と同様に、次のようにルートディレクトリに環境変数を作成する必要があります。

.env

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

ログイン後にコピー

Cloudinary の署名付きアップロードを使用してファイルをクラウドに送信するため、これらの変数はリクエストの署名に役立ちます。署名付きアップロードでは、署名なしのアップロードの代わりに、ファイルのアップロードに追加のセキュリティ層が追加されます。

Cloudinary の構成

ルートディレクトリに lib フォルダーを作成し、ファイル名をcloudinary.js

とします。

lib/cloudinary.js

touch index.js

ログイン後にコピー

次に、アプリルーターで、このファイル名 api/sign-cloudinary-params/route.js で新しい API ルートを作成します。

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

ログイン後にコピー

UI コンテンツの表示

ここで、ホームルートには、ユーザーがアプリ内で操作できるコンテンツが表示されます。

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

ログイン後にコピー

ホームページのコードが完成したので、[画像をアップロード] ボタンをクリックすると、画像をアップロードするための多くのオプションを提供する Cloudinary ウィジェットインターフェイスが開きます。画像を選択すると、Cloudinary でデータが処理され、画像とキャプションの両方が並べて生成されます。次に、後で画像の代替テキストとして使用するためにクリップボードに「キャプションをコピー」すると、通知がポップアップ表示されます。