✍️blog

技術系のこととか

Quick, Draw!

quickdraw.withgoogle.com

AIが絵を認識できるように指示された絵を描いていくゲームです。

ただし、絵は20秒以内に書かなければいけません。

これは「Experiments with Google」の一部として公開されているものなのですが

これのほかにも様々なミニゲーム?が公開されています。

experiments.withgoogle.com

www.itmedia.co.jp

このゲームは、ユーザーが手書きした絵を何かしらの形式でサーバーに送って結果を何かしらの形式で受け取り、

Web Speech APIで結果の読み上げをしているように見えます。

サーバーとのやり取りをどんな形式で行っているのか気になったので調べてみました。

1. お題の一覧を取得

まず、このページを開いたときにお題の一覧を取得していました。

日本語版のページだと以下のようなURLから取得しています。

https://quickdraw.withgoogle.com/api/locale?code=ja

末尾で言語を指定できる感じですね。

取得した一覧はこのような感じの(おそらく)内部的なキーと表示するラベルが並んだjsonです。(実際には整形されていないです)

ちゃんとラベル部分はエスケープシーケンスで書かれていますね。当たり前のように多言語対応って感じですね。

データの件数としては280件ほどありました。

{
    "airplane": "\u98db\u884c\u6a5f",
    "alarm clock": "\u76ee\u899a\u3057\u6642\u8a08",
    "ambulance": "\u6551\u6025\u8eca",
    "angel": "\u5929\u4f7f",
    "ant": "\u87fb",
    "anvil": "\u91d1\u5e8a",
    "apple": "\u30ea\u30f3\u30b4",
    "asparagus": "\u30a2\u30b9\u30d1\u30e9\u30ac\u30b9",
    "axe": "\u65a7",
    "backpack": "\u30ea\u30e5\u30c3\u30af\u30b5\u30c3\u30af",
...
    "windmill": "\u98a8\u8eca",
    "wine bottle": "\u30ef\u30a4\u30f3\u30dc\u30c8\u30eb",
    "wine glass": "\u30ef\u30a4\u30f3\u30b0\u30e9\u30b9",
    "yoga": "\u30e8\u30ac",
    "zebra": "\u30b7\u30de\u30a6\u30de",
    "zigzag": "\u30b8\u30b0\u30b6\u30b0"
}

2. 一問目のお題を取得

お題の一覧を取得したら1問目のお題を取得していました。

POSTメソッドでapplication/x-www-form-urlencodedでリクエストします。

https://quickdraw.withgoogle.com/api

method=newround&bwords=&locale=ja&edition=

すると以下のようなレスポンスが返ってきます。

{"challenge":"\u30c8\u30ed\u30f3\u30dc\u30fc\u30f3","collect":false,"en_challenge":"trombone","synonyms":[],"uid":"e3b49ee0-9356-11ed-b6ce-432d433e9946"}

このリクエストは各お題が完了すると次のお題取得のために行われます。

3. ゲーム開始

開始直後 OPTIONメソッドで下記にアクセスします。

おそらくping的な意図なのかなと思います。

https://inputtools.google.com/request?ime=handwriting&app=quickdraw&dbg=1&cs=1&oe=UTF-8

4. 手書きのデータを送信

ある一定以上書かれるたびに以下のようなデータが送信されます。

送信先は3と同じです。

{
    "input_type": 0,
    "requests": [
        {
            "language": "quickdraw",
            "writing_guide": {   // キャンバスサイズ
                "width": 2035,     
                "height": 680
            },
            "ink": [
                [
                    [ <手書きのX座標>  ],
                    [ <手書きのY座標>  },
                    [ <開始からの経過ミリ秒> ]
                ]
            ]
        }
    ]
}

キャンバスそのものではなく、「どのタイミングで何を書いたか」というような情報を送っているようですね。

そしてレスポンスとして以下のように推論結果をもらっているようです。

各結果の確度も入っていますね。

[
    "SUCCESS",
    [
       [
          "a347893a4096bea6",
          [
             "peanut",
             "potato",
             "flip flops",
             "water",
             "string bean",
             "hot dog",
             "paper clip",
             "circle",
             "computer mouse",
             "spoon",
             "banana",
             "socks",
             "shoe",
             "heart",
             "finger",
             "screwdriver",
             "ear",
             "mouse",
             "nose",
             "marker"
          ],
          [],
          {
             "debug_info" : "SCORESINKS: [[\"peanut\",0.400938],[\"potato\",1.79888],[\"flip flops\",2.99081],[\"water\",3.77114],[\"string bean\",3.9635],[\"hot dog\",4.01748],[\"paper clip\",4.38693],[\"circle\",4.92827],[\"computer mouse\",5.56062],[\"spoon\",5.6268],[\"banana\",5.76432],[\"socks\",6.11124],[\"shoe\",6.28758],[\"heart\",6.31111],[\"finger\",6.4507],[\"screwdriver\",6.60625],[\"ear\",6.61652],[\"mouse\",6.69554],[\"nose\",7.12813],[\"marker\",7.27362]] Combiner:2.6ms Service_Recognize:2.8ms",
             "is_html_escaped" : false
          }
       ]
    ],
    "",
    {
       "app_info" : "quickdraw",
       "bns" : "/bns/tp/borg/tp/bns/i18n-input-prod/input-frontend.ife/1",
       "decode_latency_in_ms" : 3.524,
       "engine_info" : [
          {
             "engine_call_latency_msec" : 3,
             "engine_compute_latency_msec" : 3,
             "engine_name" : "handwriting|/bns/wn/borg/wn/bns/handwriting/recoservice,/bns/is/borg/is/bns/handwriting/recoservice,/bns/ld/borg/ld/bns/handwriting/recoservice,/bns/pg/borg/pg/bns/handwriting/recoservice,/bns/th/borg/th/bns/handwriting/recoservice"
          }
       ],
       "experiment_id" : [],
       "is_valid_request_data" : true,
       "original_input_method_name" : "handwriting",
       "plugin_name" : "handwriting_plugin",
       "request_serve_latency_in_ms" : 3,
       "rewritten_input_method_name" : "und-t-i0-handwrit"
    }
 ]

以後は5回分(残りのお題の数)繰り返してという感じですね。

5.まとめ

Quick, Draw!で使用されているモデルは

3次元(X、Y、時間)から280のクラス分類が可能ということがわかりました。

まぁ、3次元のデータはサーバーサイドで何か加工してモデルに入力してるかもしれないですね。

調べながら何回か遊んでましたけど、絵心ないな。。。

via GIPHY