mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
f5447cdc23
The changes aim to deduplicate data between workflows and node templates, decoupling workflows from internal implementation details. A good amount of data that was needlessly duplicated from the node template to the workflow is removed. These changes substantially reduce the file size of workflows (and therefore the images with embedded workflows): - Default T2I SD1.5 workflow JSON is reduced from 23.7kb (798 lines) to 10.9kb (407 lines). - Default tiled upscale workflow JSON is reduced from 102.7kb (3341 lines) to 51.9kb (1774 lines). The trade-off is that we need to reference node templates to get things like the field type and other things. In practice, this is a non-issue, because we need a node template to do anything with a node anyways. - Field types are not included in the workflow. They are always pulled from the node templates. The field type is now properly an internal implementation detail and we can change it as needed. Previously this would require a migration for the workflow itself. With the v3 schema, the structure of a field type is an internal implementation detail that we are free to change as we see fit. - Workflow nodes no long have an `outputs` property and there is no longer such a thing as a `FieldOutputInstance`. These are only on the templates. These were never referenced at a time when we didn't also have the templates available, and there'd be no reason to do so. - Node width and height are no longer stored in the node. These weren't used. Also, per https://reactflow.dev/api-reference/types/node, we shouldn't be programmatically changing these properties. A future enhancement can properly add node resizing. - `nodeTemplates` slice is merged back into `nodesSlice` as `nodes.templates`. Turns out it's just a hassle having these separate in separate slices. - Workflow migration logic updated to support the new schema. V1 workflows migrate all the way to v3 now. - Changes throughout the nodes code to accommodate the above changes. |
||
|---|---|---|
| .. | ||
| .storybook | ||
| config | ||
| docs | ||
| patches | ||
| public | ||
| scripts | ||
| src | ||
| static/docs | ||
| tests | ||
| __init__.py | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.js | ||
| .unimportedrc.json | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.mts | ||
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:madge: check frontend for circular dependencieslint:eslint: check frontend for code qualitylint:prettier: check frontend for code formattinglint:tsc: check frontend for type issueslint: run all checks concurrentlyfix: runeslintandprettier, 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(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 depschore(ui): lintfeat(ui): add some cool new featurefix(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.