See it in action: https://tinybots.net/artbot
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.
>= 18.0.0
>= 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
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
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.
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.
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
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.
package.json
scripts/dev
line to remove PORT=3000
from the script:> npm run update:build-id && node server.js
package.json
and attempt to run again: > npm run dev
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 are very welcome! General guidelines are as follows:
> git checkout -b my-cool-new-feature
Let me know if you have any questions. I'm more than happy to help.
See LICENSE.md