InvokeAI/invokeai/frontend/web
2023-04-15 20:45:17 +10:00
..
.husky feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
.yarn/releases all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
dist chore(ui): build 2023-03-19 23:16:29 +11:00
patches feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
public/locales translationBot(ui): update translation (French) 2023-03-24 04:49:27 +01:00
src feat: add "Hide Preview" Button 2023-04-15 20:45:17 +10:00
__init__.py Revert "Merge branch 'main' into bugfix/reenable-ckpt-conversion-to-ram" 2023-03-06 14:29:39 +13:00
.babelrc all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
.eslintignore feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
.eslintrc.js feat(ui): wip resizable pinnable drawer 2023-03-12 20:13:37 +11:00
.gitignore remove 2023-03-14 14:09:16 -04:00
.prettierignore feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
.prettierrc.js feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
.yarnrc all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
.yarnrc.yml all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
favicon.ico all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
index.d.ts change back 2023-03-21 10:28:29 -04:00
index.html feat(ui): migrate theming to chakra ui 2023-03-06 20:03:39 +11:00
package.json remove unneeded build:package code 2023-03-21 10:29:27 -04:00
README.md docs(ui): update readme 2023-03-07 21:58:42 +11:00
stats.html chore(ui): build 2023-03-19 23:16:29 +11:00
tsconfig.json all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
tsconfig.node.json all files migrated; tweaks needed 2023-03-03 00:02:15 -05:00
vite.config.ts remove unneeded build:package code 2023-03-21 10:29:27 -04:00
yarn.lock fix npm deps 2023-03-14 14:15:03 -04:00

InvokeAI Web UI

The UI is a fairly straightforward Typescript React app. The only really fancy stuff is the Unified Canvas.

Code in invokeai/frontend/web/ if you want to have a look.

Details

State management is Redux via Redux Toolkit. Communication with server is a mix of HTTP and socket.io (with a custom redux middleware to help).

Chakra-UI for components and styling.

Konva for the canvas, but we are pushing the limits of what is feasible with it (and HTML canvas in general). We plan to rebuild it with PixiJS to take advantage of WebGL's improved raster handling.

Vite for bundling.

Localisation is via i18next, but translation happens on our Weblate project. Only the English source strings should be changed on this repo.

Contributing

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.

Dev Environment

Install node and yarn classic.

From invokeai/frontend/web/ run yarn install to get everything set up.

Start everything in dev mode:

  1. Start the dev server: yarn dev
  2. Start the InvokeAI UI per usual: invokeai --web
  3. Point your browser to the dev server address e.g. http://localhost:5173/

Production builds

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 yarn build.