generative x

Generativo-x

O generativo-x (Twitter) aumenta sua linha do tempo do Twitter com IA usando filtros de imagem, texto em fala, respostas automáticas e componentes dinâmicos da interface do usuário que aparecem para dar mais contexto aos tweets!

Construído durante o hackathon spcxopenai

Vídeo de demonstração

Assista ao vídeo em x

Começando

Sob o capô, há um aplicativo NextJS e uma extensão do Chrome usada para retirar os tweets do seu feed e injetar o aplicativo NextJS como um iframe em x

Vamos começar executando o aplicativo NextJS Wwhich usará um amostra de feed do Twitter

1. Adicione o seu OpenAi_API_KEY e elevenlabs_api_key (usado para TTS)
   cp .env.local.example .env.local
2. Execute o aplicativo
   npm run dev
3. Experimente os filtros de imagem (estes ficarão ágil como são armazenados em cache)
4. Experimente o interruptor da interface do usuário dinâmico

Extensão do Chrome

Você precisará carregar a extensão no seu navegador para usá -lo

Instalação

1. Faça o download deste repositório - a extensão está na pasta chrome_extensions/src (onde este arquivo está)
2. Open Chrome> Vá para extensões
3. Ativar modo de desenvolvedor (Switch Topight)
4. Clique em "Carregar descompactado" e selecione a pasta src no mesmo nível deste arquivo

Uso

1. Navegue para https://twitter.com
2. Clique no ícone de extensão na barra de ferramentas (em forma de coração por enquanto)
3. Selecione "X Linha do tempo" no menu

Interfaces de usuário dinâmico

Atualmente, existem 5 componentes dinâmicos que podem ser renderizados com base no contexto do tweet. Usamos o GPT3.5 com a chamada de função para determinar qual componente renderizar.

Interfaces de usuário dinâmico (DUIs) podem ser encontradas em /app/components/dui

1. weather.tsx
   Renderiza dados meteorológicos ao vivo se a localização e o "clima" forem mencionados em um tweet

2. stocks.tsx
   Renderiza dados de ações ao vivo se um símbolo de ticker, ou seja, $ tsla for mencionado em um tweet

3. poltics.tsx torna uma escala política com links de referência (gerados a partir de sonar perplexidade) se um tweet for político

4. clothing.tsx
   Este componente tentará combinar os itens de roupas em uma imagem de tweet com os itens no catálogo Nordstrom Rack. Para a demonstração, ele só renderá para tweets sob o @techbrodrip

5. Reply.tsx
   Renderiza algumas respostas sugeridas com o TTS em um componente de resposta. Este é o componente padrão é que não há outros componentes renderizados.

Adicionando novos componentes

Este aplicativo fica melhor com mais componentes. Se você tiver idéias para componentes que podem aumentar a experiência X, abra um PR.

Os documentos para adicionar novos componentes fluem em breve.

PENDÊNCIA

• Mova a função chamando roteador para fora das actions/tsx e para a sua própria API (atualmente há um problema em que as chamadas de ação do servidor não são paralelas na produção, consulte Vercel/Next.JS#50743)