feat: add Camera ProductOCR

seoyoung-3060 · Dec 11, 2023 · 12e6648 · 12e6648
1 parent e612d23
commit 12e6648
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 26 deletions.
diff --git a/src/Pages/Camera/CameraPage.js b/src/Pages/Camera/CameraPage.js
@@ -1,17 +1,43 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
-import FileUploader from "../../components/FileUploader";
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import FileUploader from '../../components/FileUploader';
+import styled from 'styled-components';
+
+const CameraContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+`;
 
 const CameraPage = () => {
   const location = useLocation();
-  const cameraType = location.state?.cameraType || "기본 텍스트";
+  const cameraType = location.state?.cameraType || 'Camera';
+  const [resultValue, setResultValue] = useState();
+
+  const setData = (value) => {
+    setResultValue(value.brand);
+  };
 
   return (
-    <div>
-      {cameraType === "ColorDetection" && (
-        <FileUploader endpoint="5001/api/color" />
+    <CameraContainer>
+      {cameraType === 'ColorDetection' && (
+        <div>
+          <p>생리혈 확인 유무 카메라</p>
+          <p>화면을 클릭해주세요</p>
+          <FileUploader endpoint="5001/api/color" />
+        </div>
+      )}
+      {cameraType === 'ProductOCR' && (
+        <div>
+          <p>생리대 제품 인식 카메라</p>
+          <p>화면을 클릭해주세요</p>
+          <FileUploader setData={setData} endpoint="5002/api/OCR" />
+          <p>result: {resultValue}</p>
+        </div>
       )}
-    </div>
+    </CameraContainer>
   );
 };
 

diff --git a/src/Pages/MainPage.js b/src/Pages/MainPage.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import styled from "styled-components";
-import { json, useNavigate } from "react-router-dom";
-import StyledButton from "../components/StyledButton";
-import FileUploader from "../components/FileUploader";
-import TTSComponent from "../components/TTSComponent";
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import styled from 'styled-components';
+import { json, useNavigate } from 'react-router-dom';
+import StyledButton from '../components/StyledButton';
+import FileUploader from '../components/FileUploader';
+import TTSComponent from '../components/TTSComponent';
 
 const MainContainer = styled.div`
   display: flex;
@@ -36,23 +36,27 @@ const MainPage = () => {
 
   const fetchDataTest = () => {
     axios
-      .get("http://127.0.0.1:5000/api/data")
+      .get('http://127.0.0.1:5000/api/data')
       .then((response) => {
         // 서버에서 받은 데이터를 사용
         const jsonData = response.data;
         setData(jsonData);
       })
       .catch((error) => {
-        console.error("Error fetching data:", error);
+        console.error('Error fetching data:', error);
       });
   };
 
   const navigate = useNavigate();
 
   function moveToPage(moveTo) {
-    navigate("/Pages/" + moveTo);
+    navigate('/Pages/' + moveTo);
   }
 
+  const moveToCameraPage = (moveTo, cameraType) => {
+    navigate(`/Pages/${moveTo}`, { state: { cameraType } });
+  };
+
   const handleUploadResult = (result) => {
     console.log(result);
     setData(result);
@@ -65,14 +69,17 @@ const MainPage = () => {
       {/* <TTSComponent endpoint={"5002/api/OCR"}></TTSComponent> */}
       <StyledButton
         value="Calendar"
-        onClick={() => moveToPage("Calendar/Selection")}
+        onClick={() => moveToPage('Calendar/Selection')}
       >
         달력 기록
       </StyledButton>
-      <StyledButton value="Product" onClick={() => moveToPage("Product")}>
+      <StyledButton
+        value="Product"
+        onClick={() => moveToCameraPage('Camera', 'ProductOCR')}
+      >
         생리대 선택
       </StyledButton>
-      <StyledButton value="Restroom" onClick={() => moveToPage("Restroom")}>
+      <StyledButton value="Restroom" onClick={() => moveToPage('Restroom')}>
         화장실 환경
       </StyledButton>
     </MainContainer>

diff --git a/src/components/FileUploader.js b/src/components/FileUploader.js
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import axios from "axios";
+import React, { useState } from 'react';
+import axios from 'axios';
 
-const FileUploader = ({ endpoint }) => {
+const FileUploader = ({ setData, endpoint }) => {
   const [selectedFile, setSelectedFile] = useState(null);
 
   const handleFileChange = (event) => {
@@ -10,15 +10,16 @@ const FileUploader = ({ endpoint }) => {
 
   const handleUploadTest = () => {
     const formData = new FormData();
-    formData.append("file", selectedFile);
+    formData.append('file', selectedFile);
 
     axios
       .post(`http://127.0.0.1:${endpoint}`, formData)
       .then((response) => {
         console.log(response.data);
+        setData(response.data);
       })
       .catch((error) => {
-        console.error("Error uploading image", error);
+        console.error('Error uploading image', error);
       });
   };