generative x

Generatif-X

Generative-X (Twitter) menambah timeline Twitter Anda dengan AI menggunakan filter gambar, teks-ke-pidato, balasan otomatis, dan komponen UI dinamis yang muncul untuk memberikan lebih banyak konteks untuk tweet!

Dibangun selama hackathon spcxopenai

Video demo

Tonton videonya di x

Memulai

Di bawah kap, ada aplikasi NextJS dan ekstensi krom yang digunakan untuk menarik tweet dari umpan Anda dan menyuntikkan aplikasi NextJS sebagai iframe ke x

Mari kita mulai dengan menjalankan aplikasi NextJS yang akan menggunakan sampel feed twitter

1. Tambahkan openai_api_key Anda dan Elevenlabs_api_key (digunakan untuk TTS)
   cp .env.local.example .env.local
2. Jalankan aplikasi
   npm run dev
3. Cobalah filter gambar (ini akan tajam karena mereka di -cache)
4. Coba sakelar UI dinamis

Ekstensi Chrome

Anda harus memuat ekstensi ke browser Anda untuk menggunakannya

Instalasi

1. Unduh repo ini - ekstensi ada di folder chrome_extensions/src (di mana file ini)
2. Buka Chrome> Pergi ke Ekstensi
3. Aktifkan mode pengembang (sakelar kanan atas)
4. Klik "Load Unpacked" dan pilih folder src pada tingkat yang sama dari file ini

Penggunaan

1. Jelajahi ke https://twitter.com
2. Klik pada ikon ekstensi di bilah alat (berbentuk hati untuk saat ini)
3. Pilih "X Timeline" dari menu

Antarmuka pengguna yang dinamis

Saat ini ada 5 komponen dinamis yang dapat diberikan berdasarkan konteks tweet. Kami menggunakan GPT3.5 dengan panggilan fungsi untuk menentukan komponen mana yang akan diterjemahkan.

Antarmuka Pengguna Dinamis (DUI) dapat ditemukan di /app/components/dui

1. weather.tsx
   Membuat data cuaca langsung jika lokasi dan "cuaca" disebutkan dalam tweet

2. stocks.tsx
   Merender data stok langsung jika simbol ticker yaitu $ tsla disebutkan dalam tweet

3. poltics.tsx membuat skala politik dengan tautan refeferensi (dihasilkan dari sonar kebingungan) jika tweet bersifat poltical

4. clothing.tsx
   Komponen ini akan mencoba mencocokkan item pakaian dalam gambar tweet dengan item dalam katalog Nordstrom Rack. Untuk demo itu hanya akan membuat tweet di bawah @techbrodrip

5. Reply.tsx
   Memberikan beberapa balasan yang disarankan dengan TTS dalam komponen balasan. Ini adalah komponen default adalah tidak ada komponen lain yang diberikan.

Menambahkan komponen baru

Aplikasi ini menjadi lebih baik dengan lebih banyak komponen. Jika Anda memiliki ide untuk komponen yang dapat menambah pengalaman X, buka PR.

Dokumen tentang menambahkan aliran komponen baru segera hadir.

Todo

• Pindahkan fungsi panggilan router keluar dari actions/tsx dan masuk ke API sendiri (saat ini ada masalah di mana panggilan aksi server tidak disejajarkan dalam produksi lihat vercel/next.js#50743)