From e3211f08ed0747b0638c8bba1aed6ac7bd872fc8 Mon Sep 17 00:00:00 2001
From: dbanaszak1 <dominikbanaszak530@gmail.com>
Date: Sun, 21 Jan 2024 13:29:01 +0100
Subject: [PATCH] fix: detector

---
 Frontend/CatApp/public/vite.svg             |   1 -
 Frontend/CatApp/src/components/Detector.tsx | 103 +++++++++++++++++---
 2 files changed, 88 insertions(+), 16 deletions(-)
 delete mode 100644 Frontend/CatApp/public/vite.svg

diff --git a/Frontend/CatApp/public/vite.svg b/Frontend/CatApp/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/Frontend/CatApp/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/Frontend/CatApp/src/components/Detector.tsx b/Frontend/CatApp/src/components/Detector.tsx
index 321c437..46152f6 100644
--- a/Frontend/CatApp/src/components/Detector.tsx
+++ b/Frontend/CatApp/src/components/Detector.tsx
@@ -1,45 +1,118 @@
-import { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 
 const Detector = () => {
   const [file, setFile] = useState<File | undefined>();
-  const [result, setResult] = useState<string | undefined>();
+  const [preview, setPreview] = useState<string>('https://mly5gz70zztl.i.optimole.com/cb:w3s1.35324/w:auto/h:auto/q:mauto/f:best/https://www.lifewithcatman.com/wp-content/uploads/2019/03/maine-coon-cat-photography-robert-sijka-64-57ad8f2c0277c__880.jpg');
+  const [results, setResults] = useState<any[]>([]); // Array to store results
+  const [loading, setLoading] = useState<boolean>(false);
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
-      setFile(e.target.files[0]);
+      const selectedFile = e.target.files[0];
+      setFile(selectedFile);
+
+      // Generate preview for the selected file
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreview(reader.result as string);
+      };
+      reader.readAsDataURL(selectedFile);
     }
   };
 
   const handleSubmit = async () => {
     try {
       if (file) {
+        setLoading(true);
+
         const formData = new FormData();
         formData.append('image', file);
 
-        const response = await fetch('http://127.0.0.1:5000/detect-cat', {
+        const response = await fetch('http://127.0.0.1:5000/api/v1/detect-cat', {
           method: 'POST',
           body: formData,
-          mode: 'cors'
         });
 
-        const resultFromServer = await response.text();
-        console.log('Wynik:', resultFromServer);
-        setResult(resultFromServer);
+        if (response.ok) {
+          const resultFromServer = await response.json();
 
-        console.log('File send.');
+          // Update results list with the new result
+          setResults((prevResults) => [...prevResults, { file, ...resultFromServer }]);
+        } else {
+          console.error('Błąd serwera:', response.statusText);
+        }
       } else {
-        console.error('No file to send.');
+        console.error('Brak pliku do wysłania.');
       }
     } catch (error) {
-      console.error('Error:', error);
+      console.error('Błąd:', error);
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <div>
-      <input type="file" onChange={handleFileChange}></input>
-      <button className='px-4 py-2 border-[1px] text-orange-500 border-orange-500 rounded-lg shadow-lg hover:scale-125 hover:text-white hover:bg-orange-500 duration-500 font-bold' onClick={handleSubmit}>IS IT?</button>
-      {result && <div>Wynik: {result}</div>}
+    <div className="flex items-center justify-center flex-wrap">
+      <div className="w-full">
+        <div className="w-[420px] my-6 m-auto border-[1px] border-black p-4 rounded-2xl">
+          {preview && (
+            <div className="flex justify-center ">
+              <img className='rounded-full border-orange-500 border-2' src={preview} alt="Podgląd" style={{ maxWidth: '100%', maxHeight: '200px' }} />
+            </div>
+          )}
+          <input className='' type="file" onChange={handleFileChange} />
+          <button
+            className='px-4 p-1 mx-2 border-[1px] text-orange-500 border-orange-500 rounded-lg shadow-lg hover:scale-125 hover:text-white hover:bg-orange-500 duration-500 font-bold mt-4'
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            IS IT?
+          </button>        
+        </div>        
+      </div>
+
+
+      {loading && <div className='w-full text-center text-blue-200 uppercase font-semibold'>  Wysyłanie pliku...</div>}
+      {results.length > 0 && (
+        <div>
+          {results.map((result, index) => (
+            <div className='border-[1px] border-gray-500 m-4 rounded-lg p-4' key={index}>
+              <h3 className='text-center font-'>Wyniki kota {index + 1}:</h3>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Zdjęcie</th>
+                    <th>Wyniki</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {result.results && Object.keys(result.results).map((filename) => (
+                    <tr key={filename}>
+                      <td>
+                        <img className='rounded-xl m-2 border-orange-500 border-[1px]' src={URL.createObjectURL(result.file)} alt="Podgląd" style={{ maxWidth: '100%', maxHeight: '100px' }} />
+                      </td>
+                      <td>
+                        <p>
+                          <span>Result:</span><span className='text-orange-500'> {result.results[filename].isCat ? 'Cat' : 'Not a cat'}</span> 
+                        </p>
+                        <ul>
+                          {result.results[filename].predictions &&
+                            Object.keys(result.results[filename].predictions).map((key) => (
+                              <li key={key}>
+                                {result.results[filename].predictions[key].score.toFixed(2) * 100}<span>% - </span>
+                                {result.results[filename].predictions[key].label}
+                              </li>
+                            ))}
+                        </ul>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };