Merge pull request #4 from raibove/update-algo-and-copy

Update algo and copy

.env.template

@@ -1,3 +1,3 @@
-VITE_MODEL_NAME=""
+VITE_MODEL_NAME="gemini-1.0-pro-vision-latest"
 VITE_API_KEY=""
-VITE_COMPLEMENT_OUTFIT_MODEL=""
+VITE_COMPLEMENT_OUTFIT_MODEL="gemini-1.5-pro-latest"

License

@@ -0,0 +1,7 @@
+Copyright 2024 Shweta Kale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,30 +1,45 @@
-# React + TypeScript + Vite
+# Fabify
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Fabify analyze uploaded photos of clothing items and provide you with recommendations for complementary pieces to complete your outfit. Whether you're looking for style inspiration or need help coordinating your wardrobe, Fabify has got you covered!
 
-Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Features
+- AI Image Recognition: Fabify utilizes advanced AI image recognition technology to analyze clothing items uploaded by users.
+- Outfit Suggestions: Based on the analysis of the uploaded photo, Fabify provides personalized outfit suggestions tailored to your preferences and the occasion.
+- Color Coordination: The app considers color coordination to ensure that your outfit looks cohesive and stylish.
+- Style Recommendations: Fabify offers recommendations based on your personal style preferences, helping you explore new fashion trends and ideas.
+- Seasonal Suggestions: Whether it's summer, winter, spring, or fall, Fabify suggests outfits appropriate for the current season.
+- User-friendly Interface: With a sleek and intuitive design, Fabify makes it easy for users to upload photos and receive outfit recommendations effortlessly.
 
-## Expanding the ESLint configuration
+## Getting Started
+To get started with Fabify, follow these simple steps:
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+1. Clone the Repository: Clone the Fabify repository to your local machine using the following command:
 
-- Configure the top-level `parserOptions` property like this:
+```js
+  https://github.com/raibove/fabify.git
+```
+
+2. Install Dependencies: Navigate to the project directory and install the necessary dependencies by running:
+
+  ```js
+  npm i
+  ```
+
+3. Set Up Environment Variables: Create a .env file with help of .env.template and add your API key
+
+4. Start the Development Server: Run the following command to start the development server:
 
 ```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+  npm run dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+5. Explore Fabify: Once the development server is up and running, open your web browser and navigate to http://localhost:5173 to explore Fabify and start receiving outfit suggestions!
+
+## Contributing
+We welcome contributions from the community to help improve Fabify and make it even more useful for users. If you're interested in contributing, please follow these guidelines:
+
+- Fork the repository and create a new branch for your feature or bug fix.
+- Make your changes and ensure that they adhere to the coding standards and guidelines.
+- Test your changes thoroughly to ensure they work as expected.
+- Submit a pull request with a clear description of your changes and why they are beneficial.

src/App.css

@@ -1,8 +1,13 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width:100%;
+  height: 100vh;
+}
+
+.app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .logo {

src/App.tsx

@@ -1,14 +1,16 @@
 import './App.css'
+import Header from './component/header'
 import InputModal from './component/input-modal'
 
 function App() {
 
   return (
-    <>
-      <div>
+    <div className='app'>
+      <Header/>
+      <>
         <InputModal />
-      </div>
-    </>
+      </>
+    </div>
   )
 }
 

src/component/cards/index.tsx

@@ -0,0 +1,24 @@
+import { DetailClothing } from "../../utils";
+// import {Link} from 'react-router-dom';
+import './styles.css';
+
+interface Props {
+    outfit: DetailClothing;
+}
+
+const Card = ({ outfit }: Props) => {
+    return (
+        <div className="product-card">
+            <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' >
+                    <button className="explore-button">Explore</button>
+                </a>
+            </div>
+        </div>
+    )
+}
+
+export default Card;

src/component/cards/styles.css

@@ -0,0 +1,48 @@
+.product-card {
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .product-card:hover {
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+  }
+
+  .card-content {
+    padding: 1rem;
+    color: #000000;
+  }
+
+  .title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .description {
+    color: #666666;
+    margin-bottom: 0.5rem;
+  }
+
+  .explore-button {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #000000;
+    border-radius: 0.25rem;
+    background-color: transparent;
+    color: #000000;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  .explore-button:hover {
+    background-color: #000000;
+    color: #ffffff;
+  }
+

src/component/header/index.tsx

@@ -0,0 +1,9 @@
+export const Header = ()=>{
+    return (
+        <div style={{padding: '0 10px'}}>
+            <h1 style={{cursor: 'pointer', color: 'black', fontSize: '30px', fontWeight: '500', fontFamily:'cursive'}}>Fabify</h1>
+        </div>
+    )
+}
+
+export default Header;

src/component/input-modal/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import './style.css';
 import UploadFileButton from '../upload';
 import { Clothing, DetailClothing, getBase64Image, getComplementOutfit, parseClothingData, processBase64, processComplementOutfit, run } from '../../utils';
+import Card from '../cards';
 
 const InputModal: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
@@ -78,17 +79,16 @@ const InputModal: React.FC = () => {
       }
       {
         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)=> (
-                <a href={`https://www.google.com/search?tbm=isch&q=${outfit.color}+${outfit.item}`} target='_blank' key={outfit.color + outfit.item}>
-                  <div>
-                      <p>{outfit.item}</p>
-                  </div>
-                </a>
+                <Card outfit={outfit} />
               ))
             }
-          </>
+          </div>
+          </div>
         )
       }
     </div>

src/component/input-modal/style.css

@@ -5,6 +5,8 @@
   flex-direction: column;
   align-items: center;
   gap: 5vh;
+  flex-grow: 1;
+  justify-content: center;
 }
 
 .upload-container {
@@ -78,6 +80,13 @@
   border-color: #ccc transparent;
 }
 
+.recommendation-title{
+  color: black;
+  font-weight: 400;
+  font-size: 25px;
+  text-align: center;
+}
+
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0);
@@ -86,4 +95,5 @@
   100% {
     -webkit-transform: rotate(-360deg);
   }
-}
+}
+