fix: mobile, lang; add: wv, font

fix: detector
add: logo, nav
2024-01-21 23:49:36 +01:00 · 2024-01-21 13:29:01 +01:00 · 2024-01-20 18:10:17 +01:00 · 2024-01-15 13:42:18 +01:00
20 changed files with 4561 additions and 0 deletions
--- a/Frontend/CatApp/.eslintrc.cjs
+++ b/Frontend/CatApp/.eslintrc.cjs
@ -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 },
+    ],
+  },
+}
--- a/Frontend/CatApp/.gitignore
+++ b/Frontend/CatApp/.gitignore
@ -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?
--- a/Frontend/CatApp/index.html
+++ b/Frontend/CatApp/index.html
@ -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>
--- a/Frontend/CatApp/package-lock.json
+++ b/Frontend/CatApp/package-lock.json
--- a/Frontend/CatApp/package.json
+++ b/Frontend/CatApp/package.json
@ -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"
+  }
+}
--- a/Frontend/CatApp/postcss.config.js
+++ b/Frontend/CatApp/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/Frontend/CatApp/src/App.tsx
+++ b/Frontend/CatApp/src/App.tsx
@ -0,0 +1,13 @@
+import Detector from "./components/Detector";
+import Nav from "./components/Nav";
+
+
+export default function App() {
+  return (
+    <>
+      <Nav/>
+
+      <Detector/>
+    </>
+  )
+}
--- a/Frontend/CatApp/src/components/Detector.tsx
+++ b/Frontend/CatApp/src/components/Detector.tsx
@ -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;
--- a/Frontend/CatApp/src/components/Nav.tsx
+++ b/Frontend/CatApp/src/components/Nav.tsx
@ -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
--- a/Frontend/CatApp/src/components/Waves.tsx
+++ b/Frontend/CatApp/src/components/Waves.tsx
@ -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
--- a/Frontend/CatApp/src/images/logo.png
+++ b/Frontend/CatApp/src/images/logo.png
--- a/Frontend/CatApp/src/index.css
+++ b/Frontend/CatApp/src/index.css
@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/Frontend/CatApp/src/main.tsx
+++ b/Frontend/CatApp/src/main.tsx
@ -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>,
+)
--- a/Frontend/CatApp/src/vite-env.d.ts
+++ b/Frontend/CatApp/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/Frontend/CatApp/tailwind.config.js
+++ b/Frontend/CatApp/tailwind.config.js
@ -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: [],
+}
--- a/Frontend/CatApp/tsconfig.json
+++ b/Frontend/CatApp/tsconfig.json
@ -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" }]
+}
--- a/Frontend/CatApp/tsconfig.node.json
+++ b/Frontend/CatApp/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/Frontend/CatApp/vite.config.ts
+++ b/Frontend/CatApp/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/pycache/cat_detection.cpython-39.pyc
+++ b/pycache/cat_detection.cpython-39.pyc
--- a/test.py
+++ b/test.py
@ -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)
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