ChatGPT APIでVJ（ポケモンショックジェネレーター）

2023年4月の2023 Public Visuals Tokyo x TDSWというVJイベントで知り合った方からHydra Video Synthの存在を教わり、良く分からないが面白そうだなと頭の片隅に置いていたのですが、数週間後にふとHydraのサイトを眺めつつ、「やっぱりこれ憶えるのダルいな……ChatGPTで書けるのでは」という思い付きがありました。

ChatGTPに尋ねたところ案の定「はい、知っています」との答えがあり、ChatGPT APIでHydraコードを生成、ブラウザで実行するサービスを作ってみることにしました。現在、ある程度の形になったので公開中です。

• Hydra Code Generation by GPT-3

ChatGPTのAPIアクセスには使用料がかかります。ユーザーがAPIキーを入力する仕組みにするかどうか迷ったのですが、こんな弱小サービスのためにそこまでユーザーにさせたくないという思いと、GPT-3であれば$0.002 / 1K tokensとかなり安価であったため、私の不労所得であるところのAdSenseの収入で完全にペイ出来ると判断、ユーザーはAPIキー不要で使えるサービスとしました。

ただしフロントのソースコードにOpenAIのAPIキーを埋め込むほどの器の大きさはないのでChatGPTのAPIをプロキシするバックエンドの構築は必須でした。何らかのサーバレスアーキテクチャもしくはCloudflare Pages Functionであればそれが可能でした。

今回のアーキテクチャの概念図は以下です。（この図は私のお気に入りのソフトEdrawMaxで作成しました。もしWondershare社の方がご覧になっていたらご連絡いただけますと幸いです。貴社の本国ブログで私のホームページが紹介されたことがあります。仲良くしてください。）

要するに Cloudflare Pages で公開するファイルのルートディレクトリに `_worker.js` が存在すればそれをCloudflareがWorkersのコードとしてエッジサーバーで実行する仕組みで、この場合静的ファイルへのリクエストもWorkersを介して制御されることになります。

ソースコードはGitHubで公開しました。

• https://github.com/xoihazard/chatgpt-hydra

`_workers.js` には OpenAIのSDKを使用したかったのでwebpackでバンドル生成しています。これはWorkersのコードをwebpackで生成したい方にも参考になると思います。

フロントのコードはVue3で実装、CSSでUIを構築するにあたりTailwind UIのメンバーシップを4万くらい出して買った覚えがあるため、今回それを使用して大体コピペで作りました。

悪意への処置

私は博愛主義者としてこの世に生を受けました。しかしこれまでに沢山の悪意を経験し、私自身がビ〇・〇イツに比肩する悪魔であることも自覚するに至りました。そのため、APIアクセスにはCloudflareのWAFを導入しています。

Pages でプロジェクトを公開すると *.pages.dev のドメインが割り当てられますが、CloudflareのWAFは独自ドメインにプロキシしないと適用できません。*.pages.devからのアクセスはFunctionsで遮断する必要があります。そのためのロジックもソースコードに入っています。

WAFでレートリミットの設定が可能なので、DDoS攻撃でOpenAIから何万円もの請求が来るという悪夢はこれで回避できました。

そもそものコード生成精度について

正直どうでもいいです。いずれ人類はAIから感情を「ルーシュ」として収穫される作物になります。私はそう思います。

Hydra Code Generation by GPT-3 、ぜひ体験してみてください。