Gemini 1.5 Flash で簡易なチャットができるまで

AI

仕事や私生活で疲弊してしまい、前回の投稿から一年以上たってしまいました。

今回は、AIで簡単なチャットを作りたいと思います。
数年前にchatGPTの登場で、世間にいっきに広まり、いまだに何かと話題となっていますが、日本では、あまり浸透していない気がします。
もちろん、様々な分野で取り入れられていて、気づかない内にその恩恵を受けてはいると思います。
でも、実際に仕事で活用している人は、私の職場では、私も含めてほぼ皆無です。
この先も、あまり実用的な利用はしない気でいました。
そんな折に、仕事でAIを利用したサービスを導入するかどうか検討するミーティングの末席に参加する機会があり、AIサービスの紹介を聞いてみて、以前に私が認識していたよりも、ずいぶんと開発や導入しやすくなっているなと感じました。

そこで、自分でもAIの勉強もかねて、何か作ってみようと思いました。
APIが提供されているAIの中で、Geminiの仕様が、自分にはマッチしていたので、Gemini api を使用していきます。

料金モデル

まずは、利用するにあたり気になる料金の確認です。
googleのサービスの料金説明は、わたしには相変わらず理解しにくいですが、基本無料のようです。
https://ai.google.dev/pricing?hl=ja#1_5flash
使用していくなかで、料金について詳細がわかりしだい追記したいと思います。

API KEY の取得

下記ページからkeyを取得できます
https://aistudio.google.com/app/apikey

取得したkey一覧のプランの箇所に『無料』と表示されていたので、一安心です。
使用状況によっては、従量課金されるかもでしれませんが、、、

API KEY でテスト

api key 取得ページに下記コマンドがあるので、ターミナルでテストできます。
取得したキーをいれてコマンドを叩くさいこのままコピペすると改行コードが入ってしまうので気をつけてください


cURL コマンドを実行して API をすばやくテスト

curl \
-H ‘Content-Type: application/json’ \
-d ‘{“contents”:[{“parts”:[{“text”:”Explain how AI works”}]}]}’ \
-X POST ‘https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY’

作成した簡易チャット

nodejsやphpなど使用せずに、geminiを利用したかったので、作成してみました。

javascript 、html、cssで作成しています。api keyやsystem instructionなど設定項目は、ブラウザのストレージに保存されます

設定項目は下記になります

* api key [必須]

geminiのdeveloperのページから取得できます

* system instruction

AIに与える役割やバックグラウンドなど、初期に設定しておきたい内容を入力します。

ここに入力する内容でAIが友人や相談相手になってくれたりします。好きなアイドルやアニメやゲームのキャラクターのプロフィールを使用するとそのキャラクターになりきって会話してくれます。

入力する内容や記述方法を工夫することで精度が上がっていくのでいろいろ試してみてください。

たまにトンチンカンな場合もありますが、それも含めて、AIの挙動を楽しめます

* max memory

ブラウザ更新時や再開の際の呼び出しのためと、AIに文脈に沿った回答をしてもらうため会話履歴をブラウザに記憶させています。その記録する会話数の設定です

※質問と回答のセットの回数です

AI ASSISTANT

※api key などの入力項目の情報は、使用しているブラウザに保存されます
※ご心配な方は、ローカルにダウンロードしてファイルをブラウザで開いてご利用ください
※iPhoneでご利用される場合は、Textasticなどのプレビュー機能があるhtmlエディタのアプリでご利用いただけます

次回は、作成したコードを公開したいと思います