generative x

Generativo-x

Generativo-X (Twitter) aumenta su línea de tiempo de Twitter con AI usando filtros de imagen, texto a voz, respuestas automáticas y componentes dinámicos de la interfaz de usuario que aparecen para dar más contexto a los tweets.

Construido durante el Hackathon Spcxopenai

Video de demostración

Mira el video en x

Empezando

Debajo del capó, hay una aplicación NextJS y una extensión de Chrome utilizada para extraer tweets de su feed e inyectar la aplicación NextJS como un iframe en X

Comencemos por ejecutar la aplicación NextJS wwather usará una muestra de Twitter Feed

1. Agregue su OpenAI_API_KEY y ELEVENLABS_API_KEY (utilizado para TTS)
   cp .env.local.example .env.local
2. Ejecutar la aplicación
   npm run dev
3. Pruebe los filtros de la imagen (estos serán ágiles a medida que se almacenen en caché)
4. Pruebe el interruptor de interfaz de usuario dinámico

Extensión de cromo

Deberá cargar la extensión en su navegador para usarla

Instalación

1. Descargue este repositorio: la extensión está en la carpeta chrome_extensions/src (donde está este archivo)
2. Abrir Chrome> ir a extensiones
3. Habilitar el modo de desarrollador (cambiar de la derecha)
4. Haga clic en "Cargar desempaquetado" y seleccione la carpeta src al mismo nivel de este archivo

Uso

1. Explore a https://twitter.com
2. Haga clic en el icono de extensión en la barra de herramientas (en forma de corazón por ahora)
3. Seleccione "X Timeline" en el menú

Interfaces de usuario dinámicas

Actualmente hay 5 componentes dinámicos que se pueden representar en función del contexto de tweets. Utilizamos GPT3.5 con la llamada de función para determinar qué componente representar.

Las interfaces de usuario dinámicas (DUI) se pueden encontrar en /app/components/dui

1. weather.tsx
   Rendera datos meteorológicos en vivo si la ubicación y el "clima" se mencionan en un tweet

2. stocks.tsx
   Rendera datos de acciones en vivo si un símbolo de ticker, es decir, $ tsla se menciona en un tweet

3. poltics.tsx representa una escala política con enlaces de referencia (generados a partir de la sonar de la perplejidad) si un tweet es político

4. clothing.tsx
   Este componente intentará coincidir con las prendas de vestir en una imagen de tweet con artículos en el catálogo de Nordstrom Rack. Para la demostración solo renderizará para tweets debajo del @techbrodrip

5. Reply.tsx
   Rendera algunas respuestas sugeridas con TTS en un componente de respuesta. Este es el componente predeterminado es que no hay otros componentes representados.

Agregar nuevos componentes

Esta aplicación mejora con más componentes. Si tiene ideas para componentes que podrían aumentar la experiencia X, abra un PR.

Docs sobre la adición de nuevos componentes flujo próximamente.

HACER

• Mover función llamando al enrutador fuera de actions/tsx y en su propia API (actualmente hay un problema en el que las llamadas de acción del servidor no están paralelizadas en la producción, ver Vercel/Next.js#50743)