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

can submit all user selections from the form apart from file uploading

parent ccd40b9c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/pages/Home.js
+ 27
− 21
View file @ cb1a86c8
......@@ -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>
......
src/pages/home_old.js
+ 53
− 39
View file @ cb1a86c8
......@@ -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>
......
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