From e1e42fc6c17ba99b7cad940b3c3e1c97df959140 Mon Sep 17 00:00:00 2001 From: omagdy7 Date: Sun, 28 Apr 2024 18:45:30 +0300 Subject: Added a simple UI for our application --- frontend/src/App.css | 45 ++++++++++++++++++ frontend/src/App.tsx | 11 +++++ frontend/src/assets/react.svg | 1 + frontend/src/components/ImageProcessor.tsx | 75 ++++++++++++++++++++++++++++++ frontend/src/index.css | 3 ++ frontend/src/main.tsx | 10 ++++ frontend/src/vite-env.d.ts | 1 + 7 files changed, 146 insertions(+) create mode 100644 frontend/src/App.css create mode 100644 frontend/src/App.tsx create mode 100644 frontend/src/assets/react.svg create mode 100644 frontend/src/components/ImageProcessor.tsx create mode 100644 frontend/src/index.css create mode 100644 frontend/src/main.tsx create mode 100644 frontend/src/vite-env.d.ts (limited to 'frontend/src') diff --git a/frontend/src/App.css b/frontend/src/App.css new file mode 100644 index 0000000..83854f7 --- /dev/null +++ b/frontend/src/App.css @@ -0,0 +1,45 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} + +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} + +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx new file mode 100644 index 0000000..370832d --- /dev/null +++ b/frontend/src/App.tsx @@ -0,0 +1,11 @@ +import './App.css' +import ImageProcessor from './components/ImageProcessor' + +function App() { + + return ( + + ) +} + +export default App diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/frontend/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/ImageProcessor.tsx b/frontend/src/components/ImageProcessor.tsx new file mode 100644 index 0000000..bdcae19 --- /dev/null +++ b/frontend/src/components/ImageProcessor.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; + +const BACK_END_URL = 'http://localhost:5000' + +const ImageProcessor = (): JSX.Element => { + const [file, setFile] = useState(null); + const [downloadUrl, setDownloadUrl] = useState(''); + + const handleFileChange = (event: React.ChangeEvent): void => { + if (event.target.files) { + setFile(event.target.files[0]); + } + }; + + const processImage = async (operation: 'edge_detection' | 'color_inversion'): Promise => { + if (!file) { + alert('Please select a file first!'); + return; + } + + const formData = new FormData(); + formData.append('image', file); + formData.append('operation', operation); + + try { + const response = await fetch(`${BACK_END_URL}/upload`, { + method: 'POST', + body: formData, + }); + + const data = await response.json(); + if (response.ok) { + setDownloadUrl(`${data.processed_file}`); + console.log(data.processed_file) + alert('File processed successfully!'); + } else { + alert(data.error || 'Failed to process the file'); + } + } catch (error) { + alert('Error connecting to the server'); + } + }; + + const downloadImage = (): void => { + if (!downloadUrl) { + alert('No processed image available for download!'); + return; + } + window.open(downloadUrl); + }; + + return ( +
+

Image Processing

+
+ + +
+
+ + +
+ + +
+ ); +}; + +export default ImageProcessor; diff --git a/frontend/src/index.css b/frontend/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/frontend/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 0000000..3d7150d --- /dev/null +++ b/frontend/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( + + + , +) diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/frontend/src/vite-env.d.ts @@ -0,0 +1 @@ +/// -- cgit v1.2.3