Cloudinary AI を使用してより良い画像キャプションを作成する方法

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

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

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

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

始める前に

前提条件

• 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 ダッシュボードに移動すると、値にアクセスできます。等号の後のプレースホルダー テキストを置き換えます。

サーバーを作成しましょう。このコードをコピーして、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 でデータが処理され、画像とキャプションの両方が並べて生成されます。次に、後で画像の代替テキストとして使用するためにクリップボードに「キャプションをコピー」すると、通知がポップアップ表示されます。

技術スタック

AI で強化された写真キャプションの構築を可能にした次のテクノロジーは次のとおりです。

• Next.js

• 曇り

• ヴェルセル

• レンダリング

• 特急

重要なリンク

キャプション画像: https://caption-image-gamma.vercel.app/

サーバーコード: https://github.com/Terieyenike/caption-image-server

GitHub リポジトリ: https://github.com/Terieyenike/caption-image-client

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

導入

これら 2 つのテクノロジーは、ウェブ上でのアプリの展開を管理しました。

• Vercel: フロントエンド Web アプリケーションのデプロイを支援します

• レンダリング: クラウドでサーバー コード (API) をホストします

結論

AI を使用することですべてが可能になります。これは、人間のために創造する際に AI がいかに効率的に活用されているかを示しています。

AI で強化された写真キャプショナーは、次のアプリを構築するための Cloudinary API とツールの力の一例です。すべてを Cloudinary にバンドルするときに、同様のサービスを提供する他のツールを使用する必要がなくなります。

コーディングを楽しんでください!

以上がCloudinary AI を使用してより良い画像キャプションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。