LangChain+Chartjs+AzureOpenAIでグラフ自動生成

1. はじめに

1.1 記事で作成するプロジェクトの概要

本記事では、Streamlitを使用してWebアプリケーションを構築し、ユーザーがアップロードしたCSVファイルのデータを基に、LangChainとAzure OpenAIを活用してChart.jsのグラフ設定を自動生成するプロジェクトを実装します。

記事の最後にrequirements.txtとapp.pyのコードを置いてます。

1.2 この記事を読んで実装できるスキル

• LangChainによるチェーンの構築

• Streamlitの基本的な使い方

• Chart.jsでのグラフ生成

2. スキルの概要

2.1 Streamlitとは

Streamlitは、Pythonでデータサイエンスや機械学習のWebアプリケーションを簡単に作成できるオープンソースのフレームワークです。

2.2 LangChainとは

LangChainは、大規模言語モデル（LLM）を使用したアプリケーションの開発を支援するPythonライブラリです。

2.3 Azure OpenAIとは

Azure OpenAIは、MicrosoftのAzureクラウドプラットフォーム上で提供されるOpenAIの言語モデルサービスです。

2.4 Chart.jsとは

Chart.jsは、HTMLのcanvas要素を使用して美しいチャートを描画するJavaScriptライブラリです。
＊この記事ではstreamlit-chart-jsを使ってstreamlit上でChartjsを使用します

3. 実装編

コードの構成

langchain_chartjs/
│
├── venv/                  # 仮想環境
│
├── .env                   # 環境変数ファイル
│
├── app.py                 # メインアプリケーションコード
│
└── requirements.txt       # 依存関係リスト

3.1 Pythonの仮想環境の作成

# 仮想環境を作成 
$ python -m venv venv 

# 仮想環境をアクティベート
$ source myenv/bin/activate

1. 必要なライブラリをリストアップしたrequirements.txtファイルを作成します：

requirements.txt

langchain==0.2.11
langchain-community==0.2.10
openai==1.37.1
pandas==2.2.2
python-dotenv==1.0.1
streamlit==1.37.0
streamlit-chart-js==0.0.6

1. requirements.txtファイルを使用して、必要なライブラリをインストールします：

$ pip install -r requirements.txt

3.2 CSVファイルのアップロードと処理

Streamlitのfile_uploaderを使用してCSVファイルをアップロードし、Pandasを使用してデータを処理します。

app.py

# 必要なライブラリをインポート
import streamlit as st  # Streamlitフレームワークをインポート
import pandas as pd  # データ操作のためのpandasをインポート

# アプリケーションのタイトルを設定
st.title('グラフ自動生成アプリ')

# ファイルアップローダーを作成し、CSVファイルのみを許可
uploaded_file = st.file_uploader('CSVファイルをアップロードしてください', type=['csv'])

# ファイルがアップロードされた場合の処理
if uploaded_file is not None:
    # アップロードされたCSVファイルをpandasのDataFrameとして読み込む
    df = pd.read_csv(uploaded_file)
    
    # "データプレビュー:"というテキストを表示
    st.write("データプレビュー:")
    
    # DataFrameの最初の5行を表示（デフォルトのhead()の動作）
    st.dataframe(df.head())

Streamlitを実行します。

$ streamlit run app.py

http://localhost:8501にアクセスすると下記のような画面になります。
現状CSVファイルをアップロードすることができ、アップロードしたデータをプレビューすることができます。