Skip to content
Snippets Groups Projects
Commit 7cb3f7dd authored by Mia Wang's avatar Mia Wang
Browse files

combine form submission data

parent 4c091775
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
backend/react_app.py
+ 4
− 11
View file @ 7cb3f7dd
...@@ -4,15 +4,8 @@ from flask import Flask, request ...@@ -4,15 +4,8 @@ from flask import Flask, request
app = Flask(__name__) app = Flask(__name__)
@app.route('/profile') @app.route('/home', methods=["POST"])
def my_profile(): def home():
response_body = { data = request.json
"name": "Nagato",
"about" :"Hello! I'm a full stack developer that loves python and javascript"
}
return response_body return data
# def get_user_input():
# return request.args
\ No newline at end of file
package.json
+ 2
− 0
View file @ 7cb3f7dd
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2", "@mui/material": "^5.6.2",
"@mui/styled-engine-sc": "^5.6.1", "@mui/styled-engine-sc": "^5.6.1",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
...@@ -13,6 +14,7 @@ ...@@ -13,6 +14,7 @@
"axios": "^0.26.1", "axios": "^0.26.1",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-hook-form": "^7.30.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
......
public/basic.html deleted 100644 → 0
+ 0
− 25
View file @ 4c091775
<!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>
public/home.html deleted 100644 → 0
+ 0
− 239
View file @ 4c091775
{% 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 %}
public/progress.html deleted 100644 → 0
+ 0
− 43
View file @ 4c091775
{% 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
public/result.html deleted 100644 → 0
+ 0
− 18
View file @ 4c091775
{% 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 %}
src/App.js
+ 2
− 2
View file @ 7cb3f7dd
...@@ -8,12 +8,12 @@ import logo from './logo.svg'; ...@@ -8,12 +8,12 @@ import logo from './logo.svg';
function App() { function App() {
useEffect(() => { useEffect(() => {
fetch('/', { fetch('/home', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ }) body: JSON.stringify({ })
}) })
.then((response) => response.json()) .then((response) => response.text())
.then((data) => console.log(data)); .then((data) => console.log(data));
}, []); }, []);
......
src/pages/Home.js 100644 → 100755
+ 63
− 30
View file @ 7cb3f7dd
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Grid, RadioGroup, FormControlLabel, FormControl, FormLabel, Radio, Card, CardContent, Typography } from '@mui/material'; import { Grid, RadioGroup, FormControlLabel, FormControl, FormLabel, Radio, Card, CardContent, Typography } from '@mui/material';
import {Button, TextField, Checkbox, FormGroup} from '@mui/material'; import {Button, TextField, Checkbox, FormGroup, Box, Switch, Grow} from '@mui/material';
import Box from '@mui/material/Box'; import { useForm, Controller} from "react-hook-form";
import Switch from '@mui/material/Switch'; import SendIcon from '@mui/icons-material/Send';
import Grow from '@mui/material/Grow';
const hyperparameter = ( const hyperparameter = (
<Grid container spacing={1} style={{maxWidth:500, padding:"0px 10px"}}> <Grid container spacing={1} style={{maxWidth:500, padding:"0px 10px"}}>
...@@ -58,24 +59,42 @@ const action_space = ( ...@@ -58,24 +59,42 @@ const action_space = (
</Grid> </Grid>
) )
// class Home extends React.Component{ // class Home extends React.Component{
export default function Home() { 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); 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(){ // render(){
return ( return (
<div className="App" style={{padding:"60px"}}> <div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" > <Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation Data Auto-Augmentation
</Typography> </Typography>
<Grid > <Grid >
<form> <form action="/home" method="POST" onSubmit={handleSubmit(onSubmit)}>
<Grid style={{padding:"30px 0px"}}> <Grid style={{padding:"30px 0px"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}> <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent> <CardContent>
...@@ -87,22 +106,28 @@ export default function Home() { ...@@ -87,22 +106,28 @@ export default function Home() {
<FormLabel id="select-dataset" align="left" variant="h6"> <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 Please select the dataset you'd like to use here or select 'Other' if you would like to upload your own dataset
</FormLabel> </FormLabel>
<RadioGroup <Controller
row name='select-dataset'
aria-labelledby="select-dataset" control={control}
defaultValue="Other" rules={{ required: true }}
name="select-dataset" render={({field: { onChange, value }}) => (
align="centre" <RadioGroup
// value={value} row
// onChange={handleChange} aria-labelledby="select-dataset"
> // defaultValue="Other"
<FormControlLabel value="MNIST" control={<Radio />} label="MNIST" /> name="select-dataset"
<FormControlLabel value="KMNIST" control={<Radio />} label="KMNIST" /> align="centre"
<FormControlLabel value="FashionMNIST" control={<Radio />} label="FashionMNIST" /> value={value ?? ""}
<FormControlLabel value="CIFAR10" control={<Radio />} label="CIFAR10" /> onChange={onChange}
<FormControlLabel value="CIFAR100" control={<Radio />} label="CIFAR100" /> >
<FormControlLabel value="Other" control={<Radio />} label="Other" /> <FormControlLabel value="MNIST" control={<Radio />} label="MNIST" />
</RadioGroup> <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 <Button
variant="contained" variant="contained"
component="label" component="label"
...@@ -135,8 +160,8 @@ export default function Home() { ...@@ -135,8 +160,8 @@ export default function Home() {
defaultValue="Other" defaultValue="Other"
name="select-network" name="select-network"
align="centre" align="centre"
// value={value} value={dsvalue}
// onChange={handleChange} onChange={handleDsChange}
> >
<FormControlLabel value="LeNet" control={<Radio />} label="LeNet" /> <FormControlLabel value="LeNet" control={<Radio />} label="LeNet" />
<FormControlLabel value="SimpleNet" control={<Radio />} label="SimpleNet" /> <FormControlLabel value="SimpleNet" control={<Radio />} label="SimpleNet" />
...@@ -179,15 +204,15 @@ export default function Home() { ...@@ -179,15 +204,15 @@ export default function Home() {
defaultValue="UCB" defaultValue="UCB"
name="select-learner" name="select-learner"
align="centre" align="centre"
// value={value} value={netvalue}
// onChange={handleChange} onChange={handleNetChange}
> >
<FormControlLabel value="UCB" control={<Radio />} label="UCB" /> <FormControlLabel value="UCB" control={<Radio />} label="UCB" />
<FormControlLabel value="Evolutionary" control={<Radio />} label="Evolutionary Learner" /> <FormControlLabel value="Evolutionary" control={<Radio />} label="Evolutionary Learner" />
<FormControlLabel value="Random Searcher" control={<Radio />} label="Random Searcher" /> <FormControlLabel value="Random Searcher" control={<Radio />} label="Random Searcher" />
<FormControlLabel value="GRU Learner" control={<Radio />} label="GRU Learner" /> <FormControlLabel value="GRU Learner" control={<Radio />} label="GRU Learner" />
</RadioGroup> </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...) (give user some recommendation here...)
</Typography> </Typography>
</FormControl> </FormControl>
...@@ -203,7 +228,7 @@ export default function Home() { ...@@ -203,7 +228,7 @@ export default function Home() {
<Box sx={{ maxHeight: 500 }}> <Box sx={{ maxHeight: 500 }}>
<FormControlLabel <FormControlLabel
control={<Switch checked={checked} onChange={handleChange} />} control={<Switch checked={checked} onChange={handleShow} />}
label="Show" label="Show"
/> />
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
...@@ -219,7 +244,15 @@ export default function Home() { ...@@ -219,7 +244,15 @@ export default function Home() {
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Button
type="submit"
variant="contained"
color='success'
size='large'
endIcon={<SendIcon />}
>
Submit Form
</Button>
</form> </form>
</Grid> </Grid>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment