app.py

import os
from dotenv import load_dotenv
from Chatbot.chatbot_engine import ChatbotEngine
import gradio as gr

# チャット履歴を保持するためのリストを初期化
chat_history = []

# 応答関数を定義
def respond(message, folder_path):
    global chat_history

    # ユーザーが指定したフォルダパスからChatbotEngineのインスタンスを作成
    chatbot_engine = ChatbotEngine(text_dir=folder_path)

    try:
        # ChatbotEngineを使用して応答を生成
        response = chatbot_engine.query(message)

        if hasattr(response, 'response') and response.response:
            bot_message = "BOT：" + response.response
        else:
            bot_message = "BOT：申し訳ございませんが、ご質問に対する答えが見つかりませんでした。詳細については直接ご連絡ください。"
    except Exception as e:
        bot_message = "BOT：処理中にエラーが発生しました。詳細については直接ご連絡ください。"

    user_message = "あなた：" + message
    chat_history.append((user_message, bot_message))
    return chat_history, ""

# チャット履歴をクリアする関数
def clear_chat():
    global chat_history
    chat_history = []
    return chat_history

# カスタムCSSを使用してGradioインターフェースを構築
custom_css = """
.gradio-container {background-color: #ebc7f5;}

/* ユーザーの吹き出しのスタイルをカスタマイズ */
.message.user {
    background-color: #FFC0CB; /* 吹き出しの背景色をピンク色に近い薄赤色に変更 */
    border-radius: 20px 20px 20px 0; /* 左下の角だけを直角にする */
    text-align: left; /* テキストを左揃えにする */
    float: left; /* 吹き出しを左に寄せる */
    clear: both; /* 要素の左右に浮かせないようにする */
    margin-right: auto; /* 右側のマージンを自動で調整し、左寄せを強化 */
}

.message.user .svelte-1lcyrx4 {
    background-color: #FFC0CB; /* ボタン（吹き出し）の背景色をピンク色に近い薄赤色に変更 */
    color: #000; /* テキスト色を変更 */
}

/* BOTの吹き出しのスタイルをカスタマイズ */
.message.bot {
    background-color: #ADD8E6; /* 吹き出しの背景色を水色に近い薄青色に変更 */
    border-radius: 20px 20px 0 20px; /* 右下の角だけを直角にする */
    text-align: right; /* テキストを右揃えにする */
    float: right; /* 吹き出しを右に寄せる */
    clear: both; /* 要素の左右に浮かせないようにする */
    margin-left: auto; /* 左側のマージンを自動で調整し、右寄せを強化 */
}

.message.bot .svelte-1lcyrx4 {
    background-color: #ADD8E6; /* ボタン（吹き出し）の背景色を水色に近い薄青色に変更 */
    color: #000; /* テキスト色を変更 */
}
#component-1 {
    height: 60px !important;
}
#component-2 {
    height: 60px !important;
}
/* Textboxラベルを非表示にする */
.svelte-1gfkn6j {
    display: none !important;
}

/* チャットメッセージのスタイルをカスタマイズ */
.message.user .svelte-1lcyrx4, .message.bot .svelte-1lcyrx4 {
    font-size: 11pt; /* 文字のフォントサイズを11ptに設定 */
}

/* チャットメッセージ全体の高さを制御する（例：吹き出しの最小高さを設定） */
.message.user, .message.bot {
    min-height: 50px; /* 吹き出しの最小高さを指定 */
    padding: 5px; /* 内側の余白を設定して内容が見やすくなるように調整 */
}
footer.svelte-mpyp5e {
    display: none !important;
}
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
    with gr.Row():
        folder_input = gr.Textbox(placeholder="読み込みたいデータが入っているフォルダパスを入力してください")
    chatbot = gr.Chatbot()
    with gr.Row():
        msg = gr.Textbox(placeholder="質問をここに入力してください。")
    with gr.Row():
        clear = gr.Button("Clear")

    # メッセージ送信時のアクションを設定
    msg.submit(respond, inputs=[msg, folder_input], outputs=[chatbot, msg])
    # クリアボタンのアクションを設定（チャット履歴をリセット）
    clear.click(clear_chat, [], chatbot)

# 環境変数をロードしてインターフェースを起動
if __name__ == "__main__":
    load_dotenv()
    demo.launch()