Merge branch 'dev' into cloud-event

__init__.py

@@ -16,7 +16,7 @@ import json
 from .version_control import update_version_if_outdated
 from .service.model_manager.model_installer import download_url_with_wget
 from .service.model_manager.model_list import get_model_list
-from .service.model_manager.model_preview import get_thumbnail_for_image_file
+from .service.media_service import *
 
 WEB_DIRECTORY = "entry"
 DEFAULT_USER = "guest"
@@ -205,46 +205,6 @@ async def rename_file(request):
     else:
         return web.Response(text="File not found", status=404)
 
-image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
-video_extensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']
-@server.PromptServer.instance.routes.get("/workspace/view_media")
-async def api_view_file(request):
-    filename = request.query.get("filename", None)
-    if not filename:
-        return web.Response(status=404)
-    
-    # validation for security: prevent accessing arbitrary path
-    if filename[0] == '/' or '..' in filename:
-        return web.Response(status=400)
-
-    output_path = folder_paths.get_output_directory()
-    file_path = os.path.join(output_path, filename)
-
-    if not os.path.exists(file_path):
-        return web.Response(status=404)
-    
-    file_extension = os.path.splitext(filename)[1].lower()
-    if file_extension in image_extensions:
-        return web.json_response(
-            body=get_thumbnail_for_image_file(file_path),
-            content_type='image/jpeg',
-            headers={"Content-Disposition": f"filename=\"{filename}.jpg\""}
-        )
-
-    with open(file_path, 'rb') as f:
-        media_file = f.read()
-
-    content_type = 'application/json'
-    if file_extension in video_extensions:
-        content_type = f'video/{file_extension[1:]}'
-
-    return web.Response(
-        body=media_file,
-        content_type=content_type,
-        headers={"Content-Disposition": f"filename=\"{filename}\""}
-    )
-
-
 @server.PromptServer.instance.routes.post("/workspace/open_workflow_file_browser")
 async def open_workflow_file_browser(request):
     my_workflows_dir = get_my_workflows_dir()

dist/workspace_web/IconCopy-48H4n38O.js

@@ -0,0 +1 @@
+import{f as r,l as c,o as i,j as m,g as p,h}from"./input.js";import{h as k}from"./App-09wdM9e8.js";var l=r(function(a,o){const e=c("Link",a),{className:n,isExternal:s,...t}=i(a);return m.jsx(p.a,{target:s?"_blank":void 0,rel:s?"noopener":void 0,ref:o,className:h("chakra-link",n),...t,__css:e})});l.displayName="Link";var d=k("copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]]);export{d as I,l as L};

dist/workspace_web/InstallMissingModelsButton-7QH17Yv3.js

@@ -1 +1 @@
-import{r as u,j as e,B as m,P as f}from"./input.js";import{app as c}from"/scripts/app.js";import{G as x,g as j,I as _}from"./ModelManagerTopbar-SdEpIAUx.js";import{T as h,H as v,a3 as g,B as w,a5 as M,a6 as y,av as E,F as I,ad as S}from"./App-iJ8dSmpT.js";import{V as b}from"./chunk-NTCQBYKE-7NPzADNj.js";import{I as k,G as C}from"./chunk-JARCRF6W-yaymqCZ5.js";import"/scripts/api.js";import"./index-pz0vT7Or.js";function z({model:s}){const[l,t]=u.useState([]),o=D(s.received_value),d=async()=>{const n=await(await fetch(`https://huggingface.co/api/models?limit=3&search=${o}&full=true`)).json(),i=[];n.slice(0,1).forEach(({modelId:r,siblings:H})=>{i.push({name:r,downloadUrl:`https://huggingface.co/${r}/resolve/main/`,url:`https://huggingface.co/${r}/tree/main`,icon:"https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png"})}),t(r=>[...r,...i])},p=async()=>{const a=await j(o);t(n=>[...n,...a==null?void 0:a.slice(0,1).map(i=>({name:i.name,url:"https://civitai.com/models/"+i.id,icon:"https://images.crunchbase.com/image/upload/c_pad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/gtxrcmtsvpjjevozblfa"}))])};return u.useEffect(()=>{d(),p()},[]),e.jsx(x,{p:3,shadow:"md",borderWidth:"1px",children:e.jsxs(b,{align:"start",children:[e.jsx(h,{children:s.class_type}),e.jsxs(v,{ml:3,children:[e.jsxs(h,{children:[s.input_name,": "]}),e.jsx(h,{color:"red.400",children:s.received_value})]}),l.map(({url:a,name:n,icon:i})=>e.jsx(m,{size:"sm",onClick:r=>{r.stopPropagation(),window.open(a,"_blank")},leftIcon:e.jsx(k,{width:5,src:i}),rightIcon:e.jsx(g,{size:20}),children:n})),e.jsx(m,{colorScheme:"blue",mt:5,iconSpacing:1,leftIcon:e.jsx(g,{size:20}),size:"sm",onClick:()=>{window.open(`https://civitai.com/search/models?sortBy=models_v5&query=${o}`,"_blank")},children:"Search in CivitAI"})]})})}function D(s){return s.replace(/^.*(\\|\/|\:)/,"").replace(/\.[^/.]+$/,"").replaceAll("_"," ").replace(/([A-Z])/g," $1").trim()}function B({onClose:s,missingModels:l}){u.useEffect(()=>(c.canvasEl.addEventListener("click",s),()=>{c.canvasEl.removeEventListener("click",s)}),[]);const t=440;return e.jsx(f,{children:e.jsx(w,{style:{width:t},children:e.jsxs(M,{width:t,height:"100vh",p:4,gap:2,position:"fixed",top:0,left:0,shadow:"xl",zIndex:y,overflowY:"auto",children:[e.jsx(E,{children:e.jsxs(I,{justifyContent:"space-between",alignContent:"center",children:[e.jsxs(S,{size:"md",mr:2,children:["Missing Models (",l.length,")"]}),e.jsx(_,{})]})}),e.jsx(C,{templateColumns:"1",gap:1,marginTop:2,children:l.map(o=>e.jsx(z,{model:o},o.received_value))})]})})})}function T({}){const[s,l]=u.useState(!1),[t,o]=u.useState([]);return u.useEffect(()=>{const d=c.queuePrompt;c.queuePrompt=async function(){try{await d.apply(c,[...arguments])}finally{const p=c.lastNodeErrors??{};o(Object.values(p).flatMap(a=>a.errors.filter(n=>n.type==="value_not_in_list").map(n=>{const{input_name:i,received_value:r}=n.extra_info;return{class_type:a.class_type,input_name:i,received_value:r}})))}}},[]),t.length===0?null:e.jsxs(e.Fragment,{children:[e.jsxs(m,{size:"sm","aria-label":"missing models",px:2,onClick:()=>l(!0),children:["Install Missing (",t.length,")"]}),s&&e.jsx(B,{onClose:()=>l(!1),missingModels:t})]})}export{T as default};
+import{r as u,j as e,B as m,P as f}from"./input.js";import{app as c}from"/scripts/app.js";import{G as x,g as j,I as _}from"./ModelManagerTopbar-O1ybaI8q.js";import{T as h,H as v,a3 as g,B as w,a5 as M,a6 as y,an as E,F as I,ab as b}from"./App-09wdM9e8.js";import{V as S}from"./chunk-NTCQBYKE-NnaP5ESt.js";import{I as k,G as C}from"./chunk-JARCRF6W-1wZ_35Xk.js";import"/scripts/api.js";import"./index-pz0vT7Or.js";function z({model:s}){const[l,t]=u.useState([]),o=D(s.received_value),p=async()=>{const n=await(await fetch(`https://huggingface.co/api/models?limit=3&search=${o}&full=true`)).json(),i=[];n.slice(0,1).forEach(({modelId:r,siblings:H})=>{i.push({name:r,downloadUrl:`https://huggingface.co/${r}/resolve/main/`,url:`https://huggingface.co/${r}/tree/main`,icon:"https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png"})}),t(r=>[...r,...i])},d=async()=>{const a=await j(o);t(n=>[...n,...a==null?void 0:a.slice(0,1).map(i=>({name:i.name,url:"https://civitai.com/models/"+i.id,icon:"https://images.crunchbase.com/image/upload/c_pad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/gtxrcmtsvpjjevozblfa"}))])};return u.useEffect(()=>{p(),d()},[]),e.jsx(x,{p:3,shadow:"md",borderWidth:"1px",children:e.jsxs(S,{align:"start",children:[e.jsx(h,{children:s.class_type}),e.jsxs(v,{ml:3,children:[e.jsxs(h,{children:[s.input_name,": "]}),e.jsx(h,{color:"red.400",children:s.received_value})]}),l.map(({url:a,name:n,icon:i})=>e.jsx(m,{size:"sm",onClick:r=>{r.stopPropagation(),window.open(a,"_blank")},leftIcon:e.jsx(k,{width:5,src:i}),rightIcon:e.jsx(g,{size:20}),children:n})),e.jsx(m,{colorScheme:"blue",mt:5,iconSpacing:1,leftIcon:e.jsx(g,{size:20}),size:"sm",onClick:()=>{window.open(`https://civitai.com/search/models?sortBy=models_v5&query=${o}`,"_blank")},children:"Search in CivitAI"})]})})}function D(s){return s.replace(/^.*(\\|\/|\:)/,"").replace(/\.[^/.]+$/,"").replaceAll("_"," ").replace(/([A-Z])/g," $1").trim()}function B({onClose:s,missingModels:l}){u.useEffect(()=>(c.canvasEl.addEventListener("click",s),()=>{c.canvasEl.removeEventListener("click",s)}),[]);const t=440;return e.jsx(f,{children:e.jsx(w,{style:{width:t},children:e.jsxs(M,{width:t,height:"100vh",p:4,gap:2,position:"fixed",top:0,left:0,shadow:"xl",zIndex:y,overflowY:"auto",children:[e.jsx(E,{children:e.jsxs(I,{justifyContent:"space-between",alignContent:"center",children:[e.jsxs(b,{size:"md",mr:2,children:["Missing Models (",l.length,")"]}),e.jsx(_,{})]})}),e.jsx(C,{templateColumns:"1",gap:1,marginTop:2,children:l.map(o=>e.jsx(z,{model:o},o.received_value))})]})})})}function T({}){const[s,l]=u.useState(!1),[t,o]=u.useState([]);return u.useEffect(()=>{const p=c.queuePrompt;c.queuePrompt=async function(){try{await p.apply(c,[...arguments])}finally{const d=c.lastNodeErrors??{};o(Object.values(d).flatMap(a=>a.errors.filter(n=>n.type==="value_not_in_list").map(n=>{const{input_name:i,received_value:r}=n.extra_info;return{class_type:a.class_type,input_name:i,received_value:r}})))}}},[]),t.length===0?null:e.jsxs(e.Fragment,{children:[e.jsxs(m,{size:"sm","aria-label":"missing models",px:2,onClick:()=>l(!0),children:["Install Missing (",t.length,")"]}),s&&e.jsx(B,{onClose:()=>l(!1),missingModels:t})]})}export{T as default};

dist/workspace_web/MediaPreview-Dl36eUT2.js

@@ -1 +0,0 @@
-import{G as U,I as C}from"./chunk-JARCRF6W-yaymqCZ5.js";import{f as x,D as b,j as p,aa as S,r as h}from"./input.js";import{ae as y,h as v,a9 as E}from"./App-iJ8dSmpT.js";var V=x(function(o,s){const{columns:l,spacingX:a,spacingY:n,spacing:r,minChildWidth:e,...c}=o,i=b(),f=e?A(e,i):M(l);return p.jsx(U,{ref:s,gap:r,columnGap:a,rowGap:n,templateColumns:f,...c})});V.displayName="SimpleGrid";function k(t){return typeof t=="number"?`${t}px`:t}function A(t,o){return y(t,s=>{const l=S("sizes",s,k(s))(o);return s===null?null:`repeat(auto-fit, minmax(${l}, 1fr))`})}function M(t){return y(t,o=>o===null?null:`repeat(${o}, minmax(0, 1fr))`)}var R=v("chevron-right","IconChevronRight",[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]]);function O(t){return new Promise((o,s)=>{const l=new FileReader;l.onload=a=>{const n=new Uint8Array(a.target.result),r=new DataView(n.buffer);r.getUint32(0)!==2303741511&&(console.error("Not a valid PNG file"),s());let e=8;const c={};for(;e<n.length;){const i=r.getUint32(e),f=String.fromCharCode(...n.slice(e+4,e+8));if(f==="tEXt"||f=="comf"){let u=e+8;for(;n[u]!==0;)u++;const g=String.fromCharCode(...n.slice(e+8,u)),d=n.slice(u+1,e+8+i),m=Array.from(d).map(w=>String.fromCharCode(w)).join("");c[g]=m}e+=12+i}o(c)},l.readAsArrayBuffer(t)})}function D(t){const o=new Uint16Array(t.slice(0,2))[0]===18761;function s(r,e,c){const i=t.slice(r,r+c);if(c===2)return new DataView(i.buffer,i.byteOffset,i.byteLength).getUint16(0,e);if(c===4)return new DataView(i.buffer,i.byteOffset,i.byteLength).getUint32(0,e)}const l=s(4,o,4);function a(r){const e=s(r,o,2),c={};for(let i=0;i<e;i++){const f=r+2+i*12,u=s(f,o,2),g=s(f+2,o,2),d=s(f+4,o,4),m=s(f+8,o,4);let w;g===2&&(w=String.fromCharCode(...t.slice(m,m+d-1))),c[u]=w}return c}return a(l)}function G(t){return new Promise(o=>{const s=new FileReader;s.onload=l=>{var c;const a=new Uint8Array((c=l==null?void 0:l.target)==null?void 0:c.result),n=new DataView(a.buffer);if(n.getUint32(0)!==1380533830||n.getUint32(8)!==1464156752){console.error("Not a valid WEBP file"),o();return}let r=12;const e={};for(;r<a.length;){const i=n.getUint32(r+4,!0);if(String.fromCharCode(...a.slice(r,r+4))==="EXIF"){String.fromCharCode(...a.slice(r+8,r+8+6))=="Exif\0\0"&&(r+=6);const u=D(a.slice(r+8,r+8+i));for(const g in u){const d=u[g],m=d.indexOf(":");e[d.slice(0,m)]=d.slice(m+1)}}r+=8+i}o(e)},s.readAsArrayBuffer(t)})}function N(t){return!!(t!=null&&t.endsWith(".webm")||t!=null&&t.endsWith(".mp4"))}function F(t){return new Promise(o=>{const s=new FileReader;s.onload=l=>{const a=new Uint8Array(l.target.result),n=new DataView(a.buffer),r=new TextDecoder;if(n.getUint32(0)==440786851){let e=12;for(;e<a.length-16;){if(n.getUint16(e)==17543&&String.fromCharCode(...a.slice(e-7,e))==="COMMENT"){const i=n.getUint32(e+2),f=Math.clz32(i)+1;if(f<4){const u=i>>8*(4-f)&~(1<<7*f),g=r.decode(a.slice(e+2+f,e+2+f+u)),d=JSON.parse(g);o(d);return}}e+=1}}else if(n.getUint32(4)==1718909296&&n.getUint32(8)==1769172845){let e=a.length-4;for(;e>16;){if(n.getUint32(e)==1684108385&&n.getUint32(e-8)==2841865588){n.getUint32(e+4),n.getUint32(e+8);const c=n.getUint32(e-4)-4*4,i=r.decode(a.slice(e+12,e+12+c)),f=JSON.parse(i);o(f);return}e-=1}}else{console.error("Unknown magic: "+n.getUint32(0)),o();return}},s.readAsArrayBuffer(t)})}function $({mediaLocalPath:t,size:o,autoPlay:s,hideBrokenImage:l,onBrokenLink:a}){const[n,r]=h.useState(!0);return h.useEffect(()=>{l&&(async()=>{try{if(!(await fetch(`/workspace/view_media?filename=${t}`)).ok)throw new Error("Media not found");r(!0)}catch{r(!1),a==null||a()}})()},[]),n?E(t)?p.jsx(C,{borderRadius:3,boxSize:`${o}px`,objectFit:"cover",src:`/workspace/view_media?filename=${t}`,alt:"workflow image renamed or moved from output folder"}):p.jsx("video",{width:o,height:o,src:`/workspace/view_media?filename=${t}`,loop:!0,autoPlay:s??!1,muted:!0,children:p.jsx("track",{kind:"captions"})}):null}export{R as I,$ as M,V as S,F as a,G as b,O as g,N as i};

dist/workspace_web/MediaPreview-nO-IKtd3.js

@@ -0,0 +1 @@
+import{G as U,I as C}from"./chunk-JARCRF6W-1wZ_35Xk.js";import{f as x,D as b,j as p,aa as v,r as h}from"./input.js";import{ac as y,h as S,a9 as k}from"./App-09wdM9e8.js";var E=x(function(r,s){const{columns:l,spacingX:a,spacingY:n,spacing:i,minChildWidth:e,...c}=r,o=b(),f=e?A(e,o):M(l);return p.jsx(U,{ref:s,gap:i,columnGap:a,rowGap:n,templateColumns:f,...c})});E.displayName="SimpleGrid";function V(t){return typeof t=="number"?`${t}px`:t}function A(t,r){return y(t,s=>{const l=v("sizes",s,V(s))(r);return s===null?null:`repeat(auto-fit, minmax(${l}, 1fr))`})}function M(t){return y(t,r=>r===null?null:`repeat(${r}, minmax(0, 1fr))`)}var R=S("chevron-right","IconChevronRight",[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]]);function O(t){return new Promise((r,s)=>{const l=new FileReader;l.onload=a=>{const n=new Uint8Array(a.target.result),i=new DataView(n.buffer);i.getUint32(0)!==2303741511&&(console.error("Not a valid PNG file"),s());let e=8;const c={};for(;e<n.length;){const o=i.getUint32(e),f=String.fromCharCode(...n.slice(e+4,e+8));if(f==="tEXt"||f=="comf"){let u=e+8;for(;n[u]!==0;)u++;const g=String.fromCharCode(...n.slice(e+8,u)),d=n.slice(u+1,e+8+o),m=Array.from(d).map(w=>String.fromCharCode(w)).join("");c[g]=m}e+=12+o}r(c)},l.readAsArrayBuffer(t)})}function _(t){const r=new Uint16Array(t.slice(0,2))[0]===18761;function s(i,e,c){const o=t.slice(i,i+c);if(c===2)return new DataView(o.buffer,o.byteOffset,o.byteLength).getUint16(0,e);if(c===4)return new DataView(o.buffer,o.byteOffset,o.byteLength).getUint32(0,e)}const l=s(4,r,4);function a(i){const e=s(i,r,2),c={};for(let o=0;o<e;o++){const f=i+2+o*12,u=s(f,r,2),g=s(f+2,r,2),d=s(f+4,r,4),m=s(f+8,r,4);let w;g===2&&(w=String.fromCharCode(...t.slice(m,m+d-1))),c[u]=w}return c}return a(l)}function G(t){return new Promise(r=>{const s=new FileReader;s.onload=l=>{var c;const a=new Uint8Array((c=l==null?void 0:l.target)==null?void 0:c.result),n=new DataView(a.buffer);if(n.getUint32(0)!==1380533830||n.getUint32(8)!==1464156752){console.error("Not a valid WEBP file"),r();return}let i=12;const e={};for(;i<a.length;){const o=n.getUint32(i+4,!0);if(String.fromCharCode(...a.slice(i,i+4))==="EXIF"){String.fromCharCode(...a.slice(i+8,i+8+6))=="Exif\0\0"&&(i+=6);const u=_(a.slice(i+8,i+8+o));for(const g in u){const d=u[g],m=d.indexOf(":");e[d.slice(0,m)]=d.slice(m+1)}}i+=8+o}r(e)},s.readAsArrayBuffer(t)})}function N(t){return!!(t!=null&&t.endsWith(".webm")||t!=null&&t.endsWith(".mp4"))}function $(t){return new Promise(r=>{const s=new FileReader;s.onload=l=>{const a=new Uint8Array(l.target.result),n=new DataView(a.buffer),i=new TextDecoder;if(n.getUint32(0)==440786851){let e=12;for(;e<a.length-16;){if(n.getUint16(e)==17543&&String.fromCharCode(...a.slice(e-7,e))==="COMMENT"){const o=n.getUint32(e+2),f=Math.clz32(o)+1;if(f<4){const u=o>>8*(4-f)&~(1<<7*f),g=i.decode(a.slice(e+2+f,e+2+f+u)),d=JSON.parse(g);r(d);return}}e+=1}}else if(n.getUint32(4)==1718909296&&n.getUint32(8)==1769172845){let e=a.length-4;for(;e>16;){if(n.getUint32(e)==1684108385&&n.getUint32(e-8)==2841865588){n.getUint32(e+4),n.getUint32(e+8);const c=n.getUint32(e-4)-4*4,o=i.decode(a.slice(e+12,e+12+c)),f=JSON.parse(o);r(f);return}e-=1}}else{console.error("Unknown magic: "+n.getUint32(0)),r();return}},s.readAsArrayBuffer(t)})}function F({mediaLocalPath:t,size:r,isPreview:s,autoPlay:l,hideBrokenImage:a,onBrokenLink:n}){const[i,e]=h.useState(!0);return h.useEffect(()=>{a&&(async()=>{try{if(!(await fetch(s?`/workspace/preview_media?filename=${t}`:`/workspace/view_media?filename=${t}`)).ok)throw new Error("Media not found");e(!0)}catch{e(!1),n==null||n()}})()},[]),i?k(t)?p.jsx(C,{borderRadius:3,boxSize:`${r}px`,objectFit:"cover",src:`/workspace/view_media?filename=${t}`,alt:"workflow image renamed or moved from output folder"}):p.jsx("video",{width:r,height:r,src:`/workspace/view_media?filename=${t}`,loop:!0,autoPlay:l??!1,muted:!0,children:p.jsx("track",{kind:"captions"})}):null}export{R as I,F as M,E as S,$ as a,G as b,O as g,N as i};

dist/workspace_web/chunk-NTCQBYKE-NnaP5ESt.js

@@ -1 +1 @@
-import{j as t}from"./App-iJ8dSmpT.js";import{f as o,j as s}from"./input.js";var e=o((a,r)=>s.jsx(t,{align:"center",...a,direction:"column",ref:r}));e.displayName="VStack";export{e as V};
+import{j as t}from"./App-09wdM9e8.js";import{f as o,j as s}from"./input.js";var e=o((a,r)=>s.jsx(t,{align:"center",...a,direction:"column",ref:r}));e.displayName="VStack";export{e as V};

dist/workspace_web/input.js

@@ -679,10 +679,10 @@ Error generating stack: `+i.message+`
       }
 
       ${fB}
-    `}),Lw=document.createElement("div");document.body.append(Lw);const pB=Ar.lazy(()=>Jk(()=>import("./App-iJ8dSmpT.js").then(e=>e.aw),__vite__mapDeps([0,1])).then(({default:e})=>({default:e}))),mB={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e7,sticky:11e6,banner:12e6,overlay:13e6,modal:14e6,popover:15e6,skipLink:16e6,toast:17e6,tooltip:18e6},vB=Mz({zIndices:mB});bd.createRoot(Lw).render(E.jsx(Ar.StrictMode,{children:E.jsxs(HI,{resetCSS:!1,disableGlobalStyle:!0,theme:vB,children:[E.jsx(hB,{scope:".workspace_manager"}),E.jsx(NP,{initialColorMode:"dark"}),E.jsx(dB,{children:E.jsx(S.Suspense,{children:E.jsx(pB,{})})})]})}));const Yf=document.body,gB={attributes:!0,attributeFilter:["class"]},yB=function(e,t){const r=document.documentElement;r.style.colorScheme==="dark"&&r.style.removeProperty("color-scheme");for(const n of e)if(n.type==="attributes"&&n.attributeName==="class")for(const o of Yf.classList)o.includes("chakra")&&Yf.classList.remove(o)},bB=new MutationObserver(yB);bB.observe(Yf,gB);export{rL as $,IB as A,Ix as B,FB as C,zP as D,lr as E,ii as F,CB as G,Ip as H,Xa as I,PB as J,Ya as K,Mw as L,ww as M,$w as N,Rw as O,Na as P,Fw as Q,zw as R,Aw as S,Pb as T,LB as U,Ar as V,$B as W,Du as X,is as Y,vL as Z,Jk as _,MB as a,mL as a0,Wf as a1,Ra as a2,wP as a3,SB as a4,Hn as a5,Uh as a6,xP as a7,zp as a8,xB as a9,wB as aa,_B as ab,lB as ac,uB as ad,mn as b,RB as c,d3 as d,EB as e,pt as f,_e as g,Be as h,eS as i,E as j,Rv as k,Nu as l,Bf as m,kB as n,Ou as o,$i as p,Xf as q,S as r,hw as s,TB as t,VP as u,Kt as v,Cg as w,ka as x,mO as y,DB as z};
+    `}),Lw=document.createElement("div");document.body.append(Lw);const pB=Ar.lazy(()=>Jk(()=>import("./App-09wdM9e8.js").then(e=>e.ao),__vite__mapDeps([0,1])).then(({default:e})=>({default:e}))),mB={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e7,sticky:11e6,banner:12e6,overlay:13e6,modal:14e6,popover:15e6,skipLink:16e6,toast:17e6,tooltip:18e6},vB=Mz({zIndices:mB});bd.createRoot(Lw).render(E.jsx(Ar.StrictMode,{children:E.jsxs(HI,{resetCSS:!1,disableGlobalStyle:!0,theme:vB,children:[E.jsx(hB,{scope:".workspace_manager"}),E.jsx(NP,{initialColorMode:"dark"}),E.jsx(dB,{children:E.jsx(S.Suspense,{children:E.jsx(pB,{})})})]})}));const Yf=document.body,gB={attributes:!0,attributeFilter:["class"]},yB=function(e,t){const r=document.documentElement;r.style.colorScheme==="dark"&&r.style.removeProperty("color-scheme");for(const n of e)if(n.type==="attributes"&&n.attributeName==="class")for(const o of Yf.classList)o.includes("chakra")&&Yf.classList.remove(o)},bB=new MutationObserver(yB);bB.observe(Yf,gB);export{rL as $,IB as A,Ix as B,FB as C,zP as D,lr as E,ii as F,CB as G,Ip as H,Xa as I,PB as J,Ya as K,Mw as L,ww as M,$w as N,Rw as O,Na as P,Fw as Q,zw as R,Aw as S,Pb as T,LB as U,Ar as V,$B as W,Du as X,is as Y,vL as Z,Jk as _,MB as a,mL as a0,Wf as a1,Ra as a2,wP as a3,SB as a4,Hn as a5,Uh as a6,xP as a7,zp as a8,xB as a9,wB as aa,_B as ab,lB as ac,uB as ad,mn as b,RB as c,d3 as d,EB as e,pt as f,_e as g,Be as h,eS as i,E as j,Rv as k,Nu as l,Bf as m,kB as n,Ou as o,$i as p,Xf as q,S as r,hw as s,TB as t,VP as u,Kt as v,Cg as w,ka as x,mO as y,DB as z};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = ["workspace_web/App-iJ8dSmpT.js","workspace_web/assets/App-JXePnJiV.css"]
+    __vite__mapDeps.viteFileDeps = ["workspace_web/App-09wdM9e8.js","workspace_web/assets/App-JXePnJiV.css"]
   }
   return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
 }

service/media_service.py

@@ -0,0 +1,57 @@
+
+import server
+from aiohttp import web
+import folder_paths
+import os
+from .model_manager.model_preview import get_thumbnail_for_image_file
+
+image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
+video_extensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']
+
+async def view_media(filename, isPreview = False):
+    if not filename:
+        return web.Response(status=404)
+    
+    # validation for security: prevent accessing arbitrary path
+    if filename[0] == '/' or '..' in filename:
+        return web.Response(status=400)
+
+    output_path = folder_paths.get_output_directory()
+    file_path = os.path.join(output_path, filename)
+
+    if not os.path.exists(file_path):
+        return web.Response(status=404)
+    
+    file_extension = os.path.splitext(filename)[1].lower()
+    if isPreview and file_extension in image_extensions:
+            return web.json_response(
+                body=get_thumbnail_for_image_file(file_path),
+                content_type='image/jpeg',
+                headers={"Content-Disposition": f"filename=\"{filename}.jpg\""}
+            )
+        
+    with open(file_path, 'rb') as f:
+        media_file = f.read()
+
+    content_type = 'application/json'
+    
+    if file_extension in image_extensions:
+        content_type = f'image/{file_extension[1:]}'
+    if file_extension in video_extensions:
+        content_type = f'video/{file_extension[1:]}'
+
+    return web.Response(
+        body=media_file,
+        content_type=content_type,
+        headers={"Content-Disposition": f"filename=\"{filename}\""}
+    )
+
+@server.PromptServer.instance.routes.get("/workspace/preview_media")
+async def preview_file(request):
+    filename = request.query.get("filename", None)
+    return await view_media(filename, True)
+
+@server.PromptServer.instance.routes.get("/workspace/view_media")
+async def view_file(request):
+    filename = request.query.get("filename", None)
+    return await view_media(filename, False)

ui/src/RecentFilesDrawer/WorkflowListItem.tsx

@@ -77,6 +77,7 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
             mediaLocalPath={workflow.coverMediaPath}
             size={60}
             hideBrokenImage
+            isPreview
           />
         )}
 

ui/src/components/DropdownTitle.tsx

@@ -183,13 +183,13 @@ export default function DropdownTitle() {
               >
                 Versions History
               </MenuItem>
-              <MenuItem
+              {/* <MenuItem
                 onClick={() => setIsShareOpen(true)}
                 icon={<IconShare2 size={20} />}
                 iconSpacing={1}
               >
                 Share
-              </MenuItem>
+              </MenuItem> */}
             </MenuList>
           </Menu>
         }

ui/src/components/MediaPreview.tsx

@@ -8,10 +8,12 @@ type Props = {
   autoPlay?: boolean;
   onBrokenLink?: () => void;
   hideBrokenImage?: boolean;
+  isPreview?: boolean;
 };
 export default function MediaPreview({
   mediaLocalPath,
   size,
+  isPreview,
   autoPlay,
   hideBrokenImage,
   onBrokenLink,
@@ -22,7 +24,9 @@ export default function MediaPreview({
     const checkMediaExists = async () => {
       try {
         const response = await fetch(
-          `/workspace/view_media?filename=${mediaLocalPath}`,
+          isPreview
+            ? `/workspace/preview_media?filename=${mediaLocalPath}`
+            : `/workspace/view_media?filename=${mediaLocalPath}`,
         );
         if (!response.ok) throw new Error("Media not found");
         setIsVisible(true);

ui/src/gallery/GalleryModal.tsx

@@ -17,7 +17,7 @@ import { IconArrowLeft, IconX } from "@tabler/icons-react";
 import { WorkspaceContext } from "../WorkspaceContext";
 import { Media } from "../types/dbTypes";
 import { MetaDataInfo } from "./components/MetaDataInfo.tsx";
-import MediaPreview from "./components/GalleryMediaItem.tsx";
+import GalleryMediaItem from "./components/GalleryMediaItem.tsx";
 
 export default function GalleryModal({ onclose }: { onclose: () => void }) {
   const { curFlowID } = useContext(WorkspaceContext);
@@ -123,7 +123,7 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
             <HStack wrap={"wrap"}>
               {images.map((media) => {
                 return (
-                  <MediaPreview
+                  <GalleryMediaItem
                     key={media.id}
                     selectedID={selectedID}
                     media={media}

ui/src/gallery/components/GalleryMediaItem.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import {
   Link,
   Checkbox,
@@ -22,7 +22,7 @@ import { WorkspaceContext } from "../../WorkspaceContext";
 import { useDialog } from "../../components/AlertDialogProvider";
 import MediaPreview from "../../components/MediaPreview";
 
-interface MediaPreviewProps {
+interface GalleryMediaItemProps {
   media: Media;
   isSelecting: boolean;
   selectedID: string[];
@@ -32,7 +32,7 @@ interface MediaPreviewProps {
   setCoverPath: (path: string) => void;
 }
 
-const GalleryMediaItem: React.FC<MediaPreviewProps> = ({
+const GalleryMediaItem: React.FC<GalleryMediaItemProps> = ({
   media,
   isSelecting,
   selectedID,
@@ -68,6 +68,7 @@ const GalleryMediaItem: React.FC<MediaPreviewProps> = ({
           // setIsVisible(false);
         }}
         autoPlay={true}
+        isPreview
       />
     </Link>
   );

ui/src/topbar/Topbar.tsx

@@ -104,7 +104,7 @@ export function Topbar({
             <DropdownTitle />
           </HStack>
         )}
-        <SharedTopbarButton />
+        {/* <SharedTopbarButton /> */}
         {curFlowID && isDirty ? (
           <Tooltip label="Save workflow">
             <IconButton