画像から日本語フォントを検索できるサイト「フォントピント」を作った
こんにちは、街中で「あの文字のフォント何なんだろう？」と思うことよくありますよね。そんなときに役立つサイト「フォントピント（β）」を作りました。
実際のところ、フォント関連で何か作りたいなと思ってフォント関連の論文を漁っていたところ、Adobeが出している「DeepFont: Identify Your Font from An Image」という画像から使われているフォントを予測する論文を発見しました。論文自体が2015年で方法自体は今からすると古めの印象を受けるのですが、学習データの作り方や予測のさせ方がめちゃくちゃ参考になりこれベースでいけそうだと感じ作ることにしました。3月からちょこちょこやっていたのですが、数日前に4月10日がフォントの日であることを知ってめちゃくちゃ焦って作りましたが、何とか形にはすることができました。
サービス的な部分
類似サービスとしては以下のようなものがあります。WhatFontは日本語フォントにも対応していますが画像から検索はできません。画像から検索できるサービスは日本語フォントには対応していません。「フォントピント」は現状で画像から日本語フォントを検索できる唯一のサービスです。（これが言いたかった）
- webページ上のフォント検索
- 画像からのフォント検索
また、今のところ対応しているフォントはGoogle Fontsに存在する日本語フォントのみです。font-weightが異なれば違うフォントとして扱っており117個のフォントに対応しています。作っているときは諦めていたのですが、よくよくAdobe Fontsについて調べると、ライセンス的にCreative Cloudのいずれかのプランを契約すればこのサービスに適用できそうなので、大きく対応フォント数を増やせそうです。これは個人的にとても楽しみなので、すぐに対応したいと思っています。
技術的な部分
まず予測モデルの学習とテストなのですが、これはフォントファイルから任意のテキストを人工的に生成した画像で行っています。フォント数のマルチクラス分類問題です。テストデータにおける精度は、現状の117クラス分類で top-1 accuracy: 66.8% 、top-5 accuracy: 99.6%となっています。つまり、予測した上位5個にはほとんど正解が含まれるので、実際のサイトにおいても予測上位5個を表示しています。
次にシステム的な部分です。機械学習・バックエンド・フロントエンドと割とこれまでの集大成的な感じになりました。
フロントはこれまでの流用でNext.jsで開発してVercelにデプロイしています。バックエンドはFastAPI(Python) で開発してコンテナイメージとして、Lambdaでコンテナを実行しています。API Gateway x Lambda のよくあるサーバレスな構成です。ASGIアプリケーションであるFastAPIとAPI Gateway x Lambdaのアダプタとしてmangumというライブラリを使用しています。mangumを使うとLambda独特の書き方をしなくて済みます（ただDockerfileにはLambda独特の記載が必要でそのまま他の基盤に持っていくことはできそうにありません）。また、フォントの認識とは別に文字の認識をGoogleのCloud Vision APIに投げています。
作ったあとにLambdaでバックエンドを動かすのはちょっとミスったなあと思っています。コンテナ起動時に学習済みモデルの読み込みが必要なので、Lambdaのコールドスタートやスケールアウトでコンテナを起動する際に非常に時間がかかります。そのためProvisioned Concurrencyの機能を使ってあらかじめコンテナを複数個起動しておく必要があるのですが、Provisioned Concurrencyの費用がそこそこ高くそれならFargateなりで常時起動している方が安くなりそうだからです。バックエンドの移行も今後の対応とします。
おわり
ひとまず作ることはできたので、とりあえずは前述のAdobe Fontsを使って対応フォントの数を増やしたいと思います。あとはバックエンドの移行もやりたいです。あと切実なところでいえば、サーバーの運営費が正直そこそこかかる（頑張っても月5000円くらいはかかりそう）ので、趣味でやっているものではあるのですが広告を入れるかBuy Me A Coffee的なものを入れるかしないといけないなあと思っています。
何か改善や欲しい機能などありましたら、Twitterとかで教えてもらえると嬉しいです。というかフォーム的なものを載せないといけないなと思いました。ありがとうございました。
