diff --git a/README.md b/README.md
index 3e01936eb5db336d6e6323025cb511b64dc09f1f..354b4ca48823ecd23029923f55e30558ab52363b 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 0000000000000000000000000000000000000000..e2021f3cdf8d3f38879051edd9c16a02cf817c46
--- /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 0000000000000000000000000000000000000000..ffa6f0d750c1b447db1f690ca343897d3f564983
--- /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 0000000000000000000000000000000000000000..cc523851637f1c92779426c9b760aaf1923cfc72
--- /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 86502d62a82aee6d2825cc6266a590b566e534a5..250a83713e7f24365ab2eb435fe3433572e6d85e 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 a0f574bfb0466a0050dc1fcad7b40c2c38e7643c..b7dc0cfbc192e088dd0af926cc9e0d44403b8032 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 83879d022889e919b4c3b29053a7011fe4dba68b..706674c467397fd735043a10dfe1b35b4a82d9d8 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 0000000000000000000000000000000000000000..26e5de2be64cad3783d883664d93e5c7ad71a698
--- /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