Commit Graph

93 Commits

Author SHA1 Message Date
psychedelicious
f0b102d830 feat(ui): ux improvements & redesign
This is a squash merge of a bajillion messy small commits created while iterating on the UI component library and redesign.
2023-12-29 08:26:14 -05:00
psychedelicious
9661fa5f76 feat(ui): add eslint unused-imports plugin
Provides autofix for unused imports
2023-12-09 16:12:00 +11:00
psychedelicious
fb39f621c6 feat(ui): bump redux-remember 2023-12-09 16:09:26 +11:00
psychedelicious
72cb8b83fe feat(ui): upgrade redux and RTK
There are a few breaking changes, which I've addressed.

The vast majority of changes are related to new handling of `reselect`'s `createSelector` options.

For better or worse, we memoize just about all our selectors using lodash `isEqual` for `resultEqualityCheck`. The upgrade requires we explicitly set the `memoize` option to `lruMemoize` to continue using lodash here.

Doing that required changing our `defaultSelectorOptions`.

Instead of changing that and finding dozens of instances where we weren't using that and instead were defining selector options manually, I've created a pre-configured selector: `createMemoizedSelector`.

This is now used everywhere instead of `createSelector`.
2023-12-09 16:09:26 +11:00
psychedelicious
b271474812 feat(ui): bump deps 2023-12-09 16:03:09 +11:00
psychedelicious
5902a52e40 feat(ui): add storybook 2023-12-09 16:03:09 +11:00
psychedelicious
f17b3d0068 feat(ui): migrate to pnpm
- update all scripts
- update the frontend GH action
- remove yarn-related files
- update ignores

Yarn classic + storybook has some weird module resolution issue due to how it hoists dependencies.

See https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

When I did the `package.json` solution in this thread, it broke vite. Next option is to upgrade to yarn 3 or pnpm. I chose pnpm.
2023-12-09 16:00:37 +11:00
dependabot[bot]
eecee472b1 chore(deps-dev): bump vite from 4.5.0 to 4.5.1 in /invokeai/frontend/web
Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 4.5.1.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.1/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.1/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
2023-12-06 16:57:35 +11:00
psychedelicious
bc6d4111a2 feat(ui): remove husky
You can only have one pre-commit setup on a repo. Removing husky so it doesn't interfere with the python pre-commit.
2023-12-06 14:05:50 +11:00
psychedelicious
aadcde3edd feat(ui): use IndexedDB for persistence
IndexedDB has a much larger storage limit than LocalStorage, and is widely supported.

Implemented as a custom storage driver for `redux-remember` via `idb-keyval`. `idb-keyval` is a simple wrapper for IndexedDB that allows it to be used easily as a key-value store.

The logic to clear persisted storage has been updated throughout the app.
2023-12-01 09:11:48 +11:00
psychedelicious
578c8ce5dd feat(ui): enforce absolute import paths
- add & configure `eslint-plug-path`
2023-11-29 11:06:07 +11:00
Rohinish
6e6d903f99
eslint added to enforce translations (#5150)
* eslint added and new string added

* strings and translation hook added

* more changes made

* missing translation added

* final errors resolve in progress

* all errors resolved

* fix(ui): fix missing import of `t()`

* fix(ui): use plurals for moving images to board translation

* fix(ui): fix typo in translation key

* fix(ui): do not use translation for "invoke ai"

* chore(ui): lint

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
2023-11-25 14:46:19 +11:00
psychedelicious
785d584603 feat(ui): clean up network stuff
- Remove unused dependency on `openapi-fetch`
- Organise network-related nanostores
2023-11-24 19:30:37 -08:00
psychedelicious
6d33893844 chore(ui): update all deps 2023-11-10 09:50:00 +11:00
psychedelicious
fc53112d8e chore(ui): remove unused deps 2023-11-10 09:50:00 +11:00
psychedelicious
3e389d3f60 chore(ui): update deps 2023-10-15 19:30:39 +11:00
psychedelicious
b57ebe52e4 chore(ui): "controlnet" -> "controladapters" 2023-10-07 22:30:15 +11:00
psychedelicious
4aca264308 feat(ui): handle node versions
- Node versions are now added to node templates
- Node data (including in workflows) include the version of the node
- On loading a workflow, we check to see if the node and template versions match exactly. If not, a warning is logged to console.
- The node info icon (top-right corner of node, which you may click to open the notes editor) now shows the version and mentions any issues.
- Some workflow validation logic has been shifted around and is now executed in a redux listener.
2023-09-04 19:08:18 +10:00
psychedelicious
9a2c0554de feat(ui): better workflow validation and parsing
Checks for the existence of nodes for each edge - does not yet check the types.
2023-08-30 13:02:49 +10:00
psychedelicious
7d1942e9f0 feat: workflow saving and loading 2023-08-24 21:42:32 +10:00
psychedelicious
73318c2847 feat(ui): remove floating panels, move all to resizable panels
There is a console error we can ignore when toggling gallery panel on canvas - this will be resolved in the next release of the resizable library
2023-08-23 23:06:42 +10:00
psychedelicious
ce7172d78c feat(ui): add workflow saving/loading (wip)
Adds loading workflows with exhaustive validation via `zod`.

There is a load button but no dedicated save/load UI yet. Also need to add versioning to the workflow format itself.
2023-08-23 23:06:42 +10:00
psychedelicious
b79bca2c14 build(ui): fix up lint scripts (way faster now) 2023-08-23 23:06:42 +10:00
psychedelicious
7b97754271 chore(ui): update all packages
- only breaking change was in `openapi-fetch`, easy fix
- also looks like prettier/eslint is a bit more comprehensive? caught a couple extra things
2023-08-23 23:06:42 +10:00
psychedelicious
5c305b1eeb feat(ui): add app error boundary
Should catch all app crashes
2023-08-21 19:17:36 +10:00
psychedelicious
64a6aa0293 fix(ui): move BoardContextMenu to use IAIContextMenu 2023-08-21 19:17:36 +10:00
psychedelicious
f49fc7fb55 feat: node editor
squashed rebase on main after backendd refactor
2023-08-16 09:54:38 +10:00
psychedelicious
bf94412d14 feat: add multi-select to gallery
multi-select actions include:
- drag to board to move all to that board
- right click to add all to board or delete all

backend changes:
- add routes for changing board for list of image names, deleting list of images
- change image-specific routes to `images/i/{image_name}` to not clobber other routes (like `images/upload`, `images/delete`)
- subclass pydantic `BaseModel` as `BaseModelExcludeNull`, which excludes null values when calling `dict()` on the model. this fixes inconsistent types related to JSON parsing null values into `null` instead of `undefined`
- remove `board_id` from `remove_image_from_board`

frontend changes:
- multi-selection stuff uses `ImageDTO[]` as payloads, for dnd and other mutations. this gives us access to image `board_id`s when hitting routes, and enables efficient cache updates.
- consolidate change board and delete image modals to handle single and multiples
- board totals are now re-fetched on mutation and not kept in sync manually - was way too tedious to do this
- fixed warning about nested `<p>` elements
- closes #4088 , need to handle case when `autoAddBoardId` is `"none"`
- add option to show gallery image delete button on every gallery image

frontend refactors/organisation:
- make typegen script js instead of ts
- enable `noUncheckedIndexedAccess` to help avoid bugs when indexing into arrays, many small changes needed to satisfy TS after this
- move all image-related endpoints into `endpoints/images.ts`, its a big file now, but this fixes a number of circular dependency issues that were otherwise felt impossible to resolve
2023-08-03 11:46:59 +10:00
Mary Hipp
cbe874b964 add chakra as peer dep 2023-08-01 08:54:03 +10:00
psychedelicious
819136c345 chore(ui): bump chakra versions
exposes more menu theming config
2023-07-27 00:12:23 +10:00
psychedelicious
75863e7181 feat(ui): logging cleanup
- simplify access to app logger
- spruce up and make consistent log format
- improve messaging
2023-07-22 21:12:51 +10:00
psychedelicious
6bea7bac36 feat(ui): restore recall functionality
- Restore recall functionality to `CurrentImageButtons` and `ImageContextMenu`.
- Debounce metadata requests for `ImageMetadataViewer` and `CurrentImageButtons` by 500ms. It's possible to scroll through these really fast, so we want to debounce the network requests.
- `ImageContextMenu` is lazy-mounted so it does not need to be debounced; it makes the metadata request as soon as you click it.
- Move next/prev image selection logic into hook and add the hotkeys for this to `CurrentImageButtons`. The hotkeys now work when metadata viewer is open.

I will follow up with improved loading state during the debounced calls in the future
2023-07-13 15:40:05 +10:00
blessedcoolant
f32a2f135c Merge branch 'release/invokeai-3-0-alpha' of https://github.com/invoke-ai/InvokeAI into release/invokeai-3-0-alpha 2023-07-08 06:30:04 +12:00
blessedcoolant
f4fe878781 cleanup: No longer used. 2023-07-08 06:27:11 +12:00
Eugene Brodsky
97b2ec58e2
Merge branch 'main' into release/invokeai-3-0-alpha 2023-07-07 14:18:12 -04:00
psychedelicious
803e1aaa17 feat(ui): update openapi-fetch; fix upload issue
My PR to fix an issue with the handling of formdata in `openapi-fetch` is released. This means we no longer need to patch the package (no patches at all now!).

This PR bumps its version and adds a transformer to our typegen script to handle typing binary form fields correctly as `Blob`.

Also regens types.
2023-07-07 16:36:42 +10:00
Lincoln Stein
9edf78dd2e merge with main 2023-07-05 09:12:54 -04:00
blessedcoolant
009c20bfea feat: Add Mantine Form 2023-07-04 14:34:41 +10:00
Lincoln Stein
877b187a1b Merge branch 'lstein/restore-3.9-compatibility' into release/invokeai-3-0-alpha 2023-07-03 11:01:34 -04:00
psychedelicious
90aa97edd4 feat(ui): add multi-select and batch capabilities
This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager.

A number of other substantial changes are included:
- `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images
- `batchSlice` is added to manage the batch
- The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals
- Minimum gallery size in px implemented as a hook
- Many style fixes & several bug fixes

TODO:
- The UI and UX need to be figured out, especially for controlnet
- Batch processing is not hooked up; generation does not do anything with batch
- Routes to support batch image operations, specifically delete and add/remove to/from boards
2023-07-04 00:18:27 +10:00
Lincoln Stein
9724143ab7 rolled back changes to package.json 2023-07-01 20:05:00 -04:00
Lincoln Stein
f1928d2588 prevent crashes on malformed models 2023-07-01 14:32:58 -04:00
psychedelicious
30464f4fe1 fix(ui): fix canvas crash by rolling back swagger-parser
The node polyfills needed to run the `swagger-parser` library (used to dereference the OpenAPI schema) cause the canvas tab to immediately crash when the package build is used in another react application.

I'm sure this is fixable but it's not clear what is causing the issue and troubleshooting is very time consuming.

Selectively rolling back the implementation of `swagger-parser`.
2023-06-30 12:24:28 +10:00
psychedelicious
862bf7546c feat(ui): improved node parsing
- use `swagger-parser` to dereference openapi schema
- tidy vite plugins
- use mantine select for node add menu
2023-06-26 11:53:54 +10:00
psychedelicious
132829c88f fix(ui): fix path of generated schema types 2023-06-25 14:04:00 +10:00
psychedelicious
6b276587d8 chore(ui): bump all packages
Everything seems to be working.

- Due to a change to `reactflow`, I regenerated `yarn.lock`
- New chakra CLI fixes issue I had made a patch for; removed the patch
- Change to fontsource changed how we import that font
- Change to fontawesome means we lost the txt2img tab icon, just chose a similar one
2023-06-25 13:44:10 +10:00
psychedelicious
8f9fa15fc8 fix(ui): fix image fetching query string 2023-06-24 18:15:49 +10:00
psychedelicious
e386b5dc53 feat(ui): api layer refactor
*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`*

`openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update.
`openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences:

- provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks
- fetch client is created at runtime and has a very nice typescript DX
- generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit.
- removed npm api generation scripts - now we have a single `typegen` script

overall i have more confidence in this new library.

*use nanostores for api base and token*

very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy.

*organise rtk-query api*

split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!
2023-06-24 17:57:39 +10:00
blessedcoolant
0e3106f631 feat: Add Mantine Support 2023-06-14 14:14:24 +10:00
psychedelicious
69f0ba65f1 chore(ui): bump react-icons 2023-06-04 22:34:58 +10:00