generative x

生成X

使用圖像過濾器，文本到語音回復和動態的UI組件通過AI增強了您的Twitter時間軸，以增強您的Twitter時間軸，這些組件彈出，以提供更多的上下文！

在Spcxopenai Hackathon中建造

演示視頻

在X上觀看視頻

入門

在引擎蓋下，有一個nextJS應用程序和一個用於從供稿中拉出推文的鍍鉻擴展名，並將nextjs應用注入iframe x中

讓我們首先運行nextJS應用程序W WHICH將使用示例Twitter feed

1. 添加您的OpenAI_API_KEY和ELEEVENLABS_API_KEY（用於TTS）
   cp .env.local.example .env.local
2. 運行應用程序
   npm run dev
3. 嘗試圖像過濾器（在緩存時它們會很活潑）
4. 嘗試動態UI開關

鉻擴展

您需要將擴展​​名加載到瀏覽器中才能使用

安裝

1. 下載此倉庫 - 擴展名在chrome_extensions/src文件夾中（此文件是）
2. 打開Chrome>轉到擴展
3. 啟用開發人員模式（開關右上方）
4. 單擊“加載打開包裝”，然後在此文件的同一級別中選擇src文件夾

用法

1. 瀏覽到https://twitter.com
2. 單擊工具欄中的擴展圖標（目前為心形）
3. 從菜單中選擇“ x時間軸”

動態用戶界面

當前有5個動態組件可以根據Tweet上下文渲染。我們將gpt3.5與函數調用一起確定要渲染的組件。

動態用戶界面（DUIS）可以在/app/components/dui中找到

1. weather.tsx
   如果位置和“天氣”在推文中提到了現場天氣數據

2. stocks.tsx
   如果股票符號IE $ tsla在一條推文中提到了實時庫存數據

3. poltics.tsx如果一條推文是政治性的

4. clothing.tsx
   該組件將嘗試將推文圖像中的服裝項目與Nordstrom機架目錄中的項目匹配。對於演示，它只能在@TechBrodrip下的推文渲染

5. Reply.tsx
   在答复組件中，呈現一些建議的TTS建議。這是默認組件是否沒有其他組件渲染。

添加新組件

使用更多組件，此應用程序會變得更好。如果您對可以增強X體驗的組件有想法，請打開PR。

關於添加新組件流程的文檔即將推出。

托多

• 移動函數將路由器從actions/tsx中撥出並進入其自己的API（當前存在一個問題，服務器操作調用在Production coppority/next.js＃50743中均未並行。