Error handling modals

src/lib/components/modal/A1111PromptModal.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+ import type { A1111ParsedInfotext } from "$lib/parseA1111";
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { TextBox } from "@gradio/form";
+ import { JsonView } from '@zerodevx/svelte-json-view'
+ import type { A1111PromptAndInfo } from "$lib/components/ComfyApp";
+ import { StaticImage } from "$lib/components/gradio/image";
+
+ export let prompt: A1111PromptAndInfo | null = null;
+
+ let json: any = {}
+ let a1111: A1111ParsedInfotext | null = null
+ let infotext: string = ""
+ let image: string | null = null;
+
+ $: if (prompt) {
+     infotext = prompt.infotext;
+     a1111 = prompt.parsedInfotext;
+     json = prompt.stdPrompt;
+     image = URL.createObjectURL(prompt.imageFile);
+ }
+ else {
+     infotext = ""
+     a1111 = null;
+     json = {}
+     image = null;
+ }
+
+</script>
+
+{#if prompt != null}
+    <div class="a1111-prompt-display">
+        <div class="prompt-container">
+            <Block>
+                <TextBox label="Infotext" show_label={true} value={infotext} lines={5} max_lines={20}/>
+            </Block>
+            <div class="scroll-container">
+                {#if a1111}
+                    {#if Object.keys(a1111.extraParams).length > 0}
+                        <Block>
+                            <BlockTitle>Unused Parameters</BlockTitle>
+                            <div class="json">
+                                <JsonView json={a1111.extraParams} />
+                            </div>
+                        </Block>
+                    {/if}
+                {/if}
+                <Block>
+                    <BlockTitle>Converted Prompt</BlockTitle>
+                    <div class="json">
+                        <JsonView {json} />
+                    </div>
+                </Block>
+            </div>
+        </div>
+        <Block>
+            <StaticImage show_label={false} label="Image" value={image} />
+        </Block>
+    </div>
+{/if}
+
+<style lang="scss">
+ .a1111-prompt-display {
+     width: 70vw;
+     height: 70vh;
+     color: none;
+
+     --jsonPaddingLeft: 1rem;
+     --jsonBorderLeft: 1px dotted var(--neutral-600);
+     --jsonBracketColor: currentcolor;
+     --jsonBracketHoverBackground: var(--neutral-100);
+     --jsonSeparatorColor: currentcolor;
+     --jsonKeyColor: var(--body-text-color);
+     --jsonValColor: var(--body-text-color-subdued);
+     --jsonValStringColor: var(--color-green-500);
+     --jsonValNumberColor: var(--color-blue-500);
+     --jsonValBooleanColor: var(--color-red-500);
+
+     display: flex;
+     flex-wrap: nowrap;
+     overflow-y: none;
+
+     flex-direction: row;
+
+     .prompt-container {
+         flex-direction: column;
+         overflow: auto;
+
+         .json {
+             font-family: monospace;
+         }
+
+         .scroll-container {
+             position: relative;
+             flex: 1 1 0%;
+             height: 100%;
+         }
+     }
+
+     :global(> .block) {
+         background: var(--panel-background-fill);
+     }
+
+     .accordion {
+         background: var(--panel-background-fill);
+
+
+         :global(> .block .block) {
+             background: var(--panel-background-fill);
+         }
+     }
+ }
+</style>

src/lib/components/modal/ConfirmConvertWithMissingNodeTypesModal.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+ export let missingNodeTypes: Set<string> = new Set();
+</script>
+
+<div>
+    When loading the graph, the following node types were not found:
+    <ul>
+        {#each Array.from(missingNodeTypes) as type}
+            <li>{type}</li>
+        {/each}
+    </ul>
+    Do you want to convert the workflow into ComfyBox format anyway? (You may lose some workflow state)
+</div>
+
+<style lang="scss">
+ div {
+     padding: 1rem;
+ }
+ ul {
+     padding-left: 2rem;
+
+     > li {
+         font-weight: bold;
+     }
+ }
+</style>

src/lib/components/modal/MissingNodeTypesModal.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+ export let missingNodeTypes: Set<string> = new Set();
+</script>
+
+<div>
+    When loading the graph, the following node types were not found:
+    <ul>
+        {#each Array.from(missingNodeTypes) as type}
+            <li>{type}</li>
+        {/each}
+    </ul>
+    Nodes that have failed to load will show as red on the graph.
+</div>
+
+<style lang="scss">
+ div {
+     padding: 1rem;
+ }
+ ul {
+     padding-left: 2rem;
+
+     > li {
+         font-weight: bold;
+     }
+ }
+</style>

src/lib/components/modal/WorkflowLoadErrorModal.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+ export let error: Error;
+</script>
+
+<div>
+    Loading aborted due to error reloading workflow data:
+    <div class="error-block">
+        <pre class="error">
+            {error.toString()}
+        </pre>
+        <pre class="stack">
+            {error?.stack || "(No stacktrace available)"}
+        </pre>
+    </div>
+</div>
+
+<style lang="scss">
+ div {
+     padding: 1rem;
+
+     > .error-block {
+         margin-top: 1rem;
+     }
+ }
+
+ pre {
+     font-size: 1.2rem;
+     padding: 1rem 0;
+     background-color: rgba(255, 0, 0, 0.2);
+     &.stack {
+         font-size: 1.0rem;
+         color: #ccc;
+         max-height: 50vh;
+         overflow: auto;
+         background-color: rgb(0, 0, 0, 0.2);
+     }
+ }
+</style>