О чём урок
Flow & Focus — это персонализированное новостное приложение, которое превращает потребление новостей в процесс обучения. Оно уникальным образом сочетает быстрое обнаружение информации через вертикальную новостную ленту (Flow) с глубокими, интерактивными обучающими диалогами (Focus), работающими на базе моделей Sonar Pro и Sonar Deep Research от Perplexity. Двухрежимный интерфейс: Лента Flow для быстрого поиска новостей и Focus для персонализированного глубокого погружения Вертикальная новостная лента: Прокручиваемые новостные фрагменты с сгенерированными ИИ сводками, тегами и фоновыми изображениями Интерактивное глубокое погружение: Нажимайте на ключевые фразы для получения сфокусированного контента, с горизонтально прокручиваемыми панелями деталей Персонализированное обучение: Сегменты диалога на базе ИИ с персонами, такими как "Оракул" и "Исследователь" Умная персонализация: Отслеживает шаблоны чтения для автоматической настройки подбора контента Контент в реальном времени: Использует Sonar Pro для актуальных новостей и Sonar Deep Research для детального анализа Визуальное улучшение: Динамические фоновые изображения, генерируемые через Runware.ai на основе ключевых слов контента Node.js 18+ и npm Ключ API Perplexity Ключ API Runware для генерации изображений Среда Next.js 15 и React 19 Создайте файл .env.local: Запуск сервера разработки: Доступ к приложению: Откройте http://localhost:3000 в вашем браузере Лента Flow: Прокручивайте новостные фрагменты вертикально и нажимайте на ключевые фразы для глубокого погружения Режим Focus: Генерируйте персонализированные дайджесты с интерактивными сегментами диалога Персонализация: Ваши шаблоны просмотра автоматически влияют на подбор контента Фронтенд: Next.js 15 с React 19, TypeScript, Tailwind CSS и Framer Motion для анимаций Управление состоянием: Zustand с сохранением в localStorage для пользовательских предпочтений Интеграция ИИ: Perplexity Sonar Pro для новостей в реальном времени и Sonar Deep Research для углубленного анализа Генерация изображений: Интеграция Runware SDK для динамических фоновых изображений на основе ключевых слов контента Маршруты API: Серверная интеграция, обрабатывающая вызовы API Perplexity и Runware Дизайн с приоритетом мобильных устройств: Жесты смахивания и адаптивный макет для интуитивного мобильного опыта Репозиторий GitHub Демонстрационное видео Хакатон Perplexity Проект хакатона…
План урока
- Возможности
- Предварительные требования
- Установка
- Конфигурация
- Использование
- Описание кода
- Ссылки
Урок входит в полный доступ. Полный текст и видео открываются после оплаты. Первые уроки каждого курса бесплатны.