From 1cb3b1348a5f7317ecb9cebfac0ad14158f04f50 Mon Sep 17 00:00:00 2001
From: a2-imeri <Alfret2.imeri@live.uwe.ac.uk>
Date: Tue, 2 Jul 2024 11:50:42 +0100
Subject: [PATCH] Fix Normal Detection Form
---
README.md | 2 +-
.../Common/buttons/TakePhotoButton.js | 19 ++++++++
.../components/Common/buttons/UploadButton.js | 19 ++++++++
.../detection/image/ImageUploadForm.js | 44 +++++++++++++++++++
.../DetectionOptions/DetectionOptionsPage.js | 7 +--
.../NormalDetection/NormalDetectionPage.js | 5 +--
.../services/processMisplacedManagerApi.js | 10 -----
frontend/src/styles/buttons/uploadButton.css | 23 ++++++++++
8 files changed, 109 insertions(+), 20 deletions(-)
create mode 100644 frontend/src/components/Common/buttons/TakePhotoButton.js
create mode 100644 frontend/src/components/Common/buttons/UploadButton.js
create mode 100644 frontend/src/components/detection/image/ImageUploadForm.js
create mode 100644 frontend/src/styles/buttons/uploadButton.css
diff --git a/README.md b/README.md
index 3e01936..354b4ca 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ docker-compose up --build
### Connect though terminal
```bash
-docker exec -it misplaceai-db-1 mysql -u root -p
+docker exec -it identification-of-misplaced-items-db-1 mysql -u root -p
```
<br>
Then enter password
diff --git a/frontend/src/components/Common/buttons/TakePhotoButton.js b/frontend/src/components/Common/buttons/TakePhotoButton.js
new file mode 100644
index 0000000..e2021f3
--- /dev/null
+++ b/frontend/src/components/Common/buttons/TakePhotoButton.js
@@ -0,0 +1,19 @@
+// src/components/Common/buttons/TakePhotoButton.js
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../../styles/main.css';
+
+const TakePhotoButton = ({ handleClick, isLoading }) => {
+ return (
+ <button
+ type="button"
+ className="btn btn-primary btn-lg mt-3 upload-btn"
+ onClick={handleClick}
+ disabled={isLoading}
+ >
+ <i className="fas fa-camera-retro fa-3x mb-3"></i> Take Photo
+ </button>
+ );
+};
+
+export default TakePhotoButton;
diff --git a/frontend/src/components/Common/buttons/UploadButton.js b/frontend/src/components/Common/buttons/UploadButton.js
new file mode 100644
index 0000000..ffa6f0d
--- /dev/null
+++ b/frontend/src/components/Common/buttons/UploadButton.js
@@ -0,0 +1,19 @@
+// src/components/common/buttons/UploadButton.js
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../../styles/main.css';
+
+const UploadButton = ({ handleClick, isLoading }) => {
+ return (
+ <button
+ type="button"
+ className="btn btn-primary btn-lg mt-3 upload-btn"
+ onClick={handleClick}
+ disabled={isLoading}
+ >
+ <i className="fas fa-upload fa-3x mb-3"></i> Upload
+ </button>
+ );
+};
+
+export default UploadButton;
diff --git a/frontend/src/components/detection/image/ImageUploadForm.js b/frontend/src/components/detection/image/ImageUploadForm.js
new file mode 100644
index 0000000..cc52385
--- /dev/null
+++ b/frontend/src/components/detection/image/ImageUploadForm.js
@@ -0,0 +1,44 @@
+// src/components/detection/image/ImageUploadForm.js
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../../styles/main.css';
+import '../../../styles/buttons/uploadButton.css';
+import UploadButton from '../../common/buttons/UploadButton';
+import TakePhotoButton from '../../common/buttons/TakePhotoButton';
+
+
+const ImageUploadForm = ({ handleFileChange, handleSubmit, handleCameraClick, handleGalleryClick, isLoading }) => {
+ return (
+ <form id="uploadForm" className="text-center" onSubmit={handleSubmit} encType="multipart/form-data">
+ <div className="form-group">
+ <TakePhotoButton handleClick={handleCameraClick} isLoading={isLoading} />
+ <input
+ type="file"
+ accept="image/*"
+ id="cameraInput"
+ className="d-none"
+ onChange={handleFileChange}
+ />
+ <button
+ type="button"
+ className="btn btn-secondary btn-lg mt-3 upload-btn"
+ id="openGalleryBtn"
+ onClick={handleGalleryClick}
+ disabled={isLoading}
+ >
+ <i className="fas fa-folder-open fa-3x mb-3"></i> Choose from Gallery
+ </button>
+ <input
+ type="file"
+ accept="image/*"
+ id="galleryInput"
+ className="d-none"
+ onChange={handleFileChange}
+ />
+ </div>
+ <UploadButton handleClick={handleSubmit} isLoading={isLoading} />
+ </form>
+ );
+};
+
+export default ImageUploadForm;
diff --git a/frontend/src/pages/DetectionOptions/DetectionOptionsPage.js b/frontend/src/pages/DetectionOptions/DetectionOptionsPage.js
index 86502d6..250a837 100644
--- a/frontend/src/pages/DetectionOptions/DetectionOptionsPage.js
+++ b/frontend/src/pages/DetectionOptions/DetectionOptionsPage.js
@@ -12,15 +12,10 @@ const DetectionOptionsPage = () => {
<Link to="/normal-detection">
<button className="btn btn-primary btn-lg mb-3 w-100">Misplaced Items using Normal Object Detection</button>
</Link>
- <Link to="/segmentation-detection">
- <button className="btn btn-secondary btn-lg mb-3 w-100">Misplaced Items using Segmentation</button>
- </Link>
<Link to="/upload-video">
<button className="btn btn-success btn-lg mb-3 w-100">Misplaced Items using Video Detection</button>
</Link>
- <Link to="/live-detection">
- <button className="btn btn-info btn-lg mb-3 w-100">Misplaced Items using Live Detection</button>
- </Link>
+
</div>
</div>
</div>
diff --git a/frontend/src/pages/NormalDetection/NormalDetectionPage.js b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
index a0f574b..b7dc0cf 100644
--- a/frontend/src/pages/NormalDetection/NormalDetectionPage.js
+++ b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
@@ -1,12 +1,11 @@
/* src/pages/NormalDetection/NormalDetectionPage.js */
-
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import { normalDetection } from '../../services/processMisplacedManagerApi';
import '../../styles/main.css';
import LoadingIndicator from '../../components/detection/LoadingIndicator';
import DetectionResults from '../../components/detection/DetectionResults';
-import UploadForm from '../../components/detection/UploadForm';
+import ImageUploadForm from '../../components/detection/image/ImageUploadForm';
import DetectionContainer from '../../components/detection/DetectionContainer';
const NormalDetectionPage = () => {
@@ -61,7 +60,7 @@ const NormalDetectionPage = () => {
<DetectionContainer title="Upload Image for Normal Detection">
<LoadingIndicator isLoading={isLoading} message="Your photo is being processed, please wait..." />
{!isLoading && (
- <UploadForm
+ <ImageUploadForm
handleFileChange={handleFileChange}
handleSubmit={handleSubmit}
handleCameraClick={handleCameraClick}
diff --git a/frontend/src/services/processMisplacedManagerApi.js b/frontend/src/services/processMisplacedManagerApi.js
index 83879d0..706674c 100644
--- a/frontend/src/services/processMisplacedManagerApi.js
+++ b/frontend/src/services/processMisplacedManagerApi.js
@@ -82,16 +82,6 @@ export const normalDetection = async (data) => {
}
};
-// Function for segmentation detection
-export const segmentationDetection = async (data) => {
- try {
- const response = await api.post('/api/process_misplaced_manager/segmentation-detection/', data);
- return response.data;
- } catch (error) {
- console.error("Error in segmentation detection:", error);
- throw error;
- }
-};
// Function to upload a video
export const uploadVideo = async (data) => {
diff --git a/frontend/src/styles/buttons/uploadButton.css b/frontend/src/styles/buttons/uploadButton.css
new file mode 100644
index 0000000..26e5de2
--- /dev/null
+++ b/frontend/src/styles/buttons/uploadButton.css
@@ -0,0 +1,23 @@
+/* src/styles/buttons/uploadButton.css */
+
+.upload-btn i {
+ margin-right: 10px;
+}
+
+
+.upload-btn {
+ width: 100%;
+ max-width: 200px;
+ margin: 0 auto;
+ display: block;
+ height: auto;
+
+}
+
+.btn-lg {
+ width: 100%;
+ max-width: 250px;
+ margin: 10px 0;
+ height: auto;
+
+}
\ No newline at end of file
--
GitLab