summaryrefslogtreecommitdiff
path: root/app/client
diff options
context:
space:
mode:
Diffstat (limited to 'app/client')
-rw-r--r--app/client/common/fileList.component.js6
-rw-r--r--app/client/common/folderList.component.js8
-rw-r--r--app/client/common/textInput.component.js11
-rw-r--r--app/client/dashboard/dashboard.actions.js2
-rw-r--r--app/client/dataset/dataset.component.js1
-rw-r--r--app/client/dataset/dataset.loader.js21
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.actions.js31
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.reducer.js6
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.tasks.js6
-rw-r--r--app/client/modules/pix2pixhd/views/pix2pixhd.live.js57
-rw-r--r--app/client/modules/pix2pixhd/views/pix2pixhd.results.js62
-rw-r--r--app/client/modules/pix2pixhd/views/pix2pixhd.show.js1
-rw-r--r--app/client/socket/socket.actions.js3
-rw-r--r--app/client/types.js2
14 files changed, 160 insertions, 57 deletions
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index 1108dbf..b71faae 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -64,6 +64,7 @@ export const FileRow = props => {
const size = util.hush_size(file.size)
const date = file.date || file.created_at
const epoch = file.epoch || file.epochs || 0
+ const count = file.count || 0
let name;
let key;
@@ -88,7 +89,7 @@ export const FileRow = props => {
{file.persisted === false
? <span className='unpersisted'>{name}</span>
: (linkFiles && file.url)
- ? <a target='_blank' onClick={(e) => { if (!(e.metaKey || e.ctrlKey || e.altKey)) { e.preventDefault(); onClick && onClick(file, e) }}} href={file.url}>{name}</a>
+ ? <a target='_blank' onClick={(e) => { if (!(e.metaKey || e.ctrlKey || e.altKey) && onClick) { e.preventDefault(); onClick && onClick(file, e) }}} href={file.url}>{name}</a>
: <span class='link' onClick={(e) => onClick && onClick(file, e)}>{name}</span>
}
</div>
@@ -111,6 +112,9 @@ export const FileRow = props => {
{fields.has('size') &&
<div className={"size " + size[0]}>{size[1]}</div>
}
+ {fields.has('count') &&
+ <div className={"count " + util.hush_null(count)[0]}>{count > 0 ? count + ' files' : ''}</div>
+ }
{(fields.has('activity') || fields.has('module')) &&
<div className='activity'>
{fields.has('activity') && file.activity}
diff --git a/app/client/common/folderList.component.js b/app/client/common/folderList.component.js
index ccf9848..b609685 100644
--- a/app/client/common/folderList.component.js
+++ b/app/client/common/folderList.component.js
@@ -16,15 +16,17 @@ export default function FolderList ({ db, path, emptyText }) {
<Loading progress={db.progress} />
</div>
)
- } else if (! db.data.folders.length && emptyText) {
+ }
+ let folderList = db.data.folders.filter(folder => !! folder.generated)
+ if (! folderList.length && emptyText) {
return (
<div class='col folderList'>
{emptyText}
</div>
)
}
- console.log(db.data.folders)
- const folders = db.data.folders.map(raw_folder => {
+ console.log(folders)
+ const folders = folderList.map(raw_folder => {
const folder = db.data.folderLookup[raw_folder.id]
const fileCount = folder.files ? folder.files.length : 0
const [ className, size ] = util.hush_null(fileCount)
diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js
index 1e2ca01..a3739d4 100644
--- a/app/client/common/textInput.component.js
+++ b/app/client/common/textInput.component.js
@@ -3,14 +3,23 @@ import { h, Component } from 'preact'
class TextInput extends Component {
constructor(props){
super(props)
+ this.state = { value: null, changed: false }
this.handleInput = this.handleInput.bind(this)
this.handleKeydown = this.handleKeydown.bind(this)
}
handleInput(e){
+ this.setState({
+ value: e.target.value,
+ changed: true,
+ })
this.props.onInput && this.props.onInput(e.target.value)
}
handleKeydown(e){
if (e.keyCode === 13) {
+ this.setState({
+ value: e.target.value,
+ changed: false,
+ })
this.props.onSave && this.props.onSave(e.target.value)
}
}
@@ -21,7 +30,7 @@ class TextInput extends Component {
<span>{this.props.title}</span>
<input
type='text'
- value={this.props.value}
+ value={this.state.changed ? this.state.value : this.props.value}
onInput={this.handleInput}
onKeydown={this.handleKeydown}
placeholder={this.props.placeholder}
diff --git a/app/client/dashboard/dashboard.actions.js b/app/client/dashboard/dashboard.actions.js
index 7a6aa1d..567f2cb 100644
--- a/app/client/dashboard/dashboard.actions.js
+++ b/app/client/dashboard/dashboard.actions.js
@@ -5,7 +5,7 @@ import util from '../util'
export const load = () => (dispatch) => {
util.allProgress([
actions.task.index({ limit: 40, orderBy: 'created_at desc', }),
- actions.folder.index(),
+ actions.folder.index({ activity: 'dataset', }),
actions.file.index({ module: 'samplernn', generated: 1, limit: 10, orderBy: 'created_at desc', })
], (percent, i, n) => {
console.log('dashboard load progress', i, n)
diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
index 09a1b86..7df1b9c 100644
--- a/app/client/dataset/dataset.component.js
+++ b/app/client/dataset/dataset.component.js
@@ -46,6 +46,7 @@ class DatasetComponent extends Component {
let { module, data, folder, fields, runner, onPickDataset, onPickFile, datasetActions } = this.props
fields = fieldSet(fields)
const { datasetLookup, fileLookup } = data
+ if (!datasetLookup) { return <div></div> }
const { mapFn, sortFn } = util.sort.orderByFn('date desc')
const moduleOnCPU = runner && runner.cpu.task && runner.cpu.task.module === module.name
const moduleOnGPU = runner && runner.gpu.task && runner.gpu.task.module === module.name
diff --git a/app/client/dataset/dataset.loader.js b/app/client/dataset/dataset.loader.js
index ad42e46..058cc07 100644
--- a/app/client/dataset/dataset.loader.js
+++ b/app/client/dataset/dataset.loader.js
@@ -52,6 +52,8 @@ export const load = module => {
let folderLookup = {}
let fileLookup = {}
+ let resultsFolder;
+
// take all of the folders and put them in a lookup
folderLookup = folders.reduce((folderLookup, folder) => {
folderLookup[folder.id] = {
@@ -61,11 +63,29 @@ export const load = module => {
files: [],
datasets: [],
}
+ if (folder.name === 'results') {
+ resultsFolder = folder
+ }
return folderLookup
}, {
unsorted: unsortedFolder(module, true)
})
+ if (! resultsFolder) {
+ console.log('creating results folder...')
+ actions.folder.create({
+ module,
+ name: 'results',
+ activity: 'results',
+ }).then(folder => {
+ console.log('created folder', folder)
+ folderLookup.results = folder
+ })
+ }
+ else {
+ console.log('got results folder', resultsFolder)
+ }
+
// prepare the files by splitting into two groups
const generatedFiles = files.filter(file => file.generated)
const ungeneratedFiles = files.filter(file => !file.generated)
@@ -108,6 +128,7 @@ export const load = module => {
folders,
files,
unsortedFolder: folderLookup.unsorted,
+ resultsFolder,
}
}).catch(e => {
console.error(e)
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.actions.js b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
index 1ee4886..370597b 100644
--- a/app/client/modules/pix2pixhd/pix2pixhd.actions.js
+++ b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
@@ -31,15 +31,16 @@ export const load_directories = (id) => (dispatch) => {
folders,
files,
unsortedFolder,
+ resultsFolder,
} = datasetApiReport
// console.log(datasetUsage)
const sequenceDirectories = sequences.filter(s => s.dir)
- console.log(sequenceDirectories)
+ // console.log(sequenceDirectories)
sequenceDirectories.forEach(dir => {
const dataset = datasetLoader.getDataset(module, datasetLookup, dir.name)
dataset.isBuilt = true
- console.log(dir.name, dataset)
+ // console.log(dir.name, dataset)
})
datasets.filter(s => s.dir).forEach(dir => {
@@ -119,6 +120,7 @@ export const load_directories = (id) => (dispatch) => {
sequences: sequenceDirectories,
datasets,
checkpoints: checkpointDirectories,
+ resultsFolder,
},
})
if (id) {
@@ -135,3 +137,28 @@ export const load_directories = (id) => (dispatch) => {
console.error(e)
})
}
+
+export const load_results = (id) => (dispatch) => {
+ const module = pix2pixhdModule.name
+ util.allProgress([
+ actions.folder.index({ name: 'results' }),
+ actions.file.index({ module, generated: 1 }),
+ actions.socket.list_sequences({ module, dir: 'results' }),
+ actions.socket.list_directory({ module, dir: 'renders' }),
+ ], (percent, i, n) => {
+ console.log('pix2pixhd load progress', i, n)
+ dispatch({ type: types.app.load_progress, progress: { i, n }})
+ }).then(res => {
+ const [folders, files, results, renders] = res //, datasets, results, output, datasetUsage, lossReport] = res
+ console.log(files, results, renders)
+ dispatch({
+ type: types.pix2pixhd.load_results,
+ results: {
+ resultsFolder: folders[0],
+ files,
+ results,
+ renders,
+ }
+ })
+ })
+} \ No newline at end of file
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.reducer.js b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js
index a21f4d5..b6264ed 100644
--- a/app/client/modules/pix2pixhd/pix2pixhd.reducer.js
+++ b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js
@@ -7,6 +7,7 @@ const pix2pixhdInitialState = {
error: null,
folder_id: 0,
data: null,
+ results: null,
}
const pix2pixhdReducer = (state = pix2pixhdInitialState, action) => {
@@ -15,6 +16,11 @@ const pix2pixhdReducer = (state = pix2pixhdInitialState, action) => {
}
switch (action.type) {
+ case types.pix2pixhd.load_results:
+ return {
+ ...state,
+ results: action.results,
+ }
default:
return state
}
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.tasks.js b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js
index 2e7cbbd..f3c5342 100644
--- a/app/client/modules/pix2pixhd/pix2pixhd.tasks.js
+++ b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js
@@ -31,21 +31,21 @@ export const train_task = (dataset, folder_id, epochs=1) => dispatch => {
epochs: epochs,
opt: {
folder_id: folder_id,
- load_size: 264, // switch to 256 for pix2wav
}
}
console.log(task)
return actions.queue.add_task(task)
}
-export const live_task = (sequence, checkpoint) => dispatch => {
+export const live_task = (sequence, checkpoint, opt) => dispatch => {
const task = {
module: module.name,
activity: 'live',
dataset: sequence,
checkpoint,
opt: {
- poll_delay: 0.09,
+ ...opt,
+ poll_delay: 0.01,
}
}
console.log(task)
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
index 3f027a1..0bdcefe 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
import {
ParamGroup, Param, Player,
- Slider, Select, Button, Loading
+ Slider, Select, TextInput, Button, Loading
} from '../../../common/'
import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player'
@@ -51,11 +51,13 @@ class Pix2PixHDLive extends Component {
this.props.actions.live.seek(frame)
}
start(){
- // console.log(this.props)
- const sequence = this.props.pix2pixhd.data.sequences[0].name
- const checkpoint = this.props.pix2pixhd.data.checkpoints[0].name
+ console.log(this.props.opt)
+ const sequence = this.props.opt.sequence_name || this.props.pix2pixhd.data.sequences[0].name
+ const checkpoint = this.props.opt.checkpoint_name || this.props.pix2pixhd.data.checkpoints[0].name
console.log('starting up!', sequence, checkpoint)
- this.props.actions.tasks.live_task(sequence, checkpoint)
+ this.props.actions.tasks.live_task(sequence, checkpoint, {
+ folder_id: this.props.pix2pixhd.data.resultsFolder.id,
+ })
}
interrupt(){
this.props.actions.queue.stop_task('gpu')
@@ -121,21 +123,10 @@ class Pix2PixHDLive extends Component {
/>
<Slider live
name='frame_delay'
- min={0.05} max={2.0} type='float'
+ min={0.0} max={2.0} type='float'
/>
{this.renderRestartButton()}
- <Button
- title={
- this.props.opt.savingVideo
- ? 'Saving video...'
- : this.props.opt.recording
- ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames/25) +')'
- : 'Record video'
- }
- onClick={this.toggleRecording}
- >
- {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
- </Button>
+ {this.renderRecordButton()}
<Button
title={'Save frame'}
onClick={saveFrame}
@@ -143,12 +134,20 @@ class Pix2PixHDLive extends Component {
Save
</Button>
<ParamGroup
- title='Render on server'
+ title='Record video'
name='store_b'
onToggle={(value) => {
// now storing frames on server...
}}
>
+ <TextInput
+ title='Video name'
+ name='final_tag'
+ value={this.props.opt.final_tag}
+ onSave={value => {
+ this.props.actions.live.set_param('final_tag', value)
+ }}
+ />
</ParamGroup>
<p class='last_message'>{this.props.last_message}</p>
@@ -197,7 +196,7 @@ class Pix2PixHDLive extends Component {
>
<Slider live
name='sequence_frac'
- min={0.0} max={0.5} type='float'
+ min={0.0} max={1.0} type='float'
/>
<Slider live
name='process_frac'
@@ -264,6 +263,7 @@ class Pix2PixHDLive extends Component {
)
}
renderRestartButton(){
+ console.log(this.props.runner.gpu)
if (this.props.runner.gpu.status === 'IDLE') {
return (
<Button
@@ -307,6 +307,23 @@ class Pix2PixHDLive extends Component {
</div>
)
}
+ renderRecordButton(){
+ return null
+ // return (
+ // <Button
+ // title={
+ // this.props.opt.savingVideo
+ // ? 'Saving video...'
+ // : this.props.opt.recording
+ // ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames/25) +')'
+ // : 'Record video'
+ // }
+ // onClick={this.toggleRecording}
+ // >
+ // {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
+ // </Button>
+ // )
+ }
}
function timeInSeconds(n){
return n.toFixed(1) + ' s.'
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.results.js b/app/client/modules/pix2pixhd/views/pix2pixhd.results.js
index dcbbfad..aa4d6af 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.results.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.results.js
@@ -13,33 +13,13 @@ import { FileList, FileRow } from '../../../common/fileList.component'
class Pix2pixHDResults extends Component {
constructor(props){
super()
- // if (!props.pix2pixhd.data) props.actions.load_directories()
+ if (!props.pix2pixhd.results) props.actions.load_results()
}
render(){
- if (this.props.pix2pixhd.loading) return <Loading progress={this.props.pix2pixhd.progress} />
- // const { folderLookup, fileLookup, datasetLookup } = this.props.samplernn.data
+ if (! this.props.pix2pixhd.results) return <Loading progress={this.props.pix2pixhd.progress} />
- // console.log(bestRenders.map(r => r.epoch))
- // const path = folder.name === 'unsorted'
- // ? "/samplernn/import/"
- // : "/samplernn/datasets/" + folder.id + "/"
- // return (
- // <div className='col bestRenders'>
- // <h3><Link to={path}>{folder.name}</Link></h3>
- // <FileList
- // linkFiles
- // files={bestRenders}
- // orderBy='date desc'
- // fields={'name date epoch size'}
- // onClick={(file, e) => {
- // e.preventDefault()
- // e.stopPropagation()
- // console.log('picked a file', file)
- // this.handlePick(file)
- // }}
- // />
- // </div>
- // )
+ const { resultsFolder, results, renders, files } = this.props.pix2pixhd.results
+ console.log(resultsFolder, results)
return (
<div className='app pix2pixhd'>
@@ -47,6 +27,40 @@ class Pix2pixHDResults extends Component {
<h1>Pix2PixHD Results</h1>
</div>
<div class='rows params renders'>
+
+ <FileList
+ linkFiles
+ files={files}
+ orderBy='date desc'
+ fields={'name date size'}
+ />
+
+ <h3>renders</h3>
+ <FileList
+ files={renders}
+ orderBy='date desc'
+ fields={'name date size'}
+ onClick={(file, e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ console.log('picked a result', file)
+ this.handlePick(file)
+ }}
+ />
+
+ <h3>results</h3>
+ <FileList
+ files={results}
+ orderBy='date desc'
+ fields={'name date count'}
+ onClick={(file, e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ console.log('picked a result', file)
+ this.handlePick(file)
+ }}
+ />
+
</div>
</div>
)
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.show.js b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js
index 5777ac0..d58ee80 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.show.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js
@@ -86,7 +86,6 @@ class Pix2PixHDShow extends Component {
const input = pix2pixhd.data.fileLookup[dataset.input[0]]
if (! input) return null
if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null
- console.log(dataset)
return (
<div>
<div class={'actions'}>
diff --git a/app/client/socket/socket.actions.js b/app/client/socket/socket.actions.js
index 38c1b7f..e15dda2 100644
--- a/app/client/socket/socket.actions.js
+++ b/app/client/socket/socket.actions.js
@@ -10,6 +10,9 @@ export function disk_usage(opt) {
export function list_directory(opt) {
return syscall_async('list_directory', opt).then(res => res.files)
}
+export function list_sequences(opt) {
+ return syscall_async('list_sequences', opt).then(res => res.sequences)
+}
export function run_script(opt) {
return syscall_async('run_script', opt)
}
diff --git a/app/client/types.js b/app/client/types.js
index 8021a0e..e710248 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -105,7 +105,7 @@ export default {
'init', 'set_folder'
]),
pix2pixhd: with_type('pix2pixhd', [
- 'init', 'set_folder'
+ 'init', 'set_folder', 'load_results'
]),
pix2wav: with_type('pix2wav', [
'init', 'set_folder'
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-12 17:32:03 +0000