Skip to content

Studio.ai - a friendly stable diffusion space for beginners. You can experiment different Generative AI models by inputting text prompts to generate high-resolution images.

License

Notifications You must be signed in to change notification settings

Vykp00/stable-diffusion-studio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Studio AI logo

Studio.ai Current Version Live Demo

Node Version Npm Version React Version Python Version Flask Version Mircroft Azure Redis PostgreSQL

Studio.ai is a friendly stable diffusion space for beginners. You can experiment with different Generative AI models by inputting text prompts to generate high-resolution images. Registered users can:

Access Studio.ai here

studio-ai-frontend image-sample image-sample

Table Of Content

Support Browsers

  • Firefox

Note: Brave is not currently supported. I'm working on the issue at the moment! 💻 ☕

Manual

  1. When you first access Studio.ai, You will see the guest screen.

Guest sample

  1. Next, you'll need to sign up by filling your email and passwords.

Sign up sample

Once you've successfully signed up, you will be redirected to the Log in screen. After entering the correct emails and passwords, you will see the main homepage where you can finally try out the AI models.

  1. First, enter the text prompt that describe the images that you want to generate. You can be as specific as possible like in the example or just as simple as "a red fox". The key is to experiments. Then choose the models that you want to try out.

Model form sample

  1. Now, click Generate and wait ⌛ ... Note that if the Loading... is done yet your image is not shown, it means the AI model server might be overloaded due to high traffic, you can try it later or use different AI models.

Loading sample

  1. Tadaa! ✨ Your image is here. Now you can add it to your gallery or try a new prompt if you're not happy with the results. Keep in mind the previous image, and its metadata will be lost if you don't add it to your gallery before generating a new one. You can find all your saved images at My Gallery

Result sample

Gallery sample



Tech Stack

  • React
  • Flask
  • Bootstrap and React Bootstrap
  • PostgreSQL
  • Redis
  • Azure Blob Storage

Development

If you want to develop or modify the code locally. Follow the following instructions. If you want to contribute to this project. Please refer to the support links section.

Pre-requisites
First, make sure that you have the following prerequisites installed:

Setting up Clientside
  1. Fork or clone the repository and install dependencies for server side
git clone https://github.com/Vykp00/stable-diffusion-studio.git
  1. Now navigate to the client folder and set up its dependencies by running the package.json file
npm install

After it's successfully installed, create a .env.local file and add the following text:

REACT_APP_PROXY_DOMAIN=http://127.0.0.1:5000

This will help React client side to communicate with the Flask server side

  1. Now you can test the front end application by running. If it's running, you can move on to setting up the server
npm start
Setting up Server side
1. Next, install all dependencies for your server side. Remember to activate your [virtual environment](https://docs.python.org/3.10/library/venv.html)
pip install -r requirements. txt
  1. If everything is ok, now we need to configure your server to communicate with your database PostgreSQL, Redis, Microsoft Azure Storage and HuggingFace (for calling model API). First, create a Postgres database, here you should get your URI for SQLAlchemy to connect to your database: postgresql://<USERNAME>:<PASSWORD>@localhost/<DATABASE_NAME>. For Redis, it should be the address when you run redis-cli (by default, it will be 127.0.0.1:6379)

  2. Then, create your Azure Blob Storage. Now you need to set credentials to connect to your blob storage. You can either use Passwordless or Connection Strings (I'm using Connection Strings since you won't need to install Azure CLI)

  3. Now all it left is your TOKEN KEY from your Hugging Face account. If you do not submit your API token when sending requests to the API, you will not be able to run inference on your private models. You can get your API token from your profile settings

  4. Now all you need to .env file on your server folder. This file will store all your secret keys, API tokens that will be used to configure your server. You should not share this file to public so make sure the file is listed in your .gitignore

SDAPI_TOKEN="YOUR-HUGGINGFACE-API-TOKEN"
SECRET_KEY="YOUR-SECRET-KEY" # your secret password for the application
SQLALCHEMY_DATABASE_URI="postgresql://<USERNAME>:<PASSWORD>@localhost/<DATABASE_NAME>"
SESSION_REDIS="redis://[YOUR-REDIS-URL]"
AZURE_STORAGE_CONNECTION_STRING="YOUR-AZURE-CONNECTION-STRING"
  1. Now you're all set. Run the server side by running this from server directory:
flask run

OR from the client directory

cd .. && npm run start-server

You should also start the client side too:

npm start

Now, you're free to test out different models of Stable Diffusion privately studio-ai-mygallery

Deployment

Before deployment your application, you need to build your static folder on the client side:

npm run build

There are many options to host your React Flask App such as Render, Vercel, Railway. I'm using Render since you can deploy all parts in one place.

Render

  1. Create PostgreSQL and Redis database on Render.
  2. Deploy Flask Server Side as web service. Follow this instructions and make sure your set Root Directory as your server folder in the setting. You also need to specify your Python version PYTHON_VERSION, and other variables that were stored on your .env file. This time replace your local PostgreSQL and Redis url with Internal Render urls.

**Important Notes: **

  • Your environment variable values should be plain text without string syntax " " like in your .env file.
  • Edit PostgreSQL Render url to postgresql://... instead of postgres://... otherwise SQLAlchemy cannot connect to PostgreSQl. See details issue

Render-Flask

  1. Once your Server web service is live, you can now move on deploying your React Static Site and make sure your set Root Directory as your client folder in the setting. Similar to Flask Server, you need to specify NODE_VERSION and REACT_APP_PROXY_DOMAIN in your environmental variables but this time your proxy domain should be the domain of your Flask web service on Render.

**Important Notes: **

  • Use npm run build instead of yarn build if you have issue with yarn.lock file error.

License

The Studio.ai web application is licensed under the terms of the MIT License license and is available for free.

Support Links

About

Studio.ai - a friendly stable diffusion space for beginners. You can experiment different Generative AI models by inputting text prompts to generate high-resolution images.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published