一个增强版的 ComfyUI 深度图可视化工具，Quilt 图像生成

2025-05-26 17:42:55 +08:00
parent ebe7e61d47
commit 0371f0be92
12 changed files with 2670 additions and 1 deletions
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-Depth-Visualization-advanced/style/threeStyle.css">
+		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-Depth-Visualization-advanced/style/progressStyle.css">
+		<style>
+			body, html {
+				margin: 0;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				background-color: #000000; /* 右侧面部深色背景 */
+			}
+			#container {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+				background-color: #49494936; /* 深色背景 */
+			}
+			canvas {
+				width: auto !important;
+				height: auto !important;
+				max-width: 100% !important;
+				max-height: 100% !important;
+				object-fit: contain;
+			}
+			#progress-dialog {
+				background-color: rgba(0, 0, 0, 0.8);
+				color: #ffffff;
+				border: 1px solid #ffffff;
+				border-radius: 8px;
+				padding: 20px;
+			}
+			#progress-dialog label {
+				color: #ffffff;
+				font-size: 16px;
+				margin-bottom: 10px;
+				display: block;
+			}
+			#progress-indicator {
+				width: 100%;
+				height: 20px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="progress-container">
+			<dialog open id="progress-dialog">
+				<p>
+					<label for="progress-indicator">Loading scene...</label>
+				</p>
+				<progress max="100" id="progress-indicator"></progress>
+			</dialog>
+		</div>
+
+		<div id="container"></div>
+		<script type="importmap">
+			{
+			  "imports": {
+				"three": "https://unpkg.com/three@latest/build/three.module.js",
+				"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
+			  }
+			}
+		</script>
+		<script id="visualizer" type="module" filepath="" crossorigin src="/extensions/ComfyUI-Depth-Visualization-advanced/js/threeVisualizer.js"></script>
+		<button id="screenshotButton">Take Screenshot</button>
+	</body>
+
+</html>