PWA Web App front end for Stable Diffusion, on React/NextJS with Material UI

Overview

stable-diffusion-react-nextjs-mui-pwa

PWA Web App front end for Stable Diffusion, on React/NextJS with Material UI

Copyright (c) 2022 by Gadi Cohen [email protected]. MIT Licensed.

sd-mui.vercel.app

New Project in Active Development (since Aug 31st, 2022)

super dog

  • Web interface to run Stable Diffusion queries on:
    • Local PC / local installation
    • Banana.dev serverless GPU containers (roughly $1 = 200 requests, YMMV)
    • Local banana.dev docker container (see docs/banana-local.md)
    • Others?

Why? Make this fun stuff more accessible to web developers and friends :) See the live demo, run on your own PC for free, or deploy!

If you have a background in web dev / dev ops, and have wanted to experiment a bit with machine learning / latent diffusion (AI image generation), this is a great project to get involved in :)

Doing this in my very limited spare time, PRs more likely to get responses than issues, but try me :)

To Develop

  1. Clone repo
  2. yarn install
  3. edit .env.local (or just set local vars - per below)
  4. yarn dev

Note: you'll need at least one destination / target from the list below where Stable Diffusion will run.

Destinations / Targets

  • Local Exec

    • If you already have Stable Diffusion installed locally, this will run the Python script via node spawn. Set STABLE_DIFFUSION_HOME (to e.g. /home/user/src/stable-diffusion).
  • Local BananaDev docker image

  • Remote BananaDev container (serverless GPU)

REQUIRE_REGISTRATION

By default, registration (i.e. sign up, log in, use credits) is required in production only. You can turn it on in development (to test the auth flow), or turn it off in production (if you're deploying somewhere private).

REQUIRE_REGISTRATION=1
NEXT_PUBLIC_REQUIRE_REGISTRATION=1

Note: NEXT_PUBLIC_ vars are compiled at build time! So if you want to deploy to production without requiring registration, set it to 0 before building and deploying.

TODO

  • Docker image for super easy start
  • Vercel clone button

i18n

We use NextJS's built-in i18n routing and Lingui for translations.

Useful commands:

  • yarn i18n:extract to extract strings.
  • Send locales/*/messages.po to translators, resave.
  • yarn i18n:compile before deploy.

See also lingui.config.js and locales dir.

Refs

You might also like...
Human resource management system front-end codes with React.
Human resource management system front-end codes with React.

Human resource management system front-end codes with React.

Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.

21_MERN_GoogleBookSearchEngine Task Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engin

Projeto final do Modulo 1(Front-end - React) do curso DevInHouse - Turma Teltec e Bry

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Front-end em React JS para consumir a PokéApi v2
Front-end em React JS para consumir a PokéApi v2

EM DESENVOLVIMENTO! 👩‍💻 Pokemon API Sobre Requisitos Como Rodar o Projeto? Resultados de Desenvolvimento Referências Sobre A ideia central desse pro

An extremely lightweight, 0.5kb experimental, React-like front-end library

What is Reval.js? Reval.js is an experimental, React-like front-end library used to create small-scale web apps faster and better-structured. It is li

This is a NFT minting front-end with React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

a React front-end implementation from the TMDB API.
a React front-end implementation from the TMDB API.

Films-Challenge Este projeto foi desenvolvido como desafio para uma vaga de emprego, em uma agência de publicidade, foi solicitado que eu fizesse uma

Desarrollo de front-end con react y patrón de arquitectura Redux.

Introduction TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. Getting S

Amazing Web3 Front End Design using React + CSS and Bootstrap.

🤩🥳This repo contains all the files to follow along and implement the Amazing Web3 Front End Design using React + CSS and Bootstrap.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Jose Furtado 9 Jul 10, 2022
A weather app that was built using weather APIs and is a PWA web app

This is a weather app that was built using weather APIs and is a PWA web app.

Milan Sachani 6 Aug 12, 2022
A front-end clone project of the Spotify Web Player. The project was created using React.

Spotify Web Player Clone A front-end clone project of the Spotify Web Player. The project was created using React. This is my first big React.js proje

Oğuzhan ULUKAYA 175 Sep 13, 2022
Front-end of a web application, developed by using ReactJS library.

☕️ Starducks Client ?? Client ?? Server Description This repository is created with React JS library to list, filter and search coffee data consumed f

Damla Köksal 4 Apr 22, 2022
Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Brian Bixby 2 Jun 8, 2022
The app is the front end version of the car booking services

The app is the front end version of the car booking services. Built with react exclusively. The app fetches data from the api created (link on the readme. The app allows you to reserve a luxury car of your choice. If you are an admin, you can add and delete cars in the app.

Affaxed Kiprotich 8 Aug 28, 2022
Front End for file sharing app built with the MERN Stack

zed-sharing-react Front End for file sharing app built with the MERN Stack Report Bug · Request Feature About The Project This is the Front End for Ze

Quavo 21 Sep 9, 2022
Engin Demiroğ, Java + React bootcamp HRMS project front-end codes (React JS).

HRMS-front-end Engin Demiroğ, Java + React bootcamp HRMS project front-end codes. Spring Boot Back-end Project Job Advertisements Filters Pagination R

Yusuf Gökmen Arısoy 4 Apr 27, 2022
This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Baraka Mukelenga 4 Aug 9, 2021
React Front End for Gallery API

React Front End for Gallery API

null 3 Sep 10, 2022