You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The UI is a fairly straightforward Typescript React app.
28
-
29
18
## Core Libraries
30
19
31
-
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.
32
-
33
-
### Redux Toolkit
34
-
35
-
[Redux Toolkit] is used for state management and fetching/caching:
36
-
37
-
-`RTK-Query` for data fetching and caching
38
-
-`createAsyncThunk` for a couple other HTTP requests
39
-
-`createEntityAdapter` to normalize things like images and models
40
-
-`createListenerMiddleware` for async workflows
41
-
42
-
We use [redux-remember] for persistence.
43
-
44
-
### Socket\.IO
45
-
46
-
[Socket.IO] is used for server-to-client events, like generation process and queue state changes.
47
-
48
-
### Chakra UI
49
-
50
-
[Chakra UI] is our primary UI library, but we also use a few components from [Mantine v6].
51
-
52
-
### KonvaJS
53
-
54
-
[KonvaJS] powers the canvas. In the future, we'd like to explore [PixiJS] or WebGPU.
55
-
56
-
### Vite
20
+
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.
57
21
58
-
[Vite] is our bundler.
22
+
-[Redux Toolkit]
23
+
-[redux-remember]
24
+
-[Socket.IO]
25
+
-[Chakra UI]
26
+
-[KonvaJS]
27
+
-[Vite]
28
+
-[openapi-typescript]
29
+
-[reactflow]
30
+
-[zod]
59
31
60
-
### i18next & Weblate
61
-
62
-
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.**
63
-
64
-
### openapi-typescript
65
-
66
-
[openapi-typescript] is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md.
67
-
68
-
### reactflow
32
+
## Package Scripts
69
33
70
-
[reactflow] powers the Workflow Editor.
34
+
See `package.json` for all scripts.
71
35
72
-
### zod
36
+
Run with `pnpm <script name>`.
73
37
74
-
[zod] schemas are used to model data structures and provide runtime validation.
38
+
-`dev`: run the frontend in dev mode, enabling hot reloading
39
+
-`build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
40
+
-`typegen`: generate types from the OpenAPI schema (see [Client Types Generation])
41
+
-`lint:madge`: check frontend for circular dependencies
42
+
-`lint:eslint`: check frontend for code quality
43
+
-`lint:prettier`: check frontend for code formatting
44
+
-`lint:tsc`: check frontend for type issues
45
+
-`lint`: run all checks concurrently
46
+
-`fix`: run `eslint` and `prettier`, fixing fixable issues
75
47
76
-
## Client Types Generation
48
+
###Client Types Generation
77
49
78
50
We use [openapi-typescript] to generate types from the app's OpenAPI schema.
Thanks for your interest in contributing to the Invoke Web UI!
96
66
97
-
-`dev`: run the frontend in dev mode, enabling hot reloading
98
-
-`build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
99
-
-`typegen`: generate types from the OpenAPI schema (see [Client Types Generation](#client-types-generation))
100
-
-`lint:madge`: check frontend for circular dependencies
101
-
-`lint:eslint`: check frontend for code quality
102
-
-`lint:prettier`: check frontend for code formatting
103
-
-`lint:tsc`: check frontend for type issues
104
-
-`lint`: run all checks concurrently
105
-
-`fix`: run `eslint` and `prettier`, fixing fixable issues
67
+
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.
106
68
107
-
##Contributing
69
+
### Localization
108
70
109
-
Thanks for your interest in contributing to the InvokeAI Web UI!
71
+
We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
110
72
111
-
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.
73
+
**Only the English source strings should be changed on this repo.**
112
74
113
75
### Dev Environment
114
76
@@ -118,23 +80,19 @@ From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
118
80
119
81
Start everything in dev mode:
120
82
121
-
1.Start the dev server: `pnpm dev`
122
-
2.Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
3. Point your browser to the dev server address e.g. <http://localhost:5173/>
124
86
125
-
#### VSCode Remote Dev
126
-
127
-
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:
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.
132
90
133
-
For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
91
+
We suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
134
92
135
-
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.
0 commit comments