Spaces:

enzostvs
/

hair-colour

Runtime error

App Files Files Community

Esteves Enzo commited on Oct 20, 2023

Commit

7faf18e

•

1 Parent(s): b5624f0

pass URL

Browse files

Files changed (6) hide show

app/api/check-hair-color/route.ts +2 -1
app/layout.tsx +1 -1
app/page.tsx +1 -1
components/form/hook.ts +2 -1
components/form/index.tsx +7 -5
components/header.tsx +3 -2

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

@@ -6,11 +6,12 @@ export async function POST(request: Request) {
   const res = await request.formData();
   const file = res.get('file');
   const classifier: any = await PipelineSingleton.getInstance();
   if (!classifier) {
     return Response.json({ success: false })
   }
-  const result = await classifier("https://www.international.gc.ca/world-monde/assets/images/issues_development-enjeux_developpement/gender_equality-egalite_des_genres/jacqueline_oneill.jpg", { topk: 4 });
   return Response.json({ data: result })
 }

   const res = await request.formData();
   const file = res.get('file');
   const classifier: any = await PipelineSingleton.getInstance();
   if (!classifier) {
     return Response.json({ success: false })
   }
+  const result = await classifier(file, { topk: 4 });
   return Response.json({ data: result })
 }

app/layout.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <div id="background__noisy" />
-        <main className="min-h-screen max-w-2xl mx-auto flex-col gap-4 flex relative justify-center">
           <Header />
           {children}
           <div className="absolute -bottom-0 w-full blur-[240px] bg-gradient-to-r h-[300px] from-indigo-600 to-teal-400 rounded-t-full -z-[1]" />

     <html lang="en">
       <body className={inter.className}>
         <div id="background__noisy" />
+        <main className="min-h-screen max-w-2xl mx-auto flex-col gap-4 flex relative justify-center px-6">
           <Header />
           {children}
           <div className="absolute -bottom-0 w-full blur-[240px] bg-gradient-to-r h-[300px] from-indigo-600 to-teal-400 rounded-t-full -z-[1]" />

app/page.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ export default function Home() {
           <div className="w-3 h-3 bg-indigo-500 rounded-full" />
           <div className="w-3 h-3 bg-teal-500 rounded-full" />
         </header>
-        <main className="flex justify-between gap-6 p-6">
           <FormUpload />
         </main>
       </div>

           <div className="w-3 h-3 bg-indigo-500 rounded-full" />
           <div className="w-3 h-3 bg-teal-500 rounded-full" />
         </header>
+        <main className="flex flex-col-reverse lg:flex-row justify-between gap-6 p-6">
           <FormUpload />
         </main>
       </div>

components/form/hook.ts CHANGED Viewed

@@ -4,10 +4,11 @@ export const useClassifier = () => {
   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
-  const submit = async (file: File) => {
     if (file && !loading) {
       setLoading(true);
       const formData = new FormData();
       formData.append("file", file);
       const res = await fetch("/api/check-hair-color", {
         method: "POST",

   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
+  const submit = async (file: string) => {
     if (file && !loading) {
       setLoading(true);
       const formData = new FormData();
       formData.append("file", file);
       const res = await fetch("/api/check-hair-color", {
         method: "POST",

components/form/index.tsx CHANGED Viewed

@@ -9,13 +9,15 @@ 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 handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      setFile(file);
     }
   };
@@ -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)})`,
               }}
             >
               <div
@@ -57,7 +59,7 @@ export const FormUpload = () => {
         </div>
         <button
           className={classNames(
-            "text-white rounded-md px-4 text-sm py-2 mt-4 w-full bg-gradient-to-b from-slate-800 to-slate-800/50 shadow-lg transition-all duration-200",
             {
               "opacity-50 cursor-not-allowed": !file,
               "hover:scale-[103%]": file,
@@ -75,7 +77,7 @@ export const FormUpload = () => {
           onChange={handleUpload}
         />
       </div>
-      <div className="w-[1px] bg-slate-500/30"></div>
       {loading ? (
         <div className="w-full flex-col flex items-center justify-center">
           <p className="text-slate-600 animate-pulse">Loading...</p>

 export const FormUpload = () => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = React.useState<string | null>(null);
   const { loading, results, submit } = useClassifier();
   const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      const file_url = URL.createObjectURL(file);
+      setFile(file_url);
     }
   };
             <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(${file})`,
               }}
             >
               <div
         </div>
         <button
           className={classNames(
+            "text-white rounded-lg px-4 text-sm py-2 mt-4 w-full bg-gradient-to-b from-slate-800 to-slate-800/50 shadow-lg transition-all duration-200",
             {
               "opacity-50 cursor-not-allowed": !file,
               "hover:scale-[103%]": file,
           onChange={handleUpload}
         />
       </div>
+      <div className="hidden lg:block w-[1px] bg-slate-500/30"></div>
       {loading ? (
         <div className="w-full flex-col flex items-center justify-center">
           <p className="text-slate-600 animate-pulse">Loading...</p>

components/header.tsx CHANGED Viewed

@@ -4,14 +4,15 @@ import HuggingFaceLogo from "@/assets/hf-logo.svg";
 export const Header = () => {
   return (
-    <nav className="py-4 w-full flex items-center justify-between gap-4">
       <Image
         src={HuggingFaceLogo}
         alt="Hugging Face Logo"
         width={50}
         height={50}
       />
-      <p className="text-xl text-white font-bold lowercase tracking-wider">
         What hair color is it?
       </p>
     </nav>

 export const Header = () => {
   return (
+    <nav className="py-4 w-full flex flex-col lg:flex-row items-center justify-between gap-4">
       <Image
         src={HuggingFaceLogo}
         alt="Hugging Face Logo"
         width={50}
         height={50}
+        className="w-[80px] h-[80px] lg:w-[50px] lg:h-[50px]"
       />
+      <p className="text-2xl lg:text-xl text-white font-bold tracking-wider">
         What hair color is it?
       </p>
     </nav>