BFしりとり

アイデアがなかったんです体力もなかったんです 12日にリポジトリ作成したけど当日まで何もしてない状態から始まtたんです

https://x.com/tatsu_08191/status/2033605813860974974?s=20

ただ、せっかくなので使いたい技術を全部ぶちこみました。 MoonBit、Azure SignalR、AITuber… ほぼ全部興味枠です。ハッカソンなので。

概要

しりとりをすると次の相手に映し出す言葉の末尾がBrainFuck で表示されます。

Brainfuckとは

プログラミング言語です。また、難解プログラミング言語(esolang)の代表格です。 Brainf*ckのように伏字で表記されることもあります。あんまりf*ckだらけになってもあれですしね。後述しますが、実行できる命令が8種類しかありません。 ~~実用性は皆無です。~~ とても特徴的な言語です。

言語の仕様

Brainfuckでは配列が用意され、その配列の要素を指すポインタと要素の値を操作していきます。また、Brainfuckには以下の8種類の命令しかありません。その他の文字は無視されます。リファレンスを漁る必要がないですね。

 文字 | 動作 
 --- | --- 
| > | ポインタをインクリメント （右にずらす）|
| < | ポインタをデクリメント (左にずらす） |
| + | ポインタの値をインクリメント |
| - | ポインタの値をデクリメント | 
| . | ポインタの値を出力 |
| , | 入力から1バイト読み込んで、ポインタが指す値に代入 |
| [ | ポインタの指す値が0なら、後の]までジャンプ(要するにwhile) |
| ] | ポインタの指す値が0でなければ、前の[までジャンプ |

リポジトリ

Web全般 https://github.com/Yanai1005/megaro_web

BFコンバーター https://github.com/Yanai1005/bf_moon

形態素解析サーバー https://github.com/Yanai1005/megaro_keitaiso

AItuber https://github.com/Yanai1005/megaro_aituber

拡張機能 https://github.com/Yanai1005/megaro_expansion

技術構成

Web側フロント

Sveltekit
Static Web App

バックエンド

Azure Functions
Azure SignalR
Azure Storage

WASM（Brainfuckのコンバータ）

moonbit （興味枠）

形態素解析

Azure Container App
FastAPI
MeCab

AITuber

https://github.com/tegnike/aituber-kit フロントだけ既存のものを流用
Mastra SDK
Azure Container App
VoiceVox
Azure VM

拡張機能

plasmo 拡張機能のフレームワーク
WASM 自前で作ったBFのインタープリタを使用

開発環境

devbox ちょいちょい見るので一部のリポジトリで使用
terraform

機能

日本語の判別

しりとりって意外処理が難しいしりとりとして成立させるには、入力された単語が：

実在する日本語の名詞であること
文章・造語でないこと

の判定が必要。なので、しりとりの判定処理には MeCab を使った自前の形態素解析 API サーバーを構築。 MeCab は日本語テキストを形態素に分割し、品詞情報を付与できるオープンソースのエンジンです。これを使って「入力された単語が実在する名詞1語かどうか」をサーバー側で判定。開発当初は Yahoo! テキスト解析 API を使っていましたが、リクエスト数の制限に引っかかっると思ったため、3/18 昼に MeCab＋FastAPI の自前サーバー（Azure Container Apps）に切り替えました。コールドスタートで初回応答が遅れる問題があるため、フロントエンド側にロード画面を追加して対処しています。

BFコンバーター（WASM）

技術選定は、ただの興味です()最近よく流れるので、Youtubeとかで解説見てました変換ロジックはサーバーを介さずクライアント側で完結するため、しりとりの応答速度に影響しません。日本語1文字は UTF-8 で3バイトになるため、単純に + を並べると「あ」だけで100文字超の BF コードになります。ループ構造（例: >++++[<+++>-]<）を使ってコードを最短化する最適化を入れています。また、Plasmo 製の Chrome 拡張機能にも同じ Wasm インタープリタを組み込んでいます。BrainFuck は人間には読めないので、拡張機能を設定すれば画面上の BF コードをリアルタイムで解読できます。(Brain fuckの意味)

AITuber

テーマが「ウィンド Or ウェーブ」と聞いて、ポケモン→ ポケモン実況者という連想が働きました。

当初作ってみたらおもろいかもなーとは思っていたのですが、aituber-kitっていうリポジトリあるやんけで没案になったものを時間あったので、aituber-kitに乗っかりつつ、自分がやりたいことをやってました。あとはしりとりを実況者に実況してもらえば、面白いのでは？　ということで追加しました。普通にロマン https://github.com/tegnike/aituber-kit

内容のお話画面共有の仕組み

Web API の getDisplayMedia() を使っています。ブラウザが「どの画面/タブを共有しますか？」のダイアログを表示し、ユーザーが選択すると MediaStream が返されます。そして、取得した MediaStreamをvideo タグに渡すと、画面の映像がリアルタイムで表示

AIに送る際はその瞬間の静止画を取り出します。 canvas に video の現在フレームを描画し、JPEG の Base64 文字列に変換して store に保存します。 store に保存した Base64 画像と一緒にテキストが AIに送られます。そのため、AIのモデルはマルチモーダル対応しているものが必要です。なので、テキスト + 画像を同時に受け取って「この画面はこうなっています」と応答します。