Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): update readme

Browse Source
This commit is contained in:
psychedelicious 2023-11-27 08:53:52 +11:00
parent e41d0b9a76
commit 4c6a88a642
1 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
invokeai/frontend/web/docs/README.md
View File

@ -14,6 +14,7 @@
- [i18next & Weblate](#i18next--weblate) - [i18next & Weblate](#i18next--weblate)
- [openapi-typescript](#openapi-typescript) - [openapi-typescript](#openapi-typescript)
- [reactflow](#reactflow) - [reactflow](#reactflow)
- [zod](#zod)
- [Client Types Generation](#client-types-generation) - [Client Types Generation](#client-types-generation)
- [Package Scripts](#package-scripts) - [Package Scripts](#package-scripts)
- [Contributing](#contributing) - [Contributing](#contributing)
@ -31,50 +32,50 @@ InvokeAI's UI is made possible by a number of excellent open-source libraries. T
### Redux Toolkit ### Redux Toolkit
[Redux Toolkit](https://github.com/reduxjs/redux-toolkit) is used for state management and fetching/caching: [Redux Toolkit] is used for state management and fetching/caching:
- `RTK-Query` for data fetching and caching - `RTK-Query` for data fetching and caching
- `createAsyncThunk` for a couple other HTTP requests - `createAsyncThunk` for a couple other HTTP requests
- `createEntityAdapter` to normalize things like images and models - `createEntityAdapter` to normalize things like images and models
- `createListenerMiddleware` for async workflows - `createListenerMiddleware` for async workflows
We use [redux-remember](https://github.com/zewish/redux-remember) for persistence. We use [redux-remember] for persistence.
### Socket\.IO ### Socket\.IO
[Socket\.IO](https://github.com/socketio/socket.io) is used for server-to-client events, like generation process and queue state changes. [Socket.IO] is used for server-to-client events, like generation process and queue state changes.
### Chakra UI ### 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/). [Chakra UI] is our primary UI library, but we also use a few components from [Mantine v6].
### KonvaJS ### 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. [KonvaJS] powers the canvas. In the future, we'd like to explore [PixiJS] or WebGPU.
### Vite ### Vite
[Vite](https://github.com/vitejs/vite) is our bundler. [Vite] is our bundler.
### i18next & Weblate ### i18next & Weblate
We use [i18next](https://github.com/i18next/react-i18next) for localization, 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.** 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
[openapi-typescript](https://github.com/drwpow/openapi-typescript) is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md. [openapi-typescript] is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md.
### reactflow ### reactflow
[reactflow](https://github.com/xyflow/xyflow) powers the Workflow Editor. [reactflow] powers the Workflow Editor.
### zod ### zod
[zod](https://github.com/colinhacks/zod) schemas are used to model data structures and provide runtime validation. [zod] schemas are used to model data structures and provide runtime validation.
## Client Types Generation ## Client Types Generation
We use [`openapi-typescript`](https://github.com/drwpow/openapi-typescript) to generate types from the app's OpenAPI schema. We use [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 generated types are written to `invokeai/frontend/web/src/services/api/schema.d.ts`. This file is committed to the repo.
@ -107,11 +108,11 @@ Run with `yarn <script name>`.
Thanks for your interest in contributing to the InvokeAI Web UI! Thanks for your interest in contributing to the InvokeAI Web UI!
We encourage you to ping @psychedelicious and @blessedcoolant on [Discord](https://discord.gg/ZmtBAhwWhy) 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. 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.
### Dev Environment ### Dev Environment
Install [node](https://nodejs.org/en/download/) and [yarn classic](https://classic.yarnpkg.com/lang/en/). Install [node] and [yarn classic].
From `invokeai/frontend/web/` run `yarn install` to get everything set up. From `invokeai/frontend/web/` run `yarn install` to get everything set up.
@ -134,3 +135,20 @@ For a number of technical and logistical reasons, we need to commit UI build art
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. 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 `yarn build`. To build for production, run `yarn build`.
[node]: https://nodejs.org/en/download/
[yarn classic]: https://classic.yarnpkg.com/lang/en/
[discord]: https://discord.gg/ZmtBAhwWhy
[Redux Toolkit]: https://github.com/reduxjs/redux-toolkit
[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