update style + method to send file

app/api/check-hair-color/route.ts

@@ -1,22 +1,18 @@
 import fs from 'fs';
 
 import PipelineSingleton from './pipeline';
+import { RawImage } from '@xenova/transformers';
 
 export async function POST(request: Request) {
   const res = await request.formData();
-  const file = res.get('file') as File;
+  const file = res.get('file') as Blob;
 
   const classifier: any = await PipelineSingleton.getInstance();
   if (!classifier) {
     return Response.json({ success: false })
   }
-
-  // convert file object to buffer
-  const fileBuffer = await file.arrayBuffer();
-  // convert buffer to url data
-  const fileData = Buffer.from(fileBuffer).toString('base64');
-  const fileUrl = `data:${file.type};base64,${fileData}`;
-  console.log(fileUrl);
-  const result = await classifier(fileUrl, { topk: 4 });
+  // read blob as data url
+  const file_url = await RawImage.fromBlob(file)
+  const result = await classifier(file_url, { topk: 4 });
   return Response.json({ data: result })
 }

components/form/hook.ts

@@ -9,7 +9,9 @@ export const useClassifier = () => {
       setLoading(true);
       const formData = new FormData();
       
-      formData.append("file", file);
+      const fileToBlob = new Blob([file], { type: file.type });
+
+      formData.append("file", fileToBlob);
       const res = await fetch("/api/check-hair-color", {
         method: "POST",
         body: formData,
@@ -20,9 +22,12 @@ export const useClassifier = () => {
     setLoading(false);
   }
 
+  const reset = () => setResults([]);
+
   return {
     results,
     loading,
-    submit
+    submit,
+    reset
   }
 }

components/form/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useMemo } from "react";
 import { useRef } from "react";
 import { TiUpload, TiTrash } from "react-icons/ti";
 
@@ -10,7 +10,7 @@ import { useClassifier } from "./hook";
 export const FormUpload = () => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = React.useState<File | null>(null);
-  const { loading, results, submit } = useClassifier();
+  const { loading, results, submit, reset } = useClassifier();
 
   const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -19,6 +19,8 @@ export const FormUpload = () => {
     }
   };
 
+  const fileUrl = useMemo(() => file && URL.createObjectURL(file), [file]);
+
   return (
     <>
       <div className="w-full">
@@ -32,7 +34,7 @@ export const FormUpload = () => {
             <div
               className="w-full h-full bg-slate-900 mx-auto rounded-xl relative bg-cover bg-center flex items-start justify-end p-3 gap-2"
               style={{
-                backgroundImage: `url(${URL.createObjectURL(file)})`,
+                backgroundImage: `url(${fileUrl})`,
               }}
             >
               <div
@@ -41,6 +43,7 @@ export const FormUpload = () => {
                   e.stopPropagation();
                   e.preventDefault();
                   setFile(null);
+                  reset();
                 }}
               >
                 <TiTrash className="w-6 h-6 text-slate-700 group-hover:text-red-600 mx-auto" />

components/form/main_color.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+
+import { ResultsInterface } from "./results";
+
+export const MainColor = ({ result }: { result: ResultsInterface }) => {
+  const mainColor = useMemo(() => {
+    switch (result.label) {
+      case "black hair":
+        return "#000000";
+      case "blond hair":
+        return "#ffcc00";
+      case "brown hair":
+        return "#663300";
+      case "white hair":
+        return "#cccccc";
+      case "red hair":
+        return "#ff6600";
+      case "completely bald":
+        return "transparent";
+    }
+  }, [result]);
+
+  return (
+    <div className="flex items-center justify-between">
+      <p className="text-slate-400 text-sm font-semibold capitalize">
+        {result.label}
+      </p>
+      <div
+        className="w-[20px] h-[20px] rounded-full border border-slate-950 ring-[1px] ring-slate-400"
+        style={{
+          backgroundColor: mainColor,
+        }}
+      />
+    </div>
+  );
+};

components/form/progress.tsx

@@ -0,0 +1,22 @@
+import { ResultsInterface } from "./results";
+
+export const Progress = ({ result }: { result: ResultsInterface }) => {
+  return (
+    <div key={result.label}>
+      <div className="flex items-center justify-between border-b border-dashed border-slate-500/20 pb-1">
+        <p className="text-slate-400 font-medium text-xs">{result.label}</p>
+        <p className="text-slate-300 font-bold text-xs">
+          {(result.score * 100).toFixed(3)}%
+        </p>
+      </div>
+      <div className="w-full h-1.5 rounded-full bg-slate-700 mt-2">
+        <div
+          className="bg-gradient-to-r from-indigo-600 to-teal-500 h-full blur-[1px] rounded-full"
+          style={{
+            width: `${result.score * 100}%`,
+          }}
+        ></div>
+      </div>
+    </div>
+  );
+};

components/form/results.tsx

@@ -1,12 +1,21 @@
 import Image from "next/image";
+import { useMemo, useState } from "react";
+import { TbChevronDown } from "react-icons/tb";
+import classNames from "classnames";
 
 import HFSad from "@/assets/hfsad.svg";
-interface ResultsInterface {
+
+import { Progress } from "./progress";
+import { MainColor } from "./main_color";
+
+export interface ResultsInterface {
   label: string;
   score: number;
 }
 
 export const Results = ({ results }: { results: ResultsInterface[] }) => {
+  const primaryResult = useMemo(() => results[0], [results]);
+
   return (
     <div className="w-full flex-col flex gap-5">
       {results?.length > 0 ? (
@@ -14,25 +23,12 @@ export const Results = ({ results }: { results: ResultsInterface[] }) => {
           <p className="text-white font-bold text-xl text-center uppercase tracking-widest">
             Results
           </p>
-          {results?.map((result) => (
-            <div key={result.label}>
-              <div className="flex items-center justify-between border-b border-dashed border-slate-500/20 pb-1">
-                <p className="text-slate-400 font-medium text-xs">
-                  {result.label}
-                </p>
-                <p className="text-slate-300 font-bold text-xs">
-                  {(result.score * 100).toFixed(3)}%
-                </p>
-              </div>
-              <div className="w-full h-1.5 rounded-full bg-slate-700 mt-2">
-                <div
-                  className="bg-gradient-to-r from-indigo-600 to-teal-500 h-full blur-[1px] rounded-full"
-                  style={{
-                    width: `${result.score * 100}%`,
-                  }}
-                ></div>
-              </div>
-            </div>
+          <MainColor result={primaryResult} />
+          <p className="text-slate-600 text-left uppercase text-xs font-semibold">
+            Details
+          </p>
+          {results?.slice(1, results.length)?.map((result) => (
+            <Progress result={result} key={result.label} />
           ))}
         </>
       ) : (