docs(ui): update README (#5473)

blessedcoolant · web-flow · commit 4ba0bf4dcf55 · 2024-01-23T18:47:24.000+05:30
## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [ ] Bug Fix
- [ ] Optimization
- [x] Documentation Update
- [ ] Community Node Submission

## Description

Update UI README


## Merge Plan

This PR can be merged when approved

&lt;!--
A merge plan describes how this PR should be handled after it is
approved.

Example merge plans:
- "This PR can be merged when approved"
- "This must be squash-merged when approved"
- "DO NOT MERGE - I will rebase and tidy commits before merging"
- "#dev-chat on discord needs to be advised of this change when it is
merged"

A merge plan is particularly important for large PRs or PRs that touch
the
database in any way.
--&gt;
diff --git a/docs/contributing/contribution_guides/contributingToFrontend.md b/docs/contributing/contribution_guides/contributingToFrontend.md
diff --git a/docs/contributing/contribution_guides/development.md b/docs/contributing/contribution_guides/development.md
@@ -12,7 +12,7 @@ To get started, take a look at our [new contributors checklist](newContributorCh
 Once you're setup, for more information, you can review the documentation specific to your area of interest:
 
 * #### [InvokeAI Architecure](../ARCHITECTURE.md)
-* #### [Frontend Documentation](./contributingToFrontend.md)
+* #### [Frontend Documentation](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web)
 * #### [Node Documentation](../INVOCATIONS.md)
 * #### [Local Development](../LOCAL_DEVELOPMENT.md)
 
diff --git a/invokeai/frontend/web/docs/README.md b/invokeai/frontend/web/docs/README.md
@@ -1,79 +1,51 @@
-# InvokeAI Web UI
+# Invoke UI
 
 <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
 
 <!-- code_chunk_output -->
 
-- [InvokeAI Web UI](#invokeai-web-ui)
+- [Invoke UI](#invoke-ui)
   - [Core Libraries](#core-libraries)
-    - [Redux Toolkit](#redux-toolkit)
-    - [Socket\.IO](#socketio)
-    - [Chakra UI](#chakra-ui)
-    - [KonvaJS](#konvajs)
-    - [Vite](#vite)
-    - [i18next & Weblate](#i18next--weblate)
-    - [openapi-typescript](#openapi-typescript)
-    - [reactflow](#reactflow)
-    - [zod](#zod)
-  - [Client Types Generation](#client-types-generation)
   - [Package Scripts](#package-scripts)
+    - [Client Types Generation](#client-types-generation)
   - [Contributing](#contributing)
+    - [Localization](#localization)
     - [Dev Environment](#dev-environment)
-      - [VSCode Remote Dev](#vscode-remote-dev)
-    - [Production builds](#production-builds)
+    - [VSCode Remote Dev](#vscode-remote-dev)
 
 <!-- /code_chunk_output -->
 
-The UI is a fairly straightforward Typescript React app.
-
 ## Core Libraries
 
-InvokeAI's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
-
-### Redux Toolkit
-
-[Redux Toolkit] is used for state management and fetching/caching:
-
-- `RTK-Query` for data fetching and caching
-- `createAsyncThunk` for a couple other HTTP requests
-- `createEntityAdapter` to normalize things like images and models
-- `createListenerMiddleware` for async workflows
-
-We use [redux-remember] for persistence.
-
-### Socket\.IO
-
-[Socket.IO] is used for server-to-client events, like generation process and queue state changes.
-
-### Chakra UI
-
-[Chakra UI] is our primary UI library, but we also use a few components from [Mantine v6].
-
-### KonvaJS
-
-[KonvaJS] powers the canvas. In the future, we'd like to explore [PixiJS] or WebGPU.
-
-### Vite
+Invoke's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
 
-[Vite] is our bundler.
+- [Redux Toolkit]
+- [redux-remember]
+- [Socket.IO]
+- [Chakra UI]
+- [KonvaJS]
+- [Vite]
+- [openapi-typescript]
+- [reactflow]
+- [zod]
 
-### i18next & Weblate
-
-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.**
-
-### openapi-typescript
-
-[openapi-typescript] is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md.
-
-### reactflow
+## Package Scripts
 
-[reactflow] powers the Workflow Editor.
+See `package.json` for all scripts.
 
-### zod
+Run with `pnpm <script name>`.
 
-[zod] schemas are used to model data structures and provide runtime validation.
+- `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 [Client Types 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
 
-## Client Types Generation
+### Client Types Generation
 
 We use [openapi-typescript] to generate types from the app's OpenAPI schema.
 
@@ -88,27 +60,17 @@ python scripts/invokeai-web.py
 pnpm typegen
 ```
 
-## Package Scripts
-
-See `package.json` for all scripts.
+## Contributing
 
-Run with `pnpm <script name>`.
+Thanks for your interest in contributing to the Invoke Web UI!
 
-- `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 [Client Types Generation](#client-types-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
+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.
 
-## Contributing
+### Localization
 
-Thanks for your interest in contributing to the InvokeAI Web UI!
+We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
 
-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.
+**Only the English source strings should be changed on this repo.**
 
 ### Dev Environment
 
@@ -118,23 +80,19 @@ From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
 
 Start everything in dev mode:
 
-1. Start the dev server: `pnpm dev`
-2. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
+1. From `invokeai/frontend/web/`: `pnpm dev`
+2. From repo root: `python scripts/invokeai-web.py`
 3. Point your browser to the dev server address e.g. <http://localhost:5173/>
 
-#### VSCode Remote Dev
-
-We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
-
-`ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host`
+### VSCode Remote Dev
 
-### Production builds
+We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out.
 
-For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
+We suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
 
-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 `pnpm build`.
+```sh
+ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
+```
 
 [node]: https://nodejs.org/en/download/
 [pnpm]: https://github.com/pnpm/pnpm
@@ -143,12 +101,11 @@ To build for production, run `pnpm build`.
 [redux-remember]: https://github.com/zewish/redux-remember
 [Socket.IO]: https://github.com/socketio/socket.io
 [Chakra UI]: https://github.com/chakra-ui/chakra-ui
-[Mantine v6]: https://v6.mantine.dev/
 [KonvaJS]: https://github.com/konvajs/react-konva
-[PixiJS]: https://github.com/pixijs/pixijs
 [Vite]: https://github.com/vitejs/vite
 [i18next]: https://github.com/i18next/react-i18next
 [Weblate]: https://hosted.weblate.org/engage/invokeai/
 [openapi-typescript]: https://github.com/drwpow/openapi-typescript
 [reactflow]: https://github.com/xyflow/xyflow
 [zod]: https://github.com/colinhacks/zod
+[Client Types Generation]: #client-types-generation
diff --git a/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md b/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
@@ -23,7 +23,7 @@
         - [Primitive Types](#primitive-types)
         - [Complex Types](#complex-types)
         - [Collection Types](#collection-types)
-        - [Polymorphic Types](#polymorphic-types)
+        - [Collection or Scalar Types](#collection-or-scalar-types)
         - [Optional Fields](#optional-fields)
       - [Building Field Input Templates](#building-field-input-templates)
       - [Building Field Output Templates](#building-field-output-templates)
