DEV Community: Sn3llius

Difoosion, a Simple Web-Interface for Stable Diffusion Models

Sn3llius — Sun, 16 Jun 2024 13:46:40 +0000

With Stable Diffusion 3 freshly released, I thought it would be nice to make a simple Web-Interface for it. About a month ago me and a couple friends released a library for making websites with Python, and this just seemed like too good of an opportunity to pass up.

The interface includes support for the classic SD1, SDXL and the new SD3. Inference is done using the diffusers library from Huggingface, and the interface is built with Rio. Given how new SD3 is in diffusers, you'll spot the odd issue here and there, but I'm sure that'll improve now with thousands of people using it.

This is a simple Web-Interface for Stable Diffusion, based on our new Rio framework. We’ve gotten a lot of requests for larger sample projects, so given the highly anticipated release of Stable Diffusion 3 I figured this would be a great example. With all of that out of the way, let’s get started! Install at least one model from the list below to begin using Difoosion.

This makes use of Stable Diffusion, which is a sizable AI model. While it can technically run on the CPU, an nvidia GPU with at least 8GB of VRAM is highly recommended.

Get Started

1. Clone this repository



git clone git@gitlab.com:Vivern/difoosion.git

2. Install the project and its dependencies (Use a venv if you like)



cd difoosion
python -m pip install -e .

This will download some large packages like diffusers and torch. Give it a few minutes to complete.

3. Run the interface



python -m rio run --release

After a few seconds this will display a URL in the console. Open this URL in your browser to start using the interface.

4. Install Models

When you first connect you won’t have any models installed yet. The site will automatically offer you to download one of the built-in ones.

diffusers doesn't seem to offer any way to track the download progress of models. That's why you won't be able to see how far the download has progressed in the interface. Check the terminal to see updates.

5. Get cracking!

Type a prompt of what you’d like to see, click “Generate” and wait for your masterpiece to be created :)

Tech Stack

All models are run with the diffusers library from huggingface. There is a thin wrapper around the library to workaround some issues and make it easier to use.
The web interface is built with Rio, a new web framework that is designed to be 100% Python, and as easy to use as possible. I’m one of the Rio developers and this project was meant to both test Rio out in a bigger project, as well as be a showcase & reference to other Rio developers.
Dependencies are managed with rye.

Caveats

Stable Diffusion 3 is still very new, and support in diffusers immature. This has led to a couple known problems:

Generating non-square images can lead to errors from pytorch. Stick to aspect ratios of 1:1 for now
Freeing up memory is very unreliable. One some of my devices the model keeps gobbling up more and more RAM as time goes on, while on others it seems to free up just fine. Keep a close eye on your memory usage.

Sources

Rio: https://github.com/rio-labs/rio

You can find installation instructions in the project’s README: https://gitlab.com/mad-moo/difoosion

A quick comparison: Streamlit, Dash, Reflex and Rio

Sn3llius — Thu, 30 May 2024 11:41:20 +0000

Many data scientists lack a background in computer science or software engineering. Even those who do may not enjoy developing web applications or front-end user interfaces to showcase their work. Additionally, those who occasionally appreciate “pure” software engineering might be reluctant to allocate significant portions of their data science budget to perfecting CSS directives for optimizing button and chart appearances across various devices. Ultimately, a data science project is centered around a data-driven question, and it’s generally advisable to minimize ancillary costs, especially during early stages, demos, and proofs of concept.

In this article, we will examine three major frameworks, along with a newly introduced one in this category: Rio, Reflex, Streamlit, and the older, more established Dash from Plotly. We believe these four frameworks span the simplicity-flexibility spectrum and can address the majority of use cases in data science projects. Our focus is on Python, as it is the most widely used programming language in the data science community. Rio, Reflex, Streamlit, and Dash are all native to Python, with Dash also supporting R and Julia.

Streamlit

Streamlit stands out for its simplicity, enabling the creation of appealing web applications atop a data science or machine learning backend with just a few lines of code. This simplicity is achieved through its unique UI model that bypasses explicit event handling or functional programming, which are common in other UI frameworks. Instead, Streamlit employs a linear-flow, imperative execution model for the UI code. Each UI widget corresponds to a variable in the Python code, and any change in the state or value of the widget triggers the re-execution of the code from the point where the widget is defined. This linear execution model makes it straightforward to add a web UI to a computation backend, often as simple as replacing parameter definitions with Streamlit widget definitions.

Streamlit supports a wide range of widgets, including sliders, buttons, and text inputs, which can be easily used to build interactive and dynamic web applications. Developers can also leverage its built-in support for displaying data frames, charts, and images directly from their Python code, enhancing the presentation of data and results.

Streamlit’s active community provide extensive resources, including documentation, tutorials, and community-contributed projects. This support network helps developers quickly get up to speed and build effective applications. Furthermore, Streamlit Cloud offers a platform for deploying and sharing applications with others, making collaboration and distribution effortless.

Pros:

Streamlit is accessible to anyone who understands Python, with almost no need for HTML or CSS knowledge.
It offers a broad range of UI components, covering nearly every common element such as checkboxes, sliders, collapsible sidebars, radio buttons, file uploads, progress bars, and more. These components are very user-friendly.
It supports various interactive visualization libraries like Matplotlib and Vega-Altair.
It supports live/ hot reloading

Cons:

Although not difficult, Streamlit requires some time to learn its specific syntax.
Streamlit has limited flexibility. It is Python-based, offers a limited set of widgets, and does not integrate with Python Notebooks.
There’s no built-in state management; whenever there’s a state change, the entire script restarts. While caching can alleviate this, it complicates Streamlit’s otherwise straightforward approach.
Insufficient type annotation support.

Plotly Dash

Dash operates on top of the Python web framework Flask, the web UI library React.js, and the JavaScript plotting library Plotly.js. It is available for both Python and R, making it accessible to a wide range of developers and data scientists.

Dash employs a dual business model, offering its open-source software via pip under an MIT license with no limitations. The open-source version is fully featured and includes everything needed to create web-based dashboards. For enterprises needing more advanced features, Plotly provides Dash Enterprise, which includes enhanced security, scalability, and deployment options, as well as premium support and additional components tailored for business needs.

While a Dash app can achieve full responsiveness like any other web application, it requires significant effort from the developer to implement, as responsiveness is not provided out of the box. This flexibility allows developers to create highly customized and interactive applications, but it also means that a solid understanding of web development principles is beneficial.

Dash is versatile and can be used in various domains such as data exploration, data analysis, modeling, visualization, instrument control, and reporting. It supports a wide range of interactive elements like sliders, dropdowns, and graphs, which can be easily linked to create dynamic and responsive user interfaces. Additionally, Dash’s integration with Plotly’s powerful plotting capabilities allows for the creation of complex and informative visualizations with minimal code.

For those looking to extend the capabilities of their Dash applications, there is a vibrant community and extensive documentation available, along with numerous tutorials and examples provided by Plotly.

Pros:

Dash applications are reactive.
Dash is more customizable than Streamlit. Also, Dash offers better performance.
Comes with a lot of dev tools like: Callback graph, Code reloading, hot reloading, component validation and more.

Cons:

Dash is more focused on the enterprise market and doesn’t include all of it’s available features in the open source version like: features such as authentication, CI/CD, technical support and so on.
Dash is more verbose than Rio, Reflex or Streamlit; you have to write more code to create simple web applications compared to other frameworks.
You need to know HTML and CSS to get most out of it.

Reflex

One of Reflex’s key advantages is that it enables developers to write their entire web app — including frontend, backend, and deployment — using only Python. This eliminates the need to learn and any JavaScript, HTML, CSS, but it is usefull for debugging. With Reflex, knowing Python is sufficient to build complete, professional web apps, ranging from basic sites to complex, interactive applications.

Reflex employs a declarative, state-driven model that will be familiar to React developers, but it implements this model entirely in Python, without any JavaScript. Developers can build their entire frontend UI using only Python components, assembling them to create interactive layouts, with JavaScript being compiled in the background.

Variables are automatically synchronized across the frontend and backend. When a reactive variable is updated on the backend, the change is instantly pushed to the frontend via a WebSocket connection, ensuring the UI is always in sync with the latest server state. Reflex utilizes Uvicorn for its operations.

Pros:

Offers database ORM with automatic migrations
Provides user authentication and secure session management
Supports asynchronous background tasks
Manages state, including component state

Cons:

No production-ready release yet, so breaking changes might occur
Requires compiling to JavaScript, making debugging more challenging
Lacks live/hot reloading, causing delays when compiling changes and updating the browser

Rio

Rio is an innovative new GUI framework that allows the creation of modern web apps with just a few lines of Python. This is achieved by adhering to the core principles of Python, known for its simplicity and conciseness. Rio embodies this philosophy, eliminating the need to learn additional languages like HTML, CSS, or JavaScript. All UI, logic, components, and layout are managed entirely in Python. Additionally, there is no division between front-end and back-end, as Rio seamlessly handles all communication.

Rio leverages FastAPI to manage API requests and uses Uvicorn for serving web applications. On the front end, theire stack includes TypeScript, CSS, and HTML, ensuring a responsive and dynamic user experience. Websockets were employed to enable real-time client-server communication. For the backend, Python was the primary language, handling the core logic and also functioning as the interface for user interactions. Rio includes over 50 beautifully handcrafted components right out of the box. Furthermore, a community repository is planned where users can create and share their own components, ensuring the right component is always available for the next app.

These components are combined using a React-style declarative approach, making code more readable and easier to maintain. Attributes can be bound between components using Vue-style bindings, resulting in concise and understandable code.

Finally, Rio apps can run both locally and on the web without any changes to the codebase, with the only difference being how the app is started.

Pros:

Rio manages both the front-end and back-end seamlessly, making them virtually invisible to the user.
Rio utilizes modern Python features, including type annotations and asynchronous programming. This ensures code remains clean and maintainable, and aids your code editor in providing code completions and type checking.
As Rio runs on Python, you can directly connect to the running process with a debugger, simplifying the process of identifying and fixing bugs in your code.
Rio has its own layout system, so there’s no need for HTML, CSS or JavaScript.

Cons:

Unable to create custom fundamental components in HTML/CSS/JavaScript at this time.
No production-ready release yet, so breaking changes may occur.
Rio has a smaller community than some of the other packages, making it harder to find resources about it.

Conclusion

Choosing the right framework for building web applications in python depends on the specific requirements and context of your project, including your familiarity with different programming languages, the complexity of the application, and the need for customization or enterprise features. Here’s a brief summary of which framework works best for which domain:

Streamlit

Best For: Rapid prototyping for very small data science, and machine learning applications.

Strengths: Extremely simple and intuitive for Python developers, quick to set up, ideal for creating interactive data visualizations and dashboards without needing extensive knowledge of web development.

Limitations: Limited flexibility, not suitable for highly customized or a little bit more complex applications.

Plotly Dash

Best For: Enterprise-level applications, data visualization, and projects requiring high customization.

Strengths: Highly customizable, supports complex interactive visualizations, reactive applications, extensive documentation and community support.

Limitations: Requires knowledge of HTML, CSS, and JavaScript for advanced features, more verbose and requires more effort for simple applications.

Reflex

Best For: Full-stack web applications where developers prefer to work solely with Python.

Strengths: Enables writing frontend and backend entirely in Python, state-driven model familiar to React developers, supports asynchronous tasks and secure session management.

Limitations: Not yet production-ready, potential for breaking changes, debugging can be challenging due to JavaScript compilation and a lack of good dev tools.

Rio

Best For: Developers seeking to build modern full-stack web apps with a strong preference for Python-only development.

Strengths: Manages both front-end and back-end in Python, eliminates the need for CSS/JavaScript, utilizes modern Python features, easy debugging and supports asynchronous tasks and secure session management.

Limitations: Limited ability to create custom components with HTML/CSS/JavaScript, not yet production-ready, smaller community.

Recommendations by Domain

Small Projects: Streamlit is ideal for its simplicity and ease of use, making it perfect for data scientists who want to create interactive applications quickly like PoCs.

Enterprise and Highly Customized Dashboard Applications: Plotly Dash offers the customization and advanced features necessary for enterprise-level applications and complex data visualizations.

Full-Stack Python Web Development: Reflex and Rio are excellent choices for developers who want to build full-stack applications without leaving the Python ecosystem. Reflex is more mature with features like ORM and user authentication, while Rio, though new, emphasizes simplicity, seamless Python integration, and aims to deliver big changes in performance and customization.

By selecting the appropriate framework based on your project’s needs and your own development skills, you can efficiently create robust and interactive web applications.

Rio: WebApps in pure Python. No JavaScript, HTML and CSS needed!

Sn3llius — Sun, 19 May 2024 09:37:32 +0000

Hi everyone! We're excited to announce that our reactive web UI framework is now public. This project has been in the works for quite some time, and we're excited to share it with you. Feel free to check it out and share your feedback!

What My Project Does

Rio is a brand new GUI framework designed to let you create modern web apps with just a few lines of Python. Our goal is to simplify web and app development, allowing you to focus on what matters most instead of getting stuck on complicated user interface details.

We achieve this by adhering to the core principles of Python that we all know and love. Python is meant to be simple and concise, and Rio embodies this philosophy. There's no need to learn additional languages like HTML, CSS, or JavaScript, as all UI, logic, components, and even layout are managed entirely in Python. Moreover, there's no separation between front-end and back-end; Rio transparently handles all communication for you.

Showcase

Rio doesn't just serve HTML templates like you might be used to from frameworks like Flask. In Rio you define components as simple dataclasses with a React/Flutter style build method. Rio continuously watches your attributes for changes and updates the UI as necessary.

class MyComponent(rio.Component):
    clicks: int = 0

    def _on_press(self) -> None:
        self.clicks += 1

    def build(self) -> rio.Component:
        return rio.Column(
            rio.Button('Click me', on_press=self._on_press),
            rio.Text(f'You clicked the button {self.clicks} time(s)'),
        )

app = rio.App(build=MyComponent)
app.run_in_browser()

Notice how there is no need for any explicit HTTP requests. In fact there isn't even a distinction between frontend and backend. Rio handles all communication transparently for you. Unlike ancient libraries like tkinter, Rio ships with over 50 builtin components in Google's Material Design. Moreover the same exact codebase can be used for both local apps and websites.

Key Features

Full-Stack Web Development: Rio handles front-end and backend for you. In fact, you won't even notice they exist. Create your UI, and Rio will take care of the rest.
Python Native: Rio apps are written in 100% Python, meaning you don't need to write a single line of CSS or JavaScript.
Modern Python: We embrace modern Python features, such as type annotations and asynchrony. This keeps your code clean and maintainable, and helps your code editor help you out with code completions and type checking.
Python Debugger Compatible: Since Rio runs on Python, you can connect directly to the running process with a debugger. This makes it easy to identify and fix bugs in your code.
Declarative Interface: Rio apps are built using reusable components, inspired by react, flutter & vue. They're declaratively combined to create modular and maintainable UIs.
Batteries included: Over 50 builtin components based on Google's Material Design

Target Audience

Rio is perfect for developers who want to create web apps without spending time learning new languages. It’s also ideal for those who want to build modern, professional-looking apps without stressing over the details

We Want Your Feedback!

We welcome your thoughts and questions in the comments! If you like the project, please give us a star on GitHub to show your support and help us continue improving it.

DEV Community: Sn3llius

Difoosion, a Simple Web-Interface for Stable Diffusion Models

Get Started

1. Clone this repository

2. Install the project and its dependencies (Use a venv if you like)

3. Run the interface

4. Install Models

5. Get cracking!

Tech Stack

Caveats

Sources

A quick comparison: Streamlit, Dash, Reflex and Rio

Streamlit

Plotly Dash

Reflex

Rio

Conclusion

Streamlit

Plotly Dash

Reflex

Rio

Recommendations by Domain

Links

Rio: WebApps in pure Python. No JavaScript, HTML and CSS needed!

What My Project Does

Showcase

Key Features

Target Audience

We Want Your Feedback!