adding i18n framework

1 files changed, 67 insertions, 40 deletions

diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
index 52b4b61..ee7ece7 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
@@ -14,6 +14,8 @@ import * as queueActions from '../../../queue/queue.actions'
 import * as pix2pixhdTasks from '../pix2pixhd.tasks'
 import * as pix2pixhdActions from '../pix2pixhd.actions'
 
+import i18n from '../../../i18n'
+
 class Pix2PixHDLive extends Component {
   constructor(props){
     super()
@@ -99,10 +101,11 @@ class Pix2PixHDLive extends Component {
   }
   render(){
     // console.log(this.props)
-    if (this.props.pix2pixhd.loading) {
-      return <Loading progress={this.props.pix2pixhd.progress} />
+    const { pix2pixhd, i18n } = this.props
+    if (pix2pixhd.loading) {
+      return <Loading progress={pix2pixhd.progress} />
     }
-    const { folderLookup, datasetLookup, sequences } = this.props.pix2pixhd.data
+    const { folderLookup, datasetLookup, sequences } = pix2pixhd.data
 
     const sequenceLookup = sequences.reduce((a,b) => {
       a[b.name] = true
@@ -110,7 +113,7 @@ class Pix2PixHDLive extends Component {
     }, {})
 
     const sequenceGroups = Object.keys(folderLookup).map(id => {
-      const folder = this.props.pix2pixhd.data.folderLookup[id]
+      const folder = folderLookup[id]
       if (folder.name === 'results') return
       const datasets = folder.datasets.map(name => {
         const sequence = sequenceLookup[name]
@@ -126,7 +129,7 @@ class Pix2PixHDLive extends Component {
     }).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name))
 
     const checkpointGroups = Object.keys(folderLookup).map(id => {
-      const folder = this.props.pix2pixhd.data.folderLookup[id]
+      const folder = folderLookup[id]
       if (folder.name === 'results') return
       const datasets = folder.datasets.map(name => {
         const dataset = datasetLookup[name]
@@ -147,61 +150,62 @@ class Pix2PixHDLive extends Component {
         <div className='params row'>
           <div className='column'>
             <ParamGroup
-              title='Network'
+              title={i18n.pix2pixhd.live.network.title}
               noToggle
             >
               <Select live
                 name='send_image'
-                title='view mode'
+                title={i18n.pix2pixhd.live.network.view_mode}
                 options={['a','b','sequence','recursive']}
                 onChange={this.props.actions.live.set_param}
               />
               <SelectGroup live
                 name='sequence_name'
-                title='sequence'
+                title={i18n.pix2pixhd.live.network.sequence}
                 options={sequenceGroups}
                 onChange={this.changeSequence}
               />
               <SelectGroup live
                 name='checkpoint_name'
-                title='checkpoint'
+                title={i18n.pix2pixhd.live.network.checkpoint}
                 options={checkpointGroups}
                 onChange={this.changeCheckpoint}
               />
               <Select live
                 name='epoch'
-                title='epoch'
+                title={i18n.pix2pixhd.live.network.epoch}
                 options={this.props.epochs}
                 onChange={this.changeEpoch}
               />
             </ParamGroup>
             <div>
             <ParamGroup
-              title='Playback'
+              title={i18n.pix2pixhd.live.playback.title}
               name='sequence_playing'
             >
               <Slider
-                name='position'
+                name={i18n.pix2pixhd.live.playback.position}
                 min={0.0} max={1.0} type='float'
                 value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
                 onChange={this.seek}
               />
               <Slider live
-                title='playback rate'
+                title={i18n.pix2pixhd.live.playback.playback_rate}
                 name='sequence_step'
                 min={-4.0} max={4.0} type='float'
               />
               <Slider live
-                title='skip frames'
+                title={i18n.pix2pixhd.live.playback.skip_frames}
                 name='sequence_skip'
                 min={0} max={1000} type='int'
               />
               <Slider live
-                title='fade sequence'
+                title={i18n.pix2pixhd.live.playback.fade_sequence}
                 name='fade_sequence'
                 min={0} max={4.0} type='float'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.playback.frame_delay}
                 name='frame_delay'
                 min={0.0} max={2.0} type='float'
               />
@@ -217,64 +221,74 @@ class Pix2PixHDLive extends Component {
           </div>
           <div className='column'>
             <ParamGroup
-              title='Transition'
+              title={i18n.pix2pixhd.live.transition.title}
               name='transition'
             >
               <Slider live
                 name='transition_period'
+                title={i18n.pix2pixhd.live.transition.period}
                 min={10} max={5000} type='int'
               />
               <Slider live
                 name='transition_min'
+                title={i18n.pix2pixhd.live.transition.min}
                 min={0.001} max={0.2} type='float'
               />
               <Slider live
                 name='transition_max'
+                title={i18n.pix2pixhd.live.transition.max}
                 min={0.1} max={1.0} type='float'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Recursion'
+              title={i18n.pix2pixhd.live.recursion.title}
               name='recursive'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.recursion.frac}
                 name='recursive_frac'
                 min={0.0} max={0.5} type='float'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.recursion.roll}
                 name='recurse_roll'
                 min={-64} max={64} type='int'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.recursion.axis}
                 name='recurse_roll_axis'
                 min={0} max={1} type='int'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Sequence'
+              title={i18n.pix2pixhd.live.sequence.title}
               name='sequence'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.sequence.frac}
                 name='sequence_frac'
                 min={0.0} max={1.0} type='float'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.sequence.process_frac}
                 name='process_frac'
                 min={0} max={1} type='float'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Transform'
+              title={i18n.pix2pixhd.live.transform.title}
               name='transform'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.transform.rotate}
                 name='rotate'
                 min={-1} max={1} type='float'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.transform.scale}
                 name='scale'
                 min={0.9} max={1.1} type='float'
               />
@@ -283,70 +297,80 @@ class Pix2PixHDLive extends Component {
 
           <div className='column'>
             <ParamGroup
-              title='Clahe'
+              title={i18n.pix2pixhd.live.clahe.title}
               name='clahe'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.clahe.clip_limit}
                 name='clip_limit'
                 min={1.0} max={4.0} type='float'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Posterize'
+              title={i18n.pix2pixhd.live.posterize.title}
               name='posterize'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.posterize.spatial_window}
                 name='spatial_window'
                 min={2} max={128} type='int'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.posterize.color_window}
                 name='color_window'
                 min={2} max={128} type='int'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Blur'
+              title={i18n.pix2pixhd.live.blur.title}
               name='blur'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.blur.radius}
                 name='blur_radius'
                 min={3} max={7} type='odd'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.blur.sigma}
                 name='blur_sigma'
                 min={0} max={2} type='float'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Canny Edge Detection'
+              title={i18n.pix2pixhd.live.canny.title}
               name='canny'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.canny.lo}
                 name='canny_lo'
                 min={10} max={200} type='int'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.canny.hi}
                 name='canny_hi'
                 min={10} max={200} type='int'
               />
             </ParamGroup>
 
             <ParamGroup
-              title='Hue / Saturation'
+              title={i18n.pix2pixhd.live.hsl.title}
               name='hsl'
             >
               <Slider live
+                title={i18n.pix2pixhd.live.hsl.hue}
                 name='hue'
                 min={-127} max={127} type='int'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.hsl.saturation}
                 name='saturation'
                 min={-255} max={255} type='int'
               />
               <Slider live
+                title={i18n.pix2pixhd.live.hsl.luminosity}
                 name='luminosity'
                 min={-255} max={255} type='int'
               />
@@ -359,46 +383,47 @@ class Pix2PixHDLive extends Component {
   }
   renderRestartButton(){
     // console.log(this.props.runner.gpu)
+    const { i18n } = this.props
     if (this.props.runner.gpu.status === 'IDLE') {
       return (
         <Button
-          title={'GPU Idle'}
+          title={i18n.gpu.idle}
           onClick={() => this.start()}
-        >Start</Button>
+        >{i18n.gpu.start}</Button>
       )
     }
     if (this.props.runner.gpu.task.module !== 'pix2pixhd') {
       return (
         <Button
-          title={'GPU Busy'}
+          title={i18n.gpu.busy}
           onClick={() => this.interrupt()}
-        >Interrupt</Button>
+        >{i18n.gpu.interrupt}</Button>
       )
     }
     if (! this.props.opt.processing) {
       return (
         <div>
           <Button
-            title={'Not processing'}
+            title={i18n.gpu.not_processing}
             onClick={this.togglePlaying}
-          >Restart</Button>
+          >{i18n.gpu.restart}</Button>
           <Button
-            title={'GPU Busy'}
+            title={i18n.gpu.busy}
             onClick={() => this.interrupt()}
-          >Interrupt</Button>
+          >{i18n.gpu.interrupt}</Button>
         </div>
       )
     }
     return (
       <div>
         <Button
-          title={'Processing'}
+          title={i18n.gpu.processing}
           onClick={this.togglePlaying}
-        >Stop</Button>
+        >{i18n.gpu.stop}</Button>
         <Button
-          title={'GPU Busy'}
+          title={i18n.gpu.busy}
           onClick={() => this.interrupt()}
-        >Interrupt</Button>
+        >{i18n.gpu.interrupt}</Button>
       </div>
     )
   }
@@ -420,16 +445,17 @@ class Pix2PixHDLive extends Component {
     // )
   }
   renderLiveButtons(){
+    const { i18n } = this.props
     return (
       <div>
         <Button
-          title={'Save frame'}
+          title={i18n.pix2pixhd.live.record.save_frame}
           onClick={saveFrame}
         >
-          Save
+          {i18n.pix2pixhd.live.record.save}
         </Button>
         <ParamGroup
-          title='Record video'
+          title={i18n.pix2pixhd.live.record.record_video}
           name='store_b'
           noDim
           onToggle={(value) => {
@@ -437,7 +463,7 @@ class Pix2PixHDLive extends Component {
           }}
         >
           <TextInput
-            title='Video name'
+            title={i18n.pix2pixhd.live.record.video_name}
             name='final_tag'
             value={this.props.opt.final_tag}
             onSave={value => {
@@ -461,6 +487,7 @@ const mapStateToProps = state => ({
   epochs: state.live.epochs,
   sequences: state.live.sequences,
   runner: state.system.runner,
+  i18n: state.system.i18n.strings,
   pix2pixhd: state.module.pix2pixhd,
 })