Hono + htmx + Cloudflare Workersでちょっとしたアプリケーションを作ってみた

こんにちは!@jewel_x12 です。CARTA TechBlog アドベントカレンダーの12/24の記事です。 うおお!もうクリスマスですね。みなさんはクリスマスプレゼントに何かもらえそうですか?自分はちょっと前にMeta Quest3を衝動買いしたので、それを自分へのクリスマスプレゼントということにしています。ちなみに先週、NuPhy Air75 V2も買いました。物欲が留まることを知らないですね。机の上にあるでっかい眼鏡がもったいないので、アドベントカレンダーネタにMRアプリでも作る予定だったのだけど、ストリートファイターをやったりグダグダしていると、MRアプリを作るためのインプット時間など全くなくなってしまっていたのでした。

techblog.cartaholdings.co.jp

残る期間でなんかネタはないものかと焦りがつのる中、そういや今年は htmx とやらを聞いたのでそれを試してみた話を記事にしてみようとなったのです。

TL;DR

前置きが長くなりましたがTL;DRです。

作ったアプリのリポジトリはこちらです。

GitHub - jewel12/shokuyov2: 食用 v2

おわり


こっから先は習作で作ったちょっとしたアプリの説明なので、興味のある暇な人だけ読んでください。

食用とは

https://shokuyo.jewelve.dev/

入力されたものが食用かどうか判断してくれる便利なアプリです。このアプリを作ったのは2回目で、最初は学生の頃にPerlで作ったアプリでした。今回はそれをある程度再現しています。どなたでも使えますが、OpenAIのAPIを使っているので$10くらいのCredit balanceが尽きたら動かなくなります。お布施のクリスマスプレゼントはいつでもウェルカムです。

初代食用はこんな感じ

  • 入力されたものが食用かどうか判定して、関連画像も表示してくれる
  • 食用の場合、画像を激しくアニメーションさせて活きの良さを表現する
    • SNSに上げる食事の写真を加工してバエで美味そうに仕上げる風潮に対し、より美味そうに見せる本質的な方法を提示できました
  • 判定のデータソースにはWikipediaを利用していて、入力された単語の説明に「食用」と書いてあれば食用であるということにした
    • 非常にガバかったのが可愛いくて「アメリカ合衆国」も食用であった
  • 弊社入社後に食用をドヤ顔で紹介していたら、社員にXSSを指摘された

食用 V2

  • 食用かどうかの判定にOpenAIのText generation APIを使うようになった
    • 食用判定の精度があがってつまらなくなった
  • 画像の生成にもImage generation APIを使うように

出力結果例

いちごのショートケーキは食べられます。


ロボットレストランは食べられます。


スベスベマンジュウガニは食べられます。 (※ 有毒です)


二郎は食べられます。


もうすぐ正月ですが、くれぐれも有毒のものを食べたり、餅を喉に詰まらせないようにしないでくださいね!