Merge pull request #10 from raibove/improve-algo-and-ux

improve algo
raibove · May 2, 2024 · c51eaca · c51eaca
2 parents 4e342e9 + 98cfc20
commit c51eaca
Show file tree

Hide file tree

Showing 9 changed files with 457 additions and 51 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Fabify</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "fabify",
   "private": true,
   "version": "0.0.0",
+  "author": "Shweta Kale",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/component/cards/index.tsx b/src/component/cards/index.tsx
@@ -1,19 +1,37 @@
-import { DetailClothing } from "../../utils";
+import { Clothing, DetailClothing } from "../../utils";
 // import {Link} from 'react-router-dom';
 import './styles.css';
 
 interface Props {
     outfit: DetailClothing;
+    selectedItem: Clothing;
 }
 
-const Card = ({ outfit }: Props) => {
+const Card = ({ outfit, selectedItem }: Props) => {
+
+    const getHref = (): string => {
+        let href = `https://www.google.com/search?tbm=isch&q=${outfit.color}+${outfit.item}`;
+        href += ` on ${selectedItem.color} ${selectedItem.item}` 
+
+        if(selectedItem.for) {
+            if(selectedItem.for.includes('women')){
+                href += ' for women'; 
+            }else if(selectedItem.for.includes('men')){
+                href += ' for men'; 
+            }
+        }
+
+
+        return href;
+    }
+
     return (
-        <div className="product-card">
+        <div className="product-card" key={outfit.color+outfit.item}>
             <div className="card-content">
                 <h3 className="title">{outfit.color} {outfit.item}</h3>
                 <p className="description">Design: {outfit.design}, {outfit.material}</p>
                 <p>{outfit.additionalDetail}</p>
-                <a href={`https://www.google.com/search?tbm=isch&q=${outfit.color}+${outfit.item}`} target='_blank' >
+                <a href={getHref()} target='_blank' >
                     <button className="explore-button">Explore</button>
                 </a>
             </div>

diff --git a/src/component/cards/styles.css b/src/component/cards/styles.css
@@ -5,7 +5,7 @@
     transition: box-shadow 0.3s ease;
     margin-bottom: 20px;
     width: 100%;
-    max-width: 400px;
+    max-width: 340px;
   }
 
   .product-card:hover {

diff --git a/src/component/input-modal/index.tsx b/src/component/input-modal/index.tsx
@@ -39,7 +39,7 @@ const InputModal: React.FC = () => {
     setStep('result')
   };
 
-  const selectNextDisabled = loading || selectedClothIndex===-1;
+  const selectNextDisabled = loading || selectedClothIndex === -1;
 
   return (
     <div className="app-container">
@@ -60,34 +60,44 @@ const InputModal: React.FC = () => {
               {clothesInImg.map((cloth, index) => (
                 <div key={index} style={{ cursor: 'pointer' }}>
                   <label style={{ color: 'black', cursor: 'pointer' }}>
-                  <input 
-                  type='radio' 
-                  value={index}
-                  checked={selectedClothIndex === index}
-                  onChange={()=>{
-                    setSelectedClothIndex(index);
-                  }}
-                  />
-                  {cloth.item}
+                    <input
+                      type='radio'
+                      value={index}
+                      checked={selectedClothIndex === index}
+                      onChange={() => {
+                        setSelectedClothIndex(index);
+                      }}
+                    />
+                    {cloth.item}
                   </label>
                 </div>)
               )}
             </div>
-            <button className="next-button" onClick={handleNext} disabled={selectNextDisabled} style={{cursor: selectNextDisabled? 'no-drop' : 'pointer'}}>Next</button>
+            <button className="next-button" onClick={handleNext} disabled={selectNextDisabled} style={{ cursor: selectNextDisabled ? 'no-drop' : 'pointer' }}>Next</button>
           </>
         )
       }
       {
         step === 'result' && (
           <div>
-            <h2 className='recommendation-title'>Here are some reccomendations that will go well with your <em>{clothesInImg[selectedClothIndex].color} {clothesInImg[selectedClothIndex].item}</em></h2>
-          <div style={{display:'flex', flexWrap: 'wrap', gap: '50px', justifyContent: 'center'}}>
-            {
-              complementOutfit.map((outfit)=> (
-                <Card outfit={outfit} />
-              ))
-            }
-          </div>
+            <h2 className='recommendation-title'>Here are some suggestions for items that will complement your <em>{clothesInImg[selectedClothIndex].color} {clothesInImg[selectedClothIndex].item}</em></h2>
+            <div className='card-container'>
+              {
+                complementOutfit.map((outfit) => (
+                  <Card outfit={outfit} selectedItem={clothesInImg[selectedClothIndex]} />
+                ))
+              }
+            </div>
+            <div style={{ margin: '20px 80px 80px 80px' }}
+            onClick={()=>{
+              setStep('upload');
+              setClothesInImg([])
+              setSelectedClothIndex(-1)
+              setComplementOutfit([])
+            }}
+            >
+              <button className="start-again-button">Start Again</button>
+            </div>
           </div>
         )
       }

diff --git a/src/component/input-modal/style.css b/src/component/input-modal/style.css
@@ -80,13 +80,39 @@
   border-color: #ccc transparent;
 }
 
-.recommendation-title{
+.recommendation-title {
   color: black;
   font-weight: 400;
   font-size: 25px;
   text-align: center;
 }
 
+.start-again-button {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #000000;
+  border-radius: 0.25rem;
+  background-color: #000;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.start-again-button:hover {
+  background-color: transparent;
+  color: #000;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap; 
+  column-gap: 50px; 
+  row-gap: 25px;
+  justify-content:center;
+}
+
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0);
@@ -95,5 +121,4 @@
   100% {
     -webkit-transform: rotate(-360deg);
   }
-}
-
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -50,14 +50,13 @@ export async function run(input: string) {
     const base64Image2 = await loadImageAsBuffer('./image2.jpg');
     const base64Image3 = await loadImageAsBuffer('./image3.png');
     const base64Image4 = await loadImageAsBuffer('./image4.png');
-    const base64Image5 = await loadImageAsBuffer('./image4.png');
-    const base64Image6 = await loadImageAsBuffer('./image4.png');
-    const base64Image7 = await loadImageAsBuffer('./image4.png');
-    const base64Image8 = await loadImageAsBuffer('./image4.png');
-    const base64Image9 = await loadImageAsBuffer('./image4.png');
-    const base64Image10 = await loadImageAsBuffer('./image4.png');
-    const base64Image11 = await loadImageAsBuffer('./image4.png');
-    const base64Image12 = await loadImageAsBuffer('./image4.png');
+    const base64Image5 = await loadImageAsBuffer('./image5.png');
+    const base64Image6 = await loadImageAsBuffer('./image6.png');
+    const base64Image7 = await loadImageAsBuffer('./image7.png');
+    const base64Image8 = await loadImageAsBuffer('./image8.png');
+    const base64Image9 = await loadImageAsBuffer('./image9.png');
+    const base64Image10 = await loadImageAsBuffer('./image10.png');
+    const base64Image11 = await loadImageAsBuffer('./image11.png');
 
     const generationConfig = {
         temperature: 0.9,
@@ -86,7 +85,7 @@ export async function run(input: string) {
     ];
 
 
-    const parts : Part[]= [
+    const parts: Part[] = [
         { text: "Extract the clothes in the provided image along with color, material used.\nEach outfit option should include details such as the item name, color, material.\nAlways give JSON array as output.\n\n\nIf it does not contain any clothes return empty array." },
         { text: "Image: " },
         {
@@ -95,15 +94,15 @@ export async function run(input: string) {
                 data: base64Image0
             }
         },
-        { text: "List of Clothes: [{\nitem: shirt,\ncolor: red,\nmaterial: cotton\n},\n{\nitem: pants,\ncolor: black,\nmaterial: polyster / cotton\n},\n{\nitem: belt,\ncolor: brown,\nmaterial: leather\n}]" },
+        { text: "List of Clothes: [{\nitem: shirt,\ncolor: red,\nmaterial: cotton,\nfor: men\n},\n{\nitem: pants,\ncolor: black,\nmaterial: polyster / cotton,\nfor: men\n},\n{\nitem: belt,\ncolor: brown,\nmaterial: leather,\nfor: men\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image1
             }
         },
-        { text: "List of Clothes: [{\nitem: kurti,\ncolor: orange,\nmaterial: cotton embroidery\n}]" },
+        { text: "List of Clothes: [{\nitem: kurti,\ncolor: orange,\nmaterial: cotton embroidery,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
@@ -119,71 +118,71 @@ export async function run(input: string) {
                 data: base64Image3
             }
         },
-        { text: "List of Clothes: [{item: plazzo, \ncolor: green,\nmaterial: crepe\n}]" },
+        { text: "List of Clothes: [{item: plazzo, \ncolor: green,\nmaterial: crepe,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image4
             }
         },
-        { text: "List of Clothes: [{\nitem: shorts,\ncolor: white, \nmaterial: polyester\n}]" },
+        { text: "List of Clothes: [{\nitem: shorts,\ncolor: white, \nmaterial: polyester,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image5
             }
         },
-        { text: "List of Clothes: [{\ncolor: gold,\nitem: blouse,\nmaterial: net\n}]" },
+        { text: "List of Clothes: [{\ncolor: gold,\nitem: blouse,\nmaterial: net,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image6
             }
         },
-        { text: "List of Clothes: [{\nitem: sherwani,\ncolor: off white,\nmaterial: art silk\n}, \n{\nitem: dupatta,\ncolor: marron,\nmaterial: silk\n},\n{\nitem: salwar,\ncolor: marron,\nmaterial: silk\n}]" },
+        { text: "List of Clothes: [{\nitem: sherwani,\ncolor: off white,\nmaterial: art silk,\nfor: men\n}, \n{\nitem: dupatta,\ncolor: marron,\nmaterial: silk,\nfor: men\n},\n{\nitem: salwar,\ncolor: marron,\nmaterial: silk,\nfor: men\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image7
             }
         },
-        { text: "List of Clothes: [{\nitem: skirt, \ncolor: blue, \nmaterial: scuba\n}]" },
+        { text: "List of Clothes: [{\nitem: skirt, \ncolor: blue, \nmaterial: scuba,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image8
             }
         },
-        { text: "List of Clothes: [{\ncolor: white and green,\nitem: crop top,\nmaterial: crepe\n},\n{\nitem: maxi skirt,  \ncolor: white, \nmaterial: crepe\n}]" },
+        { text: "List of Clothes: [{\ncolor: white and green,\nitem: crop top,\nmaterial: crepe,\nfor: women\n},\n{\nitem: maxi skirt,  \ncolor: white, \nmaterial: crepe,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image9
             }
         },
-        { text: "List of Clothes: [{\nitem: t-shirt,\ncolor: yellow,\nmaterial: cotton\n}]" },
+        { text: "List of Clothes: [{\nitem: t-shirt,\ncolor: yellow,\nmaterial: cotton,\nfor: men\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image10
             }
         },
-        { text: "List of Clothes: [{\nitem: skirt,\ncolor: brown,\nmaterial: cotton\n}]" },
+        { text: "List of Clothes: [{\nitem: skirt,\ncolor: brown,\nmaterial: cotton,\nfor: women\n}]" },
         { text: "Image: " },
         {
             inlineData: {
                 mimeType: "image/png",
                 data: base64Image11
             }
         },
-        { text: "List of Clothes: [{\nitem: trench coat,\ncolor: brown,\nmaterial: wool\n},\n{\nitem: pants,\ncolor: beige,\nmaterial: cotton\n},\n{\nitem: shoes,\ncolor: black,\nmaterial: leather\n}]" },
+        { text: "List of Clothes: [{\nitem: trench coat,\ncolor: brown,\nmaterial: wool,\nfor: men\n},\n{\nitem: pants,\ncolor: beige,\nmaterial: cotton,\nfor: men\n},\n{\nitem: shoes,\ncolor: black,\nmaterial: leather,\nfor: men\n}]" },
         { text: "Image: " },
         {
             inlineData: {
@@ -209,6 +208,7 @@ export interface Clothing {
     item: string;
     color: string;
     material: string;
+    for?: string;
 }
 
 export interface DetailClothing extends Clothing {
@@ -232,12 +232,14 @@ export const parseClothingData = (input: string): Clothing[] => {
             const itemMatch = match.match(/item: ([^,]+)/);
             const colorMatch = match.match(/color: ([^,]+)/);
             const materialMatch = match.match(/material: ([^,]+)/);
+            const forMatch = match.match(/for: ([^,]+)/)
 
             if (itemMatch && colorMatch && materialMatch) {
                 clothingArray.push({
                     item: itemMatch[1].trim(),
                     color: colorMatch[1].trim(),
-                    material: materialMatch[1].trim()
+                    material: materialMatch[1].trim(),
+                    for: forMatch ? forMatch[1].trim() : ''
                 });
             }
         });