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

Compare commits

merge into: s481873:dev
Branches Tags
s481873:dev
s481873:Front/db
s481873:flask-ML
...
pull from: s481873:Front/db
Branches Tags
s481873:Front/db
s481873:dev
s481873:flask-ML

4 Commits
dev ... Front/db

Author SHA1 Message Date
dbanaszak1
9e2dae9bff fix: mobile, lang; add: wv, font 2024-01-21 23:49:36 +01:00
dbanaszak1
e3211f08ed fix: detector 2024-01-21 13:29:01 +01:00
Dominik Banaszak
3bc61eae1c add: logo, nav 2024-01-20 18:10:17 +01:00
Dominik Banaszak
152453858e front first commit 2024-01-15 13:42:18 +01:00
20 changed files with 4561 additions and 0 deletions
Show Stats Expand all files Collapse all files

18
Frontend/CatApp/.eslintrc.cjs Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
Frontend/CatApp/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
Frontend/CatApp/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CatApp</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

4219
Frontend/CatApp/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
Frontend/CatApp/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "catapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}

6
Frontend/CatApp/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

13
Frontend/CatApp/src/App.tsx Normal file
View File

@ -0,0 +1,13 @@
import Detector from "./components/Detector";
import Nav from "./components/Nav";
export default function App() {
return (
<>
<Nav/>
<Detector/>
</>
)
}

121
Frontend/CatApp/src/components/Detector.tsx Normal file
View File

@ -0,0 +1,121 @@
import React, { ChangeEvent, useState } from 'react';
const Detector = () => {
const [file, setFile] = useState<File | 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[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
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/api/v1/detect-cat', {
method: 'POST',
body: formData,
});
if (response.ok) {
const resultFromServer = await response.json();
// Update results list with the new result
setResults((prevResults) => [...prevResults, { file, ...resultFromServer }]);
} else {
console.error('Błąd serwera:', response.statusText);
}
} else {
console.error('Brak pliku do wysłania.');
alert('Choose a file before sending')
}
} catch (error) {
console.error('Błąd:', error);
} finally {
setLoading(false);
}
};
return (
<>
<div className="flex items-center justify-center flex-wrap">
<div className="w-full">
<div className="w-5/6 sm:w-[420px] my-6 m-auto border-[1px] border-black p-4 rounded-2xl flex flex-wrap justify-center items-center">
{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 lg: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 sm:mt-0'
onClick={handleSubmit}
disabled={loading}
>
IS IT?
</button>
</div>
</div>
{loading && <div className='w-full text-center text-blue-200 uppercase font-semibold'> Sending file...</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-DM text-orange-500 font-semibold'><span>{index + 1}. </span>CAT RESULT</h3>
<table>
<thead className='font-DM'>
<tr>
<th>Image:</th>
<th>Results:</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 font-DM'> {result.results[filename].isCat ? 'This is a 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>
</>
);
};
export default Detector;

11
Frontend/CatApp/src/components/Nav.tsx Normal file
View File

@ -0,0 +1,11 @@
const Nav = () => {
return (
<div className='w-full h-32 px-8 md:px-20 shadow-2xl flex items-center justify-center'>
<img className="h-32 w-32 p-4" src="https://github.com/UniSzef/test/blob/main/logo.png?raw=true"></img>
<div className="md:text-4xl text-2xl font-DM font-bold">Be sure that your <span className="text-orange-400">cat</span> is real!</div>
</div>
)
}
export default Nav

20
Frontend/CatApp/src/components/Waves.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
const Waves = () => {
return (
<>
<svg className="absolute -z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#edb593" fill-opacity="1" d="M0,288L48,250.7C96,213,192,139,288,117.3C384,96,480,128,576,149.3C672,171,768,181,864,165.3C960,149,1056,107,1152,112C1248,117,1344,171,1392,197.3L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
<svg className="absolute -z-10 translate-y-[500px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#edb593" fill-opacity="1" d="M0,192L40,202.7C80,213,160,235,240,229.3C320,224,400,192,480,160C560,128,640,96,720,101.3C800,107,880,149,960,186.7C1040,224,1120,256,1200,261.3C1280,267,1360,245,1400,234.7L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
<div className="h-[400px] w-full -z-10 absolute bg-waves translate-y-[800px]"></div>
<svg className="absolute -z-10 translate-y-[1200px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#edb593" fill-opacity="1" d="M0,288L26.7,261.3C53.3,235,107,181,160,181.3C213.3,181,267,235,320,240C373.3,245,427,203,480,170.7C533.3,139,587,117,640,117.3C693.3,117,747,139,800,154.7C853.3,171,907,181,960,202.7C1013.3,224,1067,256,1120,256C1173.3,256,1227,224,1280,224C1333.3,224,1387,256,1413,272L1440,288L1440,0L1413.3,0C1386.7,0,1333,0,1280,0C1226.7,0,1173,0,1120,0C1066.7,0,1013,0,960,0C906.7,0,853,0,800,0C746.7,0,693,0,640,0C586.7,0,533,0,480,0C426.7,0,373,0,320,0C266.7,0,213,0,160,0C106.7,0,53,0,27,0L0,0Z"></path>
</svg>
</>
)
}
export default Waves

BIN
Frontend/CatApp/src/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

5
Frontend/CatApp/src/index.css Normal file
View File

@ -0,0 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

10
Frontend/CatApp/src/main.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

1
Frontend/CatApp/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

18
Frontend/CatApp/tailwind.config.js Normal file
View File

@ -0,0 +1,18 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
DM: ['DM Serif Display']
},
colors: {
waves: '#edb593',
},
},
},
plugins: [],
}

25
Frontend/CatApp/tsconfig.json Normal file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
Frontend/CatApp/tsconfig.node.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
Frontend/CatApp/vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

BIN
__pycache__/cat_detection.cpython-39.pyc Normal file
View File

Binary file not shown.

9
test.py Normal file
View File

@ -0,0 +1,9 @@
import requests
url = 'http://127.0.0.1:5000/detect-cat'
files = {'image': (open('cat1.jpg', 'rb'))}
response = requests.post(url, files=files)
print(response.text)