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

로그인 후 복사

Nodemon: 개발 서버를 실행하고 코드 변경 사항을 모니터링합니다

npm install cors cloudinary dotenv express

로그인 후 복사

cors: 웹 애플리케이션에서 도메인 간 요청을 수행할 수 있습니다
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 메서드는 이미지를 읽고 캡션을 만듭니다. Cloudinary 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 패키지는 고성능 이미지 및 비디오 전송을 위해 개발되었습니다
클립보드에 복사: 텍스트를 클립보드에 복사

환경변수

백엔드 코드와 마찬가지로 동일한 방식으로 다음을 사용하여 루트 디렉터리에 환경 변수를 생성해야 합니다.

.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 경로를 만듭니다.

앱/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로 데이터를 처리하여 사진과 캡션을 나란히 생성합니다. 그런 다음 나중에 이미지의 대체 텍스트로 사용하기 위해 클립보드에 "캡션 복사"하면 알림 팝업이 표시됩니다.