Creating Real-Time Image Generators with Together AI's Turbo Endpoint
Rebeca Moen Oct 12, 2024 11:26
Explore how BlinkShot utilizes Together AI's Turbo endpoint for real-time image generation, integrating technologies like Next.js and React Query for seamless user experience.
Introduction to BlinkShot and Together AI
BlinkShot is an innovative application designed to generate images from text prompts in real-time, leveraging the capabilities of Together AI's Turbo endpoint for the FLUX.1 [schnell] model, developed by Black Forest Labs. According to [Together AI](https://www.together.ai/blog/how-to-build-a-real-time-image-generator-with-together-ai), this app is built using an open-source stack including Next.js, Shadcn, and React Query, though the API is flexible enough to be used with any language or framework.Building the User Interface
The core interaction in BlinkShot involves a text area where users can input their prompts. The app's design allows for real-time image generation, eliminating the need for a submit button. This is made possible through React Query'suseQuery, which fires a new API request whenever the input prompt changes.
API Route for Image Generation
A critical component of BlinkShot is its API route, which is responsible for generating images. This is achieved by creating a new file,app/api/generateImage/route.js, where the prompt from the user is processed. Together AI's node SDK facilitates image generation by utilizing the together.images.create function, which supports the FLUX.1 [schnell] model.
Enhancing User Experience with Debouncing
To optimize the user experience, BlinkShot implements debouncing to prevent excessive API requests. By incorporating the@uidotdev/usehooks library, the app delays the API request until the user pauses typing for 300 milliseconds, ensuring a smoother interaction.
Improving Image Quality
The quality of generated images is adjustable via thesteps parameter in the images.create function. Increasing the number of steps enhances the image quality but also increases the generation time. BlinkShot typically uses three steps to balance quality and speed.
Consistency in Image Generation
BlinkShot offers a Consistency mode that utilizes a fixedseed value, ensuring deterministic image generation for the same prompt. This feature is particularly useful for applications requiring consistent outputs across different sessions.
