generative x

Generativ-x

Generative-X (Twitter) erweitert Ihre Twitter-Timeline mit KI mit Bildfiltern, Text-zu-Sprache, automatischen Antworten und dynamischen UI-Komponenten, die sich ansehen, um Tweets mehr Kontext zu geben!

Während des spcxopenai Hackathons gebaut

Demo -Video

Sehen Sie sich das Video auf x an

Erste Schritte

Unter der Motorhaube gibt es eine NextJS

Beginnen wir damit, die nächste Js -App mit einem Beispiel -Twitter -Feed auszuführen

1. Fügen Sie Ihren OpenAI_API_KEY und ELEVENLABS_API_KEY (für TTS verwendet) hinzu.
   cp .env.local.example .env.local
2. Führen Sie die Anwendung aus
   npm run dev
3. Probieren Sie die Bildfilter aus (diese sind bissig, wenn sie zwischengespeichert werden)
4. Probieren Sie den dynamischen UI -Switch aus

Chromverlängerung

Sie müssen die Erweiterung in Ihren Browser laden, um sie zu verwenden

Installation

1. Laden Sie dieses Repo herunter - die Erweiterung befindet sich im Ordner chrome_extensions/src (wobei diese Datei ist)
2. Öffnen Sie Chrom> Gehen Sie zu Erweiterungen
3. Entwicklermodus aktivieren (Top-Right Switch)
4. Klicken Sie auf "Auspacken" und wählen Sie den src -Ordner auf derselben Ebene dieser Datei aus

Verwendung

1. Durchsuchen Sie https://twitter.com
2. Klicken Sie in der Symbolleiste auf das Erweiterungssymbol (vorerst herzförmig)
3. Wählen Sie im Menü "X Timeline"

Dynamische Benutzeroberflächen

Derzeit gibt es 5 dynamische Komponenten, die basierend auf dem Tweet -Kontext gerendert werden können. Wir verwenden GPT3.5 mit Funktionsaufruf, um zu bestimmen, welche Komponente zu rendern ist.

Dynamische Benutzeroberflächen (DUIs) finden Sie in /app/components/dui

1. weather.tsx
   Renders Live -Wetterdaten, wenn Ort und "Wetter" in einem Tweet erwähnt werden

2. stocks.tsx
   Rendern Live -Aktiendaten, wenn ein Ticker -Symbol dh $ tsla in einem Tweet erwähnt wird

3. poltics.tsx macht eine politische Skala mit Verfremdungsverbindungen (aus Verwirrigkeitsonar erzeugt), wenn ein Tweet poltisch ist

4. clothing.tsx
   Diese Komponente versucht, die Kleidungsstücke in einem Tweet -Bild mit Elementen im Nordstrom -Rack -Katalog anzupassen. Für die Demo wird es nur für Tweets unter dem @Techbrodrip rendern

5. Reply.tsx
   Rendert einige vorgeschlagene Antworten mit TTS in einer Antwortkomponente. Dies ist die Standardkomponente, dass keine anderen Komponenten wiedergegeben werden.

Hinzufügen neuer Komponenten

Diese Anwendung wird mit mehr Komponenten besser. Wenn Sie Ideen für Komponenten haben, die das X -Erlebnis erweitern könnten, öffnen Sie eine PR.

Dokumente zum Hinzufügen neuer Komponenten fließen in Kürze.

Todo

• Move -Funktionsaufruf Router aus actions/tsx in die eigene API (es gibt derzeit ein Problem, bei dem Server -Aktionsaufrufe in der Produktion nicht parallelisiert sind. Siehe Vercel/Next.js#50743)