Cloudinary AI를 사용하여 더 나은 이미지 캡션을 작성하는 방법
- Susan Sarandon원래의
- 2024-10-21 22:47:30425검색
대체 텍스트를 사용한 접근성을 위해 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: 웹 애플리케이션에서 도메인 간 요청을 수행할 수 있습니다
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
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로 데이터를 처리하여 사진과 캡션을 나란히 생성합니다. 그런 다음 나중에 이미지의 대체 텍스트로 사용하기 위해 클립보드에 "캡션 복사"하면 알림 팝업이 표시됩니다.
기술 스택
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/
전개
이 두 가지 기술로 웹에서 앱 배포를 관리했습니다.
Vercel: 프런트엔드 웹 애플리케이션 배포에 도움
렌더링: 클라우드에서 서버 코드(API) 호스팅
결론
AI를 사용하면 모든 것이 가능해집니다. 인간을 위한 창작 활동에서 AI가 얼마나 효율적으로 활용되는지 보여줍니다.
AI로 강화된 사진 캡션 작성자는 다음 앱 구축을 위한 Cloudinary API 및 도구의 강력한 기능을 보여주는 한 가지 예입니다. Cloudinary에 모두 포함할 때 유사한 서비스를 제공하는 다른 도구를 사용할 필요가 없습니다.
즐거운 코딩하세요!
위 내용은 Cloudinary AI를 사용하여 더 나은 이미지 캡션을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!