Stable Diffusion Web UI
Project Type
ML-powered web UI feasibility study
Role
Developer
Year
2022  ⎯  Present

This project utilizes a stable diffusion model to create a Web User Interface for individuals without technical backgrounds. The 3D Virtual Gallery design is in the feasibility stage, with testing underway for advanced phases to prove the concept. The project incorporates the installation of stable diffusion and creation of app interfaces using  Python  and web interfaces using  React .

The interface allows end-users to upload pictures and generate new images using prompts, which are then uploaded to the virtual gallery. Users can also create images from text, with affordable and free classifier guidance for the most interesting results.

The quality of the generated images depends on the number of steps used, with caution advised against overuse. The interface also includes the ability to regenerate images with the same or random seed. Precise descriptions and image style specification are recommended for optimal results.

01_Installation

I tried to run Stable Diffusion locally on my M1 MacBook, which helped me efficiently generate and save images on my local disk, as well as gain a better understanding of how it works for text-to-image and image-to-image tasks.

02_App Interface created by Python

In my first attempt to create a stable diffusion interface using Python, I focused on implementing the text-to-image function. The goal was to generate an image and save it to disk, while also displaying it in a new window.

This was an exciting project for me, as it allowed me to master the use of stable diffusion pipeline in creating a user interface with Python. I found it fascinating to see how the generated image changed based on the input text, and how the diffusion model influenced the final output.

Through this project, I gained valuable insights into the process of creating an interface with stable diffusion, which I can apply to future projects.

03_Interface created by React.JS & Fast API

The user interface was developed using FastAPI and ReactJS, with FastAPI being chosen for its high performance, fast coding, minimal bugs, intuitive and easy-to-learn nature, and code duplication reduction. ReactJS, on the other hand, enabled the use of different component libraries for customizing the UI, with the Chakra UI being used in this instance.

04_Interface created by Gradio

The feasibility prototype's web UI enables end-users to upload their pictures and generate new images with various styles using a prompt, developed with the open-source Python library Gradio. This library has customizable features for AI models and easy usability. Gradio works with any Python application to create a straightforward UI, utilizing three parameters: fn for the primary UI operation, inputs for component type, and outputs for generating the component type.

Next Project →

View More

OF Gradient Animator
UX Problem Solving ⤍ Improving UX by Reducing Confusion in Colour Selection
Helping to bring one of Asia's Largest luxury fashion retailers to digital age
SoulNet
UX UI Design ⤍ Create an intuitive and user-friendly flower delivery app design
Helping to bring one of Asia's Largest luxury fashion retailers to digital age