　こんにちは、今日はPythonのWebフレームワークであるFlaskとOpenAIを使って、薬剤情報サービスを作成する方法をご紹介します。
実際に、作成したサービスのページはこちら(現在調整中)

　このサービスは、ユーザーが薬剤名を入力すると、その薬剤の効果、副作用、服用方法などについての情報を提供します。初学者でも理解できるように、手順を詳しく説明します。
※上記サービスは、勉強用、デモ用として使用してください。

1. プロジェクトの概要

　今回作成する薬剤情報サービスは、ユーザーが薬剤名を入力し、その情報を送信すると、その薬剤の効果、副作用、服用方法等についてOpenAIが返答するというものです。

　フロントエンドはHTMLとCSSで、バックエンドはPythonとFlaskを使用します。また、質問応答機能にはOpenAIのChatGPTを使用します。

2. 必要なツールとライブラリ

このプロジェクトの作成にあたり、以下のツールとライブラリが必要です。

Python3
Flask
OpenAI
HTML/CSS

3. HTMLとCSSの作成

　まず、ユーザーが質問を投げかけるためのUIを作成します。HTMLとCSSを使ってフォームを作成し、その中に質問を入力するためのテキストフィールドと送信ボタンを配置します。

以下はそのためのHTMLとCSSのコードです。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>薬剤情報サービス</title>
    <!-- CSSファイルを読み込む -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <!-- ヘッダー部分 -->
    <header>
        <!-- ロゴ画像 -->
        <img src="{{ url_for('static', filename='logo.png') }}" alt="Logo">
        <!-- サービスのタイトル -->
        <h1>薬剤情報サービス</h1>
    </header>
    <!-- 質問を入力するフォーム -->
    <form method="POST">
        <label for="question">薬剤の名前を入力してください:</label><br>
        <input type="text" id=""question" name="question"><br>
        <input type="submit" value="質問する">
    </form>
    <!-- レスポンスがある場合に表示 -->
    {% if response %}
    <div class="response">
        <!-- レスポンスを表示（HTMLタグをエスケープしない） -->
        <p>{{ response|safe }}</p>
    </div>
    {% endif %}
</body>
</html>

CSS:

/* 全体のフォント設定と背景色 */
body {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

/* ヘッダーのスタイル設定 */
header {
    background-color: #007BFF;
    color: white;
    text-align: center;
    padding: 20px 0;
}

/* ロゴ画像のサイズ設定 */
header img {
    height: auto;
    width: 25%;
}

/* フォームのスタイル設定 */
form {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

/* テキスト入力フィールドのスタイル設定 */
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

/* 送信ボタンのスタイル設定 */
input[type="submit"] {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

/* レスポンスのスタイル設定 */
.response {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
}

4. バックエンドの作成

次にバックエンドのPythonとFlaskを使用して、ユーザーからの質問を処理し、OpenAIのChatGPTに問い合わせ、その回答をフロントエンドに送り返す機能を作成します。

以下にそのためのPythonのコードを示します。

from flask import Flask, render_template, request
import openai

app = Flask(__name__)

# レスポンスを整形する関数
def format_response(response):
    # レスポンス内の各部分を適切な形式に変換
    response = response.replace("・", "\n・")
    # 改行をHTML形式に変換
    response = response.replace("\n", "<br>")
    return response

# ルートURLへのリクエストを処理する関数
@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        # フォームから質問を取得
        question = request.form['question']
        # 質問に対するレスポンスを生成
        response = generate_response(question)
        # レスポンスを含むページを表示
        return render_template('index.html', response=response)
    # フォームを表示
    return render_template('index.html')

# 質問に対するレスポンスを生成する関数
def generate_response(question):
    # 質問の形式を指定
    question = f"{question}の効果、副作用、服用方法を示せ。\
        出力のフォーマット：\
            効果 \
            ・効果 1\
            ・効果 2\
            副作用 \
            ・副作用1\
            ・副作用2\
            服用方法 \
            　服用方法についての文章\
            "
    # OpenAI APIキーを設定
    openai.api_key = 'YOUR_OPENAI_API_KEY'
    # OpenAI GPT-3に質問を送信してレスポンスを取得
    response = openai.Completion.create(
      engine="text-davinci-003",
      prompt=question,
      max_tokens=500
    )
    # レスポンスを整形
    formatted_response = format_response(response.choices[0].text.strip())
    return formatted_response

# メイン関数
if __name__ == '__main__':
    # Flaskアプリケーションを起動
    app.run(debug=True)

　このコードを実行すると、ローカル上でWebサービスが起動し、ユーザーが質問を投げかけるとOpenAIのChatGPTがの質問に基づいて情報を生成し、その結果がユーザーに表示されます。このサービスを動作させるためには、OpenAIのAPIキーが必要で、このキーはOpenAIのウェブサイトから取得できます。取得したキーはPythonコード中の'YOUR_OPENAI_API_KEY'の部分に置き換えてください。

5. サービスのテスト

　すべてのコードが正しく設定されたら、サービスをテストしてみましょう。Pythonのコードを実行すると、ブラウザで表示されるURLが出力されます（通常はhttp://127.0.0.1:5000/）。このURLをブラウザに入力して、表示されるページで薬剤名を入力してみてください。
　下記のように、ユーザーが薬剤名を入力すると、その情報がFlaskアプリケーションに送信され、OpenAIがその薬剤の効果、副作用、服用方法などの情報を生成します。その結果がユーザーに表示されます。

6. 法的な注意点

　この薬剤情報サービスは学習用に作成したものであり、実際の医療情報サービスとして使用する場合は、医療情報の取り扱いに関する法律や規制を遵守する必要があります。また、OpenAIの使用には利用規約が適用されますので、それにも注意してください。

まとめ

　以上が、FlaskとOpenAIを使って薬剤情報サービスを作成する方法です。この記事を通じて、FlaskとOpenAIの基本的な使い方を理解し、自分自身のプロジェクトに活用できることを願っています。このサービスは学習用に作成したものであり、実際の医療情報サービスとして使用する場合は、医療情報の取り扱いに関する法律や規制を遵守する必要があります。また、OpenAIの使用には利用規約が適用されますので、それにも注意してください。これからもPythonとその周辺技術を活用したプロジェクトを楽しみましょう！

FlaskとChatGPTを使って薬剤情報サービスを作成しよう！