Invoke UI#
Invoke's UI is made possible by many contributors and open-source libraries. Thank you!
Dev environment#
Setup#
Run in dev mode#
- From
invokeai/frontend/web/
, runpnpm dev
. - From repo root, run
python scripts/invokeai-web.py
. - Point your browser to the dev server address, e.g. http://localhost:5173/
Package scripts#
dev
: run the frontend in dev mode, enabling hot reloadingbuild
: run all checks (madge, eslint, prettier, tsc) and then build the frontendtypegen
: generate types from the OpenAPI schema (see Type generation)lint:dpdm
: check circular dependencieslint:eslint
: check code qualitylint:prettier
: check code formattinglint:tsc
: check type issueslint:knip
: check for unused exports or objects (failures here are just suggestions, not hard fails)lint
: run all checks concurrentlyfix
: runeslint
andprettier
, fixing fixable issues
Type generation#
We use openapi-typescript to generate types from the app's OpenAPI schema.
The generated types are committed to the repo in schema.ts.
# from the repo root, start the server
python scripts/invokeai-web.py
# from invokeai/frontend/web/, run the script
pnpm typegen
Localization#
We use i18next for localization, but translation to languages other than English happens on our Weblate project.
Only the English source strings should be changed on this repo.
VSCode#
Example debugger config#
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Invoke UI",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/invokeai/frontend/web"
}
]
}
Remote dev#
We've noticed an intermittent timeout issue with the VSCode remote dev port forwarding.
We suggest disabling the editor's port forwarding feature and doing it manually via SSH:
Contributing Guidelines#
Thanks for your interest in contributing to the Invoke Web UI!
Please follow these guidelines when contributing.
Check in before investing your time#
Please check in before you invest your time on anything besides a trivial fix, in case it conflicts with ongoing work or isn't aligned with the vision for the app.
If a feature request or issue doesn't already exist for the thing you want to work on, please create one.
Ping @psychedelicious
on discord in the #frontend-dev
channel or in the feature request / issue you want to work on - we're happy to chat.
Code conventions#
- This is a fairly complex app with a deep component tree. Please use memoization (
useCallback
,useMemo
,memo
) with enthusiasm. - If you need to add some global, ephemeral state, please use [nanostores] if possible.
- Be careful with your redux selectors. If they need to be parameterized, consider creating them inside a
useMemo
. - Feel free to use
lodash
(vialodash-es
) to make the intent of your code clear. - Please add comments describing the "why", not the "how" (unless it is really arcane).
Commit format#
Please use the conventional commits spec for the web UI, with a scope of "ui":
chore(ui): bump deps
chore(ui): lint
feat(ui): add some cool new feature
fix(ui): fix some bug
Submitting a PR#
- Ensure your branch is tidy. Use an interactive rebase to clean up the commit history and reword the commit messages if they are not descriptive.
- Run
pnpm lint
. Some issues are auto-fixable withpnpm fix
. - Fill out the PR form when creating the PR.
- It doesn't need to be super detailed, but a screenshot or video is nice if you changed something visually.
- If a section isn't relevant, delete it. There are no UI tests at this time.