diff --git a/index.html b/index.html index e4b78ea..dcf5fd8 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Fabify
diff --git a/package.json b/package.json index aabc8d3..676927b 100644 --- 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 new file mode 100644 index 0000000..7610786 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,351 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + Pattern F / V + 2013-08-06T07:40:34 + This is a F letter set into an embedded line-art graphic. Created from scratch + https://openclipart.org/detail/181570/pattern-f--v-by-cibo00-181570 + + + cibo00 + + + + + This is a F letter set into an embedded line-art graphic. Created from scratch + + + + + + + + + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/component/cards/index.tsx b/src/component/cards/index.tsx index 9d5951f..3a0c1a7 100644 --- 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 ( -
+

{outfit.color} {outfit.item}

Design: {outfit.design}, {outfit.material}

{outfit.additionalDetail}

- +
diff --git a/src/component/cards/styles.css b/src/component/cards/styles.css index 1367f77..ea7c248 100644 --- 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 index b4d0f07..8af7804 100644 --- 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 (
@@ -60,34 +60,44 @@ const InputModal: React.FC = () => { {clothesInImg.map((cloth, index) => (
) )}
- + ) } { step === 'result' && (
-

Here are some reccomendations that will go well with your {clothesInImg[selectedClothIndex].color} {clothesInImg[selectedClothIndex].item}

-
- { - complementOutfit.map((outfit)=> ( - - )) - } -
+

Here are some suggestions for items that will complement your {clothesInImg[selectedClothIndex].color} {clothesInImg[selectedClothIndex].item}

+
+ { + complementOutfit.map((outfit) => ( + + )) + } +
+
{ + setStep('upload'); + setClothesInImg([]) + setSelectedClothIndex(-1) + setComplementOutfit([]) + }} + > + +
) } diff --git a/src/component/input-modal/style.css b/src/component/input-modal/style.css index 4033c18..3dc10fd 100644 --- 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); } -} - +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index ed1c60e..04f4bb6 100644 --- 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,7 +94,7 @@ 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: { @@ -103,7 +102,7 @@ export async function run(input: string) { 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,7 +118,7 @@ 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: { @@ -127,7 +126,7 @@ export async function run(input: string) { 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: { @@ -135,7 +134,7 @@ export async function run(input: string) { 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: { @@ -143,7 +142,7 @@ export async function run(input: string) { 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: { @@ -151,7 +150,7 @@ export async function run(input: string) { 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: { @@ -159,7 +158,7 @@ export async function run(input: string) { 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: { @@ -167,7 +166,7 @@ export async function run(input: string) { 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: { @@ -175,7 +174,7 @@ export async function run(input: string) { 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: { @@ -183,7 +182,7 @@ export async function run(input: string) { 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() : '' }); } });