Frontend prep for migration to nodes

[psychedelicious]

Frontend prep for migration to nodes

Working on getting things ready.

Organize internal state

• Separate out generation parameters from other options
• Rename all ambiguously named parameters (e.g. seamless --> shouldTileX & shouldTileY, stuff like this)
• Similarly, move magic value type parameters from the UI layer (like floats that disable at 0 and enable at any other value) to a translation layer

API

• Decide how to handle HTTP requests (straight fetch, RTK createAsyncThunk, some other library?)
• Write functions to shape internal state into graphs

Probably a lot of other stuff.

[psychedelicious]

@blessedcoolant @kasbah I'll be working from this branch/PR on prep for the migration to the new API.

My intention is to clean up internal state quite a bit by refactoring its shape, and changing how a lot of the "magic value" parameters are handled (e.g. move the magic into an API payload preprocessor kinda area).

Also, to decide how to make HTTP calls - leaning towards RTK's createAsyncThunk API.

Let me know if you want to participate or have any suggestions or feedback.

Also @kasbah check out this PR and branch to see how the new system will work (if you haven't already).

[blessedcoolant]

Sounds like a plan. I'll get in on it and help out once I'm back on the system in a few days. Provided nature doesn't mess things up.

Good to have you back.

[kasbah]

I don't have time for a proper review right now but looks like a lot of renaming of things to more appropriate things :) 👍

[Kyle0654]

You may want to look at OpenAPI generator and see if any of the languages/frameworks it can generate are useful.

[psychedelicious]

Redux Toolkit provides a very nice layer over createAsyncThunk called RTK Query. It can do API generation from OpenAPI.

Need to do some testing with regard to runtime generation - getting this working well will be the tricky part, and is needed for automatic UI generation for nodes.

[psychedelicious]

I've set up husky to format w/ prettier and run eslint on each commit. Also, I've formatted and linted the frontend codebase.

Frontend contributors will need to yarn install if they work on this branch

[psychedelicious]

Added a bunch more code quality stuff:

• After building check stats.html for a breakdown of the bundle
• Added a babel plugin to fix lodash imports to be treeshakeable and enforce that
• Tweaked a lot of the lint/prettier config

Added RTK's OpenAPI code generator so can generate the API client. Right now it's pointed at the swagger petstore demo API. It generates on yarn (dev|build|build-dev) or you can manually generate with yarn gen-api.

At this point the next step is actually to start migrating to the new API.

PS: It's possible I've borked the github actions to lint and format, will worry about it later.

[blessedcoolant]

It seems @lstein moved the directory of the frontend. Maybe rebase this before going ahead with more changes.

[Kyle0654]

Ack I thought no major refractors were going to happen until after diffusers 😣

[psychedelicious]

Yeah I saw - no worries I'll rearrange things in my pr

[blessedcoolant]

Let me know when this is in a state for a test run.

[psychedelicious]

@blessedcoolant
Ok, have two minimal working examples.

1. feat/prep-for-nodes using openapi-typescript-codegen to generate the API client. This provides minimal wrappers around fetch.
2. feat/prep-for-nodes-rtk using @rtk-query/codegen-openapi to generate the API client. This provides more feature-rich wrappers around fetch and puts all data into redux for you, which I think is less useful than it sounds for us. It generates hooks for each API route which is pretty cool.

Both branches just have a couple packages different, and should provide the same UI, but use different generated APIs.

There are other options for API generation:

• https://github.com/astahmer/openapi-zod-client gives you zod validation schemas, types, and an axios-based API client. Zod is really really nice. Unsure if it really provides much value for us at this point. This project is very new and I'm reluctant to adopt it for that reason - the others are all more mature.
• https://github.com/OpenAPITools/openapi-generator is written in java and generates code for many languages including a few typescript varieties. It is packaged on NPM so we can use it easily

Set up

You will need another clone of InvokeAI to run the nodes server bc it isn't updated yet.

• Use this branch for server https://github.com/invoke-ai/InvokeAI/tree/nodes
• Install via these instructions https://github.com/invoke-ai/InvokeAI/blob/fix/small-things/docs/installation/020_INSTALL_MANUAL.md
• In addition to its own separate venv, it probably needs its own runtime directory via the configure script
• Run nodes server python scripts/invoke-new.py --web --host 0.0.0.0 --root_dir <runtime dir>
• Once the server says its ready, yarn dev, you should see it generate the API in terminal briefly output showing it generating the API, then move to normal vite dev output
• You don't need to run the normal server for this basic example

Now you should see a create and invoke button at the top of the app. It will say disconnected but the nodes stuff will still work. Create first then invoke, should make you a pizza and show it in the OS image viewer :)

[psychedelicious]

Closing. Will open a new PR for nodes migration when we get to it.