diff --git a/invokeai/frontend/web/docs/API_CLIENT.md b/invokeai/frontend/web/docs/API_CLIENT.md deleted file mode 100644 index 5072aa2c42..0000000000 --- a/invokeai/frontend/web/docs/API_CLIENT.md +++ /dev/null @@ -1,87 +0,0 @@ -# Generated axios API client - -- [Generated axios API client](#generated-axios-api-client) - - [Generation](#generation) - - [Generate the API client from the nodes web server](#generate-the-api-client-from-the-nodes-web-server) - - [Generate the API client from JSON](#generate-the-api-client-from-json) - - [Getting the JSON from the nodes web server](#getting-the-json-from-the-nodes-web-server) - - [Getting the JSON with a python script](#getting-the-json-with-a-python-script) - - [Generate the API client](#generate-the-api-client) - - [The generated client](#the-generated-client) - - [API client customisation](#api-client-customisation) - -This API client is generated by an [openapi code generator](https://github.com/ferdikoomen/openapi-typescript-codegen). - -All files in `invokeai/frontend/web/src/services/api/` are made by the generator. - -## Generation - -The axios client may be generated by from the OpenAPI schema from the nodes web server, or from JSON. - -### Generate the API client from the nodes web server - -We need to start the nodes web server, which serves the OpenAPI schema to the generator. - -1. Start the nodes web server. - -```bash -# from the repo root -python scripts/invokeai-web.py -``` - -2. Generate the API client. - -```bash -# from invokeai/frontend/web/ -yarn api:web -``` - -### Generate the API client from JSON - -The JSON can be acquired from the nodes web server, or with a python script. - -#### Getting the JSON from the nodes web server - -Start the nodes web server as described above, then download the file. - -```bash -# from invokeai/frontend/web/ -curl http://localhost:9090/openapi.json -o openapi.json -``` - -#### Getting the JSON with a python script - -Run this python script from the repo root, so it can access the nodes server modules. - -The script will output `openapi.json` in the repo root. Then we need to move it to `invokeai/frontend/web/`. - -```bash -# from the repo root -python invokeai/app/util/generate_openapi_json.py -mv invokeai/app/util/openapi.json invokeai/frontend/web/services/fixtures/ -``` - -#### Generate the API client - -Now we can generate the API client from the JSON. - -```bash -# from invokeai/frontend/web/ -yarn api:file -``` - -## The generated client - -The client will be written to `invokeai/frontend/web/services/api/`: - -- `axios` client -- TS types -- An easily parseable schema, which we can use to generate UI - -## API client customisation - -The generator has a default `request.ts` file that implements a base `axios` client. The generated client uses this base client. - -One shortcoming of this is base client is it does not provide response headers unless the response body is empty. To fix this, we provide our own lightly-patched `request.ts`. - -To access the headers, call `getHeaders(response)` on any response from the generated api client. This function is exported from `invokeai/frontend/web/src/services/util/getHeaders.ts`. diff --git a/invokeai/frontend/web/docs/EVENTS.md b/invokeai/frontend/web/docs/EVENTS.md deleted file mode 100644 index 24f2497a20..0000000000 --- a/invokeai/frontend/web/docs/EVENTS.md +++ /dev/null @@ -1,21 +0,0 @@ -# Events - -Events via `socket.io` - -## `actions.ts` - -Redux actions for all socket events. Payloads all include a timestamp, and optionally some other data. - -Any reducer (or middleware) can respond to the actions. - -## `middleware.ts` - -Redux middleware for events. - -Handles dispatching the event actions. Only put logic here if it can't really go anywhere else. - -For example, on connect we want to load images to the gallery if it's not populated. This requires dispatching a thunk, so we need to directly dispatch this in the middleware. - -## `types.ts` - -Hand-written types for the socket events. Cannot generate these from the server, but fortunately they are few and simple. diff --git a/invokeai/frontend/web/docs/NODE_EDITOR.md b/invokeai/frontend/web/docs/NODE_EDITOR.md deleted file mode 100644 index 0b4fbcbc81..0000000000 --- a/invokeai/frontend/web/docs/NODE_EDITOR.md +++ /dev/null @@ -1,17 +0,0 @@ -# Node Editor Design - -WIP - -nodes - -everything in `src/features/nodes/` - -have a look at `state.nodes.invocation` - -- on socket connect, if no schema saved, fetch `localhost:9090/openapi.json`, save JSON to `state.nodes.schema` -- on fulfilled schema fetch, `parseSchema()` the schema. this outputs a `Record` which is saved to `state.nodes.invocations` - `Invocation` is like a template for the node -- when you add a node, the the `Invocation` template is passed to `InvocationComponent.tsx` to build the UI component for that node -- inputs/outputs have field types - and each field type gets an `FieldComponent` which includes a dispatcher to write state changes to redux `nodesSlice` -- `reactflow` sends changes to nodes/edges to redux -- to invoke, `buildNodesGraph()` state, then send this -- changed onClick Invoke button actions to build the schema, then when schema builds it dispatches the actual network request to create the session - see `session.ts` diff --git a/invokeai/frontend/web/docs/PACKAGE_SCRIPTS.md b/invokeai/frontend/web/docs/PACKAGE_SCRIPTS.md deleted file mode 100644 index 5f882717b1..0000000000 --- a/invokeai/frontend/web/docs/PACKAGE_SCRIPTS.md +++ /dev/null @@ -1,17 +0,0 @@ -# Package Scripts - -WIP walkthrough of `package.json` scripts. - -## `theme` & `theme:watch` - -These run the Chakra CLI to generate types for the theme, or watch for code change and re-generate the types. - -The CLI essentially monkeypatches Chakra's files in `node_modules`. - -## `postinstall` - -The `postinstall` script patches a few packages and runs the Chakra CLI to generate types for the theme. - -### Patch `@chakra-ui/cli` - -See: diff --git a/invokeai/frontend/web/docs/README.md b/invokeai/frontend/web/docs/README.md index e8b150e71e..4783999419 100644 --- a/invokeai/frontend/web/docs/README.md +++ b/invokeai/frontend/web/docs/README.md @@ -1,33 +1,98 @@ # InvokeAI Web UI + + + + - [InvokeAI Web UI](#invokeai-web-ui) - - [Stack](#stack) + - [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) + - [Client Types Generation](#client-types-generation) + - [Package Scripts](#package-scripts) - [Contributing](#contributing) - [Dev Environment](#dev-environment) + - [VSCode Remote Dev](#vscode-remote-dev) - [Production builds](#production-builds) -The UI is a fairly straightforward Typescript React app. The only really fancy stuff is the Unified Canvas. + -Code in `invokeai/frontend/web/` if you want to have a look. +The UI is a fairly straightforward Typescript React app. -## Stack +## Core Libraries -State management is Redux via [Redux Toolkit](https://github.com/reduxjs/redux-toolkit). We lean heavily on RTK: -- `createAsyncThunk` for HTTP requests -- `createEntityAdapter` for fetching images and models -- `createListenerMiddleware` for workflows +The app makes heavy use of a handful of libraries. -The API client and associated types are generated from the OpenAPI schema. See API_CLIENT.md. +### Redux Toolkit -Communication with server is a mix of HTTP and [socket.io](https://github.com/socketio/socket.io-client) (with a simple socket.io redux middleware to help). +[Redux Toolkit](https://github.com/reduxjs/redux-toolkit) is used for state management and fetching/caching: -[Chakra-UI](https://github.com/chakra-ui/chakra-ui) for components and styling. +- `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 -[Konva](https://github.com/konvajs/react-konva) for the canvas, but we are pushing the limits of what is feasible with it (and HTML canvas in general). We plan to rebuild it with [PixiJS](https://github.com/pixijs/pixijs) to take advantage of WebGL's improved raster handling. +We use [redux-remember](https://github.com/zewish/redux-remember) for persistence. -[Vite](https://vitejs.dev/) for bundling. +### Socket\.IO -Localisation is via [i18next](https://github.com/i18next/react-i18next), but translation happens on our [Weblate](https://hosted.weblate.org/engage/invokeai/) project. Only the English source strings should be changed on this repo. +[Socket\.IO](https://github.com/socketio/socket.io) is used for server-to-client events, like generation process and queue state changes. + +### Chakra UI + +[Chakra UI](https://github.com/chakra-ui/chakra-ui) is our primary UI library, but we also use a few components from [Mantine v6](https://v6.mantine.dev/). + +### KonvaJS + +[KonvaJS](https://github.com/konvajs/react-konva) powers the canvas. In the future, we'd like to explore [PixiJS](https://github.com/pixijs/pixijs) or WebGPU. + +### Vite + +[Vite](https://github.com/vitejs/vite) is our bundler. + +### i18next & Weblate + +We use [i18next](https://github.com/i18next/react-i18next) for localisation, but translation to languages other than English happens on our [Weblate](https://hosted.weblate.org/engage/invokeai/) project. **Only the English source strings should be changed on this repo.** + +### openapi-typescript + +[openapi-typescript](https://github.com/drwpow/openapi-typescript) is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md. + +## Client Types Generation + +We use [`openapi-typescript`](https://github.com/drwpow/openapi-typescript) to generate types from the app's OpenAPI schema. + +The generated types are written to `invokeai/frontend/web/src/services/api/schema.d.ts`. This file is committed to the repo. + +The server must be started and available at . + +```sh +# from the repo root, start the server +python scripts/invokeai-web.py +# from invokeai/frontend/web/, run the script +yarn typegen +``` + +## Package Scripts + +See `package.json` for all scripts. + +Run with `yarn