「Ship Shape」技術の導入で進化した図形デザイン
(canva.dev)紹介
- Canvaユーザーは新しいDrawツールを通じて創造性を発揮し、カスタムのイラストをデザインに追加できる。
- ユーザーがマウスやトラックパッドで描いた単純な線や図形も不正確になりがちなため、これを補うためにShape Assist機能が開発された。
- Shape Assistは機械学習（ML）を使って、不安定な落書きを滑らかなベクターグラフィックに変換する。
デザイン上の考慮事項
- 機能開発では分類のレイテンシを最優先で考慮し、ユーザー体験が高速でありながら正確になるようにした。
- ブラウザ内でソリューションを展開し、リアルタイムの図形認識と描画支援を提供する。
- インターネット接続が不要なため、オフライン環境でもアクセシビリティを確保できる。
データ収集
- 成功するMLモデルの基盤はデータ収集にあり、さまざまなユーザーから描画データを収集した。
- ユーザーが描いた線をx座標とy座標のシーケンスとして記録し、多様なスタイルやバリエーションを含むデータセットを収集した。
- 座標を用いてデータを記録することで、データ前処理やさまざまなデータ拡張技術を適用できる柔軟性を確保した。
モデル設計と学習
- ページの読み込み時間に悪影響を与えず、クライアント側で実行できるMLモデルを設計した。
- CNNの代わりに座標を直接使うRNNを試し、モデルサイズを最小化した。
- さまざまなハイパーパラメータを調整し、モデルの最適な特性を特定した。
- ユーザーごとの描画速度の違いを考慮し、各図形を表す点の数を固定した。
- Ramer-Douglas-Peucker（RDP）アルゴリズムを変形し、重要な細部を維持しながら点の数を減らした。
デプロイ時の考慮事項
- モデルは小さく計算も単純なため、クライアントアプリケーション内ですべての処理を実行できる。
- サーバーに接続する必要がなく、機能は完全にオフラインで動作する。
モデルアーキテクチャ
- モデルは1つのLSTMレイヤーとGemm（密結合または全結合レイヤー）を含む構成になっている。
- モデルのサイズは約250キロバイトで、クライアント上で実行するためにTypescriptで直接実装した。
図形の置き換え
- ユーザーが描いた図形を判定した後、ベクターグラフィック表現とユーザーの描画パスを正確に整列させるため、テンプレートマッチングのアプローチを使用した。
結論
- Shape Assist機能を世界中に共有できることを大変うれしく思っており、プロのデザイナーでも落書き好きでも、この機能を楽しんでもらえることを願っている。
GN⁺の意見
この記事で最も重要なのは、Canvaがブラウザ内で動作する機械学習モデルを使い、ユーザーが描いた図形を正確に認識して滑らかなベクターグラフィックへ変換するShape Assist機能を開発した点だ。この機能はユーザーに即時のフィードバックを提供し、インターネット接続がなくても使えるため、アクセシビリティを高めている。この記事が興味深いのは、技術の進歩が創造的な作業をいかに簡単で楽しいものにできるかを示しているからだ。
1件のコメント
Hacker Newsのコメント
RNNの代わりに、
"$1 unistroke recognizer"アルゴリズムがこの問題に対するシンプルでエレガントな解決策である"$1 unistroke recognizer"は単一サンプルで学習させても十分にうまく機能する"Graffiti"スタイルのテキスト入力でも信頼性高く動作し、各文字が単一ストロークである場合に効果的であるASMLやTSMCなどのエンジニアは、より小さく高性能なチップを作るために、極端に短い波長の光を生成すべく毎日液体鉛にレーザーを当てている
マウスやトラックパッドで直線を描くときでさえ、不規則な形になりやすい
Canvaが線を描くために使っているライブラリに興味がある
20年以上前のMacromedia Flashで、フリーハンドの曲線を描く際に曲線を滑らかにする機能に驚いた
Ramer-Douglas-Peucker (RDP) アルゴリズムの変種を開発したことへの言及
手描き風の「震える落書き」バージョンのほうが、滑らかなベクターグラフィックスより魅力的かもしれない
このような機能を実装する際は、ユーザーが選択できるようにし、有効になっている状態が明確であるべき
モデルを学習させて、9種類の事前定義された図形を認識させる
この機能がオープンソースであってほしい