Perplexity Lens: граф знаний прямо в браузере

Урок 37 из 43 курса «Perplexity API Cookbook»: официальный курс Perplexity API Cookbook (Перплексити) на русском языке. Урок входит в платный доступ; первые уроки курса бесплатно.

О чём урок

Perplexity Lens — это мощное расширение для браузера, которое преобразует ваш опыт просмотра веб-страниц, предоставляя аналитические данные на основе ИИ с использованием Perplexity AI и создавая персонализированный граф знаний, который визуально связывает концепции, с которыми вы сталкиваетесь в сети. Умное выделение текста с генерируемыми ИИ объяснениями для выделенного текста Суммирование веб-страниц для мгновенных, кратких обзоров целых страниц Контекстные RAG-инсайты с использованием Retrieval-Augmented Generation для получения подробного контекста и значений Визуализация графа знаний с интерактивными графами D3.js, показывающими связи между концепциями Публичный доступ с генерацией URL для обмена графами с другими Аутентификация пользователя через Firebase для безопасного доступа Двойное хранение с локальным IndexedDB и облачным хранилищем Firebase Адаптивный UI, полностью функциональный на всех устройствах Node.js v14+ и npm v6+ Google Chrome или совместимый браузер Аккаунт Firebase для облачной функциональности Firebase CLI (npm install -g firebase-tools) Ключ Perplexity API и ключ OpenAI API Отредактируйте src/config.ts: Загрузить расширение: Перейдите по адресу chrome://extensions/, включите режим разработчика, нажмите "Загрузить распакованное" и выберите каталог dist/ Войти: Нажмите на иконку расширения и пройдите аутентификацию через Firebase Использовать возможности: Выделить текст: Выделите текст на любой веб-странице для получения аналитических данных на основе ИИ Суммировать страницу: Используйте функцию "Суммировать" для обзора веб-страниц Спросить что угодно: Наведите курсор или нажмите на слова/фразы для получения определений или объяснений Просмотр графа: Перейдите на вкладку "Граф", чтобы просмотреть ваш граф знаний Исследовать: Масштабируйте, перетаскивайте и наводите курсор на узлы в интерактивном графе Поделиться: Нажмите "Поделиться графом", чтобы сгенерировать публичную ссылку Фронтенд: React с TypeScript и TailwindCSS для современного, адаптивного UI Расширение для браузера: Архитектура расширения Chrome с всплывающими окнами (popup) и контентными скриптами (content scripts) Интеграция ИИ: Perplexity AI для интеллектуальных текстовых объяснений и суммирования Граф знаний: D3.js для интерактивной визуализации графов и связей между концепциями Хранение данных: Система двойного хранения с локальным IndexedDB и облачным Firebase…

План урока

  1. Возможности
  2. Предварительные требования
  3. Установка
  4. Конфигурация
  5. Использование
  6. Объяснение кода
  7. Ссылки

Урок входит в полный доступ. Полный текст и видео открываются после оплаты. Первые уроки каждого курса бесплатны.

Полезные гиды