From cb1a86c846932542558db11d8587ed054f9d5527 Mon Sep 17 00:00:00 2001
From: Mia Wang <yw21218@ic.ac.uk>
Date: Wed, 20 Apr 2022 18:40:24 +0100
Subject: [PATCH] can submit all user selections from the form apart from file
uploading
---
src/pages/Home.js | 48 ++++++++++++----------
src/pages/home_old.js | 92 +++++++++++++++++++++++++------------------
2 files changed, 80 insertions(+), 60 deletions(-)
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 5aadc424..785403b2 100755
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -20,9 +20,9 @@ const ExpandMore = styled((props) => {
}));
+
// class Home extends React.Component{
export default function Home() {
-
const [selectLearner, setSelectLearner] = useState([]);
// for form submission
@@ -44,21 +44,20 @@ export default function Home() {
useEffect(() => {
setValue('select-learner', selectLearner);
}, [selectLearner]);
-
+
// collpase
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
- };
-
+ };
+
- // render(){
return (
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
- Data Auto-Augmentation
+ Data Auto-Augmentation
</Typography>
<Grid >
<form action="/home" method="POST" onSubmit={handleSubmit(onSubmit)}>
@@ -163,27 +162,34 @@ export default function Home() {
<Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
<CardContent>
<Typography gutterBottom variant="h5" align="left">
- Auto-augment Agent Selection
+ Auto-augment Learner Selection
</Typography>
<FormControl style={{ maxWidth: 800, padding:"20px"}}>
<FormLabel id="select-learner" align="left" variant="h6">
Please select the auto-augment learner you'd like to use
</FormLabel>
- <RadioGroup
- row
- aria-labelledby="select-learner"
- defaultValue="UCB"
- name="select-learner"
- align="centre"
- // 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>
+ <div>
+ {['UCB learner', 'Evolutionary learner', 'Random Searcher', 'GRU Learner'].map((option) => {
+ return (
+ <FormControlLabel
+ control={
+ <Controller
+ name='select-learner'
+ render={({}) => {
+ return (
+ <Checkbox
+ checked={selectLearner.includes(option)}
+ onChange={() => handleLearnerSelect(option)}/> );
+ }}
+ control={control}
+ />}
+ label={option}
+ key={option}
+ />
+ );
+ })}
+ </div>
<Typography style={{ maxWidth: 800}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
(give user some recommendation here...)
</Typography>
diff --git a/src/pages/home_old.js b/src/pages/home_old.js
index 140fd8eb..7ea55c09 100644
--- a/src/pages/home_old.js
+++ b/src/pages/home_old.js
@@ -21,16 +21,17 @@ const ExpandMore = styled((props) => {
-// class Home extends React.Component{
+
export default function Home() {
const [selectLearner, setSelectLearner] = useState([]);
+ const [selectAction, setSelectAction] = useState([]);
-// for form submission
- const { control, handleSubmit, setValue} = useForm();
+ // for form submission
+ const {register, control, handleSubmit, setValue} = useForm();
const onSubmit = data => console.log(data);
-// handling learner selection
+ // handling learner selection
const handleLearnerSelect = (value) => {
const isPresent = selectLearner.indexOf(value);
if (isPresent !== -1) {
@@ -45,7 +46,22 @@ export default function Home() {
setValue('select-learner', selectLearner);
}, [selectLearner]);
-// collpase
+ // 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 = () => {
@@ -54,7 +70,6 @@ export default function Home() {
return (
-
<div className="App" style={{padding:"60px"}}>
<Typography gutterBottom variant="h3" align="center" >
Data Auto-Augmentation Old
@@ -97,10 +112,11 @@ export default function Home() {
<Button
variant="contained"
component="label"
-
>
Upload File
<input
+ // name="ds_upload"
+ // ref={register}
type="file"
hidden
/>
@@ -149,10 +165,13 @@ export default function Home() {
>
Upload File
<input
+ // name="network_upload"
+ // ref={register}
type="file"
hidden
/>
</Button>
+
</FormControl>
</CardContent>
</Card>
@@ -228,16 +247,16 @@ export default function Home() {
</Typography>
<Grid container spacing={1} style={{maxWidth:800, padding:"10px 10px"}}>
<Grid xs={12} sm={6} item>
- <TextField name="batch_size" placeholder="Batch Size" label="Batch Size" variant="outlined" fullWidth />
+ <TextField {...register("batch_size")} name="batch_size" placeholder="Batch Size" label="Batch Size" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
- <TextField name="learning_rate" placeholder="Learning Rate" label="Learning Rate" variant="outlined" fullWidth />
+ <TextField {...register("learning_rate")} name="learning_rate" placeholder="Learning Rate" label="Learning Rate" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
- <TextField name="iterations" placeholder="Number of Iterations" label="Iterations" variant="outlined" fullWidth />
+ <TextField {...register("iterations")} name="iterations" placeholder="Number of Iterations" label="Iterations" variant="outlined" fullWidth />
</Grid>
<Grid xs={12} sm={6} item>
- <TextField name="toy_size" placeholder="Dataset Proportion" label="Dataset Proportion" variant="outlined" fullWidth />
+ <TextField {...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
@@ -249,34 +268,29 @@ export default function Home() {
<Typography gutterBottom variant="subtitle1" align='left'>
Please select augmentation methods you'd like to exclude
</Typography>
- <Controller
- name='select-action'
- control={control}
- rules={{ required: true }}
- render={({field: { onChange, value }}) => (
- <FormGroup
- row
- aria-labelledby="select-action"
- name="select-action"
- value={value ?? ""}
- onChange={onChange}
- >
- <FormControlLabel value="ShearX" control={<Checkbox />} label="ShearX" />
- <FormControlLabel value="ShearY" control={<Checkbox />} label="ShearY" />
- <FormControlLabel value="TranslateX" control={<Checkbox />} label="TranslateX" />
- <FormControlLabel value="TranslateY" control={<Checkbox />} label="TranslateY" />
- <FormControlLabel value="Rotate" control={<Checkbox />} label="Rotate" />
- <FormControlLabel value="Brightness" control={<Checkbox />} label="Brightness" />
- <FormControlLabel value="Color" control={<Checkbox />} label="Color" />
- <FormControlLabel value="Contrast" control={<Checkbox />} label="Contrast" />
- <FormControlLabel value="Sharpness" control={<Checkbox />} label="Sharpness" />
- <FormControlLabel value="Posterize" control={<Checkbox />} label="Posterize" />
- <FormControlLabel value="Solarize" control={<Checkbox />} label="Solarize" />
- <FormControlLabel value="AutoContrast" control={<Checkbox />} label="AutoContrast" />
- <FormControlLabel value="Equalize" control={<Checkbox />} label="Equalize" />
- <FormControlLabel value="Invert" control={<Checkbox />} label="Invert" />
- </FormGroup> )}
- />
+ <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>
--
GitLab