Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Веб-приложение · RAG · нейросеть в браузере

Песочница поиска

Ответ бота хорош ровно настолько, насколько хорош найденный фрагмент. Здесь видно всю кухню: на какие куски режется текст, какие слова вопроса нашлись и сколько они весят, где проходит порог «не знаю». Нейросеть для поиска по смыслу работает прямо в браузере — без серверов и ключей.

Сценарий: База знаний коворкинга «Квадрат» — та же, по которой отвечает демо-бот поддержки. Можно загрузить свои документы.

Скриншот демо: Песочница поиска

Открыть демо

Открыть приложение

Поиск по словам работает сразу. Нейросеть грузится по кнопке — около 126 МБ один раз, дальше из кеша браузера.

Приложение работает в браузере: на сервер ничего не отправляется.

Что показывает демо

  • Документы: база коворкинга, свой текст или файлы .md, .txt и .pdf — всё остаётся в браузере

  • Фрагменты по разделам или заданной длины с перекрытием — границы и общий хвост видны на тексте

  • Три режима: по словам (как бот сейчас), по смыслу (нейросеть) и гибрид

  • По каждому фрагменту: BM25, близость векторов, место в каждом списке, итог RRF и покрытие вопроса

  • Порог «не знаю»: если база не покрывает вопрос, бот отказывается, а не выдумывает

  • Подборка вопросов, где режимы расходятся: «пёс» вместо «собаки», «подземка» вместо «метро»

Как попробовать

  1. Откройте приложение

    База коворкинга уже загружена и разрезана на фрагменты. Задайте вопрос или нажмите на пример.

  2. Посмотрите, почему нашлось

    Справа — найденные фрагменты с оценками, ниже — тот же вопрос во всех трёх режимах. Нажмите на фрагмент — он подсветится в тексте.

  3. Включите нейросеть

    Режим «По смыслу», затем «Загрузить модель». Спросите «Можно взять с собой пса?» — по словам бот откажется, по смыслу найдёт раздел про животных.

  4. Попробуйте свои документы

    Загрузите файл или вставьте текст, поменяйте длину фрагментов — и проверьте, как бот будет искать по вашей базе.

Что написать

  • Можно прийти с собакой?
  • Можно взять с собой пса?
  • Как добраться на подземке?
  • Хочу зарегистрировать фирму по вашему адресу
  • Напиши стихотворение про весну

Без платных нейросетей

Поиск настоящий: тот же код, что в демо-боте, перенесён в браузер и сверяется с ботом тестом на 40 вопросах, а нейросеть для поиска по смыслу — открытая модель, которая работает прямо на вашем устройстве. Заглушка только в последнем шаге: ответ собирается из предложений найденных фрагментов, а в рабочем боте его пишет языковая модель по тем же фрагментам.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • База из ваших документов, сайта, Notion или Confluence с обновлением по расписанию
  • Векторы в pgvector или Qdrant, поиск на сервере для баз в тысячи документов
  • Длина фрагментов, режим и пороги подбираются замером на ваших вопросах, а не на глаз
  • Ответ модели (OpenAI, YandexGPT или GigaChat) строго по найденным фрагментам со ссылками

Стек

  • React 19
  • TypeScript
  • Transformers.js
  • ONNX Runtime Web
  • Web Workers
  • pdf.js
  • Vite

Основано на

Книги и дисциплины, идеи из которых работают в этом демо.

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Если бот отвечает плохо, чаще всего виноват не «ИИ», а поиск. Здесь видно, нашёлся ли нужный фрагмент.
  • Можно загрузить свои документы и до разработки понять, как бот будет по ним искать.
  • Порог «не знаю» бережёт репутацию: честный отказ и оператор лучше уверенной выдумки.

Для разработчиков

  • Поиск перенесён из Python-бота на TypeScript и сверяется с оригиналом тестом на 40 вопросах.
  • Смысловая модель — multilingual MiniLM через Transformers.js в Web Worker на WASM. Она грузится только с нашего сервера, не с Hugging Face.
  • Гибрид — слияние по местам в двух списках (RRF): не нужно подбирать веса между несопоставимыми оценками BM25 и косинусной близости.

Советы

  • Совет 01

    Длину фрагментов и пороги подбирайте замером на своих вопросах: для разных баз оптимум разный.

  • Совет 02

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

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Веб-приложение · схема агента

    работает

    Конструктор AI-агента

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

    • React
    • TypeScript

  • Веб-приложение · вопрос → SQL → график · PostgreSQL в браузере

    работает

    ИИ-аналитик данных

    Руководитель спрашивает своими словами — «выручка по каналам за 3 квартал», «какие клиенты перестали заказывать» — и получает SQL, график, таблицу и вывод. База продаж — настоящий PostgreSQL, который работает прямо в браузере.

    • React
    • TypeScript

  • Веб-приложение · риски по эталону · Word с правками

    работает

    Проверка договоров

    Контрагент прислал свой договор — проверка сверяет его с эталоном компании, подсвечивает рискованные пункты, объясняет, чем они опасны, и предлагает редакцию. На выходе — Word с режимом исправлений и протокол разногласий.

    • React
    • TypeScript

  • Веб-приложение · задачи из чата · канбан · вечерняя сводка

    работает

    ИИ-агент в рабочем чате

    В рабочем чате пишут как обычно — «Петя, до пятницы поправь прайс». Агент сам заводит задачу на канбане, двигает её по «Беру» и «Готово», переносит сроки и передаёт задачи, утром напоминает о просрочке, а вечером присылает сводку.

    • React
    • TypeScript

  • Веб-приложение · общий ящик · CRM · защита от подмены реквизитов

    работает

    ИИ-разбор входящей почты

    Агент читает общий ящик отдела продаж: понимает, что за письмо, достаёт поля, заводит сделку, обращение или задачу в CRM и готовит ответ. Счёт с новыми реквизитами и фишинг он ловит до того, как кто-то заплатит или перейдёт по ссылке.

    • React
    • TypeScript

  • Веб-приложение · маркетплейсы · проверка модерации · юнит-экономика

    работает

    Карточки товаров для WB и Ozon

    Агент превращает текст поставщика в две карточки — для Wildberries и для Ozon: название в лимите площадки, описание с ключевыми запросами, характеристики по справочнику. Потом проверяет то, на чём карточки срезаются на модерации, и считает, сколько останется с продажи.

    • React
    • TypeScript

  • Веб-приложение · расшифровка встречи · протокол · канбан

    работает

    Протокол совещания → задачи в канбан

    Агент читает расшифровку планёрки и собирает протокол: решения, задачи с исполнителем и сроком из живой речи, риски и открытые вопросы. Задачи уходят на канбан, а на следующей встрече агент сам двигает их по статусам.

    • React
    • TypeScript

  • Веб-приложение · персональные данные · медицина · аналитика

    работает

    Обезличивание данных перед нейросетью (152-ФЗ)

    Агент находит в письмах и расшифровках ФИО в любом падеже, телефоны, паспорта, СНИЛС, карты, адреса и диагнозы, заменяет их до отправки во внешнюю нейросеть, а её ответ возвращает к настоящим данным уже у вас. Таблицу пациентов обезличивает для аналитики так, чтобы никого нельзя было узнать.

    • React
    • TypeScript

  • Веб-приложение · автоматизация · amoCRM, 1С, Telegram

    работает

    Конвейер автоматизации в духе n8n

    Три рабочих сценария мебельной фабрики на холсте, как в n8n: заявки с сайта уходят в amoCRM и к менеджерам по горячести, оплата ЮKassa — в 1С с повторами и веткой ошибок, по утрам — сводка руководителю. Запустите событие и смотрите, как записи идут от узла к узлу; схему можно править и выгрузить в настоящий n8n.

    • React
    • TypeScript

  • Веб-приложение · мультиагентная система · контент

    работает

    Команда ИИ-агентов для контента

    Шесть агентов готовят публикацию по брифу: главред планирует, исследователь ищет факты в базе знаний, автор пишет, фактчекер и редактор возвращают черновик на доработку, SMM раскладывает текст по Telegram, ВКонтакте, рассылке, блогу и карусели. Видно всю переписку агентов, каждую правку и что ушло бы в публикацию без проверки.

    • React
    • TypeScript

  • Веб-приложение · HR · скоринг и чат-бот

    работает

    Отбор резюме и бот-интервьюер

    Двадцать резюме на три вакансии разбираются за секунды: периоды работы, стаж, зарплата и город, совпадение с требованиями и цитата из резюме на каждое «да» или «нет». Чего в резюме не хватает, уточняет бот: задаёт только недостающие вопросы, переспрашивает размытые ответы и записывает на собеседование. Пол, возраст и семья в оценку не попадают.

    • React
    • TypeScript

  • Веб-приложение · метрики · пороги CI

    работает

    Оценка качества бота

    Прежде чем выкатить новую настройку бота, её прогоняют на контрольных вопросах. Здесь видно, как это устроено: hit@1, hit@3, доля верных отказов, сравнение с продом и красная плашка, если CI не пропустил бы выкладку.

    • React
    • TypeScript
    • Нейросеть в браузере

  • Веб-приложение · безопасность AI · нативный JS

    работает

    Тренажёр защиты от prompt-инъекций

    Попробуйте обмануть бота поддержки: выманить секретный промокод, вытащить системный промпт или оформить возврат без оснований. Шесть уровней защиты, атаки в лоб и через письма, отзывы и базу знаний, журнал проверок по OWASP Top 10 для LLM.

    • Нативный JS

  • Веб-приложение · экономика AI · нативный JS

    работает

    Калькулятор стоимости AI-бота

    Сколько будет стоить бот в месяц на GPT, Claude, YandexGPT, GigaChat или своей модели на арендованной видеокарте. Расчёт по токенам, сравнение всех моделей на графике, советы, как платить меньше, и настоящий токенизатор o200k прямо в браузере.

    • Нативный JS