Skip to content

Local Development#

If you are looking to contribute you will need to have a local development environment. See the Developer Install for full details.

Broadly this involves cloning the repository, installing the pre-reqs, and InvokeAI (in editable form). Assuming this is working, choose your area of focus.

Documentation#

We use mkdocs for our documentation with the material theme. Documentation is written in markdown files under the ./docs folder and then built into a static website for hosting with GitHub Pages at invoke-ai.github.io/InvokeAI.

To contribute to the documentation you'll need to install the dependencies. Note the use of ".

pip install ".[docs]"

Now, to run the documentation locally with hot-reloading for changes made.

mkdocs serve

You'll then be prompted to connect to http://127.0.0.1:8080 in order to access.

Backend#

The backend is contained within the ./invokeai/backend folder structure. To get started however please install the development dependencies.

From the root of the repository run the following command. Note the use of ".

pip install ".[test]"

This in an optional group of packages which is defined within the pyproject.toml and will be required for testing the changes you make the the code.

Running Tests#

We use pytest for our test suite. Tests can be found under the ./tests folder and can be run with a single pytest command. Optionally, to review test coverage you can append --cov.

pytest --cov

Test outcomes and coverage will be reported in the terminal. In addition a more detailed report is created in both XML and HTML format in the ./coverage folder. The HTML one in particular can help identify missing statements requiring tests to ensure coverage. This can be run by opening ./coverage/html/index.html.

For example.

pytest --cov; open ./coverage/html/index.html
HTML coverage report output

html-overview

html-detail

Front End#

InvokeAI Web UI#

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.

Details#

State management is Redux via Redux Toolkit. Communication with server is a mix of HTTP and socket.io (with a custom redux middleware to help).

Chakra-UI for components and styling.

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 to take advantage of WebGL's improved raster handling.

Vite for bundling.

Localisation is via i18next, but translation happens on our Weblate project. Only the English source strings should be changed on this repo.

Contributing#

Thanks for your interest in contributing to the InvokeAI Web UI!

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#

Install node and yarn classic.

From invokeai/frontend/web/ run yarn install to get everything set up.

Start everything in dev mode:

  1. Start the dev server: yarn dev
  2. Start the InvokeAI UI per usual: invokeai --web
  3. Point your browser to the dev server address e.g. http://localhost:5173/

Production builds#

For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.

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.

Last update: March 5, 2023
Created: March 5, 2023