Correctly save frontend state

src/lib/components/ComfyApp.svelte

@@ -55,19 +55,38 @@
 
  let graphResizeTimer: typeof Timer = -1;
 
- function doAutosave(graph: LGraph): void {
+ function serializeAppState(graph: LGraph): SerializedAppState {
-     // We will merge in the state of the frontend instead of what's inside the
-     // LGraph structure.
      const frontendState = get(widgetState);
 
      const serializedGraph = graph.serialize()
      const serializedPaneOrder = uiPane.serialize()
 
-     const savedWorkflow = {
+     // Override the saved graph widget state with the properties set in the
-         graph: serializedGraph,
+     // frontend panels.
-         panes: serializedPaneOrder
+     for (let i = 0; i < serializedGraph.nodes.length; i++) {
+         let serializedNode = serializedGraph.nodes[i];
+         let frontendWidgetStates = frontendState[serializedNode.id];
+         if (frontendWidgetStates) {
+             for (let j = 0; j < serializedNode.widgets_values.length; j++) {
+                 let frontendWidgetState = frontendWidgetStates[j];
+
+                 // Virtual widgets always come after real widgets in the current design
+                 if (frontendWidgetState && !frontendWidgetState.isVirtual) {
+                     serializedNode.widgets_values[j] = frontendWidgetState.value;
+                 }
+             }
+         }
      }
 
+     return {
+         version: 1,
+         workflow: serializedGraph,
+         panes: serializedPaneOrder
+     }
+ }
+
+ function doAutosave(graph: LGraph): void {
+     const savedWorkflow = serializeAppState(graph);
      localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
  }
 
@@ -136,6 +155,9 @@
         <Button variant="secondary" on:click={toggleSidebar}>
             Toggle Sidebar
         </Button>
+        <Button variant="secondary" on:click={() => { if (app?.lGraph) doAutosave(app.lGraph) }}>
+            Save
+        </Button>
     </div>
     <LightboxModal />
 </div>

src/lib/components/ComfyApp.ts

@@ -30,6 +30,7 @@ export type SerializedPanes = {
 }
 
 export type SerializedAppState = {
+    version: number,
     panes: SerializedPanes,
     workflow: SerializedLGraph
 }