feat: frontend for ai uploads added back

Author: abhitrueprogrammer

src/app/api/ai-upload/route.ts

@@ -16,7 +16,7 @@ import type {
   ExamDetail,
   IAdminPaper,
 } from "@/interface";
-import { PaperAdmin } from "@/db/papers";
+import Paper, { PaperAdmin } from "@/db/papers";
 import axios from "axios";
 import processAndAnalyze from "@/util/gemini";
 import { examMap } from "./map";
@@ -30,17 +30,35 @@ cloudinary.v2.config({
 });
 type SemesterType = IAdminPaper["semester"]; // Extract the exam type from the IPaper interface
 
+const cloudinaryConfig1 = cloudinary.v2;
+cloudinaryConfig1.config({
+  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME_1,
+  api_key: process.env.CLOUDINARY_API_KEY_1,
+  api_secret: process.env.CLOUDINARY_SECRET_1,
+});
+
+const cloudinaryConfig2 = cloudinary.v2;
+cloudinaryConfig2.config({
+  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME_2,
+  api_key: process.env.CLOUDINARY_API_KEY_2,
+  api_secret: process.env.CLOUDINARY_SECRET_2,
+});
+const cloudinaryConfigs = [cloudinaryConfig1, cloudinaryConfig2];
+
 export async function POST(req: Request) {
   try {
     if (!process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET) {
       return NextResponse.json({ message: "ServerMisconfig" }, { status: 500 });
     }
+    const count: number = await Paper.countDocuments();
+    const configIndex = count % cloudinaryConfigs.length;
+    const selectedConfig = cloudinaryConfigs[configIndex];
+    cloudinary.v2.config(selectedConfig);
     const uploadPreset = process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET;
     const formData = await req.formData();
     const files: File[] = formData.getAll("files") as File[];
     const isPdf = formData.get("isPdf") === "true"; // Convert string to boolean
-
-
+    
     let imageURL = "";
     if (isPdf) {
       imageURL = formData.get("image") as string;
@@ -53,8 +71,9 @@ export async function POST(req: Request) {
     }
     const tags = await processAndAnalyze({ imageURL });
 
+    // console.log("Final tags:", tags);
+
     const finalTags = await setTagsFromCurrentLists(tags);
-    console.log("Final tags:", finalTags);
     const subject = finalTags["course-name"];
     const slot = finalTags.slot;
     const exam = finalTags["exam-type"];
@@ -150,6 +169,7 @@ export async function POST(req: Request) {
       .replace("upload", "upload/w_400,h_400,c_fill")
       .replace(/<img src='|'\s*\/>/g, "");
     const paper = new PaperAdmin({
+      cloudinary_index: configIndex,
       public_id_cloudinary,
       finalUrl,
       thumbnailUrl,

src/app/upload/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import React, { useState } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
@@ -8,26 +7,46 @@ import { Button } from "@/components/ui/button";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { type PostPDFToCloudinary } from "@/interface";
-import { slots, years, campuses, semesters, exams } from "@/components/select_options";
-import SearchBar from "@/components/searchbarSubjectList";
 import Dropzone from "react-dropzone";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+
+import { createCanvas } from "canvas";
+import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
+import { PDFDocument } from "pdf-lib";
+async function pdfToImage(file: File) {
+  GlobalWorkerOptions.workerSrc =
+    "https://unpkg.com/[email protected]/build/pdf.worker.min.js";
+
+  const pdfDoc = await PDFDocument.load(await file.arrayBuffer());
+
+  // Get the first page
+  const page = pdfDoc.getPages()[0];
+  if (!page) {
+    throw "First page not found";
+  }
+  // Create a canvas to render the image
+  const canvas = createCanvas(page.getWidth(), page.getHeight());
+  const context = canvas.getContext("2d");
+
+  // Use pdfjs-dist to render the page
+  const pdfjsDoc = await getDocument({ data: await file.arrayBuffer() })
+    .promise;
+  const pdfPage = await pdfjsDoc.getPage(1);
+
+  // Render page to canvas
+  const viewport = pdfPage.getViewport({ scale: 1 });
+  await pdfPage.render({ canvasContext: context, viewport }).promise;
+
+  // Convert the canvas to the desired output (Buffer, base64, etc.)
+  return canvas.toDataURL(); // Returns a Base64 string
+}
 
 const Page = () => {
-  const [slot, setSlot] = useState("");
-  const [subject, setSubject] = useState("");
-  const [exam, setExam] = useState("");
-  const [year, setYear] = useState("");
   const [campus, setCampus] = useState("Vellore");
-  const [semester, setSemester] = useState("");
+
+  const [files, setFiles] = useState<File[]>([]);
+
+  const [isUploading, setIsUploading] = useState(false);
+  const [, setResetSearch] = useState(false);
   function fileCheckAndSelect<T extends File>(acceptedFiles: T[]) {
     const maxFileSize = 5 * 1024 * 1024;
     const allowedFileTypes = [
@@ -77,91 +96,31 @@ const Page = () => {
       });
       return;
     }
-
-    const orderedFiles = files.sort((a, b) => {
+    const orderedFiles = acceptedFiles.sort((a, b) => {
       return a.lastModified - b.lastModified;
     });
     setFiles(orderedFiles);
     toast.success(`${orderedFiles.length} files selected!`, {
       id: toastId,
     });
   }
-  const [files, setFiles] = useState<File[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
-  const [resetSearch, setResetSearch] = useState(false);
-
   const handlePrint = async () => {
-    const maxFileSize = 5 * 1024 * 1024;
-    const allowedFileTypes = [
-      "application/pdf",
-      "image/jpeg",
-      "image/png",
-      "image/gif",
-    ];
-
-    if (!slot) {
-      toast.error("Slot is required");
-      return;
-    }
-    if (!subject) {
-      toast.error("Subject is required");
-      return;
-    }
-    if (!exam) {
-      toast.error("Exam is required");
-      return;
-    }
-    if (!year) {
-      toast.error("Year is required");
-      return;
-    }
     if (!campus) {
       setCampus("Vellore");
     }
 
-    if (!semester) {
-      toast.error("Semester is required");
-      return;
-    }
-    if (!files || files.length === 0) {
-      toast.error("No files selected");
-      return;
-    }
-
-    if (files.length > 5) {
-      toast.error("More than 5 files selected");
-      return;
-    }
-
-    // File validations
-    const invalidFiles = files.filter(
-      (file) =>
-        file.size > maxFileSize || !allowedFileTypes.includes(file.type),
-    );
-
-    if (invalidFiles.length > 0) {
-      toast.error(
-        `Some files are invalid. Ensure each file is below 5MB and of an allowed type (PDF, JPEG, PNG, GIF).`,
-      );
-      return;
-    }
-
     const isPdf = files.length === 1 && files[0]?.type === "application/pdf";
-    if (isPdf && files.length > 1) {
-      toast.error("PDFs must be uploaded separately");
-      return;
-    }
 
     // Prepare FormData
     const formData = new FormData();
     files.forEach((file) => {
       formData.append("files", file);
     });
-    formData.append("subject", subject);
-    formData.append("slot", slot);
-    formData.append("year", year);
-    formData.append("exam", exam);
-    formData.append("semester", semester);
+
+    if (isPdf && files[0]) {
+      formData.append("image", await pdfToImage(files[0]));
+    }
+    // formData.append("exam", exam);
     formData.append("campus", campus);
 
     formData.append("isPdf", String(isPdf));
@@ -170,18 +129,18 @@ const Page = () => {
 
     try {
       await toast.promise(
-        axios.post<PostPDFToCloudinary>("/api/upload", formData),
+        axios.post<PostPDFToCloudinary>("/api/ai-upload", formData),
         {
           loading: "Uploading papers...",
           success: "Papers uploaded successfully!",
           error: "Failed to upload papers. Please try again.",
         },
       );
 
-      setSlot("");
-      setSubject("");
-      setExam("");
-      setYear("");
+      // setSlot("");
+      // setSubject("");
+      // setExam("");
+      // setYear("");
       setFiles([]);
       setResetSearch(true);
       setTimeout(() => setResetSearch(false), 100);
@@ -199,104 +158,14 @@ const Page = () => {
       </div>
       <div className="2xl:my-15 flex flex-col items-center">
         <fieldset className="mb-4 w-[350px] rounded-lg border-2 border-gray-300 p-4 pr-8">
-          <legend className="text-lg font-bold">Select paper parameters</legend>
+          {/* <legend className="text-lg font-bold">Upload papers</legend> */}
 
           <div className="flex w-full flex-col 2xl:gap-y-4">
-            {/* Slot Selection */}
-            <div>
-              <label>Slot:</label>
-              <Select value={slot} onValueChange={setSlot}>
-                <SelectTrigger className="m-2 rounded-md border p-2">
-                  <SelectValue placeholder="Select slot" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Slots</SelectLabel>
-                    {slots.map((slot) => (
-                      <SelectItem key={slot} value={slot}>
-                        {slot}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Exam Selection */}
-            <div>
-              <label>Exam:</label>
-              <Select value={exam} onValueChange={setExam}>
-                <SelectTrigger className="m-2 rounded-md border p-2">
-                  <SelectValue placeholder="Select exam" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Exams</SelectLabel>
-                    {exams.map((exam) => (
-                      <SelectItem key={exam} value={String(exam)}>
-                        {exam}
-                      </SelectItem>
-                    ))}{" "}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Subject Selection */}
-            <div>
-              <label>Subject:</label>
-              <SearchBar setSubject={setSubject} resetSearch={resetSearch} />
-            </div>
-
-            {/* Year Selection */}
-            <div>
-              <label>Year:</label>
-              <Select value={year} onValueChange={setYear}>
-                <SelectTrigger className="m-2 rounded-md border p-2">
-                  <SelectValue placeholder="Select year" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Years</SelectLabel>
-                    {years.map((year) => (
-                      <SelectItem key={year} value={String(year)}>
-                        {year}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Year Selection */}
-
-            <div>
-              <label>Semester Selection:</label>
-              <Select value={semester} onValueChange={setSemester}>
-                <SelectTrigger className="m-2 rounded-md border p-2">
-                  <SelectValue placeholder="Select semester" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Semester</SelectLabel>
-                    {semesters.map((semester) => (
-                      <SelectItem key={semester} value={String(semester)}>
-                        {semester}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
             {/* File Dropzone */}
             <div>
-              <Dropzone
-                onDrop={(acceptedFiles) => setFiles(acceptedFiles)}
-                accept={{ "image/*": [], "application/pdf": [] }}
-              >
+              <Dropzone onDrop={fileCheckAndSelect}>
                 {({ getRootProps, getInputProps }) => (
-                  <section className="my-2 -mr-2 rounded-2xl border-2 border-dashed p-8 text-center">
+                  <section className="my-2 -mr-2 cursor-pointer rounded-2xl border-2 border-dashed p-8 text-center">
                     <div {...getRootProps()}>
                       <input {...getInputProps()} />
                       <p>