update basic style

raibove · May 2, 2024 · ee68965 · ee68965
1 parent 9631ee3
commit ee68965
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 57 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,24 @@
+import { useEffect } from 'react';
 import './App.css'
 import Header from './component/header'
 import InputModal from './component/input-modal'
 
+const prefetchImage = async (imageName: string) => {
+  var img=new Image();
+  img.src=`/${imageName}`;
+};
+
 function App() {
+  useEffect(() => {
+    const prefetchImages = async () => {
+        const promises = [];
+        for (let i = 0; i <= 11; i++) {
+            promises.push(prefetchImage(`image${i}.png`));
+        }
+        await Promise.all(promises);
+    };
+    prefetchImages();
+}, []);
 
   return (
     <div className='app'>

diff --git a/src/component/input-modal/index.tsx b/src/component/input-modal/index.tsx
@@ -41,6 +41,14 @@ const InputModal: React.FC = () => {
 
   const selectNextDisabled = loading || selectedClothIndex === -1;
 
+
+  const handleReset = () => {
+    setStep('upload');
+    setClothesInImg([])
+    setSelectedClothIndex(-1)
+    setComplementOutfit([])
+  }
+
   return (
     <div className="app-container">
       {loading && <div className="loading style-2"><div className="loading-wheel"></div></div>}
@@ -55,25 +63,36 @@ const InputModal: React.FC = () => {
       {
         step === 'select' && (
           <>
-            <img src={image} alt="uplaoded outfit" style={{ height: '300px' }} />
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              {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}
-                  </label>
-                </div>)
-              )}
-            </div>
-            <button className="next-button" onClick={handleNext} disabled={selectNextDisabled} style={{ cursor: selectNextDisabled ? 'no-drop' : 'pointer' }}>Next</button>
+            {clothesInImg.length === 0 ?
+              <>
+                <label className="upload-label">No outfit found, please try with different image</label>
+                <div style={{ margin: '20px 80px 80px 80px' }}>
+                  <button className="start-again-button" onClick={handleReset}>Try Again</button>
+                </div>
+              </>
+              :
+              <>
+                <img src={image} alt="uplaoded outfit" style={{ height: '300px' }} />
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  {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}
+                      </label>
+                    </div>)
+                  )}
+                </div>
+                <button className="next-button" onClick={handleNext} disabled={selectNextDisabled} style={{ cursor: selectNextDisabled ? 'no-drop' : 'pointer' }}>Next</button>
+              </>
+            }
           </>
         )
       }
@@ -84,19 +103,12 @@ const InputModal: React.FC = () => {
             <div className='card-container'>
               {
                 complementOutfit.map((outfit) => (
-                  <Card outfit={outfit} selectedItem={clothesInImg[selectedClothIndex]} />
+                  <Card key={outfit.color + outfit.item} 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 style={{ margin: '20px 80px 80px 80px' }}>
+              <button className="start-again-button" onClick={handleReset}>Start Again</button>
             </div>
           </div>
         )

diff --git a/src/component/input-modal/style.css b/src/component/input-modal/style.css
@@ -19,6 +19,7 @@
 .upload-label {
   font-size: 34px;
   color: black;
+  text-align: center;
 }
 
 .next-button {
@@ -35,20 +36,6 @@
   background-color: #2980b9;
 }
 
-.file-input-container {
-  display: inline-block;
-  background-color: #3498db;
-  color: #000;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.file-input {
-  display: none;
-}
-
 .loading {
   width: 100%;
   height: 100%;

diff --git a/src/component/upload/style.css b/src/component/upload/style.css
@@ -1,14 +1,21 @@
 .file-input-container {
-    display: inline-block;
-    background-color: #3498db;
-    color: #fff;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-
-  .file-input {
-    display: none;
-  }
-
+  display: inline-block;
+  background-color: black;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.file-input-container:hover {
+  background-color: #ccc;
+  color: #000;
+  border: 1px solid black;
+  display: block;
+}
+
+.file-input {
+  display: none;
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -43,6 +43,15 @@ const loadImageAsBuffer = async (imageUrl: string): Promise<string> => {
     }
 };
 
+function trimTextUntilImage(text: string) {
+    const indexOfImage = text.indexOf("Image:");
+    if (indexOfImage !== -1) {
+        return text.substring(0, indexOfImage);
+    } else {
+        return text;
+    }
+}
+
 export async function run(input: string) {
 
     const genAI = new GoogleGenerativeAI(import.meta.env.VITE_API_KEY);
@@ -203,7 +212,7 @@ export async function run(input: string) {
     });
 
     const response = result.response;
-    return response.text();
+    return trimTextUntilImage(response.text());
 }