नेक्स्ट.जेएस, रेप्लिकेट और रेडिस के साथ एक एआई-पावर्ड इमेज कैप्शनिंग ऐप बनाएं

हम क्या उपयोग करेंगे

• Next.js 13 (फ्रंट-एंड और बैक-एंड)
• अपस्टैश रेडिस (दर सीमित)
• प्रतिकृति (मशीन लर्निंग एपीआई)
• टेलविंड सीएसएस (स्टाइलिंग)
• वर्सेल (तैनाती)

आपको क्या चाहिए

• डेटाबेस बनाने के लिए एक अपस्टैश खाता
• मशीन लर्निंग एपीआई तक पहुंचने के लिए एक रेप्लिकेट खाता

अपस्टैश रेडिस की स्थापना

रेप्लिकेट सेट अप करना

प्रोजेक्ट की स्थापना

// .env
 
REPLICATE_API_KEY="your_replicate_api_key_from_above"
 
// Optional, if you're doing rate limiting
UPSTASH_REDIS_REST_URL="your_upstash_redis_rest__url_from_above"
UPSTASH_REDIS_REST_TOKEN="your_upstash_redis_rest__token_from_above"

npm install

npm run dev

भंडार संरचना

उच्च-स्तरीय डेटा प्रवाह

रेडिस इंस्टेंस बनाएं

// `/utils/redis.ts`
 
import { Redis } from "@upstash/redis";
 
const redis =
 !!process.env.UPSTASH_REDIS_REST_URL && !!process.env.UPSTASH_REDIS_REST_TOKEN
 ? new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL,
 token: process.env.UPSTASH_REDIS_REST_TOKEN,
 })
 : undefined;
 
export default redis;

एक छवि अपलोड करना

// `/pages/captions.tsx`
 
const uploader = Uploader({
 apiKey: !!process.env.NEXT_PUBLIC_UPLOAD_API_KEY
 ? process.env.NEXT_PUBLIC_UPLOAD_API_KEY
 : "free",
});
 
const options = {
 maxFileCount: 1,
 mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
 editor: { images: { crop: false } },
 styles: {
 colors: {
 primary: "#5a5cd1", // Primary buttons & links
 error: "#d23f4d", // Error messages
 shade100: "#fff", // Standard text
 shade200: "#fffe", // Secondary button text
 shade300: "#fffd", // Secondary button text (hover)
 shade400: "#fffc", // Welcome text
 shade500: "#fff9", // Modal close button
 shade600: "#fff7", // Border
 shade700: "#fff2", // Progress indicator background
 shade800: "#fff1", // File item background
 shade900: "#ffff", // Various (draggable crop buttons, etc.)
 },
 },
 onValidate: async (file: File): Promise<undefined | string> => {
 let isSafe = false;
 try {
 isSafe = await NSFWPredictor.isSafeImg(file);
 if (!isSafe) va.track("NSFW Image blocked");
 } catch (error) {
 console.error("NSFW predictor threw an error", error);
 }
 return isSafe
 ? undefined
 : "Detected a NSFW image which is not allowed. If this was a mistake, please contact me at hosna.qasmei@gmail.com";
 },
};

• maxFileCount:एक बार में अपलोड की जा सकने वाली फ़ाइलों की अधिकतम संख्या 1 पर सेट करता है।
• mimeTypes:अपलोड की गई फ़ाइलों के लिए अनुमत MIME प्रकारों को "image/jpeg", "image/png", और "image/jpg" पर सेट करता है।
• संपादक:छवि संपादक के लिए विकल्पों को कॉन्फ़िगर करता है, जो इस मामले में फ़सल को गलत पर सेट करके अक्षम कर दिया गया है।
• शैलियाँ:अपलोडर यूआई के लिए कस्टम शैलियों को परिभाषित करता है।
• onValidate:एक फ़ंक्शन को परिभाषित करता है जिसे अपलोड करने से पहले प्रत्येक फ़ाइल को सत्यापित करने के लिए बुलाया जाता है। इस मामले में, फ़ंक्शन यह जांचने के लिए NSFWPredictor का उपयोग करता है कि छवि काम के लिए सुरक्षित है या नहीं। यदि छवि सुरक्षित नहीं है, तो एक त्रुटि संदेश यह दर्शाता है कि छवि की अनुमति नहीं है।

// `/pages/captions.tsx` continued
 
const Home: NextPage = () => {
 const [originalPhoto, setOriginalPhoto] = useState<string | null>(null);
 const [caption, setCaption] = useState<string | null>(null);
 const [buttonText, setButtonText] = useState("Copy");
 const [loading, setLoading] = useState<boolean>(false);
 const [error, setError] = useState<string | null>(null);
 
 const copyToClipboard = () => {
 navigator.clipboard.writeText(caption!);
 
 setButtonText("Copied!"); // set the button text to "Copied!" when text is copied
 setTimeout(() => {
 setButtonText("Copy"); // set the button text back to "Copy" after 2 seconds
 }, 2000);
 };
 
 const UploadDropZone = () => (
 <UploadDropzone
 uploader={uploader}
 options={options}
 onUpdate={(file) => {
 if (file.length !== 0) {
 setOriginalPhoto(file[0].fileUrl.replace("raw", "thumbnail"));
 generateCaption(file[0].fileUrl.replace("raw", "thumbnail"));
 }
 }}
 width="670px"
 height="250px"
 />
 );
 
 async function generateCaption( fileUrl: string )
 {
 await new Promise((resolve) => setTimeout(resolve, 500));
 setLoading(true);
 const res = await fetch("/api/generate", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({ imageUrl: fileUrl }),
 });
 
 let newCaption = await res.json();
 if (res.status !== 200) {
 setError(newCaption);
 } else {
 setCaption(newCaption);
 }
 setLoading(false);
 }
 
 ...
 

• originalPhoto एक स्ट्रिंग है जो अपलोड की गई छवि के URL का प्रतिनिधित्व करती है।
• caption एक स्ट्रिंग है जिसमें अपलोड की गई छवि के लिए जेनरेट किया गया कैप्शन शामिल है।
• buttonText एक स्ट्रिंग है जो कॉपी बटन पर टेक्स्ट का प्रतिनिधित्व करती है।
• loading एक बूलियन है जो इंगित करता है कि घटक वर्तमान में डेटा प्राप्त कर रहा है या नहीं।
• error एक स्ट्रिंग है जिसमें कैप्शन जनरेशन प्रक्रिया के दौरान कोई त्रुटि होने पर त्रुटि संदेश होता है।

दर सीमित

// `/pages/api/generate.ts`
 
import redis from "../../utils/redis";
import requestIp from "request-ip";
 
import { Ratelimit } from "@upstash/ratelimit";
import type { NextApiRequest, NextApiResponse } from "next";
 
type Data = string;
interface ExtendedNextApiRequest extends NextApiRequest {
 body: {
 imageUrl: string;
 };
}
 
// Create a new ratelimiter, that allows 3 requests every 15 minutes
const ratelimit = redis
 ? new Ratelimit({
 redis: redis,
 limiter: Ratelimit.fixedWindow(5, "1440 m"),
 analytics: true,
 })
 : undefined;
 
 ...

// `/pages/api/generate.ts` continued
 
export default async function handler(
 req: ExtendedNextApiRequest,
 res: NextApiResponse<Data>
) {
 // Rate Limiter Code
 if (ratelimit) {
 const identifier = requestIp.getClientIp(req);
 const result = await ratelimit.limit(identifier!);
 res.setHeader("X-RateLimit-Limit", result.limit);
 res.setHeader("X-RateLimit-Remaining", result.remaining);
 
 if (!result.success) {
 res
 .status(429)
 .json("Too many uploads in 1 day. Please try again after 24 hours.");
 return;
 }
 }
 
 ...

बीएलआईपी एमएल एपीआई

// `/pages/api/generate.ts` continued
 
 const imageUrl = req.body.imageUrl;
 let startResponse = await fetch("https://api.replicate.com/v1/predictions", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 Authorization: "Token " + process.env.REPLICATE_API_KEY,
 },
 body: JSON.stringify({
 version:
 "2e1dddc8621f72155f24cf2e0adbde548458d3cab9f00c0139eea840d0ac4746",
 input: {
 image: imageUrl,
 task: "image_captioning",
 },
 }),
 });
 
 ...
 

// `/pages/api/generate.ts` continued
 
 let jsonStartResponse = await startResponse.json();
 let endpointUrl = jsonStartResponse.urls.get;
 
 // GET request to get the status of the image restoration process & return the result when it's ready
 let caption: string | null = null;
 while (!caption) {
 // Loop in 1s intervals until the alt text is ready
 console.log("polling for result...");
 let finalResponse = await fetch(endpointUrl, {
 method: "GET",
 headers: {
 "Content-Type": "application/json",
 Authorization: "Token " + process.env.REPLICATE_API_KEY,
 },
 });
 let jsonFinalResponse = await finalResponse.json();
 
 if (jsonFinalResponse.status === "succeeded") {
 caption = jsonFinalResponse.output;
 } else if (jsonFinalResponse.status === "failed") {
 break;
 } else {
 await new Promise((resolve) => setTimeout(resolve, 1000));
 }
 }
 res.status(200).json(caption ? caption : "Failed to generate caption");
}

निष्कर्ष