Creating a web app to generate images with AI
In 2022, Stable Diffusion was released. It is a deep learning, text-to-image model. It is primarily used to generate detailed images conditioned on text descriptions.
But how to generate images with this model easily?
What is Dreamify? permalink
Dreamify is the web application that allows you to generate images with AI without sign up and for free. It uses the Stable Diffusion model to generate images. The model is run on cloud with Replicate.
Software Information permalink
- Project technology: Next.js, React, Tailwind CSS, Replicate
- Industry: AI tool
- Work Duration: ≈1 month
- Accessibility WCAG: AA (2.0)
- Version: 1.0
- Quick generation of images
- Access to advanced prompt settings
- Usage without sign up
Development Process permalink
Dreamify is a Next.js 13 app, with the UI built with Tailwind CSS. And with the API that interacts with Replicate.
Creating the app permalink
The app is created with Next.js 13. The new version brings radical changes to the way we work with React components and APIs.
Creating the UI permalink
The UI is built with Tailwind CSS. Components like the Buttons, Inputs, Modals and Progress Bar are developed with Shadcn/ui, a collection of re-usable components built using Radix UI.
Building the API permalink
The API is built with Next.js API Routes. It uses the Replicate API to run the model.
It uses two API routes:
/api/create- Generates an image with the given prompt
/api/image/:id- Returns the image generated by the
/api/generateroute by the given ID
Choosing a cloud provider permalink
The Machine Learning model is run on cloud with Replicate. Replicate is a platform for running and sharing machine learning models. Dreamify uses the Replicate API to run the model.
I choose Replicate because it's easy to use and it allows developers to check how the model is running per request.
Future Improvements permalink
- Create an Android/iPhone app
- Saving images in browser
The source code of MiniEdit is distributed under the MIT License.