Основы практической реализации
Автор: Артур Хайруллин | Дата публикации: 2025-08-14
Документация для модуля OCR обработки и векторизации
Эта документация описывает модуль для обработки PDF-документов, извлечения текста, фрагментации и векторизации данных с последующим сохранением в векторную базу данных. Модуль предназначен для подготовки данных для систем Retrieval-Augmented Generation (RAG).
Содержание
- Назначение
- Функциональность
- Требования
- Конфигурация
- Обработка данных
- Формат вывода
- Зависимости
- Примеры использования
- Ограничения
Назначение
Модуль OCR обработки и векторизации предназначен для автоматической обработки PDF-документов, извлечения текстовых данных, их фрагментации и преобразования в векторные представления для хранения в векторной базе данных (FAISS). Модуль поддерживает обработку как текстовых PDF, так и отсканированных документов с использованием OCR (Tesseract).
Функциональность
- Поиск PDF-документов:
- Модуль сканирует указанную директорию (по умолчанию /source) и находит все файлы с расширением .pdf.
- Извлечение текста:
- Проверяет наличие текстового слоя в PDF с помощью PyMuPDF.
- Если текстовый слой присутствует, текст извлекается напрямую.
- Если текстовый слой отсутствует, выполняется OCR с использованием Tesseract.
- Обработка текста:
- Исправляет переносы слов (например, пере-\nнос → перенос).
- Удаляет лишние переносы строк, заменяя их пробелами.
- Фрагментация текста:
- Текст делится на фрагменты с использованием spaCy (модель по умолчанию ru_core_news_sm)
- Фрагменты объединяются по max_sentences
- Векторизация:
- Фрагменты преобразуются в векторные эмбеддинги с помощью модели SentenceTransformer (paraphrase-multilingual-MiniLM-L12-v2).
- Эмбеддинги сохраняются в FAISS-индекс (IndexFlatL2, размерность 384).
- Сохранение данных:
- Векторные эмбеддинги сохраняются в файл index.faiss.
- Метаданные (текст, номер фрагмента, имя файла, папка) сохраняются в metadata_store.json с уникальными идентификаторами (UUID).
Требования
- Операционная система: Linux, macOS или Windows (с установленными Tesseract и Poppler для Windows).
- Файлы данных:
- PDF-документы в директории /source (или другой, указанной в конфигурации).
- Среда:
- Python 3.8+.
- Установленные зависимости см. Зависимости.
- Внешние инструменты:
- Tesseract OCR для обработки отсканированных PDF.
- Poppler для преобразования PDF в изображения (при OCR).
Конфигурация
Модуль требует настройки следующих параметров:
- Путь к директории с PDF:
- По умолчанию: source.
- Изменяется путём редактирования пути в файле конфигурации.
- Модель spaCy:
- Используется ru_core_news_sm для русского языка. Для других языков нужно установить соответствующую модель (например, en_core_web_sm для английского).
- Модель SentenceTransformer:
- Используется paraphrase-multilingual-MiniLM-L12-v2. Можно заменить на другую модель, поддерживающую нужные языки.
Обработка данных
- Поиск файлов:
- Модуль рекурсивно сканирует директорию /source и обрабатывает файлы с расширением .pdf.
- Извлечение текста:
- Если PDF содержит текстовый слой, текст извлекается с помощью fitz.open() (PyMuPDF).
- Если текстовый слой отсутствует, PDF конвертируется в изображения с помощью pdf2image, затем применяется Tesseract OCR (lang='rus+eng').
- Обработка текста:
- Исправление переносов слов с помощью регулярных выражений.
- Замена множественных переносов строк пробелами.
- Фрагментация:
- Текст разделяется на предложения с помощью spaCy.
- Предложения группируются в фрагменты (по умолчанию 3 предложения в каждом).
- Векторизация:
- Фрагменты преобразуются в эмбеддинги (размерность 384) с помощью SentenceTransformer.
- Эмбеддинги добавляются в FAISS-индекс (IndexFlatL2).
- Сохранение:
- FAISS-индекс сохраняется в index.faiss.
- Метаданные и маппинг идентификаторов сохраняются в metadata_store.json.
Формат вывода
- FAISS-индекс (index.faiss):
- Бинарный файл, содержащий векторные эмбеддинги (размерность 384).
- Метаданные (metadata_store.json):
- JSON-файл с двумя основными полями:
- metadata: Словарь с записями, где ключ — UUID, значение — объект с полями:
- text: Текст фрагмента.
- fragment: Номер фрагмента в документе.
- file: Имя PDF-файла.
- folder: Относительный путь к папке.
- id_map: Список UUID, соответствующих индексам в FAISS.
- Пример:
- json
{
"metadata": {
"550e8400-e29b-41d4-a716-446655440000": {
"text": "Это пример текста из документа.",
"fragment": 0,
"file": "document.pdf",
"folder": "folder1"
},
...
},
"id_map": [
"550e8400-e29b-41d4-a716-446655440000",
...
]
}
Зависимости
Модуль использует следующие Python-библиотеки:
- PyMuPDF (fitz): Для извлечения текста из PDF.
- spacy: Для фрагментации текста на предложения.
- sentence_transformers: Для генерации векторных эмбеддингов.
- faiss-cpu: Для создания и хранения векторной базы данных.
- pytesseract: Для OCR обработки.
- pdf2image: Для преобразования PDF в изображения.
- PIL (Pillow): Для работы с изображениями.
- json: Для сохранения метаданных.
- uuid: Для генерации уникальных идентификаторов.
Внешние инструменты
- Tesseract OCR: Для обработки отсканированных PDF.
- Poppler: Для конвертации PDF в изображения (требуется для pdf2image).
- spaCy модель: ru_core_news_sm для русского языка.
Примеры использования
Пример 1: Обработка PDF с текстовым слоем
Исходные данные:
- Папка /source содержит файл policy.pdf с текстовым слоем.
- Текст: “Политика доступа: user001 имеет доступ к папкам /folder1 и /folder3.”
Запуск:
bash
python sem_index_ocr.py
Вывод в консоль:
policy.pdf: есть текстовый слой — обрабатываем напрямую
Обработка завершена.
Результат:
- index.faiss: Содержит векторные эмбеддинги для фрагментов текста.
- metadata_store.json:
- json
{
"metadata": {
"550e8400-e29b-41d4-a716-446655440000": {
"text": "Политика доступа: user001 имеет доступ к папкам /folder1 и /folder3.",
"fragment": 0,
"file": "policy.pdf",
"folder": ""
}
},
"id_map": ["550e8400-e29b-41d4-a716-446655440000"]
}
Пример 2: Обработка отсканированного PDF
Исходные данные:
- Папка /source содержит файл scanned.pdf без текстового слоя.
- Содержимое: Отсканированный текст “Облачное хранилище обеспечивает масштабируемость.”
Запуск:
bash
python sem_index_ocr.py
Вывод в консоль:
scanned.pdf: нет текстового слоя — выполняем OCR
Обработка завершена.
Результат:
- index.faiss: Содержит эмбеддинги для фрагментов, извлечённых через OCR.
- metadata_store.json:
- json
{
"metadata": {
"123e4567-e89b-12d3-a456-426614174000": {
"text": "Облачное хранилище обеспечивает масштабируемость.",
"fragment": 0,
"file": "scanned.pdf",
"folder": ""
}
},
"id_map": ["123e4567-e89b-12d3-a456-426614174000"]
}
Пример 3: Ошибка обработки
Исходные данные:
- Папка /source содержит повреждённый файл broken.pdf.
Запуск:
bash
python sem_index_ocr.py
Вывод в консоль:
Ошибка при обработке source/broken.pdf: Invalid PDF file
Обработка завершена.
Ограничения
- Производительность: OCR для больших PDF может быть медленным из-за высокой вычислительной нагрузки.
Документация форматов взаимодействия с API RAG-системы
Эта документация описывает API для системы Retrieval-Augmented Generation (RAG), построенной с использованием векторной базы данных. API предоставляет два основных эндпоинта: прямой AI-чат и RAG-систему с учетом ролевой политики доступа.
Содержание
- Обзор
- Базовый URL
- Аутентификация
- Эндпоинты
- POST /chat
- POST /ask
- POST /askchat
- POST /askassist
- Ролевая политика доступа
- Обработка ошибок
- Зависимости
- Примеры использования
- Стартовая конфигурация
- Дополнительная конфигурация
Обзор
API обрабатывает запросы пользователя, используя гибридный подход в виде комбинации векторного поиска (FAISS и Sentence Transformers) и ключевого поиска (TF-IDF). Ответы генерируются с помощью внешнего OpenAI API. Система поддерживает ролевую политику доступа для ограничения данных по ролям пользователей.
Базовый URL
API доступен по адресу:
http://<host>:3000
По умолчанию приложение запускается на 0.0.0.0:3000, CORS сконфигурирован на доступ без ограничений. При необходимости интеграция виджета в веб приложения использующие SSL расположенных по адресам https://… во избежание блокировки данных, необходимо выпустить ssl сертификаты, сконфигурировать сервер и виджет для работы по https.
Аутентификация
API не использует аутентификацию. Фильтрация выдачи осуществляется через параметр role в запросе к эндпоинту /ask. Если параметр не указан, используется роль guest. Подробнее в разделе “Ролевая политика доступа”
Эндпоинты
POST /chat
Эндпоинт для тестового прямого взаимодействия с AI, отправляющий запросы в OpenAI API и возвращающий потоковый ответ.
Запрос
- Метод: POST
- URL: /chat
- Content-Type: application/json
- Тело запроса:
- json
{
"prompt": "строка"
}
- prompt: Вопрос или сообщение пользователя (обязательно).
Ответ
- Content-Type: text/plain
- Коды состояния:
- 200 OK: Успешный ответ с потоковой передачей.
- 500 Internal Server Error: Ошибка при взаимодействии с OpenAI API.
- Тело ответа: Потоковый текстовый ответ от модели OpenAI (gpt-4o-mini).
Пример
Запрос:
bash
curl -X POST http://localhost:3000/chat \
-H "Content-Type: application/json" \
-d '{"prompt": "Объясни, что такое блокчейн"}'
Ответ:
Блокчейн — это децентрализованная и распределенная цифровая база данных, которая хранит записи (транзакции) в виде блоков, связанных криптографически. Каждый блок содержит данные, хэш предыдущего блока и временную метку, что обеспечивает неизменность и прозрачность.
POST /ask
Основной эндпоинт RAG-системы, обрабатывающий запросы с использованием векторного и ключевого поиска, с учетом ролевой политики.
Запрос
- Метод: POST
- URL: /ask?role=<роль>
- Content-Type: application/json
- Параметры запроса:
- role (необязательный): Роль пользователя (например, admin, guest, user001). По умолчанию guest.
- Тело запроса:
- json
{
"prompt": "строка"
}
- prompt: Вопрос пользователя (обязательно).
Ответ
- Content-Type: text/plain
- Коды состояния:
- 200 OK: Успешный ответ с потоковой передачей.
- 500 Internal Server Error: Ошибка при взаимодействии с OpenAI API.
- Тело ответа: Потоковый текстовый ответ, сформированный на основе найденного контекста. Ответ включает источник в формате Источник: <файл>, если используется конкретный документ. Если в контексте нет данных, ответ будет:
в документах нет необходимой информации для ответа на этот вопрос, но ...
- с последующим предположительным ответом на основе контекста.
Получение контекста
- Векторный поиск: Использует FAISS и модель SentenceTransformer (paraphrase-multilingual-MiniLM-L12-v2) результат формирует выдачу по максимальному векторному сходству, с формированием выборки до 25% выдачи с учетом ролевой политики.
- Ключевой поиск: Использует TF-IDF для поиска дополнительных фрагментов, также фильтруемых по ролям.
- Формат контекста: Найденные фрагменты возвращаются в JSON-формате:
- json
[
{
"text": "строка",
"fragment": "строка",
"file": "строка",
"folder": "строка",
"search": "vect|key
}
]
- Значения полей JSON контекста: соответствуют их фактическому значению “text” - извлечённый из векторной базы фрагмент “fragment” - порядковый номер фрагмента извлечённого из PDF документа “file” - PDF документ “folder” - папка расположения PDF документа “search” - "vect|key - тип поискового алгоритма которым был извлечен фрагмент vect: векторный, key: ключевой
Пример
Запрос:
bash
curl -X POST http://localhost:3000/ask?role=user001 \
-H "Content-Type: application/json" \
-d '{"prompt": "Для чего нужна RAG система?"}'
Ответ:
RAG система обеспечивает AI генерацию дополненную поиском, в виде внешних извлеченных данных .
Источник: RAG.pdf
Если данных нет:
в документах нет необходимой информации для ответа на этот вопрос, но, основываясь на контексте, RAG система может применяться для формирования AI выдачи основанной на данных пользовательских документов.
POST /askchat
Дополнительный эндпоинт RAG-системы, обрабатывающий запросы с использованием векторного и ключевого поиска, в формате AI роли “Справочная система”.
POST /askassist
Дополнительный эндпоинт RAG-системы, обрабатывающий запросы с использованием векторного и ключевого поиска, в формате AI роли “Ассистент”.
Ролевая политика доступа
API использует ролевую политику для ограничения доступа к документам на основе роли пользователя, указанной в параметре role.
Определение ролей
Роли и доступные им папки определены в словаре role_folder_map:
python
role_folder_map = {
"admin": ["*"], # Доступ ко всем папкам
"guest": ["*"], # Доступ ко всем папкам
"user001": ["folder1", "folder3"],
"user002": ["folder5", "folder7"]
}
- Логика: RAG проверяет, доступна ли папка документа для указанной роли. Если роль имеет доступ "*", разрешены все документы. Иначе доступны только документы из указанных папок.
Роль по умолчанию
Если параметр role не указан, используется роль guest с доступом ко всем папкам (["*"]).
Обработка ошибок
- Некорректный JSON: Возвращается 400 Bad Request с сообщением об ошибке.
- Ошибки OpenAI API: Передаются в потоке как [Ошибка OpenAI: <сообщение>].
- Отсутствие индекса FAISS или метаданных: API не запустится, если файлы index.faiss или metadata_store.json отсутствуют или повреждены.
- Некорректная роль: Если роль не распознана, используется guest.
Зависимости
API использует следующие Python-библиотеки:
- flask: Веб-фреймворк для обработки HTTP-запросов.
- flask_cors: Поддержка CORS для доступа с любого фронтенда.
- openai: Взаимодействие с OpenAI API.
- faiss-cpu: Векторный поиск.
- sentence_transformers: Генерация текстовых эмбеддингов.
- scikit-learn: Векторизация TF-IDF.
- json: Обработка метаданных.
Внешние сервисы
- OpenAI API: Доступ через https://api.openai.com/v1 с API-ключом.
- Модель: Используется gpt-4o-mini для генерации ответов.
Предобученные модели
- SentenceTransformer: paraphrase-multilingual-MiniLM-L12-v2 для многоязычных эмбеддингов.
Файлы
- index.faiss: Предварительно построенный индекс FAISS для векторного поиска.
- metadata_store.json: Хранит метаданные документов (text, fragment, file, folder, id_map).
Примеры использования
Пример 1: Прямой чат
Запрос:
bash
curl -X POST http://localhost:3000/chat \
-H "Content-Type: application/json" \
-d '{"prompt": "Объясни, что такое блокчейн"}'
. Ответ:
Блокчейн — это децентрализованная и распределенная цифровая база данных, которая хранит записи (транзакции) в виде блоков, связанных криптографически. Каждый блок содержит данные, хэш предыдущего блока и временную метку, что обеспечивает неизменность и прозрачность.
Пример 2: RAG-запрос с ролью
Запрос:
bash
curl -X POST http://localhost:3000/ask?role=user001 \
-H "Content-Type: application/json" \
-d '{"prompt": "Какие документы доступны user001?"}'
Ответ:
User001 имеет доступ к документам в папках /folder1 и /folder3.
Источник: role_policy.pdf
Пример 3: Запрос без релевантного контекста
Запрос:
bash
curl -X POST http://localhost:3000/ask?role=user002 \
-H "Content-Type: application/json" \
-d '{"prompt": "Как работает облачное хранилище?"}'
Ответ:
в документах нет необходимой информации для ответа на этот вопрос, но, основываясь на контексте, облачное хранилище позволяет хранить данные на удаленных серверах, обеспечивая доступ через интернет и высокую масштабируемость.
Стартовая конфигурация
- API-ключ: Укажите свой ключ OpenAI
- API-сервер: Укажите свой сервер OpenAI
- Статическая ролевая политика: Установите корректные роли в role_folder_map
Дополнительная конфигурация
- AI модель: При необходимости измените AI модель по умолчанию на необходимую
- IP и порт: При необходимости измените IP адрес сервера и порты по умолчанию
- Модель векторизации: При необходимости измените модель векторизации на соответствующую векторной базе данных
Документация для модуля Telegram
Эта документация описывает модуль Telegram, предназначенный для обработки запросов из Telegram и генерации ответов с использованием системы RAG. Модуль интегрируется с Telegram-ботом и использует векторный и ключевой поиск для формирования релевантного контекста, который передаётся в модель AI для генерации ответа.
Содержание
- Назначение
- Функциональность
- Требования
- Конфигурация
- Обработка запросов
- Формат ответа
- Зависимости
- Примеры использования
Назначение
Модуль Telegram векторного поиска предназначен для интеграции с Telegram-ботом, который обрабатывает текстовые сообщения пользователей как запросы к RAG-системе. Модуль выполняет поиск релевантных данных, формирует контекст в формате JSON и передаёт его в модель AI (по умолчанию gpt-4o-mini) для генерации ответа. Ответ возвращается пользователю в Telegram с указанием источника, если он доступен.
Функциональность
- Обработка сообщений:
- Модуль принимает текстовые сообщения от пользователей в Telegram.
- Каждое сообщение обрабатывается как запрос к RAG-системе.
- Поиск данных:
- Векторный поиск: Использует FAISS и модель SentenceTransformer для поиска 5 ближайших векторов в векторной базе данных.
- Ключевой поиск: Использует TF-IDF для поиска 5 релевантных фрагментов по ключевым словам.
- Формирование контекста:
- Объединяет результаты векторного и ключевого поиска в JSON-формате.
- JSON включает поля: text, fragment, file, folder, search (значение vect или key).
- Генерация ответа:
- Контекст передаётся в модель AI через системный промпт.
- Ответ формируется на основе контекста с обязательным указанием источника в формате Источник: <file>, если документ релевантен.
- Если данных в контексте нет, ответ начинается с: в документах нет необходимой информации для ответа на этот вопрос, но ..., за которым следует предположение.
- Отправка ответа:
- Ответ возвращается пользователю в Telegram как текстовое сообщение.
Требования
- Telegram Bot: Созданный бот с токеном, полученным через BotFather.
- Серверная часть:
- Доступ к OpenAI API через прокси (https://api.openai.com/v1).
- API-ключ для OpenAI.
- Файлы данных:
- index.faiss: Предварительно построенный FAISS-индекс для векторного поиска.
- metadata_store.json: Файл с метаданными документов (text, fragment, file, folder, id_map).
- Среда:
- Python 3.10
- Установленные зависимости см.Зависимости
Конфигурация
Модуль требует настройки следующих параметров:
- API-ключ: Укажите свой ключ OpenAI
- API-сервер: Укажите свой сервер OpenAI
- TG-ключ: Укажите свой токен Telegram
Обработка запросов
- Получение сообщения:
- Модуль отслеживает текстовые сообщения (без команд) через MessageHandler(filters.TEXT & ~filters.COMMAND).
- Векторный поиск:
- Текст запроса преобразуется в вектор с помощью модели paraphrase-multilingual-MiniLM-L12-v2.
- FAISS выполняет поиск ближайших векторов в индексе index.faiss.
- Ключевой поиск:
- Запрос преобразуется в TF-IDF вектор с использованием TfidfVectorizer.
- Выбираются фрагментов с ближайшими совпадениями по ключевым словам.
- Формирование контекста:
- Результаты объединяются в JSON-формат с полями: text, fragment, file, folder, search.
- Запрос к AI:
- Контекст и запрос пользователя передаются в OpenAI API (gpt-4o-mini по умолчанию) через системный промпт.
- Модель генерирует ответ.
- Отправка ответа:
- Ответ отправляется пользователю через Telegram API.
Формат ответа
- Успешный ответ:
- Текстовое сообщение, основанное на контексте.
- Если используется конкретный документ, добавляется строка: Источник: <file>.
- Пример:
Политика для user001 разрешает доступ к документам в папках /folder1 и /folder3.
Источник: role_policy.pdf
- Отсутствие данных:
- Начинается с: в документах нет необходимой информации для ответа на этот вопрос, но ..., за которым следует предположение.
- Пример:
в документах нет необходимой информации для ответа на этот вопрос, но, основываясь на контексте, облачное хранилище позволяет хранить данные на удаленных серверах.
- Ошибка:
- Формат: [Ошибка OpenAI: <сообщение>].
Зависимости
Модуль использует следующие Python-библиотеки:
- python-telegram-bot: Для взаимодействия с Telegram API.
- openai: Для запросов к OpenAI API.
- faiss-cpu: Для векторного поиска.
- sentence_transformers: Для генерации текстовых эмбеддингов.
- scikit-learn: Для TF-IDF векторизации.
- json: Для работы с метаданными.
Предобученные модели
- SentenceTransformer: paraphrase-multilingual-MiniLM-L12-v2 для многоязычных эмбеддингов.
Файлы
- index.faiss: Предварительно построенный индекс FAISS для векторного поиска.
- metadata_store.json: Хранит метаданные документов.
Примеры использования
Пример 1: Запрос политики доступа
Сообщение в Telegram:
Какая политика для user001?
Ответ бота:
Политика для user001 разрешает доступ к документам в папках /folder1 и /folder3.
Источник: role_policy.pdf
Пример 2: Запрос без релевантного контекста
Сообщение в Telegram:
Как работает облачное хранилище?
Ответ бота:
в документах нет необходимой информации для ответа на этот вопрос, но, основываясь на контексте, облачное хранилище позволяет хранить данные на удаленных серверах, обеспечивая доступ через интернет и высокую масштабируемость.
Пример 3: Ошибка API
Сообщение в Telegram:
Что такое API?
Ответ бота (при ошибке):
[Ошибка OpenAI: Invalid API key]
Документация чат-виджета интеграции
Эта документация описывает функциональность и процесс интеграции визуального чат-виджета, предназначенного для быстрого встраивания в HTML/JS интерфейсы. Виджет предоставляет стандартный интерфейс чата для взаимодействия с пользователем и поддерживает интеграцию с серверным API.
Содержание
- Назначение
- Интеграция
- Варианты встраивания
- Параметры конфигурации
- Требования
- Стилизация
- Примеры использования
- Ограничения
Назначение
Чат-виджет предназначен для интеграции в веб-приложения, предоставляя пользователю удобный интерфейс для взаимодействия с серверной частью через API (например, с RAG-системой или прямым AI-чатом). Виджет поддерживает два режима отображения: плавающий (floating) и встроенный (embedded), обеспечивая гибкость для различных сценариев использования.
Интеграция
Виджет встраивается в HTML-страницу с помощью одной строки <script> с указанием необходимых параметров. Код виджета автоматически загружает стили и логику для работы чата.
Варианты встраивания
- Плавающий режим (data-mode="floating")
- Создаёт круглую кнопку в правом нижнем углу страницы.
- При нажатии на кнопку открывается всплывающее окно чата поверх содержимого.
- Не требует дополнительных элементов в HTML.
- Окно чата позиционируется фиксировано (position: fixed) с отступами bottom: 90px и right: 20px.
- Встроенный режим (data-mode="embedded")
- Встраивает чат в виде iframe, который растягивается на 100% контейнера.
- Требуется добавить <div id="chat-widget-root"></div> в HTML в место, где должен отображаться виджет.
- Подходит для интеграции в определённую область страницы.
Параметры конфигурации
Параметры задаются через атрибуты data-* в теге <script>:
- data-api (обязательный): URL серверного API-эндпоинта (например, http://localhost:3000/chat).
- data-mode (необязательный): Режим отображения (floating или embedded). По умолчанию: floating.
- data-width (необязательный): Ширина виджета (например, 400px). По умолчанию: 400px (для floating) или 100% (для embedded).
- data-height (необязательный): Высота виджета (например, 500px). По умолчанию: 500px.
- data-parent (необязательный): ID контейнера для embedded режима (например, chat-widget-root). По умолчанию: chatbot-root.
По адресу localhost:3000/ - доступен конфигуратор виджета, который поможет определить оптимальные настройки для интеграции виджета
Пример тега <script>
html
<script src="chat-widget.js" data-api="http://localhost:3000/chat" data-mode="floating" data-width="400px" data-height="500px" defer></script>
Требования
- Браузер: Современные браузеры (Chrome, Firefox, Safari, Edge).
- Зависимости:
- Внешний скрипт marked.min.js (загружается автоматически с https://cdn.jsdelivr.net/npm/marked/marked.min.js) для обработки Markdown в ответах бота.
- Серверная часть: Доступный API-эндпоинт, принимающий POST-запросы с JSON ({ "prompt": "строка" }) и возвращающий потоковый текстовый ответ (text/plain).
- HTML для embedded режима: Элемент <div id="chat-widget-root"></div> для встраивания виджета.
Стилизация
Виджет использует встроенные CSS-стили, добавляемые динамически в <head> страницы. Основные классы и их назначение:
- .cb-container: Контейнер чата (граница, радиус углов, белый фон).
- .cb-header: Заголовок чата (синий фон, белый текст, отступы).
- .cb-messages: Область сообщений (серый фон, прокрутка, колонка сообщений).
- .cb-message: Общее сообщение (максимальная ширина 80%, отступы, радиус углов).
- .cb-user: Сообщение пользователя (синий фон, справа).
- .cb-bot: Сообщение бота (серый фон, слева).
- .cb-label: Метка (имя отправителя, мелкий шрифт).
- .cb-input: Панель ввода (граница сверху, поле ввода и кнопка).
- .cb-float-btn: Плавающая кнопка (круглая, синяя, в правом нижнем углу).
- .cb-float-window: Плавающее окно чата (фиксированное, с тенью, радиус углов).
Стили по умолчанию
css
.cb-container {
font-family: sans-serif;
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 12px;
overflow: hidden;
background: white;
}
.cb-float-btn {
position: fixed;
bottom: 20px;
right: 20px;
background: #4A90E2;
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 30px;
border: none;
cursor: pointer;
z-index: 999;
}
.cb-float-window {
position: fixed;
bottom: 90px;
right: 20px;
z-index: 9999;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
Примеры использования
Пример 1: Плавающий режим
HTML:
html
<!DOCTYPE html>
<html>
<head>
<title>Чат-виджет</title>
</head>
<body>
<h1>Моя страница</h1>
<script src="chat-widget.js" data-api="http://localhost:3000/chat" data-mode="floating" data-width="400px" data-height="500px" defer></script>
</body>
</html>
Описание:
- Добавляет плавающую кнопку “💬” в правом нижнем углу.
- При клике открывается чат размером 400x500px.
- Пользователь отправляет запрос “Что такое API?” и получает ответ от сервера.
Пример ответа:
API (Application Programming Interface) — это интерфейс, который позволяет различным программам взаимодействовать друг с другом, обмениваясь данными или функциями.
Пример 2: Встроенный режим
HTML:
html
<!DOCTYPE html>
<html>
<head>
<title>Чат-виджет</title>
</head>
<body>
<h1>Моя страница</h1>
<div id="chat-widget-root"></div>
<script src="chat-widget.js" data-api="http://localhost:3000/chat" data-mode="embedded" data-parent="chat-widget-root" defer></script>
</body>
</html>
Описание:
- Чат встраивается в <div id="chat-widget-root"> и занимает 100% ширины контейнера.
- Пользователь отправляет запрос “Как работает облачное хранилище?”.
Пример ответа:
Облачное хранилище позволяет хранить данные на удаленных серверах, обеспечивая доступ через интернет и высокую масштабируемость.
Пример 3: Запрос с Markdown-форматированием
HTML (плавающий режим):
html
<!DOCTYPE html>
<html>
<head>
<title>Чат-виджет</title>
</head>
<body>
<script src="chat-widget.js" data-api="http://localhost:3000/chat" data-mode="floating" defer></script>
</body>
</html>
Запрос пользователя: “Опиши структуру REST API” Пример ответа (с Markdown):
REST API — это архитектурный стиль для создания веб-сервисов. Основные принципы:
- Клиент-сервер: Разделение интерфейса и серверной логики.
- Без состояния: Каждый запрос независим.
- Кэшируемость: Ответы могут кэшироваться для оптимизации.
- Слои: Возможна многослойная архитектура.
- Единообразие интерфейса: Стандартизированные методы (GET, POST, PUT, DELETE).
Стартовая конфигурация
- Эндпоинт: Установите корректный эндпоинт с учетом используемого API IP, порта, установите роль.
- Выберите тип отображения: Выберите подходящий способ интеграции.
В следующей статье мы подробно расскажем как о методах реализации RAG систем
Что дальше?
Протестируй прямо сейчас
Добавьте файлы и протестируйте RAG прямо сейчас!