InvokeAI/invokeai/frontend/web
psychedelicious e174ce038f feat(ui): refactor metadata handling (again)
Add concepts for metadata handlers. Handlers include parsers, recallers and validators for different metadata types:
- Parsers parse a raw metadata object of any shape to a structured object.
- Recallers load the parsed metadata into state. Recallers are optional, as some metadata types don't need to be loaded into state.
- Validators provide an additional layer of validation before recalling the metadata. This is needed because a metadata object may be valid, but not able to be recalled due to some other requirement, like base model compatibility. Validators are optional.

Sometimes metadata is not a single object but a list of items - like LoRAs. Metadata handlers may implement an optional set of "item" handlers which operate on individual items in the list.

Parsers and validators are async to allow fetching additional data, like a model config. Recallers are synchronous.

The these handlers are composed into a public API, exported as a `handlers` object. Besides the handlers functions, a metadata handler set includes:
- A function to get the label of the metadata type.
- An optional function to render the value of the metadata type.
- An optional function to render the _item_ value of the metadata type.
2024-02-26 14:49:38 -05:00
..
.storybook feat(ui): update model identifier to be key (wip) 2024-02-16 18:56:02 +11:00
docs docs(ui): add STATE_MGMT.md 2024-01-29 07:28:20 +11:00
patches feat(ui): patch reselect to use lruMemoize only 2024-01-06 00:03:07 +11:00
public feat(ui): refactor metadata handling (again) 2024-02-26 14:49:38 -05:00
scripts chore(ui): format 2024-01-28 19:57:53 +11:00
src feat(ui): refactor metadata handling (again) 2024-02-26 14:49:38 -05:00
static/docs feat(ui): update assets 2024-01-12 08:02:59 +11:00
tests Partial migration of UI to nodes API (#3195) 2023-04-22 13:10:20 +10:00
__init__.py Run python black 2023-07-28 09:46:44 -04:00
.eslintignore fix(ui): fix workflow editor model selector, excise ONNX 2024-01-03 13:18:50 +11:00
.eslintrc.js build(ui): restore i18n eslint rule 2024-02-24 19:04:52 +11:00
.gitignore tests(ui): enable vitest type testing 2024-02-15 22:16:11 +11:00
.prettierignore fix(ui): fix workflow editor model selector, excise ONNX 2024-01-03 13:18:50 +11:00
.prettierrc.js chore(ui): use new prettier config 2024-01-28 19:57:53 +11:00
.unimportedrc.json chore(ui): format 2024-01-28 19:57:53 +11:00
index.html feat(ui): update assets 2024-01-12 08:02:59 +11:00
package.json fix(ui): roll back utility-types 2024-02-23 07:53:45 +11:00
pnpm-lock.yaml fix(ui): roll back utility-types 2024-02-23 07:53:45 +11:00
README.md docs(ui): update README.md 2024-01-29 07:28:20 +11:00
tsconfig.json chore(ui): lint 2024-02-24 19:04:52 +11:00
tsconfig.node.json fix(ui): fix package build 2024-02-21 08:31:55 -05:00
vite.config.mts build(ui): do not fail build on eslint error in dev mode 2024-02-26 14:49:38 -05:00

Invoke UI

Invoke's UI is made possible by many contributors and open-source libraries. Thank you!

Dev environment

Setup

  1. Install node and pnpm.
  2. Run pnpm i to install all packages.

Run in dev mode

  1. From invokeai/frontend/web/, run pnpm dev.
  2. From repo root, run python scripts/invokeai-web.py.
  3. Point your browser to the dev server address, e.g. http://localhost:5173/

Package scripts

  • dev: run the frontend in dev mode, enabling hot reloading
  • build: run all checks (madge, eslint, prettier, tsc) and then build the frontend
  • typegen: generate types from the OpenAPI schema (see Type generation)
  • lint:madge: check frontend for circular dependencies
  • lint:eslint: check frontend for code quality
  • lint:prettier: check frontend for code formatting
  • lint:tsc: check frontend for type issues
  • lint: run all checks concurrently
  • fix: run eslint and prettier, 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:

ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host

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 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 (via lodash-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 with pnpm 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.

Other docs