【streamlit】音声会話アプリ開発手順①

今回初めてstreamlitを使って音声入力&出力のアプリを作成したのですが、音声の処理など何も知らない状態でスタートし、ずいぶん遠回りしてやっとまともに動くレベルにまで実装できました。

私はたまたま知り合いで音声を扱った経験のあるエンジニアがいたので教えてもらうことができましたが、これをネット上に散在している情報やchatGPTに聞くだけで習得しようとしたら、かなりしんどいだろうなと思います

ちゃんと筋道立てて教えてくれる人がいない孤独なエンジニアが路頭に迷うことがないよう、ひとつずつ実装し実際に動かせるところまで解説します。

全部で4部構成になっています。

目的

音声でチャットするアプリケーションを筋道立てて作成することで、要点を掴む
※ 習得しやすさを重視するため、多少冗長な書き方になってもあっちこっち関数や変数を見に行かなくても良いコードにしています。

対象者

• streamlitに初めて触れる人
• 音声チャットを初めて開発する人
• langchainはある程度知っていて、テキストベースのやり取りの仕方はわかっている人

学べること

• streamlitでチャットアプリを作成する方法
• 音声→テキスト変換、テキスト→音声変換の方法

1-1 streamlitとは

• pythonだけで、簡単にopenAIのplaygroundっぽいUIを作成できる
• HTMLやJavaScriptでのwebページ作成とはかなり書き方が異なるので、少し慣れは必要かも
• ハッカソンやプロトタイプの作成に重宝しそう
• デプロイもできる

特に今回のようなチャットアプリではリアクティブなページ作成が必要で、これをJSで実装するのは少し骨が折れます。

streamlitだと、単一のファイルでUIもロジックも書くことができるので、スピード開発に重宝するでしょう。

1-2 streamlitでチャット画面を作成する

まずは簡単にチャット画面を作成してみましょう。
AIの返答はおうむ返しです。

streamlitをインストールしたら、app.pyに以下コードを貼り付けてstreamlit run app.pyで立ち上げてみましょう。

サンプルコード

import streamlit as st
from dataclasses import dataclass, asdict
from typing import List, Optional, TypedDict,Union, Literal

# チャットログの型を定義
@dataclass
class Message:
    role: Literal['user','assistant']
    content: str

# タイトルを設定する
st.title("Echo Bot")

# チャット履歴を初期化する
if "messages" not in st.session_state:
    st.session_state.messages = []


# これまでのチャット履歴を全て表示する
for message in st.session_state.messages:
    message = asdict(message)
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# ユーザーの入力が送信された際に実行される処理
if prompt := st.chat_input("What is up?"):

    print(f'ユーザーの入力:{prompt}')
    print("-------userの入力とAIの処理---------")

    # ユーザの入力を表示する
    with st.chat_message("user"):
        st.markdown(prompt)
    # ユーザの入力をチャット履歴に追加する
    st.session_state.messages.append(Message(role="user",content=prompt))

    response = f"Echo: {prompt}"
    # ChatBotの返答を表示する
    with st.chat_message("assistant"):
        st.markdown(response)
    # ChatBotの返答をチャット履歴に追加する
    st.session_state.messages.append(Message(role="assistant",content=response) )

st.session_stateというのが、状態管理をするための変数で、アプリケーションが起動している間有効です。
この中にいろいろな状態を入れることができ、上記の例ではメッセージ履歴を入れています。

st.chat_input()はメッセージ欄を作成します

st.chat_message()はチャットのメッセージ吹き出しを作成するもので、ここに'user'や'assistant'を指定することで、アバターアイコンが変わります。

いろいろ作り方はあるのですが、ここではチャットアプリを作成するための最小限の紹介に留め、次からは実際にopenAIのAPIを使ってチャット機能を実装します。