Cara Menggunakan Cloudinary AI untuk Menulis Kapsyen Imej yang Lebih Baik

Adakah anda sentiasa mendapati sukar untuk menambah kapsyen pada imej anda pada platform media sosial seperti X dan LinkedIn untuk kebolehaksesan menggunakan teks alt?

Caption Image ialah apl yang menyelesaikan masalah ini secara automatik dengan menganalisis imej anda dan butirannya menggunakan Cloudinary AI untuk memberikan penerangan yang sempurna secara automatik.

Panduan ini akan merangkumi penyambungan kod pelayan (API) ke bahagian klien untuk membina aplikasi tindanan penuh yang teguh untuk kapsyen imej.

Ingin mencubanya? Lihat apl Imej Kapsyen di sini.

Sebelum anda memulakan

Prasyarat

• Pemahaman asas React

• Node.js dipasang pada mesin tempatan anda

• Sediakan akaun Cloudinary

Mencipta pelayan

Jalankan arahan ini untuk mencipta projek anda seperti berikut:

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

npm init -y // initialize the folder

Selepas persediaan ini, pasang kebergantungan berikut untuk dapat membina API:

npm install nodemon --save-dev

Nodemon: Menjalankan pelayan pembangunan anda dan memantau perubahan untuk sebarang perubahan dalam kod

npm install cors cloudinary dotenv express

• kor: ia membolehkan anda melaksanakan permintaan merentas domain dalam aplikasi web

• berawan: storan awan untuk imej dan video

• dotenv: muatkan pembolehubah persekitaran daripada fail .env

• express: rangka kerja node.js untuk membina API

Dalam package.json, kemas kini objek skrip dengan yang berikut:

{
  ...
  "scripts": {
    "start": "node index",
    "start:dev": "nodemon index"
  },
  ...
}

Indeks mewakili fail yang digunakan untuk membuat kod bahagian belakang. Jalankan kod ini untuk mencipta fail:

touch index.js

Pembolehubah persekitaran

Pembolehubah persekitaran merahsiakan bukti kelayakan kami dan menghalangnya daripada bocor apabila ditolak ke GitHub.

.env

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Pergi ke papan pemuka Cloudinary anda dan anda akan mempunyai akses kepada nilai anda. Gantikan teks pemegang tempat selepas tanda sama.

Jom buat pelayan. Salin-tampal kod ini ke dalam fail index.js anda:

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();

Coretan kod menunjukkan titik akhir kepada kaedah GET dan POST HTTP. Kaedah POST membaca imej dan membuat kapsyen. Lihat Analisis Kandungan AI Mendung untuk mengetahui lebih lanjut tentang kes penggunaan praktikal teknologi ini.

Mulakan pelayan pembangunan

Dalam terminal anda, gunakan arahan untuk menjalankan pelayan di http://localhost:8080.

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

npm init -y // initialize the folder

Mencipta UI

Next.js ialah rangka kerja yang popular di kalangan pembangun bahagian hadapan kerana ia membantu mencipta antara muka yang cantik dan mesra pengguna dengan komponen boleh guna semula.

Pemasangan

Seperti mana-mana projek, kami perlu mencipta kod boilerplate yang merangkumi fail dan folder dengan arahan ini:

npm install nodemon --save-dev

Semasa pemasangan, beberapa gesaan akan muncul, membolehkan anda memilih pilihan anda untuk projek itu.

Seterusnya, pasang kebergantungan ini:

npm install cors cloudinary dotenv express

• react-toastify: untuk pemberitahuan

• awan seterusnya: Pakej Cloudinary dibangunkan untuk penghantaran imej dan video berprestasi tinggi

• salin ke papan keratan: salin teks ke papan keratan

Pembolehubah persekitaran

Dengan cara yang sama, seperti dengan kod hujung belakang, kita perlu mencipta pembolehubah persekitaran dalam direktori akar dengan yang berikut:

.env

{
  ...
  "scripts": {
    "start": "node index",
    "start:dev": "nodemon index"
  },
  ...
}

Pembolehubah ini akan membantu menandatangani permintaan kami kerana kami akan menggunakan muat naik bertanda Cloudinary untuk menghantar fail ke awan. Muat naik yang ditandatangani menambah lapisan keselamatan tambahan pada muat naik fail dan bukannya muat naik yang tidak ditandatangani.

Mengkonfigurasi Cloudinary

Buat folder lib dalam direktori akar, dan ia, nama fail cloudinary.js

lib/cloudinary.js

touch index.js

Seterusnya, dalam penghala App, buat laluan API baharu dengan nama fail ini, api/sign-cloudinary-params/route.js:

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

Memaparkan kandungan UI

Di sini, laluan rumah akan memaparkan kandungan yang boleh berinteraksi dengan pengguna dalam apl.

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();

Sekarang kita mempunyai kod untuk halaman utama dengan mengklik butang "Muat Naik Imej" membuka antara muka widget Cloudinary yang menawarkan banyak pilihan untuk memuat naik imej. Sebaik sahaja anda telah memilih imej, ia memproses data dengan Cloudinary, menjana kedua-dua gambar dan kapsyen bersebelahan. Kemudian, pemberitahuan muncul apabila anda "Salin kapsyen" ke papan keratan untuk digunakan kemudian sebagai teks alternatif untuk imej anda.

Timbunan teknologi

Ini ialah teknologi berikut yang memungkinkan untuk membina kapsyen foto yang dipertingkatkan AI:

• Next.js

• Mendung

• Vercel

• Render

• Ekspres

Pautan penting

Imej Kapsyen: https://caption-image-gamma.vercel.app/

Kod pelayan: https://github.com/Terieyenike/caption-image-server

Repositori GitHub: https://github.com/Terieyenike/caption-image-client

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

Kerahan

Kedua-dua teknologi ini menguruskan penggunaan apl di web.

• Vercel: membantu menggunakan aplikasi web bahagian hadapan

• Render: mengehos kod pelayan (API) dalam awan

Kesimpulan

Semuanya menjadi mungkin dengan menggunakan AI. Ia menunjukkan betapa cekap AI digunakan untuk kelebihan kita dalam mencipta untuk manusia.

Kapsyen foto yang dipertingkatkan AI ialah salah satu contoh kuasa Cloudinary API dan alatan untuk membina apl anda yang seterusnya. Ia menghilangkan keperluan untuk menggunakan alat lain yang menyediakan perkhidmatan serupa apabila menggabungkan semuanya dalam Cloudinary.

Selamat mengekod!

Atas ialah kandungan terperinci Cara Menggunakan Cloudinary AI untuk Menulis Kapsyen Imej yang Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!