DCGANしてtensorflow.jsを使って動かせるようにした

タイトルの通り、DCGANしてtensorflow.jsを使ってWebアプリ化した

onnxjsはやっぱり全然モデル対応してないからやめた

▼ リポジトリ github.com

▼ デプロイしたやつ mygan.hayashikun.com

データセットは自分で頑張って集めたアイドルの画像を使った

モデルはこんな感じ

mygan/model.py at master · hayashikun/mygan · GitHub

Generator / Discriminator

学習したモデルをtensorflow.jsで読み込めるように変換するのは以下のようにする

tfjs.converters.save_keras_model(self.generator, self.tfjs_export_dir, quantization_dtype_map={"uint8": "*"})

mygan/trainer.py at master · hayashikun/mygan · GitHub

quantization_dtype_mapを変えると生成されるモデルのサイズが変わる

uint8 → uint16 → float16 の順で重くなる

Webで表示する箇所はReactで実装した

mygan/web at master · hayashikun/mygan · GitHub

mygan/IdolPage.tsx at master · hayashikun/mygan · GitHub

useEffectでmodelを読み込んで、読み込めたら生成するようにした

入力のnoiseをいじりたかったので、noiseの最初の16要素は0にして、残りを乱数にした

setNoise([...Array(tfjs.inputs[0].shape[1] || 0)].map(
                (_, i) => i < 16 ? 0 : Math.random() * 8 - 4
            ));

Sliderを16個入れて、noiseを変えられるようにした

<ul style={{listStyle: "none", width: "50%", margin: "auto"}}>
  {[...Array(16)].map(
    (_, i) => {
      return <li key={"slider-li-" + i}>
        <Slider min={-4} max={4} step={0.5} defaultValue={0} onChange={e => onSliderChange(e, i)}/>
      </li>
    })}
</ul>

Sliderを動かすと絵も変わる

mygan

結構計算は早くてヌルヌル変わる