Crop and Seek：高度な動画検索を体験

import { NextRequest, NextResponse } from "next/server";
import axios from "axios";
import FormData from "form-data";


export const runtime = "nodejs";


export async function POST(request) {
 try {
   const formData = await request.formData();
   const apiKey = process.env.TWELVELABS_API_KEY;
   const indexId = process.env.TWELVELABS_INDEX_ID;


   if (!apiKey || !indexId) {
     return NextResponse.json(
       { error: "API key or Index ID is not set" },
       { status: 500 }
     );
   }


   const searchDataForm = new FormData();
   searchDataForm.append("search_options", "visual");
   searchDataForm.append("adjust_confidence_level", "0.55");
   searchDataForm.append("group_by", "clip");
   searchDataForm.append("threshold", "medium");
   searchDataForm.append("sort_option", "score");
   searchDataForm.append("page_limit", "12");
   searchDataForm.append("index_id", indexId);
   searchDataForm.append("query_media_type", "image");


   const imgQuery = formData.get("query");
   const imgFile = formData.get("file");


   if (imgQuery) {
     searchDataForm.append("query_media_url", imgQuery);
   } else if (imgFile && imgFile instanceof Blob) {
     const buffer = Buffer.from(await imgFile.arrayBuffer());
     searchDataForm.append("query_media_file", buffer, imgFile.name);
   } else {
     return NextResponse.json(
       { error: "No query or file provided" },
       { status: 400 }
     );
   }


   const formDataHeaders = searchDataForm.getHeaders();
   const url = "https://api.twelvelabs.io/v1.2/search-v2";


   const response = await axios.post(url, searchDataForm, {
     headers: {
       ...formDataHeaders,
       accept: "application/json",
       "x-api-key": `${apiKey}`,
     },
   });


   const imageResult = response.data;


   if (!imageResult || !imageResult.data) {
     return NextResponse.json(
       { error: "Error getting response from the API" },
       { status: 500 }
     );
   }


   const searchData = imageResult.data;
   const pageInfo = imageResult.page_info || {};


   return NextResponse.json({ pageInfo, searchData });
 } catch (error) {
   console.error("Error in POST handler:", error?.response?.data || error);
   const status = error?.response?.status || 500;
   const message = error?.response?.data?.message || error.message;


   return NextResponse.json({ error: message }, { status });
 }
}

** Configures the drag-and-drop area for image uploads, handling accepted and rejected files */
 const { getRootProps, getInputProps, isDragAccept } = useDropzone({
   // Specify the types of image files that are allowed
   accept: acceptedImageTypes,
   // Set the maximum file size for uploads (5MB)
   maxSize: MAX_IMAGE_SIZE,
   // Ensure only one file can be uploaded at a time
   multiple: false,
     onDragEnter: () => {
     setErrorCode(undefined);  // Clear any existing error messages 
   },
   onDropAccepted: (files) => {
     handleImgSubmit(files[0]); // Submit the file
     closeModal(); // Close the modal
   },
   // Handle the event when an invalid file is dropped
   onDropRejected: (fileRejections) => {
     // Get the error code for why the file was rejected
     const code = fileRejections[0]?.errors?.[0]?.code;
     if (code) setErrorCode(code);
   },
 });

<Input
         className="h-10 border-r-0"
         fullWidth
         placeholder="Drop an image address (not link address)"
         icon={<InsertLink className="text-grey-600" fontSize="small" />}
         value={imageUrlFromInput}
         onSelect={(e) => {
               e.stopPropagation();
             }}
         onChange={(e) => {
               setImageUrlFromInput(e.target.value);
             }}
         onClear={() => setImageUrlFromInput("")}
         type="text"
           />
      <Button
         type="button"
         appearance="primary"
         onClick={handleImageUrl}
         disabled={!imageUrlFromInput}

/** Validates the input URL and submits the image if valid */
 const handleImageUrl = () => {
   try {
     const trimmedUrl = imageUrlFromInput
       .trim()
       .replace(/(\.jpg|\.jpeg|\.png).*/i, "$1");
     const isImage =
       /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(trimmedUrl) ||
       /f=image|f=auto/.test(trimmedUrl);
     if (!isImage) {
       setErrorCode("invalid-url");
       return;
     }
     handleImgSubmit(trimmedUrl);
     closeModal();
   } catch (e) {
     setErrorCode("invalid-url");
   }
 };

/** Set image name and query src  */
 const handleImgSubmit = async (src) => {
    // Reset states
   setImgQuery(null);
   setUpdatedSearchData({ searchData: [], pageInfo: {} });
   setTextSearchSubmitted(false);


    // Extract image name from src (URL or File)	
   setImgName(typeof src === "string" ? src.split("/").pop() : src.name);
    // Set new image query
   setImgQuery(src);
 };

/** Sends a request to the server to fetch image search results */
 const fetchImgSearchResults = async (imagePath) => {
   // Create a new FormData object to send data to the server
   const formData = new FormData();


   if (imagePath instanceof File) {
     // If the image is a File, append it to FormData with the key "file"
     formData.append("file", imagePath);
   } else {
     // If it's not a File, append it with the key "query"
     formData.append("query", imagePath);
   }


   // Send a POST request to the server's image search API
   const response = await fetch("/api/imgSearch", {
     method: "POST",
     body: formData,
   });


   if (!response.ok) {
     const errorData = await response.json();
     throw new Error(errorData.error || "Network response was not ok");
   }


   return response.json();
 };

/** Handles the cropping of an image, converts the crop to a File, and updates state with the cropped image */
 const onCropSearchClick = async () => {
   if (completedCrop && imgRef.current) {
     try {
       // Step 1: Get the cropped image as a base64 string
       const base64Image = await getCroppedImage(
         imgRef.current,
         completedCrop
       );


       // Step 2: Convert the base64 string to a File object
       const croppedImageFile = await base64ToFile(
         base64Image,
         `${imgName}-cropped`
       );


       // Step 3: Update state and close modal 
       if (croppedImageFile) {
         // Update the image query with the new cropped image File
         setImgQuery(croppedImageFile);
         // Update the image name to reflect the cropped version
         setImgName(croppedImageFile.name);
         // Close the crop modal
         closeDisplayModal();
       }
     } catch (error) {
       console.error("Error processing image:", error);
     }
   } else {
     console.warn("No completed crop or imgRef.current is null");
   }
 };