add optional apiUrl prop

invokeai/frontend/web/index.d.ts

@@ -66,7 +66,11 @@ declare module '@invoke-ai/invoke-ai-ui' {
   }
 }
 
-declare function Invoke(props: PropsWithChildren): JSX.Element;
+interface InvokeProps extends PropsWithChildren {
+  apiUrl?: string;
+}
+
+declare function Invoke(props: InvokeProps): JSX.Element;
 
 export {
   ThemeChanger,

invokeai/frontend/web/src/component.tsx

@@ -1,8 +1,9 @@
-import React, { lazy, PropsWithChildren } from 'react';
+import React, { lazy, PropsWithChildren, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store } from './app/store';
 import { persistor } from './persistor';
+import { OpenAPI } from 'services/api';
 import '@fontsource/inter/100.css';
 import '@fontsource/inter/200.css';
 import '@fontsource/inter/300.css';
@@ -21,14 +22,22 @@ import './i18n';
 const App = lazy(() => import('./app/App'));
 const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
 
-export default function Component(props: PropsWithChildren) {
+interface Props extends PropsWithChildren {
+  apiUrl?: string;
+}
+
+export default function Component({ apiUrl, children }: Props) {
+  useEffect(() => {
+    if (apiUrl) OpenAPI.BASE = apiUrl;
+  }, [apiUrl]);
+
   return (
     <React.StrictMode>
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>
-              <App>{props.children}</App>
+              <App>{children}</App>
             </ThemeLocaleProvider>
           </React.Suspense>
         </PersistGate>