generative x

Generative-X

Generative-X (Twitter) дополняет ваш график Twitter с помощью ИИ с использованием фильтров изображений, текста в речь, автозаправочных ответов и динамических компонентов пользовательского интерфейса, которые появляются, чтобы дать больше контекста твитам!

Построен во время хакатона spcxopenai

Демо -видео

Посмотрите видео на x

Начиная

Под капотом есть приложение NextJS и расширение Chrome, используемое для выталкивания твитов из вашего канала и ввести приложение NextJS в качестве iframe в x

Давайте начнем с запуска приложения NextJS WHICH будет использовать образец твиттер

1. Добавьте свой openai_api_key и elevenlabs_api_key (используется для TTS)
   cp .env.local.example .env.local
2. Запустите приложение
   npm run dev
3. Попробуйте фильтры изображения (они будут резкими, как они кэшируют)
4. Попробуйте динамический переключатель пользовательского интерфейса

Расширение хрома

Вам нужно будет загрузить расширение в браузер, чтобы использовать его

Установка

1. Загрузите это репо - расширение находится в папке chrome_extensions/src (где этот файл)
2. Open Chrome> Перейти к расширениям
3. Включить режим разработчика (переключить верхнюю правую)
4. Нажмите на «Загрузить распаковку» и выберите папку src на том же уровне этого файла

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

1. Просмотрите на https://twitter.com
2. Нажмите на значок расширения на панели инструментов (в форме сердца на данный момент)
3. Выберите «X Timelline» в меню

Динамические пользовательские интерфейсы

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

Динамические пользовательские интерфейсы (DUI) можно найти в /app/components/dui

1. weather.tsx
   Образует данные о погоде, если местоположение и «погода» упоминаются в твите

2. stocks.tsx
   Образует живые данные, если символ тикера, т.е. $ TSLA упоминается в твите

3. poltics.tsx отображает политический масштаб по связям с пересовыванием (генерируется от Sonar Sonar), если твит является политическим

4. clothing.tsx
   Этот компонент попытается соответствовать предметам одежды в твиттере с изображением с предметами в каталоге стойки Nordstrom. Для демонстрации он будет только для твитов под @techbrodrip

5. Reply.tsx
   Отдает несколько предложенных ответов с TTS в ответном компоненте. Это компонент по умолчанию, если нет других компонентов.

Добавление новых компонентов

Это приложение становится лучше с большим количеством компонентов. Если у вас есть идеи для компонентов, которые могут увеличить опыт X, откройте PR.

Документы о добавлении новых компонентов поток скоро появится.

Тодо

• Функция перемещения вызовов маршрутизатора из actions/tsx и в свой собственный API (в настоящее время существует проблема, когда вызовы сервера не параллелизированы в производстве см. Vercel/Next.js#50743)