Error handling modals

2023-05-21 16:55:18 -05:00
parent 02afbae406
commit a3c10d5be9
12 changed files with 241 additions and 61 deletions
--- a/src/lib/components/modal/A1111PromptModal.svelte
+++ b/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>