Чат Эхо Бот на Streamlit

Простой пример эхо-бота с подробными комментариями и объяснениями

Ключевые выводы

• Использование session_state: Применяется для хранения истории чата, чтобы сообщения не терялись при перезагрузке страницы.
• Работа с элементами чата: Применение st.chat_input для ввода, st.chat_message для отображения сообщений и st.markdown для вывода содержимого.
• Простота реализации: Эхо бот отвечает пользователю, повторяя введенный текст, что позволяет легко расширить функциональность для более сложных ботов.

Введение в концепцию эхо-бота на Streamlit

Эхо бот – это простое приложение, которое принимает текстовое сообщение от пользователя и отвечает тем же текстом или добавляет дополнительные метки, такие как префикс "Эхо:". Такая модель помогает понять основные принципы создания чат-ботов, а также познакомиться с функциональностью библиотеки Streamlit для построения веб-приложений на Python. Ниже приведены основные концепции, которые используются в реализации нашего эхо-бота:

Использование st.session_state

Streamlit использует объект st.session_state для хранения состояния между перезагрузками страницы. Это позволяет сохранять историю сообщений, добавлять новые записи и затем правильно их отображать без потери данных. В данном приложении инициализация истории осуществляется при первом запуске, а затем список сообщений обновляется по мере взаимодействия пользователя с ботом.

Элементы st.chat_input и st.chat_message

Элементы st.chat_input и st.chat_message отвечают за организацию ввода и вывода сообщений в интерфейсе чата. st.chat_input предоставляет пользователю возможность ввести текст и отправить его, а st.chat_message позволяет красиво форматировать и отображать разговор, разделяя сообщения от пользователя и от бота. Применение этих элементов делает чат-интерфейс интуитивно понятным и похожим на современные мессенджеры.

Простота и расширяемость кода

Код эхо-бота очень прост и легко читается, что делает его отличной отправной точкой для дальнейших экспериментов и расширений функциональности. Вы можете легко добавить дополнительные функции, такие как обработка команд, интеграция с внешними API, сохранение логов чата и многое другое.

Реализация кода чат эхо-бота

Ниже приведён полный пример кода, который демонстрирует создание чат эхо-бота с использованием Streamlit. В этом примере бот будет отвечать на сообщение, повторяя введённый пользователем текст с префиксом "Эхо:". Код снабжён подробными комментариями для лучшего понимания логики работы приложения.

Полный исходный код

# Импортируем необходимый модуль streamlit
import streamlit as st

# Устанавливаем заголовок приложения
st.title("Чат Эхо Бот")

# Инициализация истории сообщений в session_state.
# Если ключ "messages" отсутствует, создаём новый список для сохранения сообщений.
if "messages" not in st.session_state:
    st.session_state.messages = []

# Отображение истории сообщений. При каждом обновлении страницы все сообщения из session_state выводятся на экран.
# Для каждого сообщения определяется роль отправителя ("user" или "assistant").
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# Получение ввода от пользователя через элемент st.chat_input.
# Пользователю предлагается ввести сообщение, после чего введённое значение сохраняется в переменной prompt.
if prompt := st.chat_input("Введите ваше сообщение:"):
    # Добавление сообщения пользователя в историю чата.
    st.session_state.messages.append({"role": "user", "content": prompt})
    
    # Вывод сообщения пользователя с помощью st.chat_message (с ролью "user").
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # Формирование ответа эхо бота.
    # Ответ включает префикс, который ясно указывает, что это эхо-ответ.
    response = f"Эхо: {prompt}"
    
    # Вывод ответа бота в виде сообщения с ролью "assistant".
    with st.chat_message("assistant"):
        st.markdown(response)
    
    # Добавление ответа бота в историю, чтобы он сохранялся и отображался при последующих обновлениях.
    st.session_state.messages.append({"role": "assistant", "content": response})
  

Пошаговое объяснение кода

1. Импорт и настройка приложения

В начале кода импортируется библиотека Streamlit. Функция st.title() устанавливает заголовок приложения, который отображается в верхней части страницы. Затем производится проверка на наличие ключа "messages" в st.session_state. Если его нет, создаётся пустой список, в который будут записываться все сообщения чата. Это обеспечивает сохранение истории сообщений между обновлениями страницы.

2. Отображение истории сообщений

Используя цикл for, приложение проходит по всем сообщениям, сохранённым в st.session_state.messages. Каждое сообщение выводится в контейнере с помощью st.chat_message(), при этом роль сообщения определяется параметром message["role"] (например, "user" для сообщений пользователя и "assistant" для сообщений бота). Это обеспечивает различное форматирование для разных отправителей и добавляет интуитивные визуальные различия между ними.

3. Обработка пользовательского ввода

Элемент st.chat_input() создаёт виджет ввода, где пользователь может ввести текст. Как только текст введён и отправлен, он сохраняется в переменную prompt. Если prompt не является пустым, код переходит к обработке введённого сообщения.

4. Обновление истории чата и вывод сообщений

После отправки сообщения, текст от пользователя добавляется в список сообщений st.session_state.messages как словарь с ключами "role" и "content". Далее, то же сообщение отображается в чате с ролью "user".

После этого бот формирует ответ, который является эхо-сообщением – текст от пользователя присоединяется к префиксу "Эхо:". Ответ также выводится в контейнере st.chat_message("assistant") и добавляется в историю сообщений. Такой подход позволяет сохранить и повторно отобразить все сообщения чата даже после обновления страницы.

Расширяемость кода

Данный код можно расширить для реализации более сложных функциональных возможностей. Например, вы можете добавить:

• Логирование чата: Сохранение сообщений в файл или базу данных для последующего анализа.
• Обработка команд: Реализовать логику для распознавания команд (например, "/help") и выдачи соответствующей информации.
• Интеграция с внешними API: Можно подключить OpenAI или другие сервисы для генерации более сложных ответов.
• Пользовательский интерфейс: Добавить стилизацию, иконки или даже аватары для сообщений, что улучшит визуальное восприятие чата.

Таблица сравнения основных элементов

Возможные улучшения и дальнейшие шаги

Хотя представленный код является базовым, он служит отличной основой для создания более сложных систем. Ниже приведены некоторые направления для дальнейшего развития приложения:

1. Добавление функционала голосовых сообщений

Вы можете интегрировать API для распознавания речи, чтобы принимать голосовые сообщения от пользователя. После обработки голосового ввода они могут быть преобразованы в текст, а затем переданы в наше приложение, которое ответит эхо-текстом или сгенерирует иной ответ.

2. Интеграция с внешними сервисами

Приложение можно расширить путем подключения внешних API, например, API генерации текста от OpenAI (ChatGPT) или других сервисов для обработки естественного языка. Это позволит боту отвечать не просто повторением, а генерировать содержательные ответы на основе контекста.

3. Сохранение истории чата

В данный момент история чата хранится в st.session_state и сбрасывается при перезагрузке листа. Для постоянного хранения можно сохранить данные в файл или базу данных, что позволит анализировать историю общения или реализовать функционал возобновления сессии.

4. Улучшение пользовательского интерфейса

Вы можете экспериментировать с внешним видом приложения, добавляя CSS-стили, изображения, анимации и другие элементы, чтобы обеспечить более привлекательный дизайн чата. Например, можно добавить различные аватары для сообщения пользователя и ответа бота, а также анимационные эффекты при появлении новых сообщений.

5. Обработка различных типов сообщений

Помимо простого текста, можно добавить поддержку вывода изображений, графиков, таблиц и других элементов Streamlit в ответах бота. Это делает приложение более гибким и позволяет использовать его для демонстрации сложных данных или аналитики.

Заключение

Мы рассмотрели подробный пример создания чат-эхо бота с использованием Streamlit. Пример иллюстрирует, как с помощью лишь нескольких строк кода можно реализовать полноценный чат-интерфейс, используя st.session_state для хранения истории сообщений, st.chat_input и st.chat_message для организации ввода-вывода. Данный подход не только помогает начинающим разработчикам разобраться с базовыми концепциями, но и предоставляет отличную основу для дальнейшей реализации и расширения функционала чат-ботов.

В этом руководстве вы узнали, как создавать чат-бота, который отвечает на каждое сообщение, повторяя текст пользователя. Эту базовую концепцию можно легко расширить, добавив новые функции, интегрировав внешние API или улучшив пользовательский интерфейс. Streamlit является мощным инструментом для быстрого создания интерактивных и динамичных веб-приложений, и данный проект наглядно демонстрирует его возможности.

Ссылки на источники

• Using Streamlit with React for AI Chat Bot - Restackio
• nunobreis/echo-bot-streamlit - GitHub
• Streamlit Chatbot Template Overview - Restackio
• Build Conversational Apps Tutorial - Streamlit Docs
• How to Build an LLM Powered Chatbot with Streamlit - Streamlit Blog

Дополнительные запросы для углубленного изучения темы

Как создать чат-бота с поддержкой голосового ввода на Streamlit?

Как интегрировать OpenAI GPT-3.5 в чат-бот на Streamlit?

Методы улучшения пользовательского интерфейса в Streamlit приложениях

Как сохранять историю чата в базе данных с использованием Streamlit?