stable-diffusion-react-nextjs-mui-pwa

stable-diffusion-react-nextjs-mui-pwa is an open-source Progressive Web App front end for Stable Diffusion, built with React, Next.js, and Material UI, that provides a web interface for generating AI images from text prompts. It supports multiple backends: a local Docker container via docker-diffusers-api, a local Python installation, or Banana.dev serverless GPU containers. The project is MIT-licensed by Gadi Cohen and the live demo runs at kiri.art.

What is stable-diffusion-react-nextjs-mui-pwa?

This template is a PWA web application that lets users run Stable Diffusion image-generation queries from a browser. The UI is rendered with React running on Next.js and styled with Material UI components. It accepts a text prompt as input and returns an AI-generated image, with the actual inference executed on a configurable backend. Author Gadi Cohen created the project in 2022 and provides it under the MIT license, with the production demo available at kiri.art.

Key Features

This template provides a functional web UI and multiple deployment options out of the box. The front end is a React/Next.js app with Material UI, and the project includes PWA support, registration, and i18n.

• Multiple Stable Diffusion backends — Run inference locally with the recommended Docker image (docker-diffusers-api), via a local Python exec (set STABLE_DIFFUSION_HOME), or on Banana.dev serverless GPU containers (set BANANA_API_KEY and BANANA_MODEL_KEY).
• Progressive Web App — Built on React, Next.js, and Material UI, so it is installable and works as a capped web app.
• Registration and credit system — In production, sign-up/login and credit-based usage are enabled by default; toggle with REQUIRE_REGISTRATION and NEXT_PUBLIC_REQUIRE_REGISTRATION (the latter is compiled at build time).
• Internationalization with Lingui — Uses Next.js built-in i18n routing with Lingui for translations; extract strings with yarn i18n:extract, edit locale message files, and compile before deploy.
• Live demo — The project is running at kiri.art, so you can try it before self-hosting.
• MIT-licensed and open source — Free to use, modify, and contribute to via pull requests.

Who is it for?

This template is aimed at developers and hobbyists who want a web interface to generate images with Stable Diffusion without building the front end themselves.

• Web developers — who want a ready-made React/Next.js front end for Stable Diffusion without writing UI code from scratch.
• Developers with Docker experience — who want to run the recommended local Docker backend for free on their own machine.
• Self-hosters — who want a private Stable Diffusion interface and can disable registration by setting both registration vars to 0 before building.
• Serverless deployers — who want to run the app without local GPU hardware using Banana.dev and pay per use (roughly $1 per 200 requests).

What can you do with it?

With this template, you can run Stable Diffusion from a web browser, use an existing local GPU, deploy to serverless GPU, or contribute translations.

• Run Stable Diffusion from a web UI — Send prompts through a Material UI interface and get generated images back on any of the supported backends.
• Use your existing GPU — Point the Local Exec target at a local Stable Diffusion install by setting STABLE_DIFFUSION_HOME.
• Deploy with serverless GPU — Configure Banana.dev keys with BANANA_API_KEY, BANANA_MODEL_KEY, and BANANA_MODEL_KEY_SD_v1_5 to run without owning a GPU.
• Localize the app — Add new language translations using the Lingui extract and compile workflow.

How does it work?

Cloning the repository and running yarn dev starts the Next.js development server, but you must also configure at least one Stable Diffusion destination. The app then sends prompt requests to that backend: the recommended local Docker image, a local Python script via Node spawn, or Banana.dev serverless GPU containers. Environment variables determine which backend is active and hold the needed API keys.

Pricing

The template itself is free and MIT-licensed. Using Banana.dev serverless GPU for inference has usage-based costs, with the author pricing roughly $1 per 200 requests under default parameters.

FAQ

Why do I need a GPU to use this?

Not necessarily. The app can run locally with a Docker container if you have a GPU, or with a local Python install if you already have Stable Diffusion. For setups without a GPU, Banana.dev serverless GPU can be used with API keys, so you only need an internet connection.

Is registration always required?

Registration is enabled by default only in production. In development, you can enable it by setting REQUIRE_REGISTRATION=1 and NEXT_PUBLIC_REQUIRE_REGISTRATION=1. For a private production deployment, set NEXT_PUBLIC_REQUIRE_REGISTRATION=0 before building.

What environment variables do I need?

That depends on the backend. For local exec, set STABLE_DIFFUSION_HOME. For Banana.dev, set BANANA_API_KEY and BANANA_MODEL_KEY, plus BANANA_MODEL_KEY_SD_v1_5 if you deploy that model. The app uses these to route requests.

How do I add translations?

Run yarn i18n:extract to extract strings from the app, send the resulting locales/*/messages.po files to translators, then run yarn i18n:compile before deploying. The project uses Lingui with Next.js i18n routing.

Can I use this in my own project?

Yes, because it is MIT-licensed. You can copy, modify, and redistribute the code freely, subject to the license terms. The author welcomes pull requests.