なぜ作ろうと思ったのか
- GPT-4が登場して、急に流れきたな…
- なんか作りたいなぁ
- OpenAIのAPIも少し前に出てたなぁ
- そういえばホグワーツレガシーのキャラメイクで名前考えるの辛かったなぁ
ということで作ってみることにしました。
作ったもの
- 名前ジェネレーターという、年齢、性別、職業、趣味、特徴などのテキスト情報を基に、オリジナルのキャラクターや人物の名前を生成するサービスを作りました
- 入力された情報をOpenAIのAPIに投げて、名前を生成しています
ちなみに、このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
https://indie-dev.mof-mof.co.jp
技術的な話
技術スタック
- OpenAI API
- Next.js
- TypeScript
- ESLint
- Prettier
- daisyUI
- Tailwind CSS
Next.jsはApp Directoryを使ってみています。
まだベータなので本格的に使うかはちょっと悩ましいですね…
OpenAI API周り
OpenAI APIのCompletionsを使っています。
https://platform.openai.com/docs/guides/completion/text-completion
https://platform.openai.com/docs/api-reference/completions
ChatGPTのようにChat用のAPIもありますが、やり取りして出力するような内容でもないので今回はCompletionsを使いました。
ちなみに、APIからGPT-4を使うためには招待が必要で、まだ招待をもらえていないので名前ジェネレーターで使っているモデルはtext-davinci-003です。
日本語はトークン消費量が多い
トークンの計算はここでシミュレート出来ます。
https://platform.openai.com/tokenizer
例えば「こんにちは」の場合、日本語（こんにちは）だと6トークン、英語（Hello）だと1トークン。
トークン量に応じた課金なので出来る限りトークン量は減らしたいところです。
入力された文字列はそのままですが、OpenAI APIに投げるときの文章は英語にすることで、トークン量を抑えています。
daisyUI
今回、初めてdaisyUIを試してみました。
これまでChakra UIをよく使用していましたが、App Directoryとの相性があまり良くないと聞いたため、Tailwind CSS系の代替案を探していました。そこで、ChatGPTに相談したところ、daisyUIがおすすめだと教えてもらいました。
daisyUIは、Chakra UIやBootstrapのように緻密に設計されたスタイルではなく、必要なパーツがほどよく揃っているという印象を受けました。
UIデザインに自信があるエンジニアや、UIを整えることが得意で好きな人にとっては、とても良い選択だと思います。
また、daisyUIはダークモード対応が自動で行われるため、手間が省けます。
さらに、豊富なテーマが用意されているので、配色に悩むことなく、好みのテーマを選んで使用することができました。
その他苦労ポイントとか
英語にしたことで、欲しい結果が返ってこない
前述の通り、トークン量を抑えるために英語にしたところ、生成される名前がすべて英語表記になってしまいました。
日本人であっても、木村隆史という結果が欲しい場合にTakashi Kimuraになってしまうことがあります。
これに対処するために、以下のテキストをプロンプトに追加しました。
Answer in the format "Japanese notation (English notation)"
この変更により、日本語表記と英語表記の両方が返ってくるようになりました。
関係ない文字列が含まれることがある
例えば、
名前： 田中 翔太 (Tanaka Shota)
のような感じで名前：が含まれることがあります。
一応、プロンプトには
Name only # Name value onlyと指定したこともあった
と設定しているのですが…
この問題に対処するために、正規表現を使って不要なテキストを削除しています。
必ずしも求めた答えが返ってくるとは限らないということです。
使われすぎると費用がかかる…
当然ですが、1リクエストごとに0.01円程度の費用がかかります。
軽く試しに作成したので、今のところ問題はないですが、本格的なサービス化を考える場合、同じテキスト内容であればキャッシュしておいた回答を返すようにするなど（実際に皆が同じ内容を入力するかどうかは疑問ですが）、APIへのリクエストを減らす工夫が必要かもしれません。
急場しのぎの対策として、送信後に内容をリセットするようにしました。これを実装しないと、内容が残ったまま何度も送信できてしまうためです。
まとめ
ということで、個人開発したサービスの紹介でした。
もしよかったら使ってみてください。
フィードバックなどもお待ちしております。
ちなみにこの記事はChatGPT（GPT-4）に一部校正してもらいました。