ｇｏｏｇｌｅＧｅｍｉｎｉＰｒｏをWEBアプリにして使う

2023年12月31日 01:28

こんにちは、makokonです。
今回も引き続き　Gemini Proを取り上げます。前回、pythonでchatプログラムを書きましたが、プログラムを書いてもらったりすると、その出力をコピーするのが面倒だったりします。もちろんBardとかならそのへんをケアしてくれるのですが、今後自分用に作っていこうとすると、やはりインターフェースも自分で書きたいところです。
というわけで、今回はブラウザで利用できるWEBアプリのGemini Pro chatです。(2023/12/31 コード修正しています）

準備

今回用意するのは、
chat用として　グーグルのAI APIとブラウザ表示用のgradioです。

python -m pip install google-generativeai
python--m pip install gradio

pip freeze 
gradio==4.12.0
google-generativeai==0.3.2

gradioとは

Gradioは、機械学習モデルを簡単にデモするためのPythonライブラリです。 Gradioを使用すると、モデルの入力と出力に対応するインターフェースを簡単に作成でき、自作のpythonプログラムでモデルを試すためのWeb UIを生成できます。
作成したWEB UIは、共有することもできますが、今回は個人で使用するためのものです。

Gemini Pro ｃｈａｔの準備

まず、前回同様にGemini Proのchat準備をします。
(2023/12/31 system_promptとrepetiton_penaltyが正しく働いていませんでした。一旦これらを使わないバージョンに修正しておきます。正しい使い方が確認できたら改めて掲載します）

import os
import datetime
import google.generativeai as genai

GEMINI_API_KEY=os.getenv('GEMINI_API_KEY')
genai.configure(api_key=GEMINI_API_KEY)

# chat model
# initial setting
# モデルの設定
generation_config = {
  "temperature": 0.9,  # 生成するテキストのランダム性を制御
  "top_p": 1,          # 生成に使用するトークンの累積確率を制御
  "top_k": 1,          # 生成に使用するトップkトークンを制御
  "max_output_tokens": 2048,  # 最大出力トークン数を指定
}
model = genai.GenerativeModel(model_name="gemini-pro",
                              generation_config=generation_config)

chat_llm = model.start_chat(history=[])

今後、色々と生成条件を変更するかもしれないので、~~システムプロンプトと~~モデルの設定を、別途記述しています。効果が微妙なものもありますが、そのへんは色々試してください。

gradioの設定

次にgradioの設定をします。WEBアプリなので、テキストボックスや操作ボタンなどの外観デザインと、ボタンを押したときの動作などを設定します。
今回用意するのはchat表示用ボックス、質問入力用ボックス、会話履歴をセーブしてからリセットするボタン、会話履歴をリセットするボタンです。
demoとして記述しています。（with gr.Blocks() as demo:）
記述する順番は、コンポーネントの定義、各種動作関数、関数を呼び出すトリガ設定です。

 #gradio 
import gradio as gr #gradio  design
with gr.Blocks() as demo:
     # コンポーネント
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    with gr.Row():
        reset_w_save = gr.Button("Save&reset history")
        reset_wo_save = gr.Button("reset history")

    def save_chat_history(message,chat_history):
        filename = "chatlog"+datetime.datetime.now().strftime("%Y%m%d-%H%M%S")+".txt" 
        with open(filename, 'w',encoding='utf-8') as f:
            for chat in chat_history:
                f.write(f"User: {chat[0]}\nAI: {chat[1]}\n")
        chat_history=[]
        chat_llm.history=[] #チャットメモリも空に 
        return "",""

    def reset_chat_history(message,chat_history):
        chat_history=[]
        chat_llm.history=[] # チャットメモリも空に

        return "",""
        
    def chat_ai(message,chat_history):
        # 通常のチャット処理
        
        if len(chat_history) == 0:
            chat_llm.history=[] # 履歴が空なら、チャットメモリも空に
        
        prompt=message
        response = chat_llm.send_message(prompt)
        chat_history.append((message, response.text))

        return "", chat_history
        
    
    msg.submit(chat_ai, [msg, chatbot], [msg, chatbot])
    reset_wo_save.click(reset_chat_history, [msg, chatbot], [msg, chatbot])
    reset_w_save.click(save_chat_history, [msg, chatbot], [msg, chatbot])

質問を入力するのはmsgテキストボックスで、msg.submit()で、テキストボックスの内容が確定(Enterを押したとき)にchat_ai()を呼び出します。
reset_wo_saveボタンはクリックしたときにreset_chat_history()を
reset_w_saveボタンはクリックしたときにsave_chat_history()を呼び出します。
gradioの会話履歴はchat_historyですが、Gemini Proのチャットは会話履歴がchat_llm.historyですので、同時にリセットしています。
会話履歴のセーブはchat_historyの内容にしています。（保存ファイル名は日付で決めています）

chatbotボックスに必要な出力は表示されますので、各関数で、chat_historyを更新（リセットまたは追加）して、returnします。

gradioの呼び出し

gradoの呼び出しは


demo.launch(share=True)

だけです。これでプログラムが完成です。
このプログラムを実行すると、

Running on local URL:  http://127.0.0.1:7861
Running on public URL: https://8dd8d03ab1b932181e.gradio.live

のような感じの出力がされます。7861はポート番号で自動で割り当てられますが、デフォルトは7860です。このときは別のgradioが走っていたので7860ポートは使用済みだったので7861になりました。

https://8dd8d03ab1b932181e.gradio.live

これは公開用のURLで、同じＬＡＮに接続されているＰＣからこのサービスを利用することができます。本当に公開（インターネット上など）したいときは、以下のサイトなどを参考にしていただければと思います。ChatGPTやGemini Proに教えてもらいながら進めてもいいでしょう。あまり信用してはいけませんが、この程度なら頼りになります。

実際の画面

結果の画面
chatboxに質問と回答が表示され、スクロールバーがついている。
プログラムコード部分にはコピーボタンもついている

確かに動きました。保存ボタンもクリアボタンも正常に動作しています。

まとめ

以上、ｐｙｔｈｏｎで作成したGemini Proのｃｈａｔプログラムをgradioを使って、WEBアプリにしました。
コンソールプログラムからの変更はほとんどなく、入力と出力を渡す部分を追加するだけでできるのでとっても楽ちんでした。
使ってみるまでは、自分一人で使うのが基本だし、WEBアプリにする必要を感じないなあと思っていたのですが、ブラウザ上（タブ）で動き、結果のコピーや履歴のファイル保存が簡単にできるのは想像以上に便利でした。

なお、gradioは単にテキストのインターフェースだけでなく、画像関連のインターフェースも簡単に作れます。画像認識や画像生成もできればこれも便利そうですね。

おまけ　タイトル画像の説明　by GPT-4V

この明るくカラフルなイラストでは、幸せそうな女の子がパソコン画面を通じて愛らしいロボットと対話しています。女の子はリボンで飾られたヘアバンドをつけ、耳には縄編みの髪型が見えます。ロボットは丸い目と微笑を持ち、その画面には色とりどりのチャットバブルが映し出されており、リアルタイムの会話を連想させます。背景にはデジタル的な要素やシンボルが描かれ、技術的なテーマが感じられるイメージです。

#Python #GeminiPro #AI #Chatbot #WebApp #Gradio #MachineLearning #GoogleAI #Programming

この記事が気に入ったらサポートをしてみませんか？

ｇｏｏｇｌｅ Ｇｅｍｉｎｉ ＰｒｏをWEBアプリにして使う

準備