Merge pull request #73 from boostcampaitech3/feat/69-fe

[Feat] Add context to separate laughter detection
boostcampaitech3 · Jun 7, 2022 · 006d00d · 006d00d
2 parents 9d571b2 + 3de3052
commit 006d00d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 42 deletions.
diff --git a/serving/frontend/src/App.js b/serving/frontend/src/App.js
@@ -3,18 +3,35 @@ import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NavBar } from './components';
 import { UploadVideo, SelectPerson, SelectVideo } from './pages';
+import { LaughterContext } from './context';
+import React, { useState, useEffect } from 'react';
 
 
 function App() {
+
+  const [laughterTimeline, setLaughterTimeline] = useState();
+  const value = { laughterTimeline, setLaughterTimeline };
+
+  useEffect(() => {
+    if (laughterTimeline) {
+      console.log(laughterTimeline);
+    }
+
+  }, [laughterTimeline]);
+
   return (
     <div className="App" style={{paddingTop: "50px"}}>
+      {/* <NavBar /> */}
       <BrowserRouter>
         <NavBar />
+        <LaughterContext.Provider value={value}>
         <Routes>
           <Route path="/" element={<UploadVideo />} />
           <Route path="/select-person" element={<SelectPerson />} />
           <Route path="/select-video" element={<SelectVideo />} />
         </Routes>
+        </LaughterContext.Provider>
+        {/** Footer */}
       </BrowserRouter>
     </div>
   );

diff --git a/serving/frontend/src/components/PeoplePanel.js b/serving/frontend/src/components/PeoplePanel.js
@@ -1,9 +1,10 @@
 import { Spin, Checkbox, Avatar, Image, Modal } from 'antd';
 import axios from 'axios';
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import styled from "styled-components";
 import { useNavigate } from 'react-router-dom';
-import { STORAGE, FACE_API, LAUGHTER_API } from '../config';
+import { STORAGE, FACE_API } from '../config';
+import { LaughterContext } from '../context';
 
 
 function PeoplePanel(props) {
@@ -12,14 +13,27 @@ function PeoplePanel(props) {
     const [loading, setLoading] = useState(false);
     const navigate = useNavigate();
 
+    const { laughterTimeline, setLaughterTimeline } = useContext(LaughterContext);
+    const [faceResult, setFaceResult] = useState(null);
+
+    useEffect(() => {
+        // laughterTimeline과 faceResult(faceTimeline)가 모두 추출된 경우
+        if (laughterTimeline && faceResult) {
+            console.log("laughter: ", laughterTimeline);
+            console.log("face: ", faceResult);
+            var res = {...faceResult};
+            res["laugh"] = laughterTimeline;
+            console.log(res);
+            getHighlight(res);
+        }
+    }, [laughterTimeline, faceResult]);
+
     const handleClick = (res) => { 
-
         navigate("/select-video", { state : res }); 
     };
 
     const onChange = (list) => {
         setCheckedList(list);
-        console.log(list);
     };
 
     const render = (people) => {
@@ -52,8 +66,7 @@ function PeoplePanel(props) {
         });
     };
 
-    const personSelect = async () => {
-
+    const personSelect = async() => {
         const FaceTimeline = () => {
             return axios({
                 method:"post",
@@ -62,27 +75,15 @@ function PeoplePanel(props) {
             });
         };
 
-        const LaughTimeline = () => {
-            return axios({
-                method: "post",
-                url : `${LAUGHTER_API}/timeline-laughter`,
-                data : {"id" : props.id_laughter}
-            });
-        };
-
         if (checkedList.length) {
             setLoading(true);
-
             console.log('checkedList', checkedList);
-
-            await axios.all([FaceTimeline(), LaughTimeline()])
-            .then(axios.spread(function (face_timeline, laugh_timeline) {
-                var res = { ...face_timeline.data};
-                res["laugh"] = laugh_timeline.data.laugh;
-                res["people_img"] = props.people
-                getHighlight(res);
+            await FaceTimeline().then((response) => {
+                var res = {...response.data};
+                res["people_img"] = props.people;
                 console.log(res);
-            })).catch((error) => {
+                setFaceResult(res);
+            }).catch((error) => {
                 console.log("Failure :(");
             });
         } else {
@@ -93,7 +94,7 @@ function PeoplePanel(props) {
                 maskClosable: true,
             });
         }
-    };
+    }
 
     return (
         <StyledPanel>

diff --git a/serving/frontend/src/context/LaughterContext.js b/serving/frontend/src/context/LaughterContext.js
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export const LaughterContext = createContext({
+    laughterTimeline: null,
+    setLaughterTimeline: () => {}
+});
diff --git a/serving/frontend/src/context/index.js b/serving/frontend/src/context/index.js
@@ -0,0 +1,3 @@
+import { LaughterContext } from "./LaughterContext";
+
+export { LaughterContext };
diff --git a/serving/frontend/src/pages/UploadVideo.js b/serving/frontend/src/pages/UploadVideo.js
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import styled from "styled-components";
 import axios from 'axios';
 import { Spin, Upload, message } from 'antd';
 import { InboxOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { FACE_API, LAUGHTER_API } from '../config';
+import { LaughterContext } from '../context';
 
 
 const { Dragger } = Upload;
@@ -17,6 +18,8 @@ function UploadVideo() {
   const [people, setPeople] = useState({});
   const [file, setFile] = useState();
 
+  const { laughterTimeline, setLaughterTimeline } = useContext(LaughterContext);
+
   const navigate = useNavigate();
 
   const props = {
@@ -62,7 +65,7 @@ function UploadVideo() {
     const getLaughterDetection = () => {
       return axios({
         method: "post",
-        url: `${LAUGHTER_API}/upload-video`,
+        url: `${LAUGHTER_API}/laughter-detection`,
         data: formData,
         headers: {
           "Content-Type": "multipart/form-data",
@@ -84,17 +87,20 @@ function UploadVideo() {
       });
     }
 
-    await axios.all([getFaceClustering(), getLaughterDetection()])
-      .then(axios.spread(function (face_clustering, laughter_detection) {
-          var tmp = { ...face_clustering.data};
-          tmp["id_laughter"] = laughter_detection.data.id_laughter;
-          setRes(tmp);
-          console.log(tmp);
-          getPeopleImg(tmp["id"])
-      })).catch((error) => {
-        console.log("Failure :(");
-      });
+    getFaceClustering().then((response) => {
+      setRes(response.data);
+      console.log(response.data);
+      getPeopleImg(response.data.id);
+    }).catch((error) => {
+      console.log("Failure :(");
+    });
 
+    getLaughterDetection().then((response) => {
+      console.log(response.data);
+      setLaughterTimeline(response.data.laugh);
+    }).catch((error) => {
+      console.log("Failure :(");
+    });
   };
 
   return (
@@ -114,13 +120,12 @@ function UploadVideo() {
             <p style={{fontSize: '18px', color: '#707070', fontWeight: 'bold'}}>원본 영상을 업로드해주세요.</p>
           </Dragger>
         </StyledUpload>
+        { next ? (
+          <StyledButton onClick={handleClick}>인물 선택하기!</StyledButton>
+        ) : (
+          <StyledButton onClick={uploadModule}>비디오 업로드하기!</StyledButton>
+        )}
       </Spin>
-      {
-        !next && (<StyledButton onClick={uploadModule}>비디오 업로드하기!</StyledButton>)
-      }
-      {
-        next && (<StyledButton onClick={handleClick}>인물 선택하기!</StyledButton>)
-      }
     </div>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { LaughterContext } from "./LaughterContext";

		export { LaughterContext };