docs: move frontend docs to mkdocs

docs/contributing/frontend/OVERVIEW.md

@@ -0,0 +1,132 @@
+# 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].
+1. Run `pnpm i` to install all packages.
+
+#### Run in dev mode
+
+1. From `invokeai/frontend/web/`, run `pnpm dev`.
+1. From repo root, run `python scripts/invokeai-web.py`.
+1. 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].
+
+```sh
+# 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
+
+```jsonc
+{
+  "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:
+
+```sh
+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
+
+- [Workflows - Design and Implementation]
+- [State Management]
+
+[node]: https://nodejs.org/en/download/
+[pnpm]: https://github.com/pnpm/pnpm
+[discord]: https://discord.gg/ZmtBAhwWhy
+[i18next]: https://github.com/i18next/react-i18next
+[Weblate]: https://hosted.weblate.org/engage/invokeai/
+[openapi-typescript]: https://github.com/drwpow/openapi-typescript
+[Type generation]: #type-generation
+[schema.ts]: ../src/services/api/schema.ts
+[conventional commits]: https://www.conventionalcommits.org/en/v1.0.0/
+[Workflows - Design and Implementation]: ./docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
+[State Management]: ./docs/STATE_MGMT.md

docs/contributing/frontend/WORKFLOWS.md

@@ -1,40 +1,5 @@
 # Workflows - Design and Implementation
 
-<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
-
-<!-- code_chunk_output -->
-
-- [Workflows - Design and Implementation](#workflows---design-and-implementation)
-  - [Design](#design)
-    - [Linear UI](#linear-ui)
-    - [Workflow Editor](#workflow-editor)
-      - [Workflows](#workflows)
-        - [Workflow -> reactflow state -> InvokeAI graph](#workflow---reactflow-state---invokeai-graph)
-        - [Nodes vs Invocations](#nodes-vs-invocations)
-        - [Workflow Linear View](#workflow-linear-view)
-      - [OpenAPI Schema](#openapi-schema)
-        - [Field Instances and Templates](#field-instances-and-templates)
-        - [Stateful vs Stateless Fields](#stateful-vs-stateless-fields)
-        - [Collection and Polymorphic Fields](#collection-and-polymorphic-fields)
-  - [Implementation](#implementation)
-    - [zod Schemas and Types](#zod-schemas-and-types)
-    - [OpenAPI Schema Parsing](#openapi-schema-parsing)
-      - [Parsing Field Types](#parsing-field-types)
-        - [Primitive Types](#primitive-types)
-        - [Complex Types](#complex-types)
-        - [Collection Types](#collection-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)
-    - [Managing reactflow State](#managing-reactflow-state)
-      - [Building Nodes and Edges](#building-nodes-and-edges)
-      - [Building a Workflow](#building-a-workflow)
-      - [Loading a Workflow](#loading-a-workflow)
-    - [Workflow Migrations](#workflow-migrations)
-
-<!-- /code_chunk_output -->
-
 > This document describes, at a high level, the design and implementation of workflows in the InvokeAI frontend. There are a substantial number of implementation details not included, but which are hopefully clear from the code.
 
 InvokeAI's backend uses graphs, composed of **nodes** and **edges**, to process data and generate images.
@@ -338,13 +303,13 @@ Migration logic is in [migrations.ts].
 [reactflow]: https://github.com/xyflow/xyflow 'reactflow'
 [reactflow-concepts]: https://reactflow.dev/learn/concepts/terms-and-definitions
 [reactflow-events]: https://reactflow.dev/api-reference/react-flow#event-handlers
-[buildWorkflow.ts]: ../src/features/nodes/util/workflow/buildWorkflow.ts
+[buildWorkflow.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
-[nodesSlice.ts]: ../src/features/nodes/store/nodesSlice.ts
+[nodesSlice.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
-[buildLinearTextToImageGraph.ts]: ../src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
+[buildLinearTextToImageGraph.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
-[buildNodesGraph.ts]: ../src/features/nodes/util/graph/buildNodesGraph.ts
+[buildNodesGraph.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
-[buildInvocationNode.ts]: ../src/features/nodes/util/node/buildInvocationNode.ts
+[buildInvocationNode.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
-[validateWorkflow.ts]: ../src/features/nodes/util/workflow/validateWorkflow.ts
+[validateWorkflow.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
-[migrations.ts]: ../src/features/nodes/util/workflow/migrations.ts
+[migrations.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
-[parseSchema.ts]: ../src/features/nodes/util/schema/parseSchema.ts
+[parseSchema.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
-[buildFieldInputTemplate.ts]: ../src/features/nodes/util/schema/buildFieldInputTemplate.ts
+[buildFieldInputTemplate.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts
-[buildFieldOutputTemplate.ts]: ../src/features/nodes/util/schema/buildFieldOutputTemplate.ts
+[buildFieldOutputTemplate.ts]: https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts

invokeai/frontend/web/README.md

@@ -1,150 +1,3 @@
 # Invoke UI
 
-<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
+<https://invoke-ai.github.io/InvokeAI/contributing/frontend/OVERVIEW/>
-
-<!-- code_chunk_output -->
-
-- [Dev environment](#dev-environment)
-  - [Setup](#setup)
-  - [Package scripts](#package-scripts)
-  - [Type generation](#type-generation)
-  - [Localization](#localization)
-  - [VSCode](#vscode)
-- [Contributing](#contributing)
-  - [Check in before investing your time](#check-in-before-investing-your-time)
-  - [Commit format](#commit-format)
-  - [Submitting a PR](#submitting-a-pr)
-- [Other docs](#other-docs)
-
-<!-- /code_chunk_output -->
-
-Invoke's UI is made possible by many contributors and open-source libraries. Thank you!
-
-## Dev environment
-
-### Setup
-
-1. Install [node] and [pnpm].
-1. Run `pnpm i` to install all packages.
-
-#### Run in dev mode
-
-1. From `invokeai/frontend/web/`, run `pnpm dev`.
-1. From repo root, run `python scripts/invokeai-web.py`.
-1. 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].
-
-```sh
-# 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
-
-```jsonc
-{
-  "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:
-
-```sh
-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
-
-- [Workflows - Design and Implementation]
-- [State Management]
-
-[node]: https://nodejs.org/en/download/
-[pnpm]: https://github.com/pnpm/pnpm
-[discord]: https://discord.gg/ZmtBAhwWhy
-[i18next]: https://github.com/i18next/react-i18next
-[Weblate]: https://hosted.weblate.org/engage/invokeai/
-[openapi-typescript]: https://github.com/drwpow/openapi-typescript
-[Type generation]: #type-generation
-[schema.ts]: ../src/services/api/schema.ts
-[conventional commits]: https://www.conventionalcommits.org/en/v1.0.0/
-[Workflows - Design and Implementation]: ./docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
-[State Management]: ./docs/STATE_MGMT.md

mkdocs.yml

@@ -178,6 +178,10 @@ nav:
           - Frontend Documentation: 'contributing/contribution_guides/contributingToFrontend.md'
           - Local Development: 'contributing/LOCAL_DEVELOPMENT.md'
           - Testing: 'contributing/TESTS.md'
+          - Frontend:
+              - Overview: 'contributing/frontend/OVERVIEW.md'
+              - State Management: 'contributing/frontend/STATE_MGMT.md'
+              - Workflows: 'contributing/frontend/WORKFLOWS.md'
       - Documentation: 'contributing/contribution_guides/documentation.md'
       - Nodes: 'contributing/INVOCATIONS.md'
       - Model Manager: 'contributing/MODEL_MANAGER.md'