proof of concept

README.md

@@ -1,2 +1,19 @@
-# Comfy_Dungeon
-At the moment this is mostly a tech demo to show how to build a web app on top of ComfyUI
+# Comfy Dungeon
+Build D&D Character Portraits with ComfyUI.
+
+**IMPORTANT:** At the moment this is mostly a tech demo to show how to build a web app on top of ComfyUI. The code is *very* messy and the application doesn't guaratee consistent results.
+
+Please let me know your thoughs and if you would like this repository to be implemented and expanded into a more feature rich application.
+
+## Installation
+
+Download or git clone this repository in the ComfyUI `custom_nodes` directory. You then can access it going to the URL: `http://[comfy address]:[comfy port]/dungeon`.
+
+This extension requires the following checkpoints:
+
+- [Proteus V0.3](https://huggingface.co/dataautogpt3/ProteusV0.3/resolve/main/ProteusV0.3.safetensors?download=true) (doesn't work with other versions)
+- [DreamShaperTurbo v2.x](https://huggingface.co/Lykon/dreamshaper-xl-v2-turbo/resolve/main/DreamShaperXL_Turbo_v2_1.safetensors?download=true) (only needed for the "cinematic" results, not needed for illustrations)
+- [SDXL LCM Lora](https://huggingface.co/latent-consistency/lcm-lora-sdxl/resolve/main/pytorch_lora_weights.safetensors?download=true).
+
+
+**Important:** The LORA needs to be renamed to `lcm-lora-sdxl.safetensors` or you can set your own name in the `web/js/basic_portrait_lcm.json` by changing the  `"lora_name": "[FILENAME HERE]"` value at the top of JSON.

__init__.py

@@ -0,0 +1,16 @@
+from .dungeon import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
+
+import os
+import server
+from aiohttp import web
+
+WEBROOT = os.path.join(os.path.dirname(os.path.realpath(__file__)), "web")
+
+@server.PromptServer.instance.routes.get("/dungeon")
+def deungeon_entrance(request):
+    return web.FileResponse(os.path.join(WEBROOT, "index.html"))
+
+server.PromptServer.instance.routes.static("/dungeon/css/", path=os.path.join(WEBROOT, "css"))
+server.PromptServer.instance.routes.static("/dungeon/js/", path=os.path.join(WEBROOT, "js"))
+
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS']

dungeon.py

@@ -0,0 +1,3 @@
+
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}

web/css/dungeon.css

@@ -0,0 +1,117 @@
+html {
+    background-color: #181b1d;
+    background-size: 32px 32px;
+    background-image: radial-gradient(circle, #3d454b 1px, rgba(0, 0, 0, 0) 1px);
+}
+
+#left-col {
+    position: fixed;
+    left: 0;
+    top:0;
+    bottom:0;
+    width: 460px;
+    z-index: 2;
+    transition: left 0.3s ease-out;
+    background-color: #222A30;
+    overflow-y: auto;
+}
+
+#content {
+    position: relative;
+	padding: 30px 0 0 0;
+	margin-left: 0;
+	transition: margin 0.2s cubic-bezier(.4,0,.2,1);
+}
+@media screen and (min-width: 960px){
+	#content {
+		/* equal to left-col width */
+		margin-left: 460px;
+	}
+}
+
+#main-seed {
+    width: 120px;
+    text-align: right;
+    margin-right: 10px;
+}
+
+#main-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 3;
+    border-radius: 0;
+    height: 7px;
+    background-color: #0c3047;
+    border: 0;
+}
+
+#main-progress::-moz-progress-bar {
+    background: #00c070;
+}
+
+#main-progress::-webkit-progress-bar {
+    background: transparent;
+}
+
+#main-progress::-webkit-progress-value {
+    background: #00c070;
+}
+
+#left-col h4 {
+    background-color: #13669e;
+    position: relative;
+    padding: 8px 0;
+}
+
+#sidebar-toggle {
+    position: absolute;
+    z-index: 0;
+    top: -14px;
+    right: 10px;
+}
+
+.left-content-box {
+    background-color: #222A30;
+}
+
+#results {
+    padding: 40px 20px;
+}
+
+#results img {
+    border-radius: 8px;
+    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.8);
+}
+
+.uk-notification-message {
+    background-color: #06633c;
+    color: #ddd;
+}
+
+datalist {
+    display: flex;
+    justify-content: space-between;
+    font-size: .875rem;
+    flex-direction: row;
+    padding: 0 4px;
+}
+
+datalist option {
+    padding: 0;
+}
+
+.uk-accordion > div {
+    margin-top: 0!important;
+}
+
+.uk-accordion-content {
+    padding: 15px;
+}
+
+.uk-accordion-title {
+    padding: 10px 12px;
+    border-bottom: 1px solid #394650;
+    background-color: #171d21;
+}