better ui

frontend_refactor/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "ahooks": "^3.7.1",
         "antd": "^4.23.4",
         "axios": "^0.27.2",
         "eslint": "8.22.0",
@@ -3903,6 +3904,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -4496,6 +4502,32 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/ahooks": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.1.tgz",
+      "integrity": "sha512-9fooKjhScNyJaIPnlWd13LkY1gQYqv3BqwSA9ynHg1ZUtDqAICuCRoedV97ylrEL6QqI4zeq3bO3lQxkfWVNcg==",
+      "dependencies": {
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -8514,6 +8546,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -10715,6 +10752,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14458,6 +14500,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.29",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
@@ -19364,6 +19414,11 @@
         }
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -19857,6 +19912,26 @@
         "debug": "4"
       }
     },
+    "ahooks": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.1.tgz",
+      "integrity": "sha512-9fooKjhScNyJaIPnlWd13LkY1gQYqv3BqwSA9ynHg1ZUtDqAICuCRoedV97ylrEL6QqI4zeq3bO3lQxkfWVNcg==",
+      "requires": {
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0"
+      }
+    },
+    "ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -23013,6 +23088,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -24716,6 +24796,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -27401,6 +27486,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "scroll-into-view-if-needed": {
       "version": "2.2.29",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",

frontend_refactor/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ahooks": "^3.7.1",
     "antd": "^4.23.4",
     "axios": "^0.27.2",
     "eslint": "8.22.0",

frontend_refactor/src/App.js

@@ -1,11 +1,12 @@
 import SubmitForm from "./containers/SubmitForm";
 import TaskList from "./containers/TaskList";
 import "./App.css"
-import {useState} from "react";
+import {useLocalStorageState} from "ahooks";
+import {Button} from "antd";
 
 function App() {
 
-    const [tasks, setTasks] = useState([]);
+    const [tasks, setTasks] = useLocalStorageState("tasks", {defaultValue: []});
 
     function newTaskAdded(uuid) {
         setTasks([uuid, ...tasks])
@@ -14,6 +15,7 @@ function App() {
     return (
         <div>
             <SubmitForm onNewTask={newTaskAdded}/>
+            <Button danger style={{margin: "0 auto", marginTop: 30, marginLeft: "10%"}} onClick={() => (setTasks([]))}>清空已有任务列表</Button>
             <TaskList tasks={tasks}/>
         </div>
     );

frontend_refactor/src/containers/SubmitForm.js

@@ -20,6 +20,7 @@ const types = [
     ["VIDEO_SQUAT", "深蹲视频分析"]
 ]
 
+
 class SubmitForm extends React.Component {
 
     res = {}
@@ -43,6 +44,10 @@ class SubmitForm extends React.Component {
             data: this.res
         }).then(r => {
             this.props.onNewTask(r.data.data.task_uuid)
+            message.success("提交任务成功!")
+            setTimeout(() => {
+                this.setState({submitted: false})
+            }, 2000)
         }).catch(e => {
             message.error("提交出错: " + JSON.stringify(e))
             this.setState({submitted: false})
@@ -67,7 +72,7 @@ class SubmitForm extends React.Component {
     render() {
         return (
             <div>
-                <Card style={{height: "40%", width: "80%", margin: "0 auto", marginTop: 30}}>
+                <Card style={{height: "40%", width: "80%", margin: "0 auto"}}>
                     <Select defaultValue={types[0]} style={{width: 200}} onChange={this.choiceChange}>
                         {types.map(x => <Select.Option key={x[0]} value={x[0]}>{x[1]}</Select.Option>)}
                     </Select>

frontend_refactor/src/containers/TaskList.js

@@ -3,6 +3,7 @@ import {Collapse, Divider, Progress} from "antd";
 import axios from "axios";
 import {BACKEND_URL} from "../config";
 
+
 class TaskList extends React.Component {
 
     state = {
@@ -13,12 +14,12 @@ class TaskList extends React.Component {
         this.timer = setInterval(() => {
             this.props.tasks.forEach((x) => {
 
-                if (!(x in this.state.details) || this.state.details[x]['status'] == 'RUNNING' || this.state.details[x]['status'] == 'QUEUEING') {
+                if (!(x in this.state.details) || this.state.details[x]['status'] === 'RUNNING' || this.state.details[x]['status'] === 'QUEUEING') {
                     axios.get(BACKEND_URL + "/result/" + x).then(r => {
-                        this.state.details[x] = r.data.data
-                        this.setState(this.state.details)
+                        this.setState({details: {...this.state.details, [x]: r.data.data}})
                     })
                 }
+
             })
         }, 2000)
     }
@@ -34,35 +35,53 @@ class TaskList extends React.Component {
                     {
                         this.props.tasks.map(x => {
 
-                            const details = this.state.details[x]
-
-                            if (details === undefined) {
-                                return <></>;
+                            let data = this.state.details[x]
+                            if (data === undefined) {
+                                return (
+                                    <Collapse.Panel header={"任务 ID: " + x} key={x}>
+                                        <p>状态: 获取中...</p>
+                                    </Collapse.Panel>
+                                );
                             }
 
-                            let data = ""
+                            let progress = data.status === "FINISHED" ? 100 : data.progress
+                            let result = data.result
                             let advice = ""
-                            let raw = ""
-                            let progress = details.status === "FINISHED" ? 100 : details.progress
+                            let analysis = []
 
+                            let video_element = <></>
 
                             try {
-                                raw = JSON.stringify(details)
-                                data = JSON.stringify(details.result.analysis.data)
-                                advice = JSON.stringify(details.result.analysis.advice)
+                                if (result.file !== undefined) {
+                                    video_element = <p>视频结果: <video controls><source src={result.file}/></video></p>
+                                }
                             } catch (e) {
 
                             }
 
+                            if (result !== undefined) {
+                                advice = result.advice
+
+                                for (const key in result.data) {
+                                    analysis.push(result.data[key])
+                                }
+                            }
+
                             return (
                                 <Collapse.Panel header={"任务 ID: " + x} key={x}>
-                                    <p>状态: {details.status}</p>
-                                    <p><Progress style={{width: "50%"}} percent={progress} status={details.status !== "ERROR" ? "active" : "exception"} /></p>
-                                    <p>建议: {advice}</p>
-                                    <p>评分: {data}</p>
-                                    <p>原始数据: {raw}</p>
+                                    <p>状态: {data.status}</p>
+                                    <p><Progress style={{width: "50%"}} percent={progress}
+                                                 status={data.status !== "ERROR" ? "active" : "exception"}/></p>
+                                    <p>建议: {JSON.stringify(advice)}</p>
+                                    {video_element}
+                                    <p>分析数据: {
+                                        analysis.map(x => (<p>
+                                            <p>{Object.keys(x).map(key => <>{key + ": " + x[key]}<br/></>)}</p>
+                                            <img src={x['file']}></img>
+                                        </p>))
+                                    }</p>
                                 </Collapse.Panel>
-                            )
+                            );
                         })
                     }
                 </Collapse>