Zenn
🍕

PythonでSupabaseのテーブルを作成し、Gradio 5のアプリを構築する方法

2024/11/19に公開
Python
Google Colaboratory
Supabase
Gradio
tech

近年、SupabaseはオープンソースのFirebase代替として注目を集めており、Pythonコミュニティでもその利用が急増しています。本記事では、Pythonを使用してSupabaseのデータベースにテーブルを作成し、そのテーブルと連携するGradio 5のウェブアプリを構築する方法を解説します。

また、環境変数の管理にはGoogle Colabのuserdataを使用し、セキュアに重要な情報を取り扱います。

前提条件

  • Python 3.8以上がインストールされていること
  • Supabaseアカウントとプロジェクトが作成済みであること
  • SupabaseのプロジェクトURL、APIキー、そしてデータベースの接続情報が取得できること
  • Google Colabを使用している場合、userdataを利用して重要な変数を管理すること

手順概要

  1. 必要なライブラリのインストール
  2. Supabaseデータベースに接続し、テーブルを作成
  3. Supabaseクライアントの初期化
  4. Gradioアプリの作成
  5. アプリの実行

1. 必要なライブラリのインストール

まず、必要なパッケージをインストールします。

pip install supabase psycopg2-binary gradio

2. Supabaseデータベースに接続し、テーブルを作成

psycopg2ライブラリを使用して、Supabaseのデータベースに接続し、テーブルを作成します。

重要: データベース接続情報は安全に管理し、公開しないでください。ここでは、Google Colabのuserdataを使用して環境変数を管理します。

import psycopg2
from google.colab import userdata

# Supabaseのデータベース接続情報を取得
DB_HOST = userdata.get('DB_HOST')          # 例: 'your-db-host.supabase.co'
DB_NAME = userdata.get('DB_NAME')          # デフォルトは 'postgres'
DB_USER = userdata.get('DB_USER')          # デフォルトは 'postgres'
DB_PASSWORD = userdata.get('DB_PASSWORD')  # あなたのデータベースパスワード
DB_PORT = userdata.get('DB_PORT')          # デフォルトは '5432'

# データベースに接続
conn = psycopg2.connect(
    host=DB_HOST,
    database=DB_NAME,
    user=DB_USER,
    password=DB_PASSWORD,
    port=DB_PORT,
    sslmode='require'  # SSL接続を使用
)

# カーソルを取得
cur = conn.cursor()

# テーブルを作成するSQLクエリ
create_table_query = """
CREATE TABLE IF NOT EXISTS messages (
    id SERIAL PRIMARY KEY,
    content TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc', now())
);
"""

# クエリを実行
cur.execute(create_table_query)

# 変更をコミット
conn.commit()

# 接続を閉じる
cur.close()
conn.close()

3. Supabaseクライアントの初期化

supabase-pyライブラリを使用して、Supabaseクライアントを初期化します。ここでも、Google Colabのuserdataを利用して、環境変数から情報を取得します。

from supabase import create_client, Client
from google.colab import userdata

# SupabaseのURLとAPIキーを取得
SUPABASE_URL = userdata.get('SUPABASE_URL')    # 例: 'https://your-project-ref.supabase.co'
SUPABASE_KEY = userdata.get('SUPABASE_KEY')    # あなたのAnonまたはService Roleキー

# クライアントの作成
supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)

4. Gradioアプリの作成

Gradioを使用して、ユーザーからの入力をSupabaseのテーブルに保存し、保存されたメッセージを表示するアプリを作成します。

import gradio as gr

def add_message(content):
    # メッセージを挿入
    data = {"content": content}
    response = supabase.table("messages").insert(data).execute()
    
    # メッセージ一覧を取得
    messages = supabase.table("messages").select("*").order("created_at", desc=False).execute()
    
    # メッセージ内容のみを抽出
    message_list = [msg["content"] for msg in messages.data]
    
    # 改行でメッセージを連結
    return "\n".join(message_list)

# Gradioインターフェースの定義
iface = gr.Interface(
    fn=add_message,
    inputs="text",
    outputs="text",
    title="Supabaseと連携したメッセージアプリ",
    description="メッセージを入力して送信すると、Supabaseのデータベースに保存されます。過去のメッセージが表示されます。"
)

5. アプリの実行

作成したアプリを実行します。

# アプリの実行
iface.launch()

これで、Gradioのウェブインターフェースが起動します。テキストボックスにメッセージを入力し、「Submit」ボタンをクリックすると、そのメッセージがSupabaseのデータベースに保存され、保存されたすべてのメッセージが表示されます。

補足説明

データベース接続情報の取得方法

  • Supabaseのダッシュボードにログインし、プロジェクトの「Settings」→「Database」に移動すると、接続情報が表示されます。
  • データベースのパスワードは、プロジェクト作成時に設定したものです。忘れた場合は、同じページからリセットできます。

まとめ

以上で、Pythonを使用してSupabaseのテーブルを作成し、Gradio 5のアプリを構築する手順が完了しました。この方法を利用することで、リアルタイムでデータベースと連携するインタラクティブなウェブアプリを簡単に作成できます。

これをベースに、さらなる機能拡張やUIの改善、認証機能の追加など、さまざまな発展が考えられます。ぜひ、自分だけのアプリケーション開発に挑戦してみてください。

📒ノートブック

https://colab.research.google.com/drive/17WFkXM-d9AFCm7euBDqgUnuleCRe4Tuq?usp=sharing

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion