app/client/common/augmentationGrid.component.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { h, Component } from 'preact'

import Group from './group.component'
import Param from './param.component'
import Button from './button.component'
import ButtonGrid from './buttonGrid.component'

export default class AugmentationGrid extends Component {
  state = {
    x: 0, y: 0, sum: 0,
  }
  render() {
    let rows = []
    return (
      <Group className='augmentationGrid'>
        <ButtonGrid 
          x={this.props.make}
          y={this.props.take}
          max={5000}
          onHover={(x, y) => this.setState({ x, y })}
          onClick={(x, y) => {
            this.setState({ sum: this.state.sum + x * y })
            this.props.onAugment(y, x)
          }}
        />
        <Param title='Take'>{this.state.y}</Param>
        <Param title='Make'>{this.state.x}</Param>
        <Param title='Will add to dataset'>{this.state.x * this.state.y}</Param>
        <Param title='Total added this epoch'>{this.state.sum}</Param>
        <Param title='Sequence length'>{this.state.checkpoint.sequenceCount}</Param>
        <Param title='Dataset size'>{this.state.checkpoint.datasetCount}</Param>
        <Button onClick={() => {
          this.setState({ sum: 0 })
          this.props.onTrain()
        }}>Train</Button>
      </Group>
    )
  }
}