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

deploying react flask to heroku

parent 489e7f79
No related branches found
No related tags found
No related merge requests found
Pipeline #272028 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 29267 additions and 0 deletions
react_frontend/package-lock.json 0 → 100644
+ 28385
− 0
View file @ 97317ee1
Source diff could not be displayed: it is too large. Options to address this: view the blob.
react_frontend/package.json 0 → 100644
+ 50
− 0
View file @ 97317ee1
{
"name": "react_app_metarl",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"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",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"js-file-download": "^0.4.12",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-hook-form": "^7.30.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"start-backend": "cd backend && env/bin/flask run --no-debugger",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
react_frontend/public/favicon.ico 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/public/favicon.ico

3.78 KiB

react_frontend/public/index.html 0 → 100644
+ 43
− 0
View file @ 97317ee1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>MetaRL for AutoAugmentation</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
react_frontend/public/logo192.png 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/public/logo192.png

5.22 KiB

react_frontend/public/logo512.png 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/public/logo512.png

9.44 KiB

react_frontend/public/manifest.json 0 → 100644
+ 25
− 0
View file @ 97317ee1
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
react_frontend/src/App.css 0 → 100644
+ 38
− 0
View file @ 97317ee1
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
react_frontend/src/App.js 0 → 100644
+ 50
− 0
View file @ 97317ee1
import Home from './pages/Home'
import Confirm from './pages/Confirm'
import Progress from './pages/Progress'
import Result from './pages/Result'
import './App.css';
import React, { useState, useEffect } from "react";
import axios from "axios";
import {BrowserRouter, Route, Routes, Switch} from 'react-router-dom';
function App() {
// useEffect(() => {
// console.log('print here')
// fetch('/home', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ })
// })
// .then((response) => response.text())
// .then((data) => console.log('data', data));
// }, []);
// useEffect(() => {
// fetch('/api').then(response =>{
// if(response.ok){
// return response.json()
// }
// }).then(data => console.log('api', data))
// }, [])
return (
<div>
{/* <Home /> */}
{/* <Confirm /> */}
{/* <Progress /> */}
{/* <Result /> */}
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/confirm" element={<Confirm/>}/>
<Route exact path="/progress" element={<Progress/>}/>
<Route exact path="/result" element={<Result/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
react_frontend/src/App.test.js 0 → 100644
+ 8
− 0
View file @ 97317ee1
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/lol react/i);
expect(linkElement).toBeInTheDocument();
});
react_frontend/src/components/pytest.png 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/src/components/pytest.png

7.93 KiB

react_frontend/src/index.css 0 → 100644
+ 13
− 0
View file @ 97317ee1
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
react_frontend/src/index.js 0 → 100644
+ 17
− 0
View file @ 97317ee1
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
react_frontend/src/logo.svg 0 → 100644
+ 1
− 0
View file @ 97317ee1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
react_frontend/src/pages/Confirm.js 0 → 100644
+ 113
− 0
View file @ 97317ee1
import React, { useState, useEffect } from "react";
import { Grid, ListItem, ListItemAvatar, ListItemText, Card, CardContent, Typography, Button } from '@mui/material';
import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
import {useNavigate, Route} from "react-router-dom";
export default function Confirm() {
const [myData, setMyData] = useState([])
const [dataset, setDataset] = useState()
const [network, setNetwork] = useState()
useEffect(() => {
const res = fetch('/confirm').then(
response => response.json()
).then(data => {setMyData(data);
if (data.ds == 'Other'){setDataset(data.ds_name)} else {setDataset(data.ds)};
if (data.IsLeNet == 'Other'){setNetwork(data.network_name)} else {setNetwork(data.IsLeNet)};
});
}, []);
let navigate = useNavigate();
const onSubmit = async () => {
navigate('/progress', {replace:true});
};
return (
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation
</Typography>
<Grid>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h6" align="left">
Please confirm the following information:
</Typography>
<Grid alignItems="center" justify="center" >
<Grid style={{maxWidth: 700, padding: "20px 20px"}} container spacing={4} alignItems="center" >
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<TuneRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Batch size" secondary={myData.batch_size} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item >
<ListItem>
<ListItemAvatar>
<CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Dataset selection" secondary={dataset} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<TuneRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Learning rate" secondary={myData.learning_rate} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Network selection" secondary={network} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<TuneRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Dataset Proportion" secondary={myData.toy_size} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Auto-augment learner selection" secondary={myData.auto_aug_learner} />
</ListItem>
</Grid>
<Grid xs={12} sm={6} item>
<ListItem>
<ListItemAvatar>
<TuneRoundedIcon color="primary" fontSize='large'/>
</ListItemAvatar>
<ListItemText primary="Iterations" secondary={myData.iterations} />
</ListItem>
</Grid>
</Grid>
</Grid>
<Button
type="submit"
variant="contained"
color='success'
size='large'
onClick={onSubmit}
>
Confirm
</Button>
</CardContent>
</Card>
</Grid>
</div>
)
}
\ No newline at end of file
react_frontend/src/pages/Home.js 0 → 100644
+ 394
− 0
View file @ 97317ee1
import React, { useState, useEffect } from "react";
import { Grid, RadioGroup, FormControlLabel, FormControl, FormLabel, Radio, Card, CardContent, Typography, AlertTitle } from '@mui/material';
import {Button, TextField, Checkbox, Alert} from '@mui/material';
import { useForm, Controller} from "react-hook-form";
import SendIcon from '@mui/icons-material/Send';
import { CardActions, Collapse, IconButton } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { styled } from '@mui/material/styles';
import {useNavigate, Route} from "react-router-dom";
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
export default function Home() {
const [selectLearner, setSelectLearner] = useState([]);
const [selectAction, setSelectAction] = useState([]);
// for form submission
const {register, control, handleSubmit, setValue, watch, formState: { errors, dirtyFields}} = useForm();
const watchFileds = watch(['select_dataset', 'select_network']);
let navigate = useNavigate();
const onSubmit = async (data) => {
console.log('data', data);
const formData = new FormData();
formData.append("ds_upload", data.ds_upload[0]);
formData.append("network_upload", data.network_upload[0]);
formData.append("batch_size", data.batch_size)
formData.append("toy_size", data.toy_size)
formData.append("iterations", data.iterations)
formData.append("learning_rate", data.learning_rate)
formData.append("select_action", data.select_action)
formData.append("select_dataset", data.select_dataset)
formData.append("select_learner", data.select_learner)
formData.append("select_network", data.select_network)
console.log('>>> this is the user input in formData')
for (var key of formData.entries()) {
console.log(key[0] + ', ' + key[1])}
var responseClone
const res = await fetch('/home', {
method: 'POST',
body: formData
}).then((response) => response.json());
navigate('/confirm', {replace:true});
//
///////// testing
// .then((response)=> {
// responseClone = response.clone(); // 2
// return response.json();
// })
// .then(function (data) {
// console.log('data from flask', data)
// }, function (rejectionReason) { // 3
// console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
// responseClone.text() // 5
// .then(function (bodyText) {
// console.log('Received the following instead of valid JSON:', bodyText); // 6
// });
// });
};
// body: JSON.stringify(data)
// console.log('errors', errors);
// console.log('handleSubmit', handleSubmit)
// handling action selection
const handleActionSelect = (value) => {
const isPresent = selectAction.indexOf(value);
if (isPresent !== -1) {
const remaining = selectAction.filter((item) => item !== value);
setSelectAction(remaining);
} else {
setSelectAction((prevItems) => [...prevItems, value]);
}
};
useEffect(() => {
setValue('select_action', selectAction);
}, [selectAction]);
// collpase
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation
</Typography>
<Grid >
<form action="/home" method="POST" onSubmit={handleSubmit(onSubmit)}>
<Grid style={{padding:"30px 0px"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h5" align="left">
Dataset Uploading
</Typography>
<FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_dataset)}>
<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>
<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>
)}
/>
{errors.select_dataset && errors.select_dataset.type === "required" &&
<Alert severity="error">
<AlertTitle>This field is required</AlertTitle>
</Alert>}
{watchFileds[0]!=='Other' &&
<input
{...register('ds_upload')}
name="ds_upload"
type="file"
hidden
/>}
{watchFileds[0]==='Other' &&
<Button
variant="contained"
component="label"
>
Upload File
<input
{...register('ds_upload')}
name="ds_upload"
type="file"
hidden
/>
</Button>
}
{dirtyFields.ds_upload && <Alert severity="success" variant='outlined'>File Submitted</Alert>}
</FormControl>
</CardContent>
</Card>
</Grid>
<Grid style={{padding:"30px 0px"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h5" align="left">
Network Uploading
</Typography>
<FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_network)}>
<FormLabel id="select_network" align="left" variant="h6">
Please select the network you'd like to use here or select 'Other' if you would like to upload your own network
</FormLabel>
<Controller
name='select_network'
control={control}
rules={{ required: true }}
render={({field: { onChange, value }}) => (
<RadioGroup
row
aria-labelledby="select_network"
name="select_network"
align="centre"
value={value ?? ""}
onChange={onChange}
>
<FormControlLabel value="LeNet" control={<Radio />} label="LeNet" />
<FormControlLabel value="SimpleNet" control={<Radio />} label="SimpleNet" />
<FormControlLabel value="EasyNet" control={<Radio />} label="EasyNet" />
<FormControlLabel value="Other" control={<Radio />} label="Other" />
</RadioGroup> )}
/>
{errors.select_network && errors.select_network.type === "required" &&
<Alert severity="error">
<AlertTitle>This field is required</AlertTitle>
</Alert>}
<Typography style={{ maxWidth: 750}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
The networks provided above are for demonstration purposes. The relative training time is: LeNet {'>'} SimpleNet {'>'} EasyNet.
We recommend you to choose EasyNet for a quick demonstration of how well our auto-augment agents can perform.
</Typography>
{watchFileds[1]!=='Other' &&
<input
{...register('network_upload')}
name="network_upload"
type="file"
hidden
/>}
{watchFileds[1]==='Other' &&
<Button
variant="contained"
component="label"
>
Upload File
<input
{...register('network_upload')}
name="network_upload"
type="file"
hidden
/>
</Button>
}
{dirtyFields.network_upload && <Alert severity="success" variant='outlined'>File Submitted</Alert>}
</FormControl>
</CardContent>
</Card>
</Grid>
<Grid style={{padding:"30px 0px"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h5" align="left">
Auto-augment Learner Selection
</Typography>
<FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_learner)}>
<FormLabel id="select_learner" align="left" variant="h6">
Please select the auto-augment learners you'd like to use (multiple learners can be selected)
</FormLabel>
<Controller
name='select_learner'
control={control}
rules={{ required: true }}
render={({field: { onChange, value }}) => (
<RadioGroup
row
aria-labelledby="select_learner"
name="select_learner"
align="centre"
value={value ?? ""}
onChange={onChange}
>
<FormControlLabel value="UCB learner" control={<Radio />} label="UCB learner" />
<FormControlLabel value="Evolutionary learner" control={<Radio />} label="Evolutionary learner" />
<FormControlLabel value="Random Searcher" control={<Radio />} label="Random Searcher" />
<FormControlLabel value="GRU Learner" control={<Radio />} label="GRU Learner" />
</RadioGroup> )}
/>
{errors.select_learner && errors.select_learner.type === "required" &&
<Alert severity="error">
<AlertTitle>This field is required</AlertTitle>
</Alert>}
<Typography style={{ maxWidth: 800}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
(give user some recommendation here...)
</Typography>
</FormControl>
</CardContent>
</Card>
</Grid>
<Grid style={{padding:"30px 0px", maxWidth: 900, margin: "0 auto"}}>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography variant="h5" align="left">
Advanced Search
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Grid container
spacing={0}
direction="column"
alignItems="center"
justify="center">
<CardContent>
<Typography gutterBottom variant="subtitle1" align='left'>
Please input the hyperparameter you'd like to train your dataset with
</Typography>
<Grid container spacing={1} style={{maxWidth:800, padding:"10px 10px"}}>
<Grid xs={12} sm={6} item>
<TextField type="number" InputProps={{ inputProps: { min: 0} }} {...register("batch_size")} name="batch_size" placeholder="Batch Size" label="Batch Size" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
<TextField type="number" inputProps={{step: "0.000000001",min: 0}} {...register("learning_rate")} name="learning_rate" placeholder="Learning Rate" label="Learning Rate" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
<TextField type="number" InputProps={{ inputProps: { min: 0} }} {...register("iterations")} name="iterations" placeholder="Number of Iterations" label="Iterations" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
<TextField type="number" inputProps={{step: "0.01", min: 0}} {...register("toy_size")} name="toy_size" placeholder="Dataset Proportion" label="Dataset Proportion" variant="outlined" fullWidth />
</Grid>
<FormLabel variant="h8" align='centre'>
* Dataset Proportion defines the percentage of original dataset our auto-augment learner will use to find the
augmentation policy. If your dataset is large, we recommend you to set Dataset Proportion a small value (0.1-0.3).
</FormLabel>
</Grid>
<Grid style={{maxWidth:800, padding:"40px 10px"}}>
<Typography gutterBottom variant="subtitle1" align='left'>
Please select augmentation methods you'd like to exclude
</Typography>
<div>
{['ShearX', 'ShearY', 'TranslateX', 'TranslateY', 'Rotate', 'Brightness',
'Color', 'Contrast', 'Sharpness', 'Posterize', 'Solarize', 'AutoContrast',
'Equalize', 'Invert'].map((option) => {
return (
<FormControlLabel
control={
<Controller
name='select_action'
render={({}) => {
return (
<Checkbox
checked={selectAction.includes(option)}
onChange={() => handleActionSelect(option)}/> );
}}
control={control}
/>}
label={option}
key={option}
/>
);
})}
</div>
</Grid>
</CardContent>
</Grid>
</Collapse>
</Card>
</Grid>
<Button
type="submit"
variant="contained"
color='success'
size='large'
endIcon={<SendIcon />}
>
Submit Form
</Button>
{watchFileds[0]==='Other' && !dirtyFields.ds_upload &&
<Alert severity="error" variant='standard'>Please upload your dataset
zip file or select one of the dataset we have provided</Alert>}
{watchFileds[1]==='Other' && !dirtyFields.network_upload &&
<Alert severity="error" variant='standard'>Please upload your network
.pkl file or select one of the network we have provided</Alert>}
</form>
</Grid>
</div>
);
}
react_frontend/src/pages/Progress.js 0 → 100644
+ 69
− 0
View file @ 97317ee1
import React, { useState, useEffect } from "react";
import { Grid, LinearProgress, Card, CardContent, Typography, Button, TextField } from '@mui/material';
import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
import {useNavigate, Route} from "react-router-dom";
export default function Training() {
let navigate = useNavigate();
const [status, setStatus] = useState("Training");
useEffect(() => {
const res = fetch('/training'
).then(response => response.json()
).then(data => {setStatus(data.status); console.log(data.status)});
}, []);
const onSubmit = async () => {
navigate('/result', {replace:true});
}
return (
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation
</Typography>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Grid style={{padding:"30px"}}>
<Typography gutterBottom variant="h6" align="center" >
Our auto-augment learners are working hard to generate your data augmentation policy ...
</Typography>
</Grid>
{status==="Training" &&
<Grid style={{padding:"60px"}}>
<LinearProgress color="primary"/>
<LinearProgress color="primary" />
<LinearProgress color="primary" />
<LinearProgress color="primary" />
</Grid>
}
<Grid style={{padding:"50px"}}>
<Typography variant='h6'>
Current status: {status}
</Typography>
</Grid>
{status==="Training is done!" &&
<Button
type="submit"
variant="contained"
color='primary'
size='large'
onClick={onSubmit}
>
Show Results
</Button>
}
</CardContent>
</Card>
</div>
)
}
\ No newline at end of file
react_frontend/src/pages/Result.js 0 → 100644
+ 61
− 0
View file @ 97317ee1
import React, { useState, useEffect } from "react";
import { Grid, List, ListItem, Avatar, ListItemAvatar, ListItemText, Card, CardContent, Typography, Button, CardMedia } from '@mui/material';
import output from './pytest.png'
import {useNavigate, Route} from "react-router-dom";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function Result() {
const handleClick = () => {
axios.get('/result', {
responseType: 'blob',
})
.then((res) => {
fileDownload(res.data, 'policy.txt');
console.log(res.data)
})
}
return (
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation
</Typography>
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h5" align="left">
Here are the results from our auto-augment agent:
</Typography>
<Grid style={{padding:"30px"}} container spacing={4} alignItems="center">
<Grid xs={7} item>
<img src={output} alt='output' />
</Grid>
<Grid xs={5} item>
<Typography>
write something here to explain the meaning of the graph to the user
</Typography>
</Grid>
</Grid>
<Typography gutterBottom variant='h6' align='center'>
You can download the augentation policy here
</Typography>
<Button
type="submit"
variant="contained"
color='primary'
size='large'
onClick={() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}
>
Download
</Button>
<Typography>
Please follow our documentation to apply this policy to your dataset.
</Typography>
</CardContent>
</Card>
</div>
)
}
\ No newline at end of file
react_frontend/src/pages/WrongDS.js 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/src/pages/pytest.png 0 → 100644
+ 0
− 0
View file @ 97317ee1
react_frontend/src/pages/pytest.png

7.93 KiB

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