2 files changed, 122 insertions, 15 deletions
diff --git a/app/client/modules/biggan/views/biggan.categoryList.js b/app/client/modules/biggan/views/biggan.categoryList.js
new file mode 100644
index 0000000..4285f3f
--- /dev/null
+++ b/app/client/modules/biggan/views/biggan.categoryList.js
@@ -0,0 +1,107 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import {
+  Loading
+} from '../../../common/'
+
+import * as liveActions from '../../../live/live.actions'
+import * as bigganTasks from '../biggan.tasks'
+import * as bigganActions from '../biggan.actions'
+
+const ALL_CATEGORIES = 'inversion/categories/biggan_all.json'
+
+class CategoryList extends Component {
+  state = {
+    loading: true,
+    categories: {},
+    q: "",
+    fn: "",
+  }
+
+  constructor(props) {
+    this.loadCategories(ALL_CATEGORIES)
+  }
+
+  loadCategories(fn) {
+    this.setState({ loading: true, fn })
+    actions.socket
+       .read_file({ module, fn })
+       .then(({ name, buf }) => {
+          this.setState({
+            categories: String.fromCharCode.apply(null, new Uint8Array(buf)),
+            loading: false,
+          })
+       })
+  }
+
+  loadCategory(index) {
+    actions.live.send_command('loadCategory', str(index))
+  }
+
+  render() {
+    const { loading, q } = this.state
+    if (loading) {
+      return <div><Loading /></div>
+    }
+    return (
+      <div>
+        <input type="text" value={q} onInput={e => this.setState({ q: e.target.value })} />
+        <div className="categories">
+          {this.renderGroup("inanimate")}
+          {this.renderGroup("animate")}
+        </div>
+      </div>
+    )
+  }
+
+  renderGroup(groupName) {
+    const { categories, q } = this.state
+    const qRegexp = new Regexp(q || ".*")
+    const group = categories[group_name]
+    const groups = Object.keys(group).map(key => {
+      const category = group[key]
+      const categoryGroup = Object.keys(category).map(categoryName => {
+        if (!categoryName.match(qRegexp)) {
+          return null
+        }
+        return (
+          <a key={categoryName} onClick={() => this.loadCategory(category[categoryName])}>
+            {categoryName}
+          </a>}
+        )
+      }).filter(g => !! g)
+      return !categoryGroup.length ? null : (
+        <div key={key}>
+          <h3>{category}</h3>
+          {categoryGroup}
+        </div>
+      )
+    }).filter(g => !! g)
+    if (!groups.length) {
+      return null
+    }
+    return (
+      <div>
+        <h2>{groupName}</h2>
+        {groups}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  opt: state.live.opt,
+  frame: state.live.frame,
+  biggan: state.module.biggan,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    live: bindActionCreators(liveActions, dispatch),
+    socket: bindActionCreators(socketActions, dispatch),
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(BigGANCategoryList)
diff --git a/app/client/modules/biggan/views/biggan.live.js b/app/client/modules/biggan/views/biggan.live.js
index fd6b12d..20cffe8 100644
--- a/app/client/modules/biggan/views/biggan.live.js
+++ b/app/client/modules/biggan/views/biggan.live.js
@@ -36,7 +36,7 @@ class BigGANLive extends Component {
     //   return <Loading progress={biggan.progress} />
     // }
     return (
-      <div className='app live centered'>
+      <div className='app live biggan centered'>
         <div className='row'>
           <div className='column'>
             <Player width={512} height={512} square fullscreen={this.props.fullscreen} />
@@ -139,20 +139,20 @@ class BigGANLive extends Component {
         >{i18n.gpu.interrupt}</Button>
       )
     }
-    if (! this.props.opt.processing) {
-      return (
-        <div>
-          <Button
-            title={i18n.gpu.not_processing}
-            onClick={this.togglePlaying}
-          >{i18n.gpu.restart}</Button>
-          <Button
-            title={i18n.gpu.busy}
-            onClick={() => this.interrupt()}
-          >{i18n.gpu.interrupt}</Button>
-        </div>
-      )
-    }
+    // if (! this.props.opt.processing) {
+    //   return (
+    //     <div>
+    //       <Button
+    //         title={i18n.gpu.not_processing}
+    //         onClick={this.togglePlaying}
+    //       >{i18n.gpu.restart}</Button>
+    //       <Button
+    //         title={i18n.gpu.busy}
+    //         onClick={() => this.interrupt()}
+    //       >{i18n.gpu.interrupt}</Button>
+    //     </div>
+    //   )
+    // }
     return (
       <div>
         <Button