s481873
/
Projekt_IO
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

fix: detector

This commit is contained in:
dbanaszak1 2024-01-21 13:29:01 +01:00
parent 3bc61eae1c
commit e3211f08ed
2 changed files with 88 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/CatApp/public/vite.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

103
Frontend/CatApp/src/components/Detector.tsx
View File

@ -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>
);
};