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
..
2024-01-29 07:28:20 +11:00
2024-01-28 19:57:53 +11:00
2024-01-12 08:02:59 +11:00
2023-07-28 09:46:44 -04:00
2024-01-28 19:57:53 +11:00
2024-01-12 08:02:59 +11:00
2024-02-23 07:53:45 +11:00
2024-01-29 07:28:20 +11:00
2024-02-24 19:04:52 +11:00
2024-02-21 08:31:55 -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