diff --git a/README.md b/README.md index e2b6cc2..8ae7260 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ - **Preview 3DGS and 3D Mesh**: 3D Visualization inside ComfyUI: - Using [gsplat.js](https://github.com/huggingface/gsplat.js/tree/main) and [three.js](https://github.com/mrdoob/three.js/tree/dev) for 3DGS & 3D Mesh visualization respectively + - Custumizable background base on JS library: [mdbassit/Coloris](https://github.com/mdbassit/Coloris) @@ -64,7 +65,8 @@ - **Gaussian Splatting Orbit Renderer** - Render 3DGS to images sequences or video, given a 3DGS file and camera poses generated by **Stack Orbit Camera Poses** node -- Bake Multi-View images into UVTexture of given 3D mesh using [Nvdiffrast](https://github.com/NVlabs/nvdiffrast), supports: +- **Multi-View images to UVTexture** + - Bake Multi-View images into UVTexture of given 3D mesh using [Nvdiffrast](https://github.com/NVlabs/nvdiffrast), supports: - Export to .obj, .ply, .glb - **NeuS** @@ -81,6 +83,9 @@ - **Switch Axis for 3DGS & 3D Mesh** - Since different algorithms likely use different coordinate system, so the ability to re-mapping the axis of coordinate is crucial for passing generated result between differnt nodes. +- **[Customizable system config file](configs/system.conf)** + - Custom clients IP address + ## Roadmap: - [x] Add DMTet algorithm to allow conversion from points cloud(Gaussian/.ply) to mesh (.obj, .ply, .glb) @@ -92,16 +97,17 @@ - [x] Integrate [LGM: Large Multi-View Gaussian Model for High-Resolution 3D Content Creation](https://me.kiui.moe/lgm/) -- [ ] Add a general SDS/ISM Optimization algorithm to allow training 3D representations with diffusion model, *The real fun starts here* ;) - - Need to do some in-depth research on Interval Score Matching (ISM), since math behind it makes perfect sense and also there are so many ways we could improve upon the result obtained from [LucidDreamer](https://github.com/EnVision-Research/LucidDreamer) +- [ ] Add camera pose estimation from raw multi-views images -- [ ] Improve 3DGS to Mesh conversion algorithms: +- [ ] Add & Improve a few best MVS algorithms (e.g instant-ngp, NeuS2, GaussianPro, etc.) + +- [ ] Improve 3DGS/Nerf to Mesh conversion algorithms: - Support to training DMTet with images(RGB, Alpha, Normal Map) - Find better methods to converts 3DGS or Points Cloud to Mesh (Normal maps reconstruction maybe?) -- [ ] Add Structure from motion (SfM) initialization for 3DGS (Better first guess -> Faster convergence & Better result) - -- [ ] Add a few best Nerf algorithms (No idea yet, [instant-ngp](https://github.com/NVlabs/instant-ngp) maybe?) +- Add a general SDS/ISM Optimization algorithm to allow training 3D representations with diffusion model + - Need to do some in-depth research on Interval Score Matching (ISM), since math behind it makes perfect sense and also there are so many ways we could improve upon the result obtained from [LucidDreamer](https://github.com/EnVision-Research/LucidDreamer) + - On Hold since runtime cost to generate an is too big (3+hours for an average RTX GPU like 3080) ## Install: diff --git a/__init__.py b/__init__.py index f1bb8d3..408354f 100644 --- a/__init__.py +++ b/__init__.py @@ -1,6 +1,7 @@ import os import sys import folder_paths as comfy_paths +from pyhocon import ConfigFactory ROOT_PATH = os.path.join(comfy_paths.get_folder_paths("custom_nodes")[0], "ComfyUI-3D-Pack") sys.path.append(ROOT_PATH) @@ -9,7 +10,16 @@ import shutil import __main__ import importlib import inspect -from .webserver.server import server +from .webserver.server import server, set_web_conf + +conf_path = os.path.join(ROOT_PATH, "configs/system.conf") +# Configuration +f = open(conf_path) +conf_text = f.read() +f.close() +sys_conf = ConfigFactory.parse_string(conf_text) + +set_web_conf(sys_conf['web']) NODE_CLASS_MAPPINGS = {} NODE_DISPLAY_NAME_MAPPINGS = {} diff --git a/configs/system.conf b/configs/system.conf new file mode 100644 index 0000000..65b7cf3 --- /dev/null +++ b/configs/system.conf @@ -0,0 +1,6 @@ +web{ + clients_ip = [ + 127.0.0.1, + 0.0.0.0 + ] +} diff --git a/web/html/gsVisualizer.html b/web/html/gsVisualizer.html index e6f49f7..b121d1e 100644 --- a/web/html/gsVisualizer.html +++ b/web/html/gsVisualizer.html @@ -4,19 +4,20 @@ - + + -
-
- -

- -

- - -
+
+ +

+ +

+ + +
+
- +
+ + + + \ No newline at end of file diff --git a/web/html/threeVisualizer.html b/web/html/threeVisualizer.html index 586f378..55f0fe2 100644 --- a/web/html/threeVisualizer.html +++ b/web/html/threeVisualizer.html @@ -4,10 +4,11 @@ - + + - +

@@ -17,16 +18,37 @@

-
- + +
+ + + - + diff --git a/web/js/LittlestTokyo.glb b/web/js/LittlestTokyo.glb deleted file mode 100644 index f2c7e04..0000000 Binary files a/web/js/LittlestTokyo.glb and /dev/null differ diff --git a/web/js/gsVisualizer.js b/web/js/gsVisualizer.js index 6c9005d..7a58c7d 100644 --- a/web/js/gsVisualizer.js +++ b/web/js/gsVisualizer.js @@ -1,10 +1,12 @@ import * as SPLAT from 'gsplat'; import { api } from '/scripts/api.js' +import {getRGBValue} from '/extensions/ComfyUI-3D-Pack/js/sharedFunctions.js'; const visualizer = document.getElementById("visualizer"); const canvas = document.getElementById("canvas"); const progressDialog = document.getElementById("progress-dialog"); const progressIndicator = document.getElementById("progress-indicator"); +const colorPicker = document.getElementById("color-picker"); const renderer = new SPLAT.WebGLRenderer(canvas); const scene = new SPLAT.Scene(); @@ -19,14 +21,14 @@ const handleResize = () => { handleResize(); window.addEventListener("resize", handleResize); - -var lastFilepath = ""; +var lastTimestamp = ""; var needUpdate = false; function frameUpdate() { var filepath = visualizer.getAttribute("filepath"); - if (filepath == lastFilepath){ + var timestamp = visualizer.getAttribute("timestamp"); + if (timestamp == lastTimestamp){ if (needUpdate){ controls.update(); renderer.render( scene, camera ); @@ -36,8 +38,13 @@ function frameUpdate() { needUpdate = false; scene.reset(); progressDialog.open = true; - lastFilepath = filepath; - main(lastFilepath); + lastTimestamp = timestamp; + main(filepath); + } + + var color = getRGBValue(colorPicker.value); + if (color[0] != renderer.backgroundColor.r || color[1] != renderer.backgroundColor.g || color[2] != renderer.backgroundColor.b){ + renderer.backgroundColor = new SPLAT.Color32(color[0], color[1], color[2], 255); // It will automatically update background color in preview scene } }; diff --git a/web/js/libs/coloris.min.js b/web/js/libs/coloris.min.js new file mode 100644 index 0000000..017d102 --- /dev/null +++ b/web/js/libs/coloris.min.js @@ -0,0 +1,6 @@ +/*! + * Copyright (c) 2021 Momo Bassit. + * Licensed under the MIT License (MIT) + * https://github.com/mdbassit/Coloris + */ +!function(u,d,s,c){var p,f,h,i,b,v,y,g,m,l,w,k,L,E,a,n,r=d.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},A={},S={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},o={},C="",T={},B=!1;function M(e){if("object"==typeof e)for(var t in e)switch(t){case"el":N(e.el),!1!==e.wrap&&j(e.el);break;case"parent":(p=d.querySelector(e.parent))&&(p.appendChild(f),S.parent=e.parent,p===d.body&&(p=c));break;case"themeMode":S.themeMode=e.themeMode,"auto"===e.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(S.themeMode="dark");case"theme":e.theme&&(S.theme=e.theme),f.className="clr-picker clr-"+S.theme+" clr-"+S.themeMode,S.inline&&I();break;case"rtl":S.rtl=!!e.rtl,d.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",S.rtl)});break;case"margin":e.margin*=1,S.margin=(isNaN(e.margin)?S:e).margin;break;case"wrap":e.el&&e.wrap&&j(e.el);break;case"formatToggle":S.formatToggle=!!e.formatToggle,z("clr-format").style.display=S.formatToggle?"block":"none",S.formatToggle&&(S.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('")}),z("clr-swatches").innerHTML=a.length?"
"+a.join("")+"
":"",S.swatches=e.swatches.slice()}();break;case"swatchesOnly":S.swatchesOnly=!!e.swatchesOnly,f.setAttribute("data-minimal",S.swatchesOnly);break;case"alpha":S.alpha=!!e.alpha,f.setAttribute("data-alpha",S.alpha);break;case"inline":S.inline=!!e.inline,f.setAttribute("data-inline",S.inline),S.inline&&(l=e.defaultColor||S.defaultColor,E=q(l),I(),W(l));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(S.clearLabel=e.clearButton.label,y.innerHTML=S.clearLabel),e.clearButton=e.clearButton.show),S.clearButton=!!e.clearButton,y.style.display=S.clearButton?"block":"none";break;case"clearLabel":S.clearLabel=e.clearLabel,y.innerHTML=S.clearLabel;break;case"closeButton":S.closeButton=!!e.closeButton,S.closeButton?f.insertBefore(g,b):b.appendChild(g);break;case"closeLabel":S.closeLabel=e.closeLabel,g.innerHTML=S.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&S.a11y[o]&&(S.a11y[o]=r[o],n=!0);n&&(a=z("clr-open-label"),l=z("clr-swatch-label"),a.innerHTML=S.a11y.open,l.innerHTML=S.a11y.swatch,g.setAttribute("aria-label",S.a11y.close),y.setAttribute("aria-label",S.a11y.clear),m.setAttribute("aria-label",S.a11y.hueSlider),w.setAttribute("aria-label",S.a11y.alphaSlider),v.setAttribute("aria-label",S.a11y.input),h.setAttribute("aria-label",S.a11y.instruction));break;default:S[t]=e[t]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function O(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===C&&D())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in C=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(S[a])?S[a].slice():S[a];return M(t),"break"}}(e))break}}function D(){0r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+S.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*S.margin,i.top=!0),l+=r.scrollTop):(a+o>d.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>d.documentElement.clientHeight&&c+S.margin<=t.top&&(l=n+t.y-c-S.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.top=l+"px",s.x+=f.offsetLeft,s.y+=f.offsetTop),A={width:h.offsetWidth,height:h.offsetHeight,x:h.offsetLeft+s.x,y:h.offsetTop+s.y}}function j(e){d.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=d.createElement("div"),a="clr-field",(S.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function R(e){var t;L&&!S.inline&&(t=L,e&&(L=c,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),B&&D(),t.dispatchEvent(new Event("close",{bubbles:!0})),S.focusInput&&t.focus({preventScroll:!0}),L=c)}function W(e){var t=function(e){r.fillStyle="#000",r.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),{r:e[0],g:e[1],b:e[2],a:1});return e}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=s.max(t,a,l),n=s.min(t,a,l),o=r-n,c=r,i=0,n=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(n=o/r));return{h:(i=s.floor(60*i))<0?i+360:i,s:s.round(100*n),v:s.round(100*c),a:e.a}}(t);P(e.s,e.v),G(t,e),m.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=A.width*e.s/100+"px",i.style.top=A.height-A.height*e.v/100+"px",w.value=100*e.a,k.style.left=100*e.a+"%"}function q(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function F(e){e=e!==c?e:v.value,L&&(L.value=e,L.dispatchEvent(new Event("input",{bubbles:!0}))),S.onChange&&S.onChange.call(u,e,L),d.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:L}}))}function Y(e,t){e={h:+m.value,s:e/A.width*100,v:100-t/A.height*100,a:w.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);P(e.s,e.v),G(t,e),F()}function P(e,t){var a=S.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function U(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-A.x,t=t.pageY-A.y;p&&(t+=p.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>A.width?A.width:e,t=t<0?0:t>A.height?A.height:t,i.style.left=e+"px",i.style.top=t+"px",Y(e,t),i.focus()}function G(e,t){void 0===t&&(t={});var a,l,r=S.format;for(a in e=void 0===e?{}:e)x[a]=e[a];for(l in t)x[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);S.alpha&&(e.a<1||S.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),c=o.substring(0,7);switch(i.style.color=c,k.parentNode.style.color=c,k.style.color=o,b.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",k.nextElementSibling.style.display="none",k.nextElementSibling.offsetHeight,k.nextElementSibling.style.display="","mixed"===r?r=1===x.a?"hex":"rgb":"auto"===r&&(r=E),r){case"hex":v.value=o;break;case"rgb":v.value=(n=x,!S.alpha||1===n.a&&!S.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":v.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0
'+S.a11y.format+'
",d.body.appendChild(f),h=z("clr-color-area"),i=z("clr-color-marker"),y=z("clr-clear"),g=z("clr-close"),b=z("clr-color-preview"),v=z("clr-color-value"),m=z("clr-hue-slider"),l=z("clr-hue-marker"),w=z("clr-alpha-slider"),k=z("clr-alpha-marker"),N(S.el),j(S.el),J(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),J(h,"mousedown",function(e){J(d,"mousemove",U)}),J(h,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(i,"mousedown",function(e){J(d,"mousemove",U)}),J(i,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(v,"change",function(e){var t=v.value;(L||S.inline)&&F(""===t?t:W(t))}),J(y,"click",function(e){F(""),R()}),J(g,"click",function(e){F(),R()}),J(z("clr-format"),"click",".clr-format input",function(e){E=e.target.value,G(),F()}),J(f,"click",".clr-swatches button",function(e){W(e.target.textContent),F(),S.swatchesOnly&&R()}),J(d,"mouseup",function(e){d.removeEventListener("mousemove",U)}),J(d,"touchend",function(e){d.removeEventListener("touchmove",U)}),J(d,"mousedown",function(e){n=!1,f.classList.remove("clr-keyboard-nav"),R()}),J(d,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?R(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(n=!0,f.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(a=(t=$()).shift(),t=t.pop(),r&&l===a?(t.focus(),e.preventDefault()):r||l!==t||(a.focus(),e.preventDefault()))}),J(d,"click",".clr-field button",function(e){B&&D(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),J(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+i.style.left.replace("px","")+e,+i.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),J(h,"click",U),J(m,"input",e),J(w,"input",K)})}(window,document,Math); \ No newline at end of file diff --git a/web/js/sharedFunctions.js b/web/js/sharedFunctions.js new file mode 100644 index 0000000..6e6c9ff --- /dev/null +++ b/web/js/sharedFunctions.js @@ -0,0 +1,14 @@ +export function getRGBValue(colorString="rgb(0, 0, 0)", scale01=false) { + var color = colorString.split(/[\D]+/).filter(Boolean) + for (let index = 0; index < color.length; index++) { + color[index] = Number(color[index]); + } + + if (scale01) { + for (let index = 0; index < color.length; index++) { + color[index] = color[index] / 255; + } + } + + return color; +} \ No newline at end of file diff --git a/web/js/threeVisualizer.js b/web/js/threeVisualizer.js index ff8483f..eb2101a 100644 --- a/web/js/threeVisualizer.js +++ b/web/js/threeVisualizer.js @@ -1,5 +1,6 @@ import * as THREE from 'three'; -import { api } from '/scripts/api.js' +import { api } from '/scripts/api.js'; +import {getRGBValue} from '/extensions/ComfyUI-3D-Pack/js/sharedFunctions.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; @@ -13,6 +14,7 @@ const visualizer = document.getElementById("visualizer"); const container = document.getElementById( 'container' ); const progressDialog = document.getElementById("progress-dialog"); const progressIndicator = document.getElementById("progress-indicator"); +const colorPicker = document.getElementById("color-picker"); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); @@ -50,13 +52,14 @@ window.onresize = function () { }; -var lastFilepath = ""; +var lastTimestamp = ""; var needUpdate = false; function frameUpdate() { var filepath = visualizer.getAttribute("filepath"); - if (filepath == lastFilepath){ + var timestamp = visualizer.getAttribute("timestamp"); + if (timestamp == lastTimestamp){ if (needUpdate){ controls.update(); renderer.render( scene, camera ); @@ -66,8 +69,14 @@ function frameUpdate() { needUpdate = false; scene.clear(); progressDialog.open = true; - lastFilepath = filepath; - main(lastFilepath); + lastTimestamp = timestamp; + main(filepath); + } + + var color = getRGBValue(colorPicker.value, true); + if (color[0] != scene.background.r || color[1] != scene.background.g || color[2] != scene.background.b){ + scene.background.setStyle(colorPicker.value); + renderer.render( scene, camera ); // Force update background color in preview scene } } diff --git a/web/style/libs/coloris.min.css b/web/style/libs/coloris.min.css new file mode 100644 index 0000000..885df05 --- /dev/null +++ b/web/style/libs/coloris.min.css @@ -0,0 +1 @@ +.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input[type=range],.clr-hue input[type=range]{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px} \ No newline at end of file diff --git a/web/style/progressStyle.css b/web/style/sharedStyle.css similarity index 58% rename from web/style/progressStyle.css rename to web/style/sharedStyle.css index 91fc468..32a72a7 100644 --- a/web/style/progressStyle.css +++ b/web/style/sharedStyle.css @@ -33,4 +33,34 @@ progress::-webkit-progress-value { progress::-moz-progress-bar { background-color: #eee; +} + + +#container { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; +} + +.clr-field { + margin-left: 5px; + margin-top: 5px; +} + +.clr-field button { + width: 20px; + height: 20px; + left: 5px; + right: auto; + border-radius: 5px; +} + +.clr-field input { + padding-left: 36px; + width: 120px; + height: 24px; + border: 2px solid #aaa; + border-radius: 5px; } \ No newline at end of file diff --git a/web/visualization.js b/web/visualization.js index ab527a6..d622807 100644 --- a/web/visualization.js +++ b/web/visualization.js @@ -17,6 +17,9 @@ class Visualizer { const iframeDocument = this.iframe.contentWindow.document const previewScript = iframeDocument.getElementById('visualizer') previewScript.setAttribute("filepath", filepath) + + const timestamp = Date.now().toString() + previewScript.setAttribute("timestamp", timestamp) } remove() { @@ -132,7 +135,7 @@ function registerVisualizer(nodeType, nodeData, nodeClassName, typeName){ let Preview3DNode = app.graph._nodes.filter( (wi) => wi.type == nodeClassName ) - let nodeName = `Preview3DNode_${Preview3DNode.length}` + let nodeName = `Preview3DNode_${nodeClassName}` console.log(`[Comfy3D] Create: ${nodeName}`) diff --git a/webserver/server.py b/webserver/server.py index 006001f..b69695a 100644 --- a/webserver/server.py +++ b/webserver/server.py @@ -1,11 +1,11 @@ import server import folder_paths as comfy_paths import os -import time -import subprocess from ..shared_utils.common_utils import cstr +ROOT_PATH = os.path.join(comfy_paths.get_folder_paths("custom_nodes")[0], "ComfyUI-3D-Pack") + web = server.web SUPPORTED_VIEW_EXTENSIONS = ( @@ -19,11 +19,18 @@ SUPPORTED_VIEW_EXTENSIONS = ( '.splat' ) + +web_conf = None + +def set_web_conf(new_web_conf): + global web_conf + web_conf = new_web_conf + @server.PromptServer.instance.routes.get("/extensions/ComfyUI-3D-Pack/html/viewfile") async def view_file(request): query = request.rel_url.query # Security check to see if query client is local - if request.remote == "127.0.0.1" and "filepath" in query: + if request.remote in web_conf['clients_ip'] and "filepath" in query: filepath = query["filepath"] cstr(f"[Server Query view_file] Get file {filepath}").msg.print() @@ -31,4 +38,4 @@ async def view_file(request): if filepath.lower().endswith(SUPPORTED_VIEW_EXTENSIONS) and os.path.exists(filepath): return web.FileResponse(filepath) - return web.Response(status=404) + return web.Response(status=404) \ No newline at end of file