generative x

Generative-X

Generative-X (Twitter) เพิ่มไทม์ไลน์ Twitter ของคุณด้วย AI โดยใช้ตัวกรองรูปภาพข้อความตอบรับอัตโนมัติและส่วนประกอบ UI แบบไดนามิกที่ปรากฏขึ้นเพื่อให้บริบทมากขึ้นเพื่อทวีต!

สร้างขึ้นในช่วง spcxopenai hackathon

วิดีโอสาธิต

ดูวิดีโอบน x

เริ่มต้น

ภายใต้ประทุนมีแอปพลิเคชัน NextJS และส่วนขยายของ Chrome ที่ใช้ในการดึงทวีตออกจากฟีดของคุณ

เริ่มต้นด้วยการเรียกใช้แอป NextJS ที่จะใช้ฟีด Twitter ตัวอย่าง

1. เพิ่ม openai_api_key ของคุณและ Elevenlabs_api_key (ใช้สำหรับ TTS)
   cp .env.local.example .env.local
2. เรียกใช้แอปพลิเคชัน
   npm run dev
3. ลองใช้ตัวกรองรูปภาพ (สิ่งเหล่านี้จะเร็วเหมือนแคช)
4. ลองใช้สวิตช์ UI แบบไดนามิก

ส่วนขยายโครเมี่ยม

คุณจะต้องโหลดส่วนขยายลงในเบราว์เซอร์ของคุณเพื่อใช้งาน

การติดตั้ง

1. ดาวน์โหลด repo นี้ - ส่วนขยายอยู่ในโฟลเดอร์ chrome_extensions/src (โดยที่ไฟล์นี้อยู่)
2. เปิด Chrome> ไปที่ส่วนขยาย
3. เปิดใช้งานโหมดนักพัฒนาซอฟต์แวร์ (สลับขวาบน)
4. คลิกที่ "โหลด UNPACKED" และเลือกโฟลเดอร์ src ในระดับเดียวกันของไฟล์นี้

การใช้งาน

1. เรียกดู https://twitter.com
2. คลิกที่ไอคอนส่วนขยายในแถบเครื่องมือ (รูปหัวใจสำหรับตอนนี้)
3. เลือก "x ไทม์ไลน์" จากเมนู

อินเทอร์เฟซผู้ใช้แบบไดนามิก

ขณะนี้มี 5 องค์ประกอบแบบไดนามิกที่สามารถแสดงผลได้ตามบริบททวีต เราใช้ GPT3.5 กับการเรียกใช้ฟังก์ชันเพื่อพิจารณาว่าส่วนประกอบใดที่จะแสดงผล

อินเทอร์เฟซผู้ใช้แบบไดนามิก (DUIs) สามารถพบได้ใน /app/components/dui

1. weather.tsx
   แสดงผลข้อมูลสภาพอากาศสดหากสถานที่และ "สภาพอากาศ" ถูกกล่าวถึงในทวีต

2. stocks.tsx
   แสดงผลข้อมูลสต็อกสดหากสัญลักษณ์สัญลักษณ์เช่น $ tsla ถูกกล่าวถึงในทวีต

3. poltics.tsx แสดงระดับทางการเมืองด้วยลิงก์การอ้างอิง (สร้างจาก Sonar Perplexity) หากทวีตเป็น poltical

4. clothing.tsx
   ส่วนประกอบนี้จะพยายามจับคู่รายการเสื้อผ้าในภาพทวีตกับรายการในแคตตาล็อก Nordstrom Rack สำหรับการสาธิตมันจะแสดงผลสำหรับทวีตภายใต้ @techbrodrip เท่านั้น

5. Reply.tsx
   แสดงผลการตอบกลับที่แนะนำสองสามข้อด้วย TTS ในองค์ประกอบตอบกลับ นี่คือส่วนประกอบเริ่มต้นคือไม่มีส่วนประกอบอื่น ๆ ที่แสดงผล

การเพิ่มส่วนประกอบใหม่

แอปพลิเคชันนี้ดีขึ้นด้วยส่วนประกอบมากขึ้น หากคุณมีแนวคิดสำหรับส่วนประกอบที่สามารถเพิ่มประสบการณ์ X ให้เปิดการประชาสัมพันธ์

เอกสารเกี่ยวกับการเพิ่มการไหลของส่วนประกอบใหม่ในไม่ช้า

สิ่งที่ต้องทำ

• ย้ายฟังก์ชั่นการเรียกเราเตอร์ออกจาก actions/tsx และเป็น API ของตัวเอง (ขณะนี้มีปัญหาที่การเรียกใช้เซิร์ฟเวอร์ไม่ขนานในการผลิตดู vercel/next.js#50743)