render()

in frontend/src/App.js [160:265]

• 91 lines of code
• 1 McCabe index (conditional complexity)

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>

        <Grid container justify='center' alignItems="stretch" spacing={8} xs={12}>
          <Grid item xs={10}>
            <img src={require('./images/header.jpg')} alt="Header" style={{height:"100%", width: "100%"}}/>
          </Grid>
          <Grid item xs={10}>
            <Typography variant="h2" style={{textAlign: "center"}}>
              AWS Visual Image Search
            </Typography>
          </Grid>
          <Grid item xs={10}>
            <Paper className={classes.paper}>
              Step 1: Select the number of similar images (K neighbors):
              <p/>
              <FormControl className={classes.formControl}>
                <Select
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={this.state.k}
                  onChange={this.handleKChange}
                >
                  <MenuItem value={3}>Three</MenuItem>
                  <MenuItem value={4}>Four</MenuItem>
                  <MenuItem value={5}>Five</MenuItem>
                  <MenuItem value={6}>Six</MenuItem>
                </Select>
              </FormControl>
            </Paper>
          </Grid>

          <Grid item xs={10}>
            <Paper className={classes.paper}>
              Step 2:<p/>
              Provide an image to search against. Choose an image of a dress, like the one here from the Zolando dataset: <p/>
              <Link href='https://i4.ztat.net/large/VE/12/1C/14/8K/12/VE121C148-K12@10.jpg' target="_blank" rel="noreferrer">https://i4.ztat.net/large/VE/12/1C/14/8K/12/VE121C148-K12@10.jpg</Link>
            </Paper>
          </Grid>

          <Grid item xs={5}>
            <Paper className={classes.paper}>
              Upload an image from your device:
              <ImageUploader style={{borderStyle:"hidden"}}
                withIcon={true}
                buttonStyles={{background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', color:"black", fontweight:"bold"}}
                buttonText="CHOOSE IMAGE"
                // className={classes.paper}
                onChange={this.onDrop}
                imgExtension={[".jpg", ".jpeg", ".gif", ".png", ".gif"]}
                maxFileSize={5242880}
                withPreview={true}
                singleImage={true}
              />
            </Paper>
          </Grid>
          <Grid item xs={5} >
            <Paper className={classes.paper} >
              or enter a publically accessable web URL of an image:
              <p/>
              <form noValidate autoComplete="off" onSubmit={this.handleURLSubmit}>
                <Input
                  onChange={this.handleFormChange}
                  value={this.state.url}
                  id="standard-basic"
                  margin="dense"
                  fullWidth
                />
                <Button
                type='submit'
                style={{background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'}}
                >
                  Submit
                </Button>
              </form>        
            </Paper>
          </Grid>
          <Grid item xs={10}>
              <Paper className={classes.paper}>
                Step 3: Results!<p/>
                <BorderLinearProgress
                    variant="determinate"
                    color="secondary"
                    value={this.state.completed}
                />
                <p/>
                <GridList cellHeight={200} className={classes.gridList} cols={3}>
                  {this.state.pictures.map((tile) => (
                    <GridListTile key={tile.img} cols={tile.cols || 1}>
                      <img src={tile.img} alt="Similar photos..." style={{height:"100%", width: "auto"}} />
                    </GridListTile>
                  ))}
                </GridList>
              </Paper>
            </Grid>
        </Grid>

        <Grid container justify="center">
          
        </Grid>

      </div>
  );}