summaryrefslogtreecommitdiff
path: root/app/client
diff options
context:
space:
mode:
Diffstat (limited to 'app/client')
-rw-r--r--app/client/common/fileUpload.component.js28
-rw-r--r--app/client/common/header.component.js27
-rw-r--r--app/client/common/textInput.component.js34
-rw-r--r--app/client/index.jsx16
-rw-r--r--app/client/modules/index.js6
-rw-r--r--app/client/modules/pix2pix/datasets.component.js0
-rw-r--r--app/client/modules/pix2pix/index.js28
-rw-r--r--app/client/modules/pix2pix/live.component.js (renamed from app/client/pix2pix/live.component.js)14
-rw-r--r--app/client/modules/samplernn/datasets.component.js58
-rw-r--r--app/client/modules/samplernn/index.js26
-rw-r--r--app/client/pix2pix/index.js5
-rw-r--r--app/client/system/system.actions.js4
-rw-r--r--app/client/system/system.reducer.js11
-rw-r--r--app/client/types.js3
14 files changed, 231 insertions, 29 deletions
diff --git a/app/client/common/fileUpload.component.js b/app/client/common/fileUpload.component.js
new file mode 100644
index 0000000..5a1291c
--- /dev/null
+++ b/app/client/common/fileUpload.component.js
@@ -0,0 +1,28 @@
+import { h, Component } from 'preact'
+
+class FileUpload extends Component {
+ constructor(props){
+ super(props)
+ this.handleChange = this.handleChange.bind(this)
+ }
+ handleChange(e){
+ this.props.onChange && this.props.onChange()
+ }
+ render() {
+ return (
+ <div className='fileUpload param'>
+ <label>
+ <span>{this.props.title}</span>
+ <input
+ type='file'
+ multiple={this.props.multiple}
+ onChange={this.handleChange}
+ />
+ <button>{this.props.label || 'Choose file...'}</button>
+ </label>
+ </div>
+ )
+ }
+}
+
+export default FileUpload
diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index 29c3713..5c1c145 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -1,36 +1,41 @@
import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
import { Link } from 'react-router-dom';
import { connect } from 'react-redux'
-function Header(props) {
- const tools = "pix2pix samplernn style_transfer_video style_transfer_audio".split(" ").map((s,i) => {
- return <option value={s}>{s}</option>
+import * as systemActions from '../system/system.actions'
+
+import modules from '../modules'
+
+function Header({ fps, app, actions }) {
+ const tool_list = Object.keys(modules).map((name, i) => {
+ const label = name.replace(/_/, " ")
+ return <option value={name} key={i}>{label}</option>
})
+ const Links = modules[app.tool].links
return (
<header>
<b>live cortex</b>
<span>
- <select>
- {tools}
+ <select onChange={e => actions.changeTool(e.target.value)} value={app.tool}>
+ {tool_list}
</select>
</span>
<span><Link to="/system">system</Link></span>
<span><Link to="/dashboard">dashboard</Link></span>
- <span>checkpoints</span>
- <span>datasets</span>
- <span>results</span>
- <span><Link to="/live">live</Link></span>
- <span>{props.fps} fps</span>
+ <Links />
+ <span>{fps} fps</span>
</header>
)
}
const mapStateToProps = state => ({
+ app: state.system.app,
fps: state.live.fps,
- frame: state.live.frame,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
+ actions: bindActionCreators(systemActions, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Header)
diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js
new file mode 100644
index 0000000..b3c4866
--- /dev/null
+++ b/app/client/common/textInput.component.js
@@ -0,0 +1,34 @@
+import { h, Component } from 'preact'
+
+class TextInput extends Component {
+ constructor(props){
+ super(props)
+ this.handleInput = this.handleInput.bind(this)
+ this.handleKeydown = this.handleKeydown.bind(this)
+ }
+ handleInput(e){
+ this.props.onInput && this.props.onInput(e.target.value)
+ }
+ handleKeydown(e){
+ if (e.keyCode === 13) {
+ this.props.onSave && this.props.onSave(e.target.value)
+ }
+ }
+ render() {
+ return (
+ <div className='textInput param'>
+ <label>
+ <span>{this.props.title}</span>
+ <input
+ type='text'
+ value={this.props.value}
+ onInput={this.handleInput}
+ onKeydown={this.handleKeydown}
+ />
+ </label>
+ </div>
+ )
+ }
+}
+
+export default TextInput
diff --git a/app/client/index.jsx b/app/client/index.jsx
index ae09534..c5abf91 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -7,21 +7,25 @@ import { store, history } from './store'
import * as socket from './socket'
import Header from './common/header.component'
-import Dashboard from './dashboard/dashboard.component'
import System from './system/system.component'
-import Pix2Pix from './pix2pix'
+import Dashboard from './dashboard/dashboard.component'
+import modules from './modules'
+
+const module_list = Object.keys(modules).map(name => {
+ const module = modules[name]
+ return (
+ <Route path={'/' + module.name} component={module.router} />
+ )
+})
const app = (
<Provider store={store}>
<BrowserRouter>
<div>
<Route exact path='/' component={Dashboard} />
- <Route path='/datasets/' component={Dashboard} />
- <Route path='/checkpoints/' component={Dashboard} />
- <Route path='/results/' component={Dashboard} />
- <Route path='/live/' component={Pix2Pix.Live} />
<Route path='/system/' component={System} />
<Route path='/dashboard/' component={Dashboard} />
+ {module_list}
<Header />
</div>
</BrowserRouter>
diff --git a/app/client/modules/index.js b/app/client/modules/index.js
new file mode 100644
index 0000000..6ca4bc5
--- /dev/null
+++ b/app/client/modules/index.js
@@ -0,0 +1,6 @@
+import pix2pix from './pix2pix'
+import samplernn from './samplernn'
+
+export default {
+ pix2pix, samplernn
+} \ No newline at end of file
diff --git a/app/client/modules/pix2pix/datasets.component.js b/app/client/modules/pix2pix/datasets.component.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/client/modules/pix2pix/datasets.component.js
diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js
new file mode 100644
index 0000000..6271dbf
--- /dev/null
+++ b/app/client/modules/pix2pix/index.js
@@ -0,0 +1,28 @@
+import { h, Component } from 'preact'
+import { Route, Link } from 'react-router-dom'
+
+import Pix2PixLive from './live.component'
+
+function router () {
+ return (
+ <div>
+ <Route path='/pix2pix/live/' component={Pix2PixLive} />
+ </div>
+ )
+}
+
+function links(){
+ return (
+ <span>
+ <span>datasets</span>
+ <span>checkpoints</span>
+ <span>results</span>
+ <span><Link to="/pix2pix/live/">live</Link></span>
+ </span>
+ )
+}
+
+export default {
+ name: 'pix2pix',
+ router, links,
+} \ No newline at end of file
diff --git a/app/client/pix2pix/live.component.js b/app/client/modules/pix2pix/live.component.js
index 9792dbd..c1f2b51 100644
--- a/app/client/pix2pix/live.component.js
+++ b/app/client/modules/pix2pix/live.component.js
@@ -2,15 +2,15 @@ import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
-import Player from '../common/player.component'
-import ParamGroup from '../common/paramGroup.component'
-import Slider from '../common/slider.component'
-import Select from '../common/select.component'
-import Button from '../common/button.component'
+import Player from '../../common/player.component'
+import ParamGroup from '../../common/paramGroup.component'
+import Slider from '../../common/slider.component'
+import Select from '../../common/select.component'
+import Button from '../../common/button.component'
-import { startRecording, stopRecording, saveFrame } from '../live/player'
+import { startRecording, stopRecording, saveFrame } from '../../live/player'
-import * as liveActions from '../live/live.actions'
+import * as liveActions from '../../live/live.actions'
class LivePix2Pix extends Component {
constructor(props){
diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js
new file mode 100644
index 0000000..989f145
--- /dev/null
+++ b/app/client/modules/samplernn/datasets.component.js
@@ -0,0 +1,58 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import Group from '../../common/group.component'
+import Slider from '../../common/slider.component'
+import Select from '../../common/select.component'
+import Button from '../../common/button.component'
+import FileUpload from '../../common/fileUpload.component'
+import TextInput from '../../common/textInput.component'
+
+class SampleRNNDatasets extends Component {
+ constructor(props){
+ super()
+ this.handleUpload = this.handleUpload.bind(this)
+ this.handleURL = this.handleURL.bind(this)
+ }
+ handleUpload(file) {
+
+ }
+ handleURL(url) {
+
+ }
+ render(){
+ return (
+ <div className='app'>
+ <div className='heading'>
+ <h3>SampleRNN Datasets</h3>
+ </div>
+ <div className='params row'>
+ <div className='column'>
+ <Group title='Create Dataset'>
+ <FileUpload
+ title='Upload a file'
+ onChange={this.handleUpload}
+ />
+ <TextInput
+ title='Fetch a URL'
+ onSave={this.handleURL}
+ />
+ </Group>
+ </div>
+ </div>
+ </div>
+ )
+ }
+}
+function timeInSeconds(n){
+ return (n / 10).toFixed(1) + ' s.'
+}
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ // actions: bindActionCreators(liveActions, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets)
diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
new file mode 100644
index 0000000..6cf2e6d
--- /dev/null
+++ b/app/client/modules/samplernn/index.js
@@ -0,0 +1,26 @@
+import { h, Component } from 'preact'
+import { Route, Link } from 'react-router-dom'
+import SampleRNNDatasets from './datasets.component'
+
+function router () {
+ return (
+ <div>
+ <Route path='/samplernn/datasets/' component={SampleRNNDatasets} />
+ </div>
+ )
+}
+
+function links(){
+ return (
+ <span>
+ <span><Link to="/samplernn/datasets/">datasets</Link></span>
+ <span><Link to="/samplernn/checkpoints/">checkpoints</Link></span>
+ <span><Link to="/samplernn/results/">results</Link></span>
+ </span>
+ )
+}
+
+export default {
+ name: 'samplernn',
+ router, links,
+} \ No newline at end of file
diff --git a/app/client/pix2pix/index.js b/app/client/pix2pix/index.js
deleted file mode 100644
index 282868f..0000000
--- a/app/client/pix2pix/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Pix2PixLive from './live.component'
-
-export default {
- Live: Pix2PixLive,
-} \ No newline at end of file
diff --git a/app/client/system/system.actions.js b/app/client/system/system.actions.js
index 519e140..4c5f98e 100644
--- a/app/client/system/system.actions.js
+++ b/app/client/system/system.actions.js
@@ -5,3 +5,7 @@ export const run = (cmd) => {
socket.system.run_system_command(cmd)
return { type: types.system.running_command, cmd }
}
+
+export const changeTool = (tool) => {
+ return { type: types.app.change_tool, tool }
+} \ No newline at end of file
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index f945a65..fe3d9e3 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -9,6 +9,9 @@ const systemInitialState = {
site: {
name: 'Lens Cortex',
},
+ app: {
+ tool: 'samplernn',
+ },
server: {
connected: false,
status: "disconnected",
@@ -179,6 +182,14 @@ const systemReducer = (state = systemInitialState, action) => {
[action.task.processor]: { status: 'IDLE', task: {} },
},
}
+ case types.app.change_tool:
+ return {
+ ...state,
+ app: {
+ ...state.app,
+ tool: action.tool,
+ }
+ }
case types.system.stdout:
return {
...state,
diff --git a/app/client/types.js b/app/client/types.js
index df5da72..6f4a0b2 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -9,6 +9,9 @@ export default {
stdout: 'SYSTEM_STDOUT',
stderr: 'SYSTEM_STDERR',
},
+ app: {
+ change_tool: "APP_CHANGE_TOOL",
+ },
task: {
starting_task: 'TASK_STARTING_TASK',
task_begin: 'TASK_BEGIN',
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 15:17:46 +0000