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中均未并行。