generative x

生成-X

Generative-X（Twitter）は、画像フィルター、テキストへのスピーチ、自動応答、およびダイナミックUIコンポーネントを使用してAIを使用してTwitterのタイムラインを増強し、ツイートのコンテキストを増やします。

SPCXOPENAIハッカソン中に建設されました

デモビデオ

xでビデオをご覧ください

はじめる

ボンネットの下には、次のJSアプリケーションと、フィードからツイートを引き出し、nextJSアプリをiframeとしてxに挿入するために使用されるクロム拡張機能があります。

SAMPLE TWITTERフィードを使用する場合、次のJSアプリを実行することから始めましょう

1. Openai_api_keyとElevenlabs_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つの動的コンポーネントがあります。関数呼び出しでGPT3.5を使用して、レンダリングするコンポーネントを決定します。

動的ユーザーインターフェイス（DUI）は/app/components/duiにあります

1. weather.tsx
   場所と「天気」がツイートに記載されている場合、ライブ天気データをレンダリングします

2. stocks.tsx
   ティッカーシンボル、つまり$ tslaがツイートに記載されている場合、ライブストックデータをレンダリングします

3. poltics.tsx 、ツイートが多分類の場合、リフレファレンスリンク（困惑から生成された）を備えた政治的規模をレンダリングします

4. clothing.tsx
   このコンポーネントは、ツイート画像の衣料品をノードストロームラックカタログのアイテムに一致させようとします。デモのために、@techbrodripの下でのツイートのみをレンダリングします

5. Reply.tsx
   返信コンポーネント内のTTSでいくつかの提案された応答をレンダリングします。これは、レンダリングされた他のコンポーネントがないことです。

新しいコンポーネントの追加

このアプリケーションは、より多くのコンポーネントで良くなります。 Xエクスペリエンスを増強できるコンポーネントのアイデアがある場合は、PRを開きます。

新しいコンポーネントフローの追加に関するドキュメントはまもなく登場します。

トト

• 関数を動かすルーターをactions/tsxから独自のAPIに呼び出します（現在、生産でサーバーアクション呼び出しが並列化されていない問題がありますvercel/next.js＃50743を参照）