利用Together AI的Turbo端点创建实时图像生成器
realtime news Oct 12, 2024 11:44
探索BlinkShot如何利用Together AI的Turbo端点进行实时图像生成，结合Next.js和React Query等技术实现无缝用户体验。
BlinkShot和Together AI简介
BlinkShot是一款创新应用，旨在利用Black Forest Labs开发的Together AI Turbo端点为FLUX.1 [schnell]模型，将文本提示实时生成图像。根据[Together AI](https://www.together.ai/blog/how-to-build-a-real-time-image-generator-with-together-ai)，此应用采用包括Next.js、Shadcn和React Query在内的开源技术栈构建，但API足够灵活，可以与任何语言或框架结合使用。用户界面的构建
BlinkShot的核心交互功能包括一个文本区域，用户可以在其中输入提示。应用的设计支持实时图像生成，无需提交按钮。通过React Query的useQuery功能，当输入提示变化时，就会触发新的API请求。
用于图像生成的API路线
BlinkShot的一个关键组件是其API路线，负责生成图像。这是通过创建一个新的文件app/api/generateImage/route.js来实现的，其中处理用户的提示。Together AI的节点SDK通过together.images.create函数结合FLUX.1 [schnell]模型来促进图像生成。
通过去抖优化用户体验
为优化用户体验，BlinkShot实施了去抖，以防止过多的API请求。通过引入@uidotdev/usehooks库，当用户暂停输入300毫秒时，应用才会延迟API请求，确保交互流畅。
提高图像质量
生成图像的质量可以通过images.create函数中的steps参数进行调整。增加步骤数量可以提高图像质量，但也会增加生成时间。为平衡质量和速度，BlinkShot通常使用三个步骤。
图像生成的一致性
BlinkShot提供一致性模式，利用固定seed值，确保相同提示的一致性图像生成。此功能对于需要跨不同会话产生一致输出的应用特别有用。