From 9f484ded955c38243bc5d7d4951e1fb7476251ce Mon Sep 17 00:00:00 2001 From: matan Date: Fri, 12 Jan 2024 11:53:39 +0200 Subject: [PATCH] send feedback because that is very important --- javascript/global.css | 201 ++++++++------------------------- javascript/global.css.js | 201 ++++++++------------------------- javascript/out.js | 153 ++++++++++++++----------- ui/src/LearnDialog.jsx | 37 +++--- ui/src/SearchResultsDialog.jsx | 13 ++- 5 files changed, 211 insertions(+), 394 deletions(-) diff --git a/javascript/global.css b/javascript/global.css index 532ac8c..c7d9fb6 100644 --- a/javascript/global.css +++ b/javascript/global.css @@ -118,8 +118,8 @@ inset: 0px } -.bottom-3 { - bottom: 0.75rem +.bottom-4 { + bottom: 1rem } .left-0 { @@ -134,14 +134,6 @@ right: 0px } -.bottom-6 { - bottom: 1.5rem -} - -.bottom-4 { - bottom: 1rem -} - .z-50 { z-index: 50 } @@ -158,42 +150,38 @@ display: none } -.h-8 { - height: 2rem -} - -.h-6 { - height: 1.5rem -} - -.h-12 { - height: 3rem -} - .h-10 { height: 2.5rem } -.h-96 { - height: 24rem -} - .h-32 { height: 8rem } -.h-full { - height: 100% +.h-8 { + height: 2rem } .max-h-96 { max-height: 24rem } +.w-10 { + width: 2.5rem +} + .w-14 { width: 3.5rem } +.w-32 { + width: 8rem +} + +.w-4\/5 { + width: 80% +} + .w-fit { width: -moz-fit-content; width: fit-content @@ -207,84 +195,18 @@ width: 100vw } -.w-16 { - width: 4rem -} - -.w-10 { - width: 2.5rem -} - -.w-8 { - width: 2rem -} - -.w-1 { - width: 0.25rem -} - -.w-6 { - width: 1.5rem -} - -.w-7 { - width: 1.75rem -} - -.w-12 { - width: 3rem -} - -.w-96 { - width: 24rem -} - -.w-32 { - width: 8rem -} - -.w-1\/2 { - width: 50% -} - -.w-4\/5 { - width: 80% -} - .max-w-4xl { max-width: 56rem } -.max-w-7xl { - max-width: 80rem -} - .max-w-5xl { max-width: 64rem } -.max-w-full { - max-width: 100% -} - -.flex-shrink { - flex-shrink: 1 -} - .flex-grow { flex-grow: 1 } -@keyframes spin { - to { - transform: rotate(360deg) - } -} - -.animate-spin { - animation: spin 1s linear infinite -} - @keyframes pulse { 50% { opacity: .5 @@ -295,6 +217,16 @@ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite } +@keyframes spin { + to { + transform: rotate(360deg) + } +} + +.animate-spin { + animation: spin 1s linear infinite +} + .cursor-pointer { cursor: pointer } @@ -343,16 +275,16 @@ overflow-y: auto } -.rounded-xl { - border-radius: 0.75rem +.rounded { + border-radius: 0.25rem } .rounded-full { border-radius: 9999px } -.rounded { - border-radius: 0.25rem +.rounded-xl { + border-radius: 0.75rem } .rounded-t-xl { @@ -381,6 +313,11 @@ border-color: rgb(255 255 255 / var(--tw-border-opacity)) } +.bg-comfy-dark { + --tw-bg-opacity: 1; + background-color: rgb(34 34 34 / var(--tw-bg-opacity)) +} + .bg-comfy-light { --tw-bg-opacity: 1; background-color: rgb(53 53 53 / var(--tw-bg-opacity)) @@ -396,11 +333,6 @@ background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } -.bg-comfy-dark { - --tw-bg-opacity: 1; - background-color: rgb(34 34 34 / var(--tw-bg-opacity)) -} - .object-cover { -o-object-fit: cover; object-fit: cover @@ -439,40 +371,40 @@ line-height: 2rem } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem +} + .text-sm { font-size: 0.875rem; line-height: 1.25rem } -.text-xs { - font-size: 0.75rem; - line-height: 1rem -} - .text-xl { font-size: 1.25rem; line-height: 1.75rem } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem +.text-xs { + font-size: 0.75rem; + line-height: 1rem } .font-semibold { font-weight: 600 } -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)) -} - .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)) } +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)) +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)) @@ -486,58 +418,21 @@ text-decoration-line: none } -.opacity-0 { - opacity: 0 -} - -.opacity-100 { - opacity: 1 -} - .outline-none { outline: 2px solid transparent; outline-offset: 2px } -.outline-0 { - outline-width: 0px -} - .ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) } -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) -} - .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - .duration-300 { transition-duration: 300ms } diff --git a/javascript/global.css.js b/javascript/global.css.js index a37aab7..fb534a6 100644 --- a/javascript/global.css.js +++ b/javascript/global.css.js @@ -120,8 +120,8 @@ docStyle.innerHTML = `*, ::before, ::after { inset: 0px } -.bottom-3 { - bottom: 0.75rem +.bottom-4 { + bottom: 1rem } .left-0 { @@ -136,14 +136,6 @@ docStyle.innerHTML = `*, ::before, ::after { right: 0px } -.bottom-6 { - bottom: 1.5rem -} - -.bottom-4 { - bottom: 1rem -} - .z-50 { z-index: 50 } @@ -160,42 +152,38 @@ docStyle.innerHTML = `*, ::before, ::after { display: none } -.h-8 { - height: 2rem -} - -.h-6 { - height: 1.5rem -} - -.h-12 { - height: 3rem -} - .h-10 { height: 2.5rem } -.h-96 { - height: 24rem -} - .h-32 { height: 8rem } -.h-full { - height: 100% +.h-8 { + height: 2rem } .max-h-96 { max-height: 24rem } +.w-10 { + width: 2.5rem +} + .w-14 { width: 3.5rem } +.w-32 { + width: 8rem +} + +.w-4\\/5 { + width: 80% +} + .w-fit { width: -moz-fit-content; width: fit-content @@ -209,84 +197,18 @@ docStyle.innerHTML = `*, ::before, ::after { width: 100vw } -.w-16 { - width: 4rem -} - -.w-10 { - width: 2.5rem -} - -.w-8 { - width: 2rem -} - -.w-1 { - width: 0.25rem -} - -.w-6 { - width: 1.5rem -} - -.w-7 { - width: 1.75rem -} - -.w-12 { - width: 3rem -} - -.w-96 { - width: 24rem -} - -.w-32 { - width: 8rem -} - -.w-1\\/2 { - width: 50% -} - -.w-4\\/5 { - width: 80% -} - .max-w-4xl { max-width: 56rem } -.max-w-7xl { - max-width: 80rem -} - .max-w-5xl { max-width: 64rem } -.max-w-full { - max-width: 100% -} - -.flex-shrink { - flex-shrink: 1 -} - .flex-grow { flex-grow: 1 } -@keyframes spin { - to { - transform: rotate(360deg) - } -} - -.animate-spin { - animation: spin 1s linear infinite -} - @keyframes pulse { 50% { opacity: .5 @@ -297,6 +219,16 @@ docStyle.innerHTML = `*, ::before, ::after { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite } +@keyframes spin { + to { + transform: rotate(360deg) + } +} + +.animate-spin { + animation: spin 1s linear infinite +} + .cursor-pointer { cursor: pointer } @@ -345,16 +277,16 @@ docStyle.innerHTML = `*, ::before, ::after { overflow-y: auto } -.rounded-xl { - border-radius: 0.75rem +.rounded { + border-radius: 0.25rem } .rounded-full { border-radius: 9999px } -.rounded { - border-radius: 0.25rem +.rounded-xl { + border-radius: 0.75rem } .rounded-t-xl { @@ -383,6 +315,11 @@ docStyle.innerHTML = `*, ::before, ::after { border-color: rgb(255 255 255 / var(--tw-border-opacity)) } +.bg-comfy-dark { + --tw-bg-opacity: 1; + background-color: rgb(34 34 34 / var(--tw-bg-opacity)) +} + .bg-comfy-light { --tw-bg-opacity: 1; background-color: rgb(53 53 53 / var(--tw-bg-opacity)) @@ -398,11 +335,6 @@ docStyle.innerHTML = `*, ::before, ::after { background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } -.bg-comfy-dark { - --tw-bg-opacity: 1; - background-color: rgb(34 34 34 / var(--tw-bg-opacity)) -} - .object-cover { -o-object-fit: cover; object-fit: cover @@ -441,40 +373,40 @@ docStyle.innerHTML = `*, ::before, ::after { line-height: 2rem } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem +} + .text-sm { font-size: 0.875rem; line-height: 1.25rem } -.text-xs { - font-size: 0.75rem; - line-height: 1rem -} - .text-xl { font-size: 1.25rem; line-height: 1.75rem } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem +.text-xs { + font-size: 0.75rem; + line-height: 1rem } .font-semibold { font-weight: 600 } -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)) -} - .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)) } +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)) +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)) @@ -488,58 +420,21 @@ docStyle.innerHTML = `*, ::before, ::after { text-decoration-line: none } -.opacity-0 { - opacity: 0 -} - -.opacity-100 { - opacity: 1 -} - .outline-none { outline: 2px solid transparent; outline-offset: 2px } -.outline-0 { - outline-width: 0px -} - .ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) } -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) -} - .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - .duration-300 { transition-duration: 300ms } diff --git a/javascript/out.js b/javascript/out.js index faebc3c..8e8f26d 100644 --- a/javascript/out.js +++ b/javascript/out.js @@ -27489,6 +27489,13 @@ onClick: close }, "X" + ), /* @__PURE__ */ import_react25.default.createElement( + "a", + { + className: "text-lg p-2 rounded no-underline absolute top-0 right-0 m-4 text-white", + href: "https://github.com/OpenArt-AI/ComfyUI-Assistant/issues/new" + }, + "Send Feedback" ), /* @__PURE__ */ import_react25.default.createElement(_t.Title, { className: "flex flex-row justify-center" }, "Comfy Assistant ", /* @__PURE__ */ import_react25.default.createElement( "span", { @@ -28164,79 +28171,95 @@ className: "relative z-50", onClose: close }, - /* @__PURE__ */ import_react33.default.createElement("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-2" }, /* @__PURE__ */ import_react33.default.createElement(_t.Panel, { className: "w-full max-w-4xl rounded-xl border-white border-solid border-2 bg-comfy-light px-4 relative" }, /* @__PURE__ */ import_react33.default.createElement( - "span", + /* @__PURE__ */ import_react33.default.createElement("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-2" }, /* @__PURE__ */ import_react33.default.createElement( + _t.Panel, { - className: "font-semibold absolute top-0 left-0 m-4 cursor-pointer", - onClick: close + className: "w-full max-w-4xl rounded-xl border-white border-solid border-2 bg-comfy-light px-4 relative" }, - "X" - ), /* @__PURE__ */ import_react33.default.createElement(_t.Title, { className: "flex flex-row justify-center" }, "Search Results"), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col max-h-96 overflow-y-auto space-y-2 p-2 " }, data.items.map( - (item) => /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement( - "div", + /* @__PURE__ */ import_react33.default.createElement( + "span", { - className: "flex flex-row space-y-2 justify-between space-x-2 items-center p-2 rounded", - key: item.id + className: "font-semibold absolute top-0 left-0 m-4 cursor-pointer", + onClick: close }, - /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-32 h-32 relative flex-grow" }, /* @__PURE__ */ import_react33.default.createElement( - "img", - { - className: "object-cover absolute w-32 h-32 rounded", - src: item.thumbnails[0].url - } - )), - /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col w-4/5" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-2xl" }, item.name), /* @__PURE__ */ import_react33.default.createElement( - "div", - { - className: "p-2 border rounded text-xs" - }, - item.description.replace(/<[^>]*>?/gm, "").substring(0, 512) - )) - ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-row w-full justify-end space-x-2 items-center" }, /* @__PURE__ */ import_react33.default.createElement( + "X" + ), + /* @__PURE__ */ import_react33.default.createElement(_t.Title, { className: "flex flex-row justify-center" }, "Search Results"), + /* @__PURE__ */ import_react33.default.createElement( "a", { - className: "text-white no-underline px-2 ring-0 outline-none focus:outline-none", - href: `https://openart.ai/workflows/${item.id}`, - target: "_blank" + className: "text-lg p-2 rounded no-underline absolute top-0 right-0 m-4 text-white", + href: "https://github.com/OpenArt-AI/ComfyUI-Assistant/issues/new" }, - /* @__PURE__ */ import_react33.default.createElement(external_link_default, null), - " " - ), /* @__PURE__ */ import_react33.default.createElement( - "div", - { - onClick: (e4) => { - e4.target.classList.add("animate-pulse"); - e4.target.innerHTML = "Loading..."; - e4.target.disabled = true; - fetch( - "https://openart.ai/api/public/workflows/download", - { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ - workflow_id: item.id - }) - } - ).catch(() => { - alert("Error loading workflow"); - e4.target.classList.remove("animate-pulse"); - e4.target.disabled = false; - e4.target.innerHTML = "Use workflow"; - }).then((res) => res.json()).then((res) => { - e4.target.classList.remove("animate-pulse"); - e4.target.disabled = false; - e4.target.innerHTML = "Use workflow"; - app.loadGraphData(JSON.parse(res.payload)); - close(); - }); + "Send Feedback" + ), + /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col overflow-y-auto space-y-2 p-2 max-h-96" }, data.items.map( + (item) => /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement( + "div", + { + className: "flex flex-row space-y-2 justify-between space-x-2 items-center p-2 rounded", + key: item.id }, - className: "bg-comfy-dark p-2 rounded text-white text-lg font-semibold cursor-pointer" - }, - "Use workflow" - )), /* @__PURE__ */ import_react33.default.createElement("hr", { className: "w-full" })) - ), data.items.length === 0 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "text-center text-2xl" }, "No results found")))) + /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-32 h-32 relative flex-grow" }, /* @__PURE__ */ import_react33.default.createElement( + "img", + { + className: "object-cover absolute w-32 h-32 rounded", + src: item.thumbnails[0].url + } + )), + /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col w-4/5" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-2xl" }, item.name), /* @__PURE__ */ import_react33.default.createElement( + "div", + { + className: "p-2 border rounded text-xs" + }, + item.description.replace(/<[^>]*>?/gm, "").substring(0, 512) + )) + ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-row w-full justify-end space-x-2 items-center" }, /* @__PURE__ */ import_react33.default.createElement( + "a", + { + className: "text-white no-underline px-2 ring-0 outline-none focus:outline-none", + href: `https://openart.ai/workflows/${item.id}`, + target: "_blank" + }, + /* @__PURE__ */ import_react33.default.createElement(external_link_default, null), + " " + ), /* @__PURE__ */ import_react33.default.createElement( + "div", + { + onClick: (e4) => { + e4.target.classList.add("animate-pulse"); + e4.target.innerHTML = "Loading..."; + e4.target.disabled = true; + fetch( + "https://openart.ai/api/public/workflows/download", + { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + workflow_id: item.id + }) + } + ).catch(() => { + alert("Error loading workflow"); + e4.target.classList.remove("animate-pulse"); + e4.target.disabled = false; + e4.target.innerHTML = "Use workflow"; + }).then((res) => res.json()).then((res) => { + e4.target.classList.remove("animate-pulse"); + e4.target.disabled = false; + e4.target.innerHTML = "Use workflow"; + app.loadGraphData(JSON.parse(res.payload)); + close(); + }); + }, + className: "bg-comfy-dark p-2 rounded text-white text-lg font-semibold cursor-pointer" + }, + "Use workflow" + )), /* @__PURE__ */ import_react33.default.createElement("hr", { className: "w-full" })) + ), data.items.length === 0 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "text-center text-2xl" }, "No results found")) + )) ); } var SearchResultsDialog_default = SearchResultsDialog; diff --git a/ui/src/LearnDialog.jsx b/ui/src/LearnDialog.jsx index 7c5301d..4b93c70 100644 --- a/ui/src/LearnDialog.jsx +++ b/ui/src/LearnDialog.jsx @@ -26,7 +26,8 @@ function LearnDialog({close, startVideo}) { X - + Send Feedback Comfy Assistant by @@ -42,24 +43,24 @@ function LearnDialog({close, startVideo}) { {window.data.modules.filter(module => module.categories.includes(selectedCategory)).map(module =>
{ - if (module.initialWorkflow) { - app.loadGraphData(JSON.parse(module.initialWorkflow)) - } - if (module.type === 'lesson') { - const keyframesFunctions = {} - if (module.keyframesWorkflows) { - for (let keyframe in module.keyframesWorkflows) { - const parsedWorkflow = JSON.parse(module.keyframesWorkflows[keyframe]) - keyframesFunctions[keyframe] = () => app.loadGraphData(parsedWorkflow); - } - } - startVideo({title:module.title, videoId:module.videoId, keyframesFunctions}) - } else { - close() - } + onClick={(e) => { + if (module.initialWorkflow) { + app.loadGraphData(JSON.parse(module.initialWorkflow)) + } + if (module.type === 'lesson') { + const keyframesFunctions = {} + if (module.keyframesWorkflows) { + for (let keyframe in module.keyframesWorkflows) { + const parsedWorkflow = JSON.parse(module.keyframesWorkflows[keyframe]) + keyframesFunctions[keyframe] = () => app.loadGraphData(parsedWorkflow); + } + } + startVideo({title: module.title, videoId: module.videoId, keyframesFunctions}) + } else { + close() + } - }} + }} > diff --git a/ui/src/SearchResultsDialog.jsx b/ui/src/SearchResultsDialog.jsx index d84b19e..0ef6b3c 100644 --- a/ui/src/SearchResultsDialog.jsx +++ b/ui/src/SearchResultsDialog.jsx @@ -13,12 +13,15 @@ function SearchResultsDialog({isOpen, close,data}) { onClose={close} >
- + X - Search Results -
+ Send Feedback + +
{data.items.map( item =>
Use workflow + className={"bg-comfy-dark p-2 rounded text-white text-lg font-semibold cursor-pointer"}>Use + workflow
@@ -79,7 +83,6 @@ function SearchResultsDialog({isOpen, close,data}) { )} {data.items.length === 0 &&
No results found
}
-