99 вкладок браузера или «Бесконечность — не предел!»

в 16:15, , рубрики: llm, rag, интервью с клиентами, искусственный интеллект, итмо, опыт, расширения браузеров, стартап

Представьте: вы открываете браузер и... 99 вкладок, хаос, поиск той самой нужной страницы превращается в квест. Мы, команда ИИнтеграция, столкнулись с этим лично, и именно так родился HoundApp — интеллектуальный ассистент, который призван помочь навести порядок.

Всё началось с магистратуры магистратуры AI Talent Hub от ИТМО x Napoleon IT, где мы совмещаем учебу с акселератором стартапов.  В этой статье мы расскажем, как проводили первый кастдев, определяли целевую аудиторию и сколько шишек при этом набили. И так, начнем!

Проблема ли?

Сколько у вас сейчас открыто вкладок? 5? 50? Или все 99?

Ответы наших респондентов были разными. Кто-то говорил: «Мне и с 50 комфортно!», а кто-то признавался, что теряет нужную информацию уже при пяти открытых. Проблема не в количестве, а в том, как мы управляем этим хаосом.

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

От первого опроса до первых инсайтов

Начать исследование мы решили с небольшого эксперимента, выступив на DS-коммьюнити Сбера с докладом «Как бороться с информационным хаосом?». Во время выступления мы попросили слушателей ответить на несколько простых вопросов, чтобы понять их пользовательский опыт.

Мы составили проблемное интервью в виде небольшого опросника, где завуалированно подводили к теме проекта (приём из книги Роба Фицпатрика «Спроси маму»), для того чтобы избежать предвзятых ответов. Уже в самом начале презентации поделились ссылкой на наш опрос и приступили к обсуждению темы.

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

Для нас это был важный сигнал: проблема реально существует, но ее восприятие сильно зависит от контекста использования браузера. Опрос показал, что пользователей больше всего раздражает именно путаница из-за избытка вкладок, а трудности с поиском в истории браузера оказались менее значимыми, чем мы думали.

По результатам опроса мы расставили приоритеты среди проблем:

  1. Переполнение браузера вкладками. Пользователи не хотят их закрывать, опасаясь потерять важную информацию

  2. Сложности в поиске релевантной информации.  Прежде чем найти нужный ответ на свой вопрос, приходится перебирать множество страниц в поисковой выдаче

  3. Долгий поиск в истории браузера. Речь про поиск информации на страничках, которые когда-то были открыты и теперь хранятся в истории. Хотя процесс занимает много времени, по результатам опроса такая потребность возникает редко.

 Лишь один участник опроса не сталкивался с проблемой переполнения браузера
Лишь один участник опроса не сталкивался с проблемой переполнения браузера

Куда копать дальше?

После опроса на DS Community стало ясно, что проблему с переполнением вкладок игнорировать нельзя. Но возникает вопрос: решение, которое мы собираемся предложить приведет к чему-то глобальному или просто добавит немного удобства?

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

Мы расспрашивали их о пользовательском опыте: «Сколько вкладок обычно открыто?», «Как часто возникает переполнение браузера?», «Пытались ли гуглить решение?» 

Один из самых любопытных вопросов звучал так: «А как вы справляетесь с этой проблемой?» Проанализировав ответы мы составили список рекомендаций для эффективного управления вкладками. Поделимся лайфхаками в конце статьи :)

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

 Пример ответов респондентов на некоторые вопросы из интервью

Пример ответов респондентов на некоторые вопросы из интервью

На момент проведения проблемных интервью мы почти уже стояли на пороге готового MVP, ведь разработка шла в рамках стартап-трека проектной практики в ИТМО.  И полученные выводы были для нас как снег на голову :( Но, не унывая, мы довели идею до финальной стадии MVP, усвоив важный урок: перед началом любой разработки нужно чётко определить проблему, поговорить с потенциальными пользователями, изучить конкурентов и продумать финансовую модель.

Мы после проблемных интервью

Мы после проблемных интервью

Что у нас получилось

Изначальная концепция подразумевала интеллектуального ассистента, который не только помогает найти нужную информацию в истории браузера, но и наводит порядок в хаосе вкладок. Основой проекта стала RAG-система (Retrieval-Augmented Generation), способная анализировать данные и отвечать на вопросы пользователя.

Мы рассматривали два варианта реализации:

  1. Полноценный веб-интерфейс. В такой системе пользователи могли бы добавлять ссылки, файлы и информацию из других сервисов, а затем задавать вопросы, чтобы получать релевантные ответы. Но на рынке уже есть сильные аналоги, например ChatGPT. А для B2B сегмента свои продукты предлагают HEBBIA и GLEAN.  

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

Мы решили убить двух зайцев одним выстрелом (мы любим природу) и объединить оба подхода: создать простенькое браузерное расширение, которое будет мониторить пользовательскую активностью в браузере, и веб-сайт, где можно воспользоваться всей мощью нашего функционала. Ну а почему бы и нет? Польза вдвойне, а усилия — в разумных пределах!

Что внутри HoundApp?

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

1 - авторизация; 2 основной процесс (парсинг контент, RAG); 3 - расчет метрик

1 - авторизация; 2 основной процесс (парсинг контент, RAG); 3 - расчет метрик

DS-часть нашего ассистента

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

Ретривер

Ключевой частью нашей системы стал ретривер — компонент, который ищет релевантную информацию на основе эмбеддингов. Для этой цели мы использовали LlamaIndex в связке с ChromaDB.

Индексация с LlamaIndex

Пользователи посещают столько сайтов, что кажется, будто интернет создан исключительно для них. А нам, чтобы справляться с этим контентом, необходимо было внедрить умные механизмы индексации. Мы доверили эту задачу LlamaIndex — инструменту, позволяющему выполнить её минималистично. Мы, конечно, смотрели в сторону LangChain, но LlamaIndex покорил нас своим удобным api.

ChromaDB: ваши эмбеддинги в надёжных руках

Для хранения эмбеддингов документов мы использовали ChromaDB — инструмент, который идеально подошел под наши требования, так как он позволяет хранить не только эмбеддинги, но и метаданные (например, теги и ссылки). А для генерации самих эмбеддингов мы выбрали мультиязычную модель multilingual-e5-base, которая хорошо зарекомендовала себя в бенчмарках.

Что по LLM?

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

  • GigaChat показал средние результаты: он честно старался и боролся, однако плохо справлялся с выведением ответа в требуемом json-формате, а ещё часто ограничивал ответы из-за строгой цензуры.

  • Mistral оказалась настоящей находкой! Эта модель справилась с задачей куда увереннее, чем Gigachat. К тому же, для нас было большим плюсом, что API модели доступно бесплатно, пусть и с некоторыми ограничениями.

GigaChat vs Mistral

GigaChat vs Mistral

Метрики и тесты

Чтобы проверить, насколько хорошо ассистент справляется с задачами, мы создали собственный набор тестовых данных. Вот как это выглядело:

  1. Сбор данных. Мы выбрали 60 веб-страниц с разным содержанием и разбили текст на батчи

  2. Используя ChatGPT, мы сформулировали по одному вопросу для каждой страницы, ответ на который содержится исключительно в определенном батче текстового контента. Иными словами, вопрос должен быть связан с конкретной частью страницы, а не с ее общим смыслом

  3. Далее на сгенерированные вопросы мы генерировали ответ, используя тот же ChatGPT. Сам себе режиссёр, сам себе зритель — идеальная схема для небольшого шоу ИИ ассистентов!

Сгенерировав датасет мы приступили к расчету метрик. Как основные мы выбрали следующие метрики:

  1. Соответствие ответа llm формату json — 0.83 

  2. Модельная оценка близости ответа к эталонному — 0.76

Результаты, полученные с помощью фреймворка LangSmith

Результаты, полученные с помощью фреймворка LangSmith

Эти тесты позволили нам оценить работу системы и проводить эксперименты с промптами и другими параметрами RAG, чтобы добиться максимального качества.

Backend — так сказать, основа

При выборе технологии для начала работы над проектом, мы остановились на FastAPI. Этот фреймворк обладает рядом преимуществ, таких как быстрая скорость разработки и легкая интеграция с другими инструментами. Нашей задачей было лишь создание API для работы с историей браузера.

Разделяй и властвуй

Когда дело дошло до тяжёлых операций, таких как получение эмбеддингов для контента с веб-страниц или отработка ретривера, мы задумались: а что, если они начнут тормозить весь процесс?

Логичным шагом стало выделение этих задач в отдельный сервис:

  • Во время пиковой нагрузки основное API остаётся доступным, а «тяжёлые» операции обрабатываются в своём темпе.

  • Если запросов становится слишком много, мы просто добавляем ещё несколько серверов, как будто ставим дополнительные кассы в супермаркете перед праздниками).

Такой подход делает систему устойчивой и позволяет справляться даже с резкими всплесками активности.

Использование Temporal 

Для эффективной организации работы нашего сервиса мы выбрали Temporal. Мы также могли бы использовать другую очередь, например, RabbitMQ, и прикрутить к ней веб-интерфейс для мониторинга. В таком случае для выполнения задач по расписанию потребовалась бы отдельная библиотека, а при усложнении логики обработки пришлось бы разрабатывать собственную стейт-машину. Однако, благодаря использованию Temporal, нам не нужно беспокоиться обо всем этом. Данный инструмент предоставляет готовые решения из коробки для упомянутых проблем

Frontend: лицо нашего ассистента

Как говорилось выше, мы решили реализовать как веб-сервис, так и расширение для браузера. Давайте рассмотрим эту связку подробнее

Сервис: SPA, где оживают взаимодействия

Cервис реализован как SPA (Single Page Application), что идеально подходит для нашего ассистента. Мы не фокусируемся на SEO, что позволяет сосредоточиться на улучшении пользовательского опыта. SPA предоставляет гибкость в разработке, давая возможность легко добавлять функциональные элементы и создавать современный интерфейс без ограничений.

На чём всё держится?

Чтобы сделать интерфейс быстрым, гибким и приятным, мы выбрали проверенные инструменты:

  • Vue.js 3 — лёгкий, но мощный фреймворк, который стал основой нашего фронтенда

  • Vite — быстрый инструмент сборки, позволяющий экономить время на каждом этапе разработки

  • Vue Router — отвечает за плавные переходы между страницами

  • Pinia — легковесная библиотека, для создания хранилища Vue

Внешний вид сервиса основан на:

  • PrimeVue — библиотеке готовых компонентов, которые можно настраивать под любой вкус

  • PrimeIcons — набору стильных иконок

  • Sass — препроцессору, который добавляет гибкости в стилизации и избавляет от монотонного CSS

Архитектура: порядок прежде всего

Мы решили не изобретать велосипед и использовали подход FSD (Feature-Sliced Design). Конечно, не строго по учебнику, но с умом. Вот как мы всё организовали:

  • App — корневой слой приложения

  • Pages — отдельные страницы, где разворачивается основное действие

  • Widgets — крупные модули, которые можно использовать повторно

  • Features — функциональные блоки для решения конкретных задач

  • Entities — представление данных

  • Shared — всё общее: от утилит до компонентов

Для большей гибкости мы внедрили собственную систему layouts, чтобы менять контент страницы без перезагрузки приложения. А для разграничения доступа к страницам добавили слой middlewares — всё чётко, никаких лишних привилегий.

Расширение: минимализм как искусство

Теперь про расширение. Это компактная и практичная часть нашего ассистента, работающая внутри браузера. Его задача проста:

  • Захватывать содержимое веб-страниц

  • Извлекать текстовую информацию

  • Отправлять её на сервер для анализа

С точки зрения технологий, расширение тоже построено на Vue.js 3, а чтобы интеграция с браузером была максимально плавной, мы используем плагин crxjs для Vite.

Ну а теперь, как говорится, достаточно слов — время для картинок!

 Просмотр посещенных сайтов, которые спарсило расширение

Просмотр посещенных сайтов, которые спарсило расширение
 Чат с ассистентом. Пользователь получает ответ со ссылкой на источник

Чат с ассистентом. Пользователь получает ответ со ссылкой на источник

Картинки — это одно, а видео — совсем другое! Мы подготовили короткое демо, чтобы наглядно продемонстрировать функционал MVP HoundApp.

А с кодом нашего проекта (кроме приватного API) вы можете ознакомиться в нашем репозитории.

А что дальше?

Большая часть нашей команды из Екатеринбурга, а здесь экзистенциальные вопросы задают прямо на улицах

Большая часть нашей команды из Екатеринбурга, а здесь экзистенциальные вопросы задают прямо на улицах

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

Возможно, эта статья не об «успешном успехе», но она о чем-то более ценном — о реальном опыте, ошибках и движении вперед. Поэтому команда ИИнтеграция продолжает свой путь, за которым вы можете следить в нашем Telegram-канале. А как вы боретесь с проблемой переполнения браузера вкладками? Делитесь с нами — будем рады обратной связи!

На путь борьбы с информационным хаосом отважились пятеро героев: 

Агапитов Денис – PM
Еншов Владимир – DS 
Царева Екатерина – NLP Engineer 
Капралов Александр – Frontend 
Габбасов Никита – Backend 

Обещанные лайфхаки для борьбы с вкладками

  • Использование сочетаний клавиш
    Сочетаний клавиш значительно ускоряет работу за компьютером. Например, Ctrl+Tab и Ctrl+Shift+Tab позволяют переключаться между вкладками, Ctrl+W закрывает их (можно сразу несколько), а Ctrl+Shift+T восстанавливает последнюю закрытую. Если привыкнуть к этим комбинациям, работать в браузере станет гораздо удобнее

  • Использование нескольких окон браузера 
    Чтобы сосредоточиться на задаче, открывайте новое окно браузера (Ctrl+N) или используйте другой браузер для разделения постоянных и временных вкладок

  • Создание тематических папок и закрепленных вкладок
    сохраняйте часто используемые страницы в специально организованные разделы, чтобы минимизировать время на поиск нужной информации

Автор: iintegration

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js