如何使用 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中文网其他相关文章！