import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import {
ParamGroup, Param, Player, Group,
Slider, SelectGroup, Select, TextInput, Button, Loading
} from '../../../common/'
import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player'
import * as liveActions from '../../../live/live.actions'
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()
// if (! props.pix2pixhd || ! props.pix2pixhd.data) {
props.actions.pix2pixhd.load_directories()
// }
props.actions.live.get_params()
// props.actions.live.list_checkpoints('pix2pixhd')
// props.actions.live.list_sequences('pix2pixhd')
this.changeCheckpoint = this.changeCheckpoint.bind(this)
this.changeEpoch = this.changeEpoch.bind(this)
this.changeSequence = this.changeSequence.bind(this)
this.seek = this.seek.bind(this)
this.togglePlaying = this.togglePlaying.bind(this)
this.toggleRecording = this.toggleRecording.bind(this)
this.handleKeydown = this.handleKeydown.bind(this)
}
componentWillMount() {
document.addEventListener('keydown', this.handleKeydown)
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeydown)
}
componentWillUpdate(nextProps) {
if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
console.log('listing epochs')
this.props.actions.live.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name)
}
}
handleKeydown(e){
console.log(e.keyCode)
if (e.altKey || e.ctrlKey || e.metaKey) return
switch (e.keyCode) {
case 27: // esc
e.preventDefault()
this.props.actions.live.set_fullscreen(!this.props.fullscreen)
break
default:
break
}
}
changeCheckpoint(field, checkpoint_name){
this.props.actions.live.load_epoch(checkpoint_name, 'latest')
}
changeEpoch(field, epoch_name){
this.props.actions.live.load_epoch(this.props.opt.checkpoint_name, epoch_name)
}
changeSequence(field, sequence){
console.log('load sequence', sequence)
this.props.actions.live.load_sequence(sequence)
}
seek(percentage){
const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
console.log("seek to frame", percentage, frame)
this.props.actions.live.seek(frame)
}
start(){
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, {
folder_id: this.props.pix2pixhd.data.resultsFolder.id,
})
}
interrupt(){
this.props.actions.queue.stop_task('gpu')
}
togglePlaying(){
if (this.props.opt.processing) {
this.props.actions.live.pause()
} else {
this.props.actions.live.play()
}
}
toggleRecording(){
if (this.props.opt.recording){
stopRecording()
this.props.actions.live.pause()
} else {
startRecording()
}
}
render(){
// console.log(this.props)
const { pix2pixhd, i18n } = this.props
if (pix2pixhd.loading) {
return
}
const { folderLookup, datasetLookup, sequences } = pix2pixhd.data
const sequenceLookup = sequences.reduce((a,b) => {
a[b.name] = true
return a
}, {})
const sequenceGroups = Object.keys(folderLookup).map(id => {
const folder = folderLookup[id]
if (folder.name === 'results') return
const datasets = folder.datasets.map(name => {
const sequence = sequenceLookup[name]
if (sequence) {
return name
}
return null
}).filter(n => !!n)
return {
name: folder.name,
options: datasets.sort(),
}
}).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name))
const checkpointGroups = Object.keys(folderLookup).map(id => {
const folder = folderLookup[id]
if (folder.name === 'results') return
const datasets = folder.datasets.map(name => {
const dataset = datasetLookup[name]
if (dataset.checkpoints.length) {
return name
}
return null
}).filter(n => !!n)
return {
name: folder.name,
options: datasets.sort(),
}
}).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name))
return (
{this.renderRestartButton()}
{this.renderLiveButtons()}
{this.renderRecordButton()}
{this.props.last_message}
)
}
renderRestartButton(){
// console.log(this.props.runner.gpu)
const { i18n } = this.props
if (this.props.runner.gpu.status === 'IDLE') {
return (
)
}
if (this.props.runner.gpu.task.module !== 'pix2pixhd') {
return (
)
}
if (! this.props.opt.processing) {
return (
)
}
return (
)
}
renderRecordButton(){
return null
// return (
//
// )
}
renderLiveButtons(){
const { i18n } = this.props
return (
{
// now storing frames on server...
}}
>
{
this.props.actions.live.set_param('final_tag', value)
}}
/>
)
}
}
function timeInSeconds(n){
return n.toFixed(1) + ' s.'
}
const mapStateToProps = state => ({
last_message: state.live.last_message,
fullscreen: state.live.fullscreen,
opt: state.live.opt,
frame: state.live.frame,
checkpoints: state.live.checkpoints,
epochs: state.live.epochs,
sequences: state.live.sequences,
runner: state.system.runner,
i18n: state.system.i18n.strings,
pix2pixhd: state.module.pix2pixhd,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
actions: {
live: bindActionCreators(liveActions, dispatch),
queue: bindActionCreators(queueActions, dispatch),
pix2pixhd: bindActionCreators(pix2pixhdActions, dispatch),
tasks: bindActionCreators(pix2pixhdTasks, dispatch),
}
})
export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDLive)