如何使用 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

Nodemon：執行您的開發伺服器並監視程式碼中的任何變更

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 方法讀取圖像並製作標題。請參閱 Cloudinary AI 內容分析 以了解更多有關該技術的實際用例。

啟動開發伺服器

在終端機中，使用指令在 http://localhost:8080 執行伺服器。

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

npm init -y // initialize the folder

建立使用者介面

Next.js 是前端開發人員中流行的框架，因為它有助於使用可重複使用的元件創建美觀且用戶友好的介面。

安裝

與任何專案一樣，我們需要使用以下命令建立包含檔案和資料夾的樣板程式碼：

npm install nodemon --save-dev

安裝過程中，會出現一些提示，讓您選擇項目的偏好。

接下來，安裝這些相依性：

npm install cors cloudinary dotenv express

• react-toastify：用於通知

• next-cloudinary：Cloudinary 軟體包專為高效能影像和視訊傳輸而開發

• 複製到剪貼簿：將文字複製到剪貼簿

環境變數

同樣，與後端程式碼一樣，我們需要在根目錄中建立環境變量，內容如下：

.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 處理數據，並排產生圖片和標題。然後，當您「複製標題」到剪貼簿以供以後用作圖像的替代文字時，會彈出一條通知。

技術堆疊

以下技術使得建立人工智慧增強型照片字幕器成為可能：

• 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/

部署

這兩種技術管理應用程式在網路上的部署。

• Vercel：幫助部署前端 Web 應用程式

• 渲染：在雲端託管伺服器程式碼（API）

結論

人工智慧使一切成為可能。它展示了人工智慧如何有效地利用我們為人類創造的優勢。

AI 增強型照片字幕產生器是 Cloudinary API 和用於建立下一個應用程式的工具的強大功能的範例。將所有內容捆綁在 Cloudinary 中時，無需使用提供類似服務的其他工具。

編碼愉快！

以上是如何使用 Cloudinary AI 編寫更好的圖像標題的詳細內容。更多資訊請關注PHP中文網其他相關文章！