Crude POC of nodes invocation using RTK query

invokeai/frontend/.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 patches/
 public/
+src/services/

invokeai/frontend/.prettierignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 patches/
 public/
+src/services/

invokeai/frontend/dist/index.html

@@ -7,8 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index.5c5bc3f1.js"></script>
-    <link rel="stylesheet" href="./assets/index.8badc8b4.css">
+    <script type="module" crossorigin src="./assets/index.6ac48a47.js"></script>
+    <link rel="stylesheet" href="./assets/index.7c62aab5.css">
     <script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>
     <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
   </head>
@@ -17,7 +17,7 @@
     <div id="root"></div>
 
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
-    <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-dde3a68a.js"></script>
-    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-35973932.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-95446b53.js"></script>
+    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-b2c8bd7e.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

invokeai/frontend/dist/locales/options/en.json → invokeai/frontend/dist/locales/parameters/en.json

@@ -46,6 +46,7 @@
   "sendTo": "Send to",
   "sendToImg2Img": "Send to Image to Image",
   "sendToUnifiedCanvas": "Send To Unified Canvas",
+  "copyImage": "Copy Image",
   "copyImageToLink": "Copy Image To Link",
   "downloadImage": "Download Image",
   "openInViewer": "Open In Viewer",

invokeai/frontend/package.json

@@ -14,7 +14,7 @@
     "prettier": "prettier *.{json,js,ts,html} src/**/*.{ts,tsx,scss} --write .",
     "fmt": "npm run prettier -- --write",
     "postinstall": "patch-package",
-    "gen-api": "npx @rtk-query/codegen-openapi openapi-config.ts"
+    "gen-api": "openapi -i http://127.0.0.1:9090/openapi.json -o src/services/openapi"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.10",
@@ -58,7 +58,6 @@
     "yarn": "^1.22.19"
   },
   "devDependencies": {
-    "@rtk-query/codegen-openapi": "^1.0.0",
     "@types/dateformat": "^5.0.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -76,6 +75,8 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "madge": "^5.0.1",
+    "openapi-typescript": "^6.1.0",
+    "openapi-typescript-codegen": "^0.23.0",
     "patch-package": "^6.5.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.3",

invokeai/frontend/src/app/App.tsx

@@ -5,25 +5,119 @@ import SiteHeader from 'features/system/components/SiteHeader';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
 import { keepGUIAlive } from './utils';
 
+import { Button, Flex, Text } from '@chakra-ui/react';
+import { SessionsService } from 'services/openapi';
+
 import useToastWatcher from 'features/system/hooks/useToastWatcher';
 
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
-import { useGetPetByIdQuery } from './invokeApi';
+import { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+
+type GeneratorProgress = {
+  session_id: string;
+  invocation_id: string;
+  step: number;
+  percent: number;
+};
 
 keepGUIAlive();
 
+const socket_url = `ws://${window.location.host}`;
+const socket = io(socket_url, {
+  path: '/ws/socket.io',
+});
+
 const App = () => {
   useToastWatcher();
 
-  const { data, error, isLoading } = useGetPetByIdQuery({ petId: 1 });
+  const [sessionId, setSessionId] = useState<string>();
+  const [invocationProgress, setInvocationProgress] = useState<number>();
+  const [isInvocationPending, setIsInvocationPending] = useState(false);
+
+  const handleCreateSession = async () => {
+    const { id } = await SessionsService.createSession({
+      nodes: [
+        {
+          id: 'a',
+          type: 'txt2img',
+          prompt: 'pizza',
+          steps: 10,
+        },
+        {
+          id: 'b',
+          type: 'show_image',
+        },
+      ],
+      links: [
+        {
+          from_node: { id: 'a', field: 'image' },
+          to_node: { id: 'b', field: 'image' },
+        },
+      ],
+    });
+
+    setSessionId(id);
+    socket.emit('subscribe', { session: id });
+  };
+
+  const handleInvokeSession = async () => {
+    if (sessionId) {
+      setIsInvocationPending(true);
+      SessionsService.invokeSession(sessionId, true);
+    }
+  };
+
+  useEffect(() => {
+    socket.removeAllListeners();
+    socket.on('generator_progress', (data: GeneratorProgress) => {
+      console.log('generator_progress', data);
+      setInvocationProgress(data.percent);
+    });
+    socket.on('invocation_complete', async (data) => {
+      setIsInvocationPending(false);
+      setInvocationProgress(undefined);
+      setSessionId(undefined);
+      console.log('invocation_complete', data);
+      socket.emit('unsubscribe', { session: sessionId });
+    });
+    socket.on('invocation_started', (data) =>
+      console.log('invocation_started', data)
+    );
+    socket.on('session_complete', (data) => {
+      console.log('session_complete', data);
+    });
 
-  console.log(data, error, isLoading);
+    () => {
+      socket.emit('unsubscribe', { session: sessionId });
+      socket.removeAllListeners();
+      socket.disconnect();
+    };
+  }, [sessionId]);
 
   return (
     <div className="App">
       <ImageUploader>
         <ProgressBar />
+        <Flex gap={2} p={2} alignItems="center">
+          <Button onClick={handleCreateSession} isDisabled={!!sessionId}>
+            Create Session
+          </Button>
+          <Button
+            onClick={handleInvokeSession}
+            isDisabled={!sessionId || isInvocationPending}
+            isLoading={isInvocationPending}
+            loadingText={`Invoking ${
+              invocationProgress === undefined
+                ? '...'
+                : `${Math.round(invocationProgress * 100)}%`
+            }`}
+          >
+            Invoke
+          </Button>
+          {sessionId && <Text>Session: {sessionId}</Text>}
+        </Flex>
         <div className="app-content">
           <SiteHeader />
           <InvokeTabs />