diff --git a/vue/src/page/fileTransfer/fullScreenContextMenu.vue b/vue/src/page/fileTransfer/fullScreenContextMenu.vue index 06c5dbe..19d1714 100644 --- a/vue/src/page/fileTransfer/fullScreenContextMenu.vue +++ b/vue/src/page/fileTransfer/fullScreenContextMenu.vue @@ -22,6 +22,7 @@ import { toRawFileUrl } from '@/util/file' import ContextMenu from '@/components/ContextMenu.vue' import { useWatchDocument } from 'vue3-ts-util' import { useTagStore } from '@/store/useTagStore' +import { parse } from 'stable-diffusion-image-metadata'; const global = useGlobalStore() @@ -36,6 +37,14 @@ const currImgResolution = ref('') const q = createReactiveQueue() const imageGenInfo = ref('') const geninfoFrags = computed(() => imageGenInfo.value.split('\n')) +const geninfoStruct = computed(() => parse(imageGenInfo.value)) + +const geninfoStructNoPrompts = computed(() => { + let p = parse(imageGenInfo.value); + delete p.prompt; + delete p.negativePrompt; + return p; +}) const emit = defineEmits<{ (type: 'contextMenuClick', e: MenuInfo, file: FileNodeInfo, idx: number): void }>() @@ -90,6 +99,26 @@ function getParNode (p: any) { return p.parentNode as HTMLDivElement } +function spanWrap(text: string) { + if (!text) { + return "" + } + let result = ''; + const values = text.split(/[\n,]+/); + let parenthesisActive = false; + for (let i = 0; i < values.length; i++) { + const trimmedValue = values[i].trim(); + if(!parenthesisActive) parenthesisActive = trimmedValue.includes("("); + const cssClass = parenthesisActive ? "has-parentheses" : ""; + result += `${trimmedValue}`; + if (i < values.length - 1) { + result += ","; + } + if(parenthesisActive) parenthesisActive = !trimmedValue.includes(")"); + } + return result; +} + useWatchDocument('load', e => { const el = e.target as HTMLImageElement if (el.className === 'ant-image-preview-img') { @@ -192,9 +221,26 @@ const copyPositivePrompt = () => { {{ tag.name }} -

- {{ txt }} -

+
+
+

Prompt

+ +
+

Negative Prompt

+ +

+

Params

+ + + + + + +
{{key}} + {{ txt }} + + {{ txt }} +
@@ -234,7 +280,7 @@ const copyPositivePrompt = () => { color: white; } } - } + } .container { height: 100%; @@ -253,6 +299,49 @@ const copyPositivePrompt = () => { padding-top: 4px; position: relative; + code { + font-size:0.9em; + display: block; + padding: 4px; + background: var(--zp-primary-background); + border-radius: 4px; + border: 2px solid var(--zp-primary); + margin-right:20px; + white-space: pre-wrap; + word-break: break-word; + line-height: 1.78em; + + :deep(span) { + background: rgba(0,0,0,0.06); + color: black; + padding: 2px 4px; + border-radius: 4px; + margin-right: 4px; + } + + :deep(.has-parentheses) { + background: rgba(255,100,100,0.14); + } + :deep(span:hover) { + background: rgba(120,0,0,0.15); + } + } + + table { + font-size: 1em; + border-radius: 4px; + border: 2px solid var(--zp-primary); + border-collapse: separate; + margin-bottom: 3em; + } + + table td { + padding-right: 14px; + padding-left:4px; + border-bottom: 1px solid var(--zp-primary); + border-collapse: collapse; + } + .info-tags { .info-tag { display: inline-block;