「フォントピント」がadobe fontsの日本語フォントに対応しました(+検索にかかる時間が大幅に短くなりました)

画像から日本語フォントを検索できるサービス「フォントピント」が、adobe fontsが提供する日本語フォントに対応しました。今まではgoogle fontsが提供する日本語フォントだけが検索対象でしたが、adobe fontsが加わったことで大幅に対応フォント数が増えて現在は365のフォントが対象になっていいます。

また、バックエンドの実行環境をaws lambdaからlightsailに移行したことで検索にかかる時間が大幅に短縮しました。今までは調子の良いときで3秒くらい、悪い時で10秒以上かかって正直目も当てられないレベルでしたが、現在は1秒程度で検索可能になりました。(もちろん環境・状況によりますが)

そろそろ(β)を外せるときが近づいてきた気もします。どうなったら外れるのかは自分でも分かりません。

結構苦労した点があったので、備忘録的に書いておきたいと思います。

fontpint.com

adobe fonts対応

精度的な話

まず予測モデルの精度的なところで問題があり、加えようとしていたadobe fontsの日本語フォントを対象に学習を行ったところ、人工画像では精度的に問題がないのに実際の画像を入力したところ極端に異なるフォントが予測上位に多々出現する問題が生じました。これについてはまだ根本的な原因は分かっていません。しかし、複数枚の実画像でテストしたところ極端に異なるが上位にくるフォントが共通だったため、それらのフォントが何かしら悪さをしている可能性があり、それらを除去して学習したところ実画像でも許容できる結果になりました。今後も同じようなことが生じる可能性があり、原因は探りたいところです。

システム的な話

google fontsだけのときは問題にならなかったのですが、adobe fontsを加えた場合対象のフォントを全て読み込むと1回の転送量が大変なことになり、モバイル回線だと人によっては通信制限まっしぐらの悪意のあるサイトになってしまいそうでした(日本語フォントなので当然と言われれば当然なんですが)。なので、フォント予測APIから結果が返ってきた後に予測されたフォントだけを動的に読み込むようにしました。(余談なんですが、adobe fontsではwebフォントを使う場合プロジェクトという概念にフォントを紐付けて、読み込む際にはそのプロジェクトIDを使用します。なので、フォントごとにプロジェクトを作成してその対応関係を持っておかなければいけないのですが、この作業が地獄でした)

また、adobe fontsが提供するフォント読み込みのスクリプトではWeb Font Loaderを使っており、該当のフォント読み込みが終わるとhtmlタグに .wf-<familyname>-<fvd>-active というクラス名を付与します(fvdはフォントのスタイルやウェイトを表現する記述です)。なので、MutationObserverでクラスの変更を監視してフォントの読み込みが終わったことを検知し、読み込み後に、画像から認識されたテキストを表示しています。これに関しては、実はもっと良い方法がありそうなのですが現状できる範囲でやってます。下がフォント予測APIから結果を受け取ったあと、フォントを読み込み終わりテキストを表示するまでの待ちの様子です。基本は1秒もかからないはずですが、遅い回線だと数秒の待ちが発生するかもしれません。これにより、転送量は基本的にせいぜい数MBになりました。

バックエンド移行

前回の記事でバックエンドの問題点を書きました。ecs / fargateで実行しようかと思っていたのですが、2020年末くらいにlightsailでコンテナを実行できるサービスが始まっていたことを少し調べているうちに知りました。fargateだと1 vCPU、2GBのRAMで5500円〜6000円くらいかつ基本前段にロードバランサを挟むので8000円くらいはかかりそうな雰囲気がありましたが、lightsailのコンテナサービスだと同じスペックでロードバランサも含めて上限が40ドルです。つまり5000円くらいなのでかなり安くできます。またデプロイすると自動的にHTTPSエンドポイントが付与されます。

pompom168.hatenablog.com

個人的には、lightsailのコンテナサービスは個人なり小規模で機械学習の推論APIを建てる際の最初の選択肢になり得ると思います。細かいとこには手が回りませんが、起動時にモデルの読み込みのような重い処理が必要でlambdaだときつい場合に一番安く・手がかからずに使えるサービスだと思います。気になる点は以下の記事などであげられていますが、個人的にはステージング環境が作りにくいことが気になりました。というのも課金を止めるためには環境を削除するしかなく、使うときだけ起動などができないからです。本番と同じ構成の料金を払えればいいんですが、さすがに無理なので自分はステージングは使用された時間だけ課金のlambdaのままで妥協しています。

[アップデート] Amazon Lightsail でコンテナが利用可能になりました! | DevelopersIO

Amazon Lightsailでコンテナが使えるようになったので検証してみた|Subaru Nakamura(varu3)

おわり

やりたいことはまだまだ残っており、今後の発展にご期待ください。

  • 英数字にも対応したい
  • ページ読み込みのパフォーマンス向上
    • PageSpeed Insightsの結果は正直やばいです。基本google fonts読み込みのせいなはず。adobe fontsと同じようにWeb Font Loaderで必要なフォントだけ非同期にかつサブセット化して読みたい
  • 何か結果をシェアできるようにしたい

などなど

そして改善の要望などあれば、ツイッターフォームからご連絡ください。よろしくお願いします!