2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

前回、9体のAIキャラに悩み相談できるガチャアプリ 「悩み相談ルーレット」 の見た目を作りました。ただし前回の時点では、AIの回答はまだ固定文言のダミーでした。

前回の記事はこちら
https://qiita.com/aonami3902_/items/a85da6c9a9d42dae4687

今回はいよいよ、このダミー部分を本物のai&のAPIに差し替えます。9体それぞれ違うモデルが中身に入っているので、同じ悩みでもキャラによって回答がガラッと変わるはずです。


ダミーから本物へ:変更点は驚くほど少ない

前回、要件定義書にひとつ仕込みをしておきました。各キャラに「中身のモデル名」を持たせておいたことです。

{ name: "ろんりは博士", emoji: "🐉", model: "deepseek-ai/deepseek-v4-flash", tagline: "論理派" }

このおかげで、今回やることは非常にシンプルです。ダミー回答を返していた1箇所を、ai&のAPIを呼ぶ処理に差し替えるだけ。見た目やキャラ選出のロジックには一切手を入れません。

from openai import OpenAI
import os

client = OpenAI(
    base_url="https://api.aiand.com/v1",
    api_key=os.environ["AIAND_API_KEY"]
)

completion = client.chat.completions.create(
    model=character["model"],  # キャラごとに割り当てたモデル名
    messages=[
        {"role": "system", "content": f"あなたは「{character['name']}」というキャラです。{character['tagline']}な口調で、一言〜数文でアドバイスしてください。"},
        {"role": "user", "content": user_worry}
    ],
    temperature=1.1,
    max_tokens=1024,
)

ai&のAPIはOpenAI互換なので、base_urlとモデル名を変えるだけで動きます。キャラのtagline(論理派、あっさり系など)をそのままsystemプロンプトに混ぜ込むことで、前回作ったキャラ設定が回答の口調にも反映される仕組みです。

.envにAPIキーを書いて、Pythonのバックエンド(Flask)だけがそれを読む構成にしています。ブラウザ側のJavaScriptにはキーを一切渡していません。理由は次のセクションで説明します。


実際に相談してみた

「仕事のやる気が出ません」という同じ悩みを、何人かのキャラに聞いてもらいました。

ハイスペ院長(DeepSeek pro)

127.0.0.1_8000_ (1).png

コメントがダミー回答から変更になっていることを確認。

いいこと言うやん。

フレンドリー博士(Gemma)

127.0.0.1_8000_ (2).png

博士っぽくはないけど...フレンドリーな感じは伝わってきました。こんな博士いたらいいな。

ロジカル軍師(Kimi k2.6)

127.0.0.1_8000_ (3).png

一番役に則ってて好きかもしれません。


同じ質問なのに、キャラによって切り口も口調もこんなに違う。これがモデルそれぞれの「個性」なんだと実感しました。第1回で見た温度による出力のゆらぎとは別に、モデルそのものにも地の性格みたいなものがあるんだなと感じます。

比較表で数字を並べるより、キャラクターとして見せた方が、モデルごとの違いが直感的に伝わる気がします。


ハマったところ

reasoning系はテンポに注意

DeepSeekやQwenのようなreasoning系モデルは、答える前にじっくり考える性質があります(第1回で詳しく検証しました)。悩み相談だと「考え中...」が長すぎるとテンポが悪いので、max_tokensを控えめにして、reasoning_effortも低めに設定しました。

APIキーは絶対にフロントに書かない

このアプリはPython(Flask)がバックエンドでAPIキーを持ち、ブラウザ側のJavaScriptには一切キーを渡さない構成にしています。ブラウザで動くコードにAPIキーを直書きすると、誰でも中身を見られる状態になってしまうためです。.envにキーを書いて、.gitignoreで除外。GitHubに公開する前提だったので、ここは特に気をつけました。

nayami_roulette/
├── .env              # APIキーを書く(Gitには含めない)
├── .env.example      # キーの書式だけ示すサンプル
├── .gitignore        # .env を除外対象に追加
├── app.py            # Flaskサーバー(.envを読んでai&を叩く)
└── templates/
    └── index.html

もし誤ってキーをコミットしてしまったら、GitHub上の履歴を消すだけでは不十分です。ai&の管理画面でそのキーを無効化し、新しいキーを再発行する必要があります。


コードはGitHubで公開

完成したコードは以下のリポジトリで公開しています。気になる方はどうぞ。


この検証にかかった金額

3モデルしか回していないので、かかった金額は$0.01でした。もっと豪快に使えると言うことも確認できたのはいい点です。


まとめ

前回作った「見た目だけのガチャアプリ」に、今回ai&のAPIを繋いで本物のAIにしました。

  • フェーズ1で仕込んでおいたmodelフィールドのおかげで、差し替え作業は最小限で済んだ
  • 同じ質問でも、モデルが変われば答え方も個性もガラッと変わる
  • モデルごとの個性は、比較表よりキャラにした方が伝わりやすい
  • reasoning系はテンポ調整(max_tokens・reasoning_effort)が大事
  • APIキーはフロントに書かない、.envで管理する

要件定義を「見た目だけ完成させるフェーズ」と「本物に繋ぐフェーズ」に分けたことで、途中で問題が起きても「見た目の問題か、API接続の問題か」を切り分けやすい進め方になったと思います。AI丸投げでアプリを作りたい人は、ぜひ真似してみてください。

続きは投稿し次第ここにリンクを追加します。


2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?