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’s useQuery, 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 the steps 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 fixed seed value, ensuring deterministic image generation for the same prompt. This feature is particularly useful for applications requiring consistent outputs across different sessions.
Future Possibilities
The speed and efficiency of the FLUX [schnell] model open new possibilities for real-time image generation in web applications. BlinkShot’s open-source nature invites developers to explore its codebase and create their own innovative solutions. Together AI provides a platform for integrating high-quality image generation into various applications, offering a free $5 credit to new users for initial exploration.Image source: Shutterstock
