daveschumaker / artbot-for-stable-diffusion

A front-end GUI for interacting with the AI Horde / Stable Diffusion distributed cluster

ArtBot for Stable Diffusion

See it in action: https://tinybots.net/artbot

Table of Contents

• Intro
• Setup
  • Requirements
  • Installing
  • Environmental variables
• Usage
  • Development
  • Production
• Troubleshooting
  • Windows issues
  • Other issues
• Contributions
• License

Intro

ArtBot is an unofficial front-end web client designed for interacting with the Stable Horde distributed cluster -- a group of GPUs running Stable Diffusion whose processing time has been kindly donated by an enthusiastic community of volunteers.

ArtBot is built using Next.js 13 and Typescript. It with was created as a side project in order to experiment with various client-side technologies, such as IndexedDB and LocalStorage APIs. These APIs allow you to securely and privately store the AI generated images you've created with the cluster within your own browser.

The UI components are custom built using a combination of Styled Components and Tailwind CSS, with more recent efforts strictly focused on using Tailwind CSS. The long term goal is to completely remove Styled Components from the code base.

ArtBot makes use of icons from Tabler.

Setup

Requirements

• node >= 18.0.0
• npm >= 9.0.0

Most of these steps should be applicable to Linux / MacOS / Windows environments.

Installing various versions of Node.js on your machine can be tricky. I am a big fan of nvm, which allows you to run multiple isolated versions of Node.js on your machine with ease.

Using nvm, you can install Node like this:

> nvm install v18.16.0
> nvm alias default node

Installing

Once you have your Node.js environment setup, you can clone this repository and install the required packages. Depending on the specs of your machine and speed of your internet connection, installing all packages may take a minute or two.

> git clone https://github.com/daveschumaker/artbot-for-stable-diffusion
> cd artbot-for-stable-diffusion
> npm install

Environmental variables

A postinstall script will automatically run that creates a blank .env file in the root of the project folder. You don't need to add anything to it, but it's presence is required by the dotenv package.

While not required, the code base references a few environmental variables in various places. These are generally endpoints for messaging, telemetry services that I run, or local data storage related to model counts and image generation totals.

Usage

Development

IMPORTANT: Attempting to run the app this way on a Windows machine will not work. This is due to passing environment variables to the web app with the npm scripts. See the troubleshooting section for more information.

Alright, you should now be able to run the ArtBot web app! To run in development mode (which uses NextJS's hot reloading feature -- where you can see updates live on the site as you make changes)

> npm run dev

Then, open your browser and visit http://localhost:3000, you should now be able to immediately make image requests to the Stable Horde. Head over to http://localhost:3000/artbot/settings and enter your Stable Horde API key for faster generation times.

Production

If you want to run this in a production type of environment, you'll first need to kick off a build and then run as you normally would run a Node.JS app.

> npm run build
> npm run start

On TinyBots, my web server for hosting ArtBot, I use PM2 in order to persist the application and automatically restart after crashes or reboots. You can modify PM2 related settings inside ecosystem.config.js.

Additionally, you can start and stop PM2 using:

> npm run pm2:start-prod
> npm run pm2:stop-prod

Troubleshooting

Windows issues

As mentioned earlier, attempting to use npm run dev or npm run start within a Windows environment will result in an error. One possible solution to this is to remove the environment variable. In the case of npm run dev, that would look like this.

• Open package.json
• Change the scripts/dev line to remove PORT=3000 from the script:

> npm run update:build-id && node server.js

• Save package.json and attempt to run again: > npm run dev
• It should now work (the web app will default in port 3000, which is automatically set inside server.js

Other issues

For other issues not mentioned here, feel free to open a new issue on Github or visit the ArtBot feedback channel on the Stable Horde Discord server.

Contributions

Contributions are very welcome! General guidelines are as follows:

1. Fork this repository
2. Cut a new feature branch. e.g., > git checkout -b my-cool-new-feature
3. Make any necessary changes.
4. Open a new pull request based on your feature branch.

Let me know if you have any questions. I'm more than happy to help.

License

See LICENSE.md

artbot-for-stable-diffusion's Issues

Model Info bug: multiple trigger words run together with no spaces

Reported via Discord:
https://discord.com/channels/781145214752129095/1038867597543882894/1068456596247679098

Small bug in the model info, when there are lots of trigger words, they are all concatenated without spaces

Better documentation and setup instructions.

UX: When error occurs on pending items page, add a button to edit the prompt and preserve all image creation settings.

Via Discord:
https://discord.com/channels/781145214752129095/1020695869927981086/1063423467984257024

Improvements around "use worker / use all workers" buttons.

Tooltip / docs suggestion... put one in to explain what the "use worker" button is about or give it a better label... I find it very confusing. It seems to default to unticked which implies that worker will not be used. Clicking it changes it to "unset worker" with a ticked box ... so is that using "unset" as a verb or adjective? Experience shows that "unset" is probably a state indicator (adjective) in this case. My brain defaults to "the label on a button is what will happen when it is pushed", and that is the standard with most UIs to be fair. The tick box is just plain confusing IMHO. Also does clicking that button when it says "use worker" it mean "use only this worker" or "use this worker preferentially? I may be overthinking the whole situation

Via Discord: https://discord.com/channels/781145214752129095/1038867597543882894/1085178701580353696

request for better filename ( "save-as" and/or download-PNG )

when performing save-as (save image as), generic filename of index.webp or download.webp is used.
when clicking "[ download PNG ]" it simply uses the generation text.

It may be useful to re-use some hash or job id in addition to the generation text.
e.g.

• https://tinybots.net/artbot/image/a46223b9-c732-4db1-88db-1441b6b01070 ---> i_don_t_like_batteries_in_my_ears_a46223b9-c732-4db1-88db-1441b6b01070.png

thanks for the awesomeness!!

Add additional information to the worker list

The worker list here could have additional useful/interesting information added about workers: https://tinybots.net/artbot/info/workers

• info - e.g. "Quadro P4000 8 GB"
• nsfw - i.e. Does the worker allow NSFW images?
• painting - i.e. Does the worker allow inpainting requests?
• post-processing - i.e. Does the worker allow post processing requests?
• trusted - i.e. Is the worker trusted?

All of these are in the worker data returned from the API endpoint here: https://stablehorde.net/api/v2/workers

Small extract example of which is here:

[
   {
      "max_pixels":262144,
      "megapixelsteps_generated":945099.0,
      "img2img":true,
      "painting":false,
      "post-processing":true,
      "requests_fulfilled":104860,
      "kudos_rewards":1118794.0,
      "kudos_details":{
         "generated":835725.0,
         "uptime":288350
      },
      "performance":"0.3 megapixelsteps per second",
      "threads":1,
      "uptime":3596070,
      "maintenance_mode":false,
      "info":"Quadro P4000 8 GB",
      "nsfw":true,
      "trusted":false,
      "flagged":false,
      "uncompleted_jobs":416,
      "models":[
         "Yiffy",
         "stable_diffusion",
         "Dreamshaper",
         "Realistic Vision",
         "ACertainThing",
         "Deliberate",
         "waifu_diffusion",
         "Liberty",
         "Anything Diffusion",
         "Dreamlike Photoreal",
         "PPP",
         "mo-di-diffusion",
         "Midjourney Diffusion"
      ],
      "team":{
         "name":null,
         "id":null
      },
      "bridge_agent":"AI Horde Worker:14:https://github.com/db0/AI-Horde-Worker",
      "name":"FiFo-001",
      "id":"23499b5a-48d3-40a1-8ddb-75cd6e576e1f",
      "online":true
   },

Bug: Create page sometimes forgets previous values, even when "save data" set to true.

Report via Discord:
https://discord.com/channels/781145214752129095/1038867597543882894/1062033885115981865

why is it that when I generate images, then it will take me to the hourglass section, the prompt vanishes? its not like this before

the cfg scale and steps also reset randomly

also, the negative prompt always reverts back to the default after I generate an image

If i copy from results then nagative promts get copied in normal promts section after ###

title and i am using it on mobile

ERROR

hi , i download the zip source and try this npm run dev then got this error :

[email protected] dev
npm run update:build-id && PORT=3000 node server.js

[email protected] update:build-id
node ./x-build-scripts/updateBuildId.js

'PORT' is not recognized as an internal or external command,
operable program or batch file.

please help

Feature request: Bulk delete option

Right now, it's cumbersome to delete multiple images and users can only delete one image at a time. Add support for selecting multiple images.

UX: Save model hash and version number to each image request (and display this data on image details page).

On Stable Horde, we're getting to the point where lots of new models are updated. This can significantly change how images are created when using the exact same creation parameters. Highlight this information so people can more accurately reproduce images using specific models (should they choose).

Feature: Implement tagging system

The tag table is already setup in IndexDB. Just need to come up with UI elements to support it. (add tags to existing images, filter images by tags, etc). Will probably need to create an additional table to manage the tag relationships, rather than cramming it into the existing completed items table.

Something like:
id, image-id, tag-id.

Then look ups can be super quick: e.g., show me all images tagged with x or show all tags for this image

UX: browser gets "out of memory" when browsing in the gallery in details view via arrow keys

when browsing the details view in the gallery via the left-arrow and right-arrow keys, I get an "out of memory" error and need to reload the page just after a few images.
It does not happen when I use the arrow keys in any other window where I can browse images like in the image overlay "above" the gallery or when I browse through the gallery pages as such.

Maybe it is related to my browser, but I cannot quickly test it somewhere else at the moment.
I currently use Opera (Chrome based) and have about 5.000 pictures in my gallery. maybe these factors are the reason ;)

The error message looks like this: https://imgur.com/a/WIbciyQ

UPDATE: It seems as if the error is connected to the huge amount of "related images" that get loaded when browsing.
To me it seems that even totally unrelated images (different prompts) are shown there as "related", maybe because they all were rendered with the same model?

UPDATE #2: It seems to be as already described: the memory problem does occur more early on images with an extremely large amount of "related images" (sometimes more than 300 related images). I tested it with a series of only a few related images present (about 50 to 60) and the error did happen after quite a while of quickly browsing through the pictures.

UX: when browsing the gallery, the forward/backward navigational buttons are jumping up/down

First: I love this UI, thanks a lot for all the efforts! :) :)

I came across a small annoyance that can be described as this:

When experimenting with many slighty modified or different prompts in a very short period of time, it can happen that the gallery contains many pictures with rating stars and many without rating stars which are mixing up a lot.

When browsing through the gallery, the navigational forwards/backwards buttons are jumping up/down, depending on if I am seeing the rating stars or not. When the rating stars are present, the buttons jump up and when there is no rating possible, they come back down again. This prevents me from quickly stepping through a series of most recent pictures in the gallery by rapidly clicking on the respective buttons.

Over time the situation remedies itself because the rating stars diappear from the pictures after a while. Then the browsing is a stable experience ;)

Can the position of the navigation be fixed somehow?
thanks for reading :)

Feature: Dual panel UI on main Create Page for big screens

ArtBot has traditionally been designed as a "mobile first" experience, but there are still a ton of users (nearly 2/3, according to GA) who browse via a desktop experience. The create page looks ridiculous on a wide screen display.

Use a more traditional multi-column layout, as seen on other UIs like A1111, Stable UI and AAAI.

suggestions to make site more better

1.add diffrent tab for inpainting
2.advanced option opened by default or a option to enable it
3.option to put custom Image orientation

Modal for rating own images only has 5 stars instead of 6.

Reported via Discord:
https://discord.com/channels/781145214752129095/1038867597543882894/1068425053202546759

UX: Contradicting key bindings in gallery browsing

switching through the pictures of the gallery can be done by clicking on the left/right arrows beside the picture or by pressing the left/right arrow key on the keyboard.

UI Buttons clicking:

• clicking on the left navigational arrow button leads to the next older picture.
• clicking on the right navigational arrow button leads to the next newer picture.

Keyboard key press:

• pressing the left arrow key leads to the next newer picture
• pressing the right arrow key leads to the next older picture

so at least to me, these navigational alternative feel contradicting to me ;)

UX: Use a specific worker should mention that worker ID, not name is required

The most obvious thing is to enter the worker name into this field:

However the worker ID is required.

If we could pick a worker from a list of existing ones in addition to entering a custom ID, that would be cherry on top.

Bug: After importing image, it’s no longer possible to click on bottom navbar button

Feature: Multi-control net generation

Similar to our approach of

use all models
use all samplers
use multi-steps

Allow option to use all / many control net options for comparison.

Use all models / Multi-model select

1 bug I think and 1 feature req

For use all models -- I think this has broken in the last few days? When using only getting 1 single generation, despite (43) models showing.

For multi model select -- It would be great if it didn't collapse after selecting each time. ( also I think after this generates the multi model checkbox y/n isn't preserved like other settings, when that is on)

An awesome interface for sure tho! Cheers

Add character count and warning when approaching 256 chars, to warn about prompt being cut off.

Bug: Retrying pending item with error reverts image to 512x512

Bug: Multi-model select and use-all-samplers

Zedsquared: interaction between multi model select and " use all samplers" :  if I :
[8:19 AM]Zedsquared: 1) enable multi model select, select four or five models
[8:20 AM]Zedsquared: 2) toggle off multi model select, toggle on "use all models"
[8:20 AM]Zedsquared: 3) generate:  I get multi model with just one sampler (k_euler_a in this case)
[8:21 AM]Zedsquared: do'h 2) is toggle off multi model (so only one shows) , toggle on "use all sampleers"
[8:22 AM]Zedsquared: So basically, looks like switching off multi model, then on "all samplers" results in multi model behavior when screen state suggests it should be single model, multi sampler instead

Via: https://discord.com/channels/781145214752129095/1038867597543882894/1085220632196821113

Bug: "Attached to previous job" won't go away

hi! i did some img2img. now im doing plain text2img but this message wont go away. i click remove attachment but when i go to images, or pending images or anything else it comes back. refreshing the page or just closing artbot and opening it again doesnt seem to work.

Via Discord: https://discord.com/channels/781145214752129095/1038867597543882894/1085676558666174594

UX: Add download button to image modal

Feedback via Discord:
https://discord.com/channels/781145214752129095/1063461158629150770

on a side note, can we get an option to download individual images like in Stable UI?

A download button currently exists on the image details page, but this should also be added to the image modal as well.

trusted_workers param always defaults to true

I was running a Google Colab worker with an exotic model, that noone else ran at that moment and I wondered why it wouldn't pick up my own submissions from Artbot (I am considered untrusted still - using Stable UI I was able to submit to my own worker).

I found that every request from Artbot is going out with trusted_workers set to true, although the localStorage AppSettings entry useTrusted is set to false.

I think the bug is in the file /api/createImage.ts line 64 where it defaults to true.
What you probably wanted to do is something like

const useTrusted = AppSettings.get('useTrusted') === undefined ? true : AppSettings.get('useTrusted')

If you want, I can open a PR 🙂

Image downloading improvements: better filenames, update JSON data

Suggestion/request: something to differentiate images and associates then with the data in the json files. I hit the 'use all models' button, and now I can't match up the files with the metadata because the prompts are all the same. Each filename beginning with a unique id that's also in the metadata would be helpful. Even just including the md5 or some such of the file.

Via Discord: https://discord.com/channels/781145214752129095/1038867597543882894/1085528867126657044

Bug: Multi-model select dropdown is wonky on mobile devices

Speaking of multi-model, every time I open that drop-down on my tablet or phone, it scrolls the page and the top item in the menu gets cut off... Not scrolling would probably be the easiest way to deal with it, let the user scroll if necessary. It makes it very hard to select a bunch of models if I want only ~half of them instead of all

Via Discord: https://discord.com/channels/781145214752129095/1038867597543882894/1085604055524573244

export doesn't work on Firefox mobile

I can't export. All I get is a zip file with a single file containing an empty array.
artbot-image-export(1).zip

I'm using Firefox on an Android tablet

Feature request: Option to not switch to the Pending Tab

I would like an option to not automatically switch to the Pending tab when I click Create.

"Stable Horde API Error: This sampler is not supported in this mode"

Reported on Discord:

1. I have a picture made in Sampler: dpmsolver Model: stable_diffusion_2.0
2. I click "copy prompt"
3. After that, the filled form opens - with "Sampler: dpmsolver"
4. I choose several other models, and start generating
5. I get an error: "Stable Horde API Error: This sampler is not supported in this mode"

Perhaps, in a situation where the selected sampler is not suitable for all models, it is worth resetting to an empty value and suggesting that the user fill it in himself? (or reset to some default and display text next to the "Create" button.. "The selected sampler does not fit all models, do you want to continue with the default one?" )

Stable Horde API error when using sampler k_heun and more than 50 steps

When I use the Sampler k_heun and the parameter Steps is greater than 50, e.g. 60, I get the following error:
Error: Stable Horde API error: For requests over 1024x1024 or over 100 steps, the client needs to already have the required kudos. This request requires 25.98 kudos to fulfil.

When another Sampler is used or the parameter Steps is 50 (or less), everything works as intended.

The Image orientation is square, all created .webp images are 512 x 512.

Thank you very much for this fine piece of software and your time reading this!

Add model trigger to 'Use all available models'

Feature request: Persist advanced option panel open state

Add support for remembering the open / close state of the Advanced Options Panel on the create page.

Via #3

Bug: "random" option is missing from model dropdown.

A recent change inadvertently removed the random option from the models dropdown.

Feature request: Custom image dimensions

Currently, the site supports a few preset image orientations that lets users quickly get up and running (e.g., landscape, portrait, square).

Add an additional parameter for custom dimensions (which need to be divisible by 64).

Via #3

Denoise input field appears to be broken and results in "NaN" when typing anything in.

Via: https://discord.com/channels/781145214752129095/1038867597543882894/1065596060350820363

Kudos don't update on settings page after rating images

Looks like I need to call the /api/v2/find_user endpoint when someone clicks on the settings page, in order to get the latest kudos. Otherwise, it appears that rating images and the kudo count does not properly work.

chore: remove styled components from everything

This is going to be a big job since there are currently 62 components using styled-components.

I believe styled-components is causing a gradual memory leak on my node server. We see this in production at work as well. Additionally, there are some small performance costs to having to generate the css at runtime.

Some relevant discussion: https://stackoverflow.com/questions/60171694/large-react-app-with-styled-components-performance-problems

Convert everything to use NextJS built-in support for CSS modules, or optionally use tailwindcss utility rules. Additionally, this will allow us to get rid of the styled-components wrapper that prevents static page optimizations in NextJS.

Bug: Trigger word dropdown only shows one word

Reported via Discord:
https://discord.com/channels/781145214752129095/1038867597543882894/1068359746882633808

Bug: Multi-model select seems to lose sampler setting after generating image with first model

Bug: Arrow keys and slider buttons are backward on the image modal.

UX: Better visibility into rating options.

Via db0 on Discord:

would it be possible to inform people about the sharing feature which would allow the rating of images? I was thinking maybe the existing rating stars but disabled, with a message informing them how to enable them and what the benefits are

Feature request: Add inpainting support

Add support for inpainting images and make feature visible on front end.

Via #3

Retrying stuck job defaults to stable_diffusion model

I was trying out the new "use all models" feature this morning and had 3-4 pop up with the "job appears to be stuck" error. Clicking the retry button defaults back to stable_diffusion model instead of whatever the job was actually running. This isn't a huge deal if no seed was supplied, but it's a little inefficient when trying to explore all models for a given seed and it ends up having multiple workers run identical settings.

image with big promt are not downloading

probably becouse image with big promts have big file name , I tried same setting with small promts , they succesfully downloaded.

UX: dead gallery browsing dialog when browsing back beyond the first picture

when browsing through the gallery, either by clicking on the ui button or using the keyboard keys, everytime when I am at the first picture of my gallery and navigate one picture back in time to a picture that of course does not exist, the browsing dialog gets empty and is stuck there. navigationg to the first picture is no longer possible.

the situation can be remedied by closing the browsing dialog and starting over again.

In my gallery this is reproducible 100% of the time.

Maybe it is helpful to know, that I already deleted pictures from the gallery using the provided web ui, so I guess the original "first picture" is not available anymore. this may or may not help in finding the cause. maybe it is just an "off by one" in the boundaries check ;)

"Number of images" is incorrect.

It appears that "Number of images" times "Number of images" gets requested.