From 7cb3f7dd286d37294f537fa1808bca8a76158bfc Mon Sep 17 00:00:00 2001
From: Mia Wang <yw21218@ic.ac.uk>
Date: Wed, 20 Apr 2022 11:44:20 +0100
Subject: [PATCH] combine form submission data
---
backend/react_app.py | 15 +--
package.json | 2 +
public/basic.html | 25 -----
public/home.html | 239 -------------------------------------------
public/progress.html | 43 --------
public/result.html | 18 ----
src/App.js | 4 +-
src/pages/Home.js | 93 +++++++++++------
8 files changed, 71 insertions(+), 368 deletions(-)
delete mode 100644 public/basic.html
delete mode 100644 public/home.html
delete mode 100644 public/progress.html
delete mode 100644 public/result.html
mode change 100644 => 100755 src/pages/Home.js
diff --git a/backend/react_app.py b/backend/react_app.py
index b082b2ab..0e5f462b 100644
--- a/backend/react_app.py
+++ b/backend/react_app.py
@@ -4,15 +4,8 @@ from flask import Flask, request
app = Flask(__name__)
-@app.route('/profile')
-def my_profile():
- response_body = {
- "name": "Nagato",
- "about" :"Hello! I'm a full stack developer that loves python and javascript"
- }
+@app.route('/home', methods=["POST"])
+def home():
+ data = request.json
- return response_body
-
-# def get_user_input():
-
-# return request.args
\ No newline at end of file
+ return data
diff --git a/package.json b/package.json
index 7e0afa9d..37a93f09 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
+ "@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2",
"@mui/styled-engine-sc": "^5.6.1",
"@testing-library/jest-dom": "^5.16.4",
@@ -13,6 +14,7 @@
"axios": "^0.26.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
+ "react-hook-form": "^7.30.0",
"react-scripts": "^5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
diff --git a/public/basic.html b/public/basic.html
deleted file mode 100644
index 9c47ba6a..00000000
--- a/public/basic.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
- <style>
- #myProgress {
- width: 100%;
- background-color: #ddd;
- }
-
- #myBar {
- width: 1%;
- height: 30px;
- background-color: #04AA6D;
- }
- </style>
-
- <head>
- {% block head %}
- <title>{% block title %}{% endblock %} - Meta Reinforcement Learning for Data Augmentation</title>
- {% endblock %}
- </head>
- <body>
- {% block body %}{% endblock %}
- </body>
-</html>
-
diff --git a/public/home.html b/public/home.html
deleted file mode 100644
index 2e3000db..00000000
--- a/public/home.html
+++ /dev/null
@@ -1,239 +0,0 @@
-{% extends "basic.html" %}
-{% block title%}Home{% endblock %}
-{% block body %}
-<h1>Meta Reinforcement Learning for Data Augmentation</h1>
-
-<h3>Choose your dataset</h3>
-<form action="/user_input" method="POST" enctype="multipart/form-data">
- <!-- upload dataset -->
- <label for="dataset_upload">You can upload your dataset folder here:</label>
- <input type="file" id='dataset_upload' name="dataset_upload" class="upload"><br><br>
-
- <!-- <label for="dataset_upload">Upload your train dataset folder here:</label> -->
- <!-- <input type="file" id='dataset_upload' name="dataset_upload" webkitdirectory mozdirectory /><br> -->
- <!-- <label for="dataset_upload">Upload your test dataset folder here:</label>
- <input type="file" id='test_upload' name="test_upload" webkitdirectory mozdirectory /><br><br> -->
-
- <!-- dataset radio button -->
- Or you can select a dataset from our database: <br>
- <input type="radio" id="dataset1"
- name="dataset_selection" value="MNIST">
- <label for="dataset1">MNIST dataset</label><br>
-
- <input type="radio" id="dataset2"
- name="dataset_selection" value="KMNIST">
- <label for="dataset2">KMNIST dataset</label><br>
-
- <input type="radio" id="dataset3"
- name="dataset_selection" value="FashionMNIST">
- <label for="dataset3">FashionMNIST dataset</label><br>
-
- <input type="radio" id="dataset4"
- name="dataset_selection" value="CIFAR10">
- <label for="dataset4">CIFAR10 dataset</label><br>
-
- <input type="radio" id="dataset5"
- name="dataset_selection" value="CIFAR100">
- <label for="dataset5">CIFAR100 dataset</label><br>
-
- <input type="radio" id="dataset6"
- name="dataset_selection" value="Other">
- <label for="dataset6">Other dataset DIFFERENT</label><br><br>
-
-<!-- --------------------------------------------------------------- -->
-
-
- <h3>Choose the network the dataset is trained on</h3>
- <!-- upload network -->
- <label for="network_upload">Please upload your network here as a .pkl file:</label>
- <input type="file" id='network_upload' name="network_upload" class="upload"><br><br>
-
-
- <!-- network selection -->
- Or you can select a dataset from our database: <br>
- <input type="radio" id="network1"
- name="network_selection" value="LeNet">
- <label for="network1">LeNet</label><br>
-
- <input type="radio" id="network2"
- name="network_selection" value="EasyNet">
- <label for="network2">EasyNet</label><br>
-
- <input type="radio" id="network3"
- name="network_selection" value="SimpleNet">
- <label for="network3">SimpleNet</label><br>
-
- <input type="radio" id="network4"
- name="network_selection" value="Other">
- <label for="network4">Other</label><br><br>
-
-
-
- <h3>Advanced Search</h3>
- <!-- action(data augmentation) space -->
- Which data augmentation method you would like exclude? <br>
- <input type="checkbox" id="ShearX"
- name="action_space" value="ShearX">
- <label for="ShearX">ShearX</label>
-
- <input type="checkbox" id="ShearY"
- name="action_space" value="ShearY">
- <label for="ShearY">ShearY</label>
-
- <input type="checkbox" id="TranslateX"
- name="action_space" value="TranslateX">
- <label for="TranslateX">TranslateX</label>
-
- <input type="checkbox" id="TranslateY"
- name="action_space" value="TranslateY">
- <label for="TranslateY">TranslateY</label>
-
- <input type="checkbox" id="Rotate"
- name="Rotate" value="Rotate">
- <label for="Rotate">Rotate</label><br>
-
- <input type="checkbox" id="Brightness"
- name="action_space" value="Brightness">
- <label for="Brightness">Brightness</label>
-
- <input type="checkbox" id="Color"
- name="action_space" value="Color">
- <label for="Color">Color</label>
-
- <input type="checkbox" id="Contrast"
- name="action_space" value="Contrast">
- <label for="Contrast">Contrast</label>
-
- <input type="checkbox" id="Sharpness"
- name="action_space" value="Sharpness">
- <label for="Sharpness">Sharpness</label><br>
-
- <input type="checkbox" id="Posterize"
- name="action_space" value="Posterize">
- <label for="Posterize">Posterize</label>
-
- <input type="checkbox" id="Solarize"
- name="action_space" value="Solarize">
- <label for="Solarize">Solarize</label>
-
- <input type="checkbox" id="AutoContrast"
- name="action_space" value="AutoContrast">
- <label for="AutoContrast">AutoContrast</label>
-
- <input type="checkbox" id="Equalize"
- name="action_space" value="Equalize">
- <label for="Equalize">Equalize</label>
-
- <input type="checkbox" id="Invert"
- name="action_space" value="Invert">
- <label for="Invert">Invert</label><br><br><br>
-
-
-
- <div id="like_button_container"></div>
- <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-
- <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
- <!-- <script src="metarl/auto_augmentation/templates/like_button.js"></script> -->
-
- <script type = 'module'>
- // 'use strict';
- import React from 'react';
- import ReactDOM from "react-dom/client";
- </script>
-
-
- <script>
- const e = React.createElement;
-
- var path = document.location.pathname;
- var directory = path.substring(path.indexOf('/'), path.lastIndexOf('/'));
- // var loc = window.location.pathname;
-
-
-
- class LikeButton extends React.Component {
- constructor(props) {
- super(props);
- this.state = { liked: false };
- }
-
- render() {
- if (this.state.liked) {
- return 'You liked this.';
- }
-
- return e(
- 'button',
- { onClick: () => this.setState({ liked: true }) },
- 'Like'
- );
- }
- }
-
-
- const domContainer = document.querySelector('#like_button_container');
- const root = ReactDOM.createRoot(domContainer);
- root.render(e(LikeButton));
-
- </script>
-
-
-
-
-
-
-
-
- <!-- 3
- <div id="mydiv"></div>
-
- <script type="text/babel" type="javascript">
- import ReactDOM from 'react-dom';
- function Hello() {
- return <h1>Hello World!</h1>;
- }
-
- ReactDOM.render(<Hello />, document.getElementById('mydiv'))
- </script>
- 3 -->
-
-
- <!-- ----------------- -->
-
-
- <!-- <script
- src="https://unpkg.com/react@16/umd/react.production.min.js"
- crossorigin
- type="javascript"
- ></script>
- <script
- src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
- crossorigin
- ></script>
- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
- <script type="text/babel" src="WelcomeBack.js"></script>
- <script type="text/babel" src="CoolButton.js"></script>
-
- <script type="text/babel">
- ReactDOM.render(<WelcomeBack />, document.querySelector(".welcome-back"));
- </script> -->
-
-
-
-
-
-
-
-
-
-
-
- <input type="submit">
-
-
-</form>
-
-
-{% endblock %}
diff --git a/public/progress.html b/public/progress.html
deleted file mode 100644
index 7228b06b..00000000
--- a/public/progress.html
+++ /dev/null
@@ -1,43 +0,0 @@
-{% extends "basic.html" %}
-{% block title%}Progress{% endblock %}
-{% block body %}
-Training the model...
-
-<div>
- <img src="{{url_for('static', filename='image/training_plot.png')}}" class="img-thumbnail" />
-
-
- <div id="myProgress">
- <div id="myBar"></div>
- </div>
-
- <br>
- <button onclick="move()">Click Me</button>
-
- <script>
- var i = 0;
- function move() {
- if (i == 0) {
- i = 1;
- var elem = document.getElementById("myBar");
- var width = 1;
- var id = setInterval(frame, 10);
- function frame() {
- if (width >= 100) {
- clearInterval(id);
- i = 0;
- } else {
- width++;
- elem.style.width = width + "%";
- }
- }
- }
- }
- </script>
-
- <form action="/show_result">
- <input type="submit" value='Show Result'>
- </form>
-</div>
-
-{% endblock %}
\ No newline at end of file
diff --git a/public/result.html b/public/result.html
deleted file mode 100644
index 6e127fdb..00000000
--- a/public/result.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends "basic.html" %}
-{% block title %}Result{% endblock %}
-{% block body %}
-
-<div>
- <b>Accuracy before data augmentation is: 64.6%</b><br>
- <b>Accuracy after data augmentation is: 79.3%</b>
-
-</div>
-
-<div>
- <form action="/download">
- <input type="submit" value='Download CNN'>
- </form>
-</div>
-
-{% endblock %}
-
diff --git a/src/App.js b/src/App.js
index 2f270ce2..a4c3c8a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,12 +8,12 @@ import logo from './logo.svg';
function App() {
useEffect(() => {
- fetch('/', {
+ fetch('/home', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ })
})
- .then((response) => response.json())
+ .then((response) => response.text())
.then((data) => console.log(data));
}, []);
diff --git a/src/pages/Home.js b/src/pages/Home.js
old mode 100644
new mode 100755
index 3c868821..4244818e
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,9 +1,10 @@
import React, { useState, useEffect } from "react";
import { Grid, RadioGroup, FormControlLabel, FormControl, FormLabel, Radio, Card, CardContent, Typography } from '@mui/material';
-import {Button, TextField, Checkbox, FormGroup} from '@mui/material';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Grow from '@mui/material/Grow';
+import {Button, TextField, Checkbox, FormGroup, Box, Switch, Grow} from '@mui/material';
+import { useForm, Controller} from "react-hook-form";
+import SendIcon from '@mui/icons-material/Send';
+
+
const hyperparameter = (
<Grid container spacing={1} style={{maxWidth:500, padding:"0px 10px"}}>
@@ -58,24 +59,42 @@ const action_space = (
</Grid>
)
+
// class Home extends React.Component{
export default function Home() {
- const [checked, setChecked] = React.useState(false);
+ const [checked, setChecked] = useState(false); // advanced search toggle
+ const [dsvalue, setDsvalue] = useState('Other'); // dataset selection
+ const [netvalue, setNetvalue] = useState('Other'); // network selection
- const handleChange = () => {
+ const handleShow = () => {
setChecked((prev) => !prev);
};
+
+ const handleDsChange = (event) => {
+ setDsvalue(event.target.value);
+ };
+
+ const handleNetChange = (event) => {
+ setNetvalue(event.target.value);
+ };
+
+// for form submission
+ const { control, handleSubmit } = useForm();
+ const onSubmit = data => console.log(data);
+
+
// render(){
return (
+
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation
</Typography>
<Grid >
- <form>
+ <form action="/home" method="POST" onSubmit={handleSubmit(onSubmit)}>
<Grid style={{padding:"30px 0px"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
@@ -87,22 +106,28 @@ export default function Home() {
<FormLabel id="select-dataset" align="left" variant="h6">
Please select the dataset you'd like to use here or select 'Other' if you would like to upload your own dataset
</FormLabel>
- <RadioGroup
- row
- aria-labelledby="select-dataset"
- defaultValue="Other"
- name="select-dataset"
- align="centre"
- // value={value}
- // onChange={handleChange}
- >
- <FormControlLabel value="MNIST" control={<Radio />} label="MNIST" />
- <FormControlLabel value="KMNIST" control={<Radio />} label="KMNIST" />
- <FormControlLabel value="FashionMNIST" control={<Radio />} label="FashionMNIST" />
- <FormControlLabel value="CIFAR10" control={<Radio />} label="CIFAR10" />
- <FormControlLabel value="CIFAR100" control={<Radio />} label="CIFAR100" />
- <FormControlLabel value="Other" control={<Radio />} label="Other" />
- </RadioGroup>
+ <Controller
+ name='select-dataset'
+ control={control}
+ rules={{ required: true }}
+ render={({field: { onChange, value }}) => (
+ <RadioGroup
+ row
+ aria-labelledby="select-dataset"
+ // defaultValue="Other"
+ name="select-dataset"
+ align="centre"
+ value={value ?? ""}
+ onChange={onChange}
+ >
+ <FormControlLabel value="MNIST" control={<Radio />} label="MNIST" />
+ <FormControlLabel value="KMNIST" control={<Radio />} label="KMNIST" />
+ <FormControlLabel value="FashionMNIST" control={<Radio />} label="FashionMNIST" />
+ <FormControlLabel value="CIFAR10" control={<Radio />} label="CIFAR10" />
+ <FormControlLabel value="CIFAR100" control={<Radio />} label="CIFAR100" />
+ <FormControlLabel value="Other" control={<Radio />} label="Other" />
+ </RadioGroup> )}
+ />
<Button
variant="contained"
component="label"
@@ -135,8 +160,8 @@ export default function Home() {
defaultValue="Other"
name="select-network"
align="centre"
- // value={value}
- // onChange={handleChange}
+ value={dsvalue}
+ onChange={handleDsChange}
>
<FormControlLabel value="LeNet" control={<Radio />} label="LeNet" />
<FormControlLabel value="SimpleNet" control={<Radio />} label="SimpleNet" />
@@ -179,15 +204,15 @@ export default function Home() {
defaultValue="UCB"
name="select-learner"
align="centre"
- // value={value}
- // onChange={handleChange}
+ value={netvalue}
+ onChange={handleNetChange}
>
<FormControlLabel value="UCB" control={<Radio />} label="UCB" />
<FormControlLabel value="Evolutionary" control={<Radio />} label="Evolutionary Learner" />
<FormControlLabel value="Random Searcher" control={<Radio />} label="Random Searcher" />
<FormControlLabel value="GRU Learner" control={<Radio />} label="GRU Learner" />
</RadioGroup>
- <Typography style={{ width: 800}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
+ <Typography style={{ maxWidth: 800}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
(give user some recommendation here...)
</Typography>
</FormControl>
@@ -203,7 +228,7 @@ export default function Home() {
<Box sx={{ maxHeight: 500 }}>
<FormControlLabel
- control={<Switch checked={checked} onChange={handleChange} />}
+ control={<Switch checked={checked} onChange={handleShow} />}
label="Show"
/>
<Box sx={{ display: 'flex' }}>
@@ -219,7 +244,15 @@ export default function Home() {
</Box>
</Box>
</Grid>
-
+ <Button
+ type="submit"
+ variant="contained"
+ color='success'
+ size='large'
+ endIcon={<SendIcon />}
+ >
+ Submit Form
+ </Button>
</form>
</Grid>
--
GitLab