From 8c1a9a05599c1e1b45992ab14fc391f89f34e63d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 26 Mar 2019 14:43:48 +0100
Subject: adding i18n framework

---
 app/client/common/header.component.js              |   9 +-
 app/client/i18n/i18n.en.js                         |  99 +++++++++++++++++++
 app/client/i18n/i18n.moon.js                       |  99 +++++++++++++++++++
 app/client/i18n/index.js                           |  15 +++
 .../modules/pix2pixhd/views/pix2pixhd.live.js      | 107 +++++++++++++--------
 app/client/system/system.actions.js                |   5 +
 app/client/system/system.component.js              |   9 ++
 app/client/system/system.reducer.js                |  17 ++++
 app/client/types.js                                |   1 +
 9 files changed, 317 insertions(+), 44 deletions(-)
 create mode 100644 app/client/i18n/i18n.en.js
 create mode 100644 app/client/i18n/i18n.moon.js
 create mode 100644 app/client/i18n/index.js

(limited to 'app')

diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index 8450e8a..d55ec51 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -18,7 +18,7 @@ function NavLink(props){
 }
 
 function Header(props){
-  const { site, app, fps, playing, actions, location, history } = props
+  const { site, app, fps, playing, actions, location, history, i18n } = props
   const tool_list = Object.keys(modules).map((name, i) => {
     const label = name.replace(/_/, " ")
     return <option value={name} key={i}>{label}</option>
@@ -26,7 +26,7 @@ function Header(props){
   const tool = modules[app.tool]
   const links = tool.links().map((link,i) => {
     return (
-      <NavLink key={i} location={location} to={link.url}>{link.name}</NavLink>
+      <NavLink key={i} location={location} to={link.url}>{i18n.header[link.name] || link.name}</NavLink>
     )
   })
   return (
@@ -45,8 +45,8 @@ function Header(props){
           {tool_list}
         </select>
       </span>
-      <NavLink location={location} to="/system">system</NavLink>
-      <NavLink location={location} to="/dashboard">dashboard</NavLink>
+      <NavLink location={location} to="/system">{i18n.header.system}</NavLink>
+      <NavLink location={location} to="/dashboard">{i18n.header.dashboard}</NavLink>
       <span>{links}</span>
       {playing && <span>{fps} fps</span>}
     </header>
@@ -58,6 +58,7 @@ const mapStateToProps = state => ({
   app: state.system.app,
   fps: state.live.fps,
   playing: state.live.playing,
+  i18n: state.system.i18n.strings,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/i18n/i18n.en.js b/app/client/i18n/i18n.en.js
new file mode 100644
index 0000000..406afa6
--- /dev/null
+++ b/app/client/i18n/i18n.en.js
@@ -0,0 +1,99 @@
+export default {
+  header: {
+    system: "system",
+    dashboard: "dashboard",
+    folders: "folders",
+    sequences: "sequences",
+    checkpoints: "checkpoints",
+    results: "results",
+    uprez: "uprez",
+    live: "live",
+    pix2pixhd: "pix2pixhd",
+    pix2pix: "pix2pix",
+    pix2wav: "pix2wav",
+    samplernn: "samplernn",
+    morph: "morph",
+  },
+  gpu: {
+    idle: "GPU Idle",
+    busy: "GPU Busy",
+    start: "Start",
+    restart: "Restart",
+    stop: "Stop",
+    interrupt: "Interrupt",
+    not_processing: "Not Processing",
+    processing: "Processing",
+  },
+  pix2pixhd: {
+    live: {
+      network: {
+        title: "Network",
+        view_mode: "view mode",
+        sequence: "sequence",
+        checkpoint: "checkpoint",
+        epoch: "epoch",
+      },
+      playback: {
+        title: "Playback",
+        position: "position",
+        playback_rate: "playback rate",
+        skip_frames: "skip frames",
+        fade_sequence: "fade sequence",
+        frame_delay: "frame delay",
+      },
+      record: {
+        save_frame: "Save frame",
+        save: "Save",
+        record_video: "Record video",
+        video_name: "Video name",
+      },
+      transition: {
+        title: "Transition",
+        period: "period",
+        min: "min",
+        max: "max",
+      },
+      recursion: {
+        title: "Recursion",
+        frac: "recursive amount",
+        roll: "roll amount",
+        axis: "roll axis",
+      },
+      sequence: {
+        title: "Sequence",
+        frac: "sequence frac",
+        process_frac: "process frac",
+      },
+      transform: {
+        title: "Transform",
+        rotate: "rotate",
+        scale: "scale",
+      },
+      clahe: {
+        title: "Clahe",
+        clip_limit: "clip limit",
+      },
+      posterize: {
+        title: "Posterize",
+        spatial_window: "spatial window",
+        color_window: "color window",        
+      },
+      blur: {
+        title: "Blur",
+        radius: "radius",
+        sigma: "sigma",
+      },
+      canny: {
+        title: "Canny Edge Detection",
+        lo: "lower bound",
+        hi: "upper bound",
+      },
+      hsl: {
+        title: "Hue / Saturation",
+        hue: "hue",
+        saturation: "saturation",
+        luminosity: "luminosity",
+      }
+    }
+  }
+}
diff --git a/app/client/i18n/i18n.moon.js b/app/client/i18n/i18n.moon.js
new file mode 100644
index 0000000..930c831
--- /dev/null
+++ b/app/client/i18n/i18n.moon.js
@@ -0,0 +1,99 @@
+export default {
+  header: {
+    system: "system",
+    dashboard: "dashboard",
+    folders: "folders",
+    sequences: "sequences",
+    checkpoints: "checkpoints",
+    results: "results",
+    uprez: "uprez",
+    live: "live",
+    pix2pixhd: "pix2pixhd",
+    pix2pix: "pix2pix",
+    pix2wav: "pix2wav",
+    samplernn: "samplernn",
+    morph: "morph",
+  },
+  gpu: {
+    idle: "GPU Idle",
+    busy: "GPU Busy",
+    start: "Start",
+    restart: "Restart",
+    stop: "Stop",
+    interrupt: "Interrupt",
+    not_processing: "Not Processing",
+    processing: "Processing",
+  },
+  pix2pixhd: {
+    live: {
+      network: {
+        title: "Mumbo Jumbo",
+        view_mode: "bollocks",
+        sequence: "mess",
+        checkpoint: "skew",
+        epoch: "REACTIONARY REGRESSION",
+      },
+      playback: {
+        title: "Divine",
+        position: "accelerationism",
+        playback_rate: "apocalypticism",
+        skip_frames: "pretend there is an emergent phenomenon",
+        fade_sequence: "speaking in tongues",
+        frame_delay: "babble",
+      },
+      record: {
+        save_frame: "PYROMANCE DISCOUNT",
+        save: "Save",
+        record_video: "Pyromance Premium",
+        video_name: "Video name",
+      },
+      transition: {
+        title: "Enlightenment",
+        period: "endarkenment",
+        min: "MONTECARLOCASINO",
+        max: "RANDOM STUMBLE",
+      },
+      recursion: {
+        title: "Proprietary button",
+        frac: "pay $5M to change this",
+        roll: "pay $5M and still nothing happens",
+        axis: "When will I die?",
+      },
+      sequence: {
+        title: "Political thermometer",
+        frac: "ignition",
+        process_frac: "wealth coefficient",
+      },
+      transform: {
+        title: "Hate",
+        rotate: "0,14 factor",
+        scale: "Ariernachweis",
+      },
+      clahe: {
+        title: "Clahe",
+        clip_limit: "clip limit",
+      },
+      posterize: {
+        title: "Posterize",
+        spatial_window: "spatial window",
+        color_window: "color window",        
+      },
+      blur: {
+        title: "Blur",
+        radius: "radius",
+        sigma: "sigma",
+      },
+      canny: {
+        title: "Canny Edge Detection",
+        lo: "lower bound",
+        hi: "upper bound",
+      },
+      hsl: {
+        title: "Hue / Saturation",
+        hue: "hue",
+        saturation: "saturation",
+        luminosity: "luminosity",
+      }
+    }
+  }
+}
diff --git a/app/client/i18n/index.js b/app/client/i18n/index.js
new file mode 100644
index 0000000..2bdde02
--- /dev/null
+++ b/app/client/i18n/index.js
@@ -0,0 +1,15 @@
+import en from './i18n.en'
+import moon from './i18n.moon'
+
+const strings = lang => {
+  switch (lang) {
+    case 'moon':
+      return moon
+    default:
+      return en
+  }
+}
+
+const languages = ['en', 'moon']
+
+export { strings, languages }
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,
 })
 
diff --git a/app/client/system/system.actions.js b/app/client/system/system.actions.js
index ccd9acd..73cea28 100644
--- a/app/client/system/system.actions.js
+++ b/app/client/system/system.actions.js
@@ -41,6 +41,11 @@ export const changeTool = (tool) => {
   return { type: types.app.change_tool, tool }
 }
 
+export const changeLanguage = (language) => {
+  localStorage.setItem('cortex.i18n.language', language)
+  return { type: types.system.change_language, language }
+}
+
 export const enqueue_test_task = (dataset) => dispatch => {
   const task = {
     module: 'test',
diff --git a/app/client/system/system.component.js b/app/client/system/system.component.js
index 3783862..69a6270 100644
--- a/app/client/system/system.component.js
+++ b/app/client/system/system.component.js
@@ -10,6 +10,8 @@ import * as liveActions from '../live/live.actions'
 import * as queueActions from '../queue/queue.actions'
 import * as authActions from '../auth/auth.actions'
 
+import * as i18n from '../i18n'
+
 const cpu_test_task = {
   activity: 'cpu',
   module: 'test',
@@ -122,6 +124,13 @@ class System extends Component {
                 <button onClick={() => actions.queue.start_task(wait_test_task, { preempt: true, watch: true })}>Wait and Buzz</button>
               </Param>
             </Group>
+            <Group title="Internationalization">
+              <Param title="Language">
+                {i18n.languages.map(language => (
+                  <button onClick={() => actions.system.changeLanguage(language)}>{language}</button>
+                ))}
+              </Param>
+            </Group>
           </div>
           {this.renderCommandOutput()}
         </div>
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index 5f9e4ac..f232da3 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -1,7 +1,11 @@
 import types from '../types'
 import moment from 'moment/min/moment.min'
+import * as i18n from '../i18n'
+
 let FileSaver = require('file-saver')
 
+const initialLanguage = localStorage.getItem('cortex.i18n.language') || process.env.I18N_LANGUAGE || 'en'
+
 const systemInitialState = {
   loading: false,
   error: null,
@@ -14,6 +18,10 @@ const systemInitialState = {
     production: process.env.NODE_ENV === 'production',
     development: process.env.NODE_ENV !== 'production',
   },
+  i18n: {
+    language: initialLanguage,
+    strings: i18n.strings(initialLanguage),
+  },
   app: {
     tool: localStorage.getItem('system.last_tool') || 'pix2pixhd',
   },
@@ -246,6 +254,15 @@ const systemReducer = (state = systemInitialState, action) => {
         last_message: action.data.data,
         stderr: state.stderr + action.data.data,
       }
+    case types.system.change_language:
+      return {
+        ...state,
+        i18n: {
+          language: action.language,
+          strings: i18n.strings(action.language),
+        }
+      }
+
     default:
       return state
   }
diff --git a/app/client/types.js b/app/client/types.js
index d00ade5..cd82334 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -15,6 +15,7 @@ export default {
 		counting_directory: 'SYSTEM_COUNTING_DIRECTORY',
 		stdout: 'SYSTEM_STDOUT',
 		stderr: 'SYSTEM_STDERR',
+		change_language: 'SYSTEM_CHANGE_LANGUAGE',
 	},
 	app: {
 		change_tool: "APP_CHANGE_TOOL",
-- 
cgit v1.2.3-70-g09d2