早押しクイズ〜Stable Diffusionが作成した画像を当てろ！〜

ControlNet(Stable Diffusion)を使った早押しクイズアプリを作りました．
ノイズがかかった画像から綺麗な画像が生成するまでの流れに着目し，分かり次第回答する「早押しクイズアプリ」です．

目次

• 遊び方
• 環境構築
  • バックエンド
  • フロントエンド
• 動かす

環境

• Ubuntu 22.04
• GPU memory 12GB以上 (NVIDIA GeForce RTX 3090 Ti 使用)

遊び方

はじめに，出題者(Questioner)と回答者(Answerer)に分かれます．
出題者は，画像を生成させるために絵とその絵を説明するテキストを準備します．準備した絵をアプリで撮影または画像をアップロードし，説明分を入力します．

入力情報を送信することで，画像が生成されます．生成後，出題者がSTARTボタンを押してゲームを始めます．回答者は答えが分かったらSTOPをボタンを押し，出題者と答えあわせをします．間違えたら出題者が再度STARTボタンを押し，正解するまで遊ぶアプリです！！！

環境構築

$ git clone [e-mail]:ysenkun/quiz-stable-diffusion.git

バックエンド

ControlNet

ControlNetを用いて画像生成を行うため，以下のコマンドでモデルをダウンロードします．

$ cd server/controlnet/
$ wget -P ./models https://huggingface.co/lllyasviel/ControlNet/resolve/main/models/control_sd15_scribble.pth

ControlNet用の仮想環境を以下のコマンドで作成します．

$ conda env create -f environment.yaml

Nodejs(Socket.io)

次にNodejsの環境を構築していきます．

$ cd server/nodejs/
$ npm install --no-package-lock

以下の {YOUR_APPROPRIATE_PATH} を自分のpython実行環境に合わせて変更してください．

server/nodejs/server.js

 var {PythonShell} = require('python-shell');
 var options = {
    pythonPath: '{YOUR_APPROPRIATE_PATH}/control/bin/python', 
    pythonOptions: ['-u'], 
    args: [prompts]
};

[補足] 以下のコマンドで，上記のPathを確認することができます．

$ conda activate control
$ which python

フロントエンド

$ cd front/

以下の your_socket_ip をバックエンドで動かすNodejsのIPを指定してください.（デフォルトのポート番号は3031）

front/src/views/QuizView.vue

methods: {
    initSocketConnection() {
      console.log("Initializing socket.io...");
      this.mySocket = io("your_socket_ip");

以下のコマンドで環境構築してください

$ npm install --no-package-lock

動かす

以下のコマンドで，バックとフロントを動かします．

$ cd server/nodejs
$ npm run serve
$ cd front/
$ npm run serve

以下の動画は，実際に触っている様子です．
左が出題者，右が回答者です．