Cloudflare Workers 上で TeX 数式の画像生成をする
物は試しということで作ってみたykyki.icon
仕様
永続化用のクエリが追加されたURLにリダイレクトされる
scrapboxだと svg 画像が埋め込めない…?ykyki.icon
レンダリングしたい数式を自分で入力する方法はまだ (ほとんど) 用意してない
一応 expr=\mathcal{A}のようにすればリクエストできようにしている
Cloudflare KVでキャッシュしているので, 一度レンダリングされた後はレイテンシが小さくなるようになっている (期限付き) 所感
reuse sessionだけだと, 複数の画像を同時に読み込もうとすると2枚くらいしか取得できず, 実用的ではない
KVにキャッシュがあれば画像生成せずに済むので, 複数回リロードしていれば全部表示できる (めんどい)
Puppeteerを経由するので時間かかる + Browser Rendering の Limit がキツいという理由があるため, この方法で満足なパフォーマンスを出すのは難しいかも?
キャッシュのTTLを長くする or 永続化すれば改善されるが, サービス設計との相談. 現状はDBレスな構成で考えてる
URLパラメータへの数式の埋め込み方法
サービスの永続化を考えた場合に, ここの符号化の方法はサービスイン後の後方互換性を考えると, 結構重要な部分
Reference:
この方針で本格稼働させる予定は今のところない
そのためこのページのリンクも2020年代後期にはリンク切れしているかもykyki.icon
とりあえず deflate + base64 + encodeURIComponent で実装
なるべくURLパラメータを圧縮させたいという考えで上のように実装したが, 10年以上の長期稼働を考えるならもっと簡単な方法の方がが死ににくくなる気がするykyki.icon
少なくと JavaScript 以外の言語でも満足に encode/decode できるような方法にしておきたい
KV向けのキーを作るハッシュ化の方法は, 現状寿命が短くてもいいので, もっと雑に考えてOK
このスケールでの永続化を考えるなら, パラメータにデータを埋め込むのではなく, Cloudflare R2などで永続化層を用意する方法も候補に挙がってくる その際はパラメータも短くできる. 見た目としては URL 短縮サービスみたいなリンクを生成する
keyとvalueの対応さえ注意しおけば, 後から value のスキーマの微調整をしたり, データ移行もできる
browser.launchのリトライ追加
リトライ機構を追加するとだいぶましになった. 満足できるパフォーマンスにはまだまだ届いていないけど
サンプル:
https://scrapbox.io/files/661d040105f34e00274e348c.gif
↑異なる数式を参照する img タグが100個ある html ファイルを open & reload している様子
そもそもCloudflare Worker上で数式のレンダリングするには
TikZJaxも Puppeteer 経由で簡単に動かせるykyki.icon
web2jsというものを内部で使っているらしい
MathJax のコードの参照方法
Puppeteer 内で MathJax を動かすしているが, MathJax のソースコードの渡し方は, 次の2パターンが考えられる
① script タグの src に外部リンクを記載して参照する,
② script タグに MathJax のソースを埋め込む
直感的には後者の方がページ起動が速くなりそうでパフォーマンスが向上しそうに思える
だが実際に試してみたところ, どうも悪化してしまった
Puppeteer のインスタンスのキャッシュが関係してそうな気がするが果たして…ykyki.icon
Reference