generative x

Génératif-x

Generative-X (Twitter) augmente votre calendrier Twitter avec l'IA à l'aide de filtres d'image, de texte vocale, de réponses automobiles et de composants d'interface utilisateur dynamiques qui apparaissent pour donner plus de contexte aux tweets!

Construit pendant le hackathon SPCXOpenai

Vidéo de démonstration

Regardez la vidéo sur x

Commencer

Sous le capot, il y a une application NextJS et une extension chromée utilisée pour retirer les tweets de votre flux et injecter l'application NextJS comme un iframe dans x

Commençons par exécuter l'application NextJS qui utilisera un exemple de fil Twitter

1. Ajoutez votre openai_api_key et elevenlabs_api_key (utilisé pour TTS)
   cp .env.local.example .env.local
2. Exécuter l'application
   npm run dev
3. Essayez les filtres d'image (ceux-ci seront accrocheurs car ils sont mis en cache)
4. Essayez l'interrupteur d'interface utilisateur dynamique

Extension chromée

Vous devrez charger l'extension dans votre navigateur pour l'utiliser

Installation

1. Téléchargez ce dépôt - L'extension se trouve dans le dossier chrome_extensions/src (où se trouve ce fichier)
2. Open Chrome> Aller aux extensions
3. Activer le mode développeur (commutateur en haut à droite)
4. Cliquez sur "Chargement déballé" et sélectionnez le dossier src au même niveau de ce fichier

Usage

1. Parcourez https://twitter.com
2. Cliquez sur l'icône d'extension dans la barre d'outils (en forme de cœur pour l'instant)
3. Sélectionnez "X Timeline" dans le menu

Interfaces utilisateur dynamiques

Il existe actuellement 5 composants dynamiques qui peuvent être rendus en fonction du contexte de tweet. Nous utilisons GPT3.5 avec des appels de fonction pour déterminer le composant à rendre.

Les interfaces utilisateur dynamiques (DUI) peuvent être trouvées dans /app/components/dui

1. weather.tsx
   Rend les données météorologiques en direct si l'emplacement et le "temps" sont mentionnés dans un tweet

2. stocks.tsx
   Donne des données en direct si un symbole de ticker IE $ tsla est mentionné dans un tweet

3. poltics.tsx rend une échelle politique avec des liens de refeference (générés par le sonar de perplexité) si un tweet est poltical

4. clothing.tsx
   Ce composant essaiera de faire correspondre les articles de vêtements dans une image de tweet aux articles du catalogue Nordstrom Rack. Pour la démo, il ne fera que des tweets sous le @TechBrodrip

5. Reply.tsx
   Donne quelques réponses suggérées avec TTS dans un composant de réponse. C'est le composant par défaut est qu'il n'y a pas d'autres composants rendus.

Ajout de nouveaux composants

Cette application s'améliore avec plus de composants. Si vous avez des idées de composants qui pourraient augmenter l'expérience X, ouvrez un PR.

Docs sur l'ajout de nouveaux composants s'écouler bientôt.

FAIRE

• Déplacer la fonction appelant le routeur hors actions/tsx et dans sa propre API (il y a actuellement un problème où les appels d'action du serveur ne sont pas parallélisés dans la production Voir Vercel / Next.js # 50743)