Contributing to the Frontend#
InvokeAI Web UI#
The UI is a fairly straightforward Typescript React app, with the Unified Canvas being more complex.
Code is located in
invokeai/frontend/web/ for review.
State management is Redux via Redux Toolkit. We lean heavily on RTK:
createAsyncThunkfor HTTP requests
createEntityAdapterfor fetching images and models
The API client and associated types are generated from the OpenAPI schema. See API_CLIENT.md.
Communication with server is a mix of HTTP and socket.io (with a simple socket.io redux middleware to help).
Vite for bundling.
Thanks for your interest in contributing to the InvokeAI Web UI!
We encourage you to ping @psychedelicious and @blessedcoolant on Discord if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
- Install node. You can confirm node is installed with:
- Install yarn classic and confirm it is installed by running this:
yarn install to get everything set up.
Start everything in dev mode:
1. Ensure your virtual environment is running
2. Start the dev server:
3. Start the InvokeAI Nodes backend:
python scripts/invokeai-web.py # run from the repo root
4. Point your browser to the dev server address e.g. http://localhost:5173/
VSCode Remote Dev#
We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
To build for production, run
Created: July 19, 2023