cli option for the web base path or use relative paths

[steverweber]

When using invokeai in --web mode the html uses paths like /assets/index.58175ea1.css the issue is the base path is different because under a proxy. In my case users are using Jupyter with the jupyter-server-proxy module and have a path like https://jupyter.xxx/user/myid/proxy/9090/

Describe the solution you'd like

perhaps a CLI switch like --web_basepath=. So --web_basepath=/user/myid/proxy/9090/

Describe alternatives you've considered

Or perhaps relative paths will work best if it's a single page application assets/index.58175ea1.css

[steverweber]

might also be some wonky stuff around socket.io

[psychedelicious]

Hi @steverweber , I've changed the frontend bulid to use relative asset paths in #1185.

Can you please give this a go? Hopefully that's all that is needed.

[steverweber]

this is a good start. but sadly the socket.io stuff also needs work.
InvokeAI/frontend/index.d.ts

I was able to get invokeai working with a proxy+path by doing hacky stuff in the "compiled" frontend index.js file.

Perhaps more issues are in:
https://github.com/invoke-ai/InvokeAI/blob/main/frontend/src/app/socketio/middleware.ts
const socketio = io(http://${hostname}:${port}
notice the http is a hard coded proto for the socket. I'm using https so the browser will block the connection. Might be best to just use something like "io(${hostname}:${port}," and let the browser auto resolve it or perhaps blank works io('',{ timeout: 60000 })

Anyways I had some fun with invokeAI but sadly wont have time to play anymore.

Never the less hope my feedback was a little useful.

[psychedelicious]

@steverweber The hardcoded protocol is fixed in the development branch, in case you wanted to have a go with this again.

We'll keep the relative paths as that can't hurt anything else.

Please let me know if you are happy for this to be closed.

[steverweber]

your patch looks good. however still have issue with socket.io path because it's set to /socket.io

Perhaps file string:
rontend/vite.config.ts

could be changed to ./socket.io

[psychedelicious]

The config in that file is only used when running the frontend development server, so it wouldn't affect your use case.

I'm not sure how to fix the socket.io routing issue, hmm. @blessedcoolant , can you please review when you have time?

[steverweber]

ah yes ic.

a shot in the dark..

InvokeAI/frontend/src/app/socketio/middleware.ts

Line 27 in 899ba97

const socketio = io(origin, {

  const { origin } = new URL(window.location.href);
  const socketio = io(origin, {
    timeout: 60000,
    path: window.location.pathname + 'socket.io',
  });

[psychedelicious]

Well, that seems reasonable and it doesn't appear to break anything in my brief testing. I've updated the frontend bundle in the #1185 if you'd like to test it.

[steverweber]

Success!. Thanks for the quick turnaround.

[psychedelicious]

Nice! No worries, we will get it merged into development soon.