4d236f269e1a886ee94de597a01280b7022bdb78bc9f29135e2270c87e807b5a

.gitattributes

@@ -37,3 +37,5 @@ Auto-Photoshop-StableDiffusion-Plugin/docs/inpainting.gif filter=lfs diff=lfs me
 Auto-Photoshop-StableDiffusion-Plugin/docs/outpainting.gif filter=lfs diff=lfs merge=lfs -text
 Auto-Photoshop-StableDiffusion-Plugin/docs/prompt_shortcut.gif filter=lfs diff=lfs merge=lfs -text
 Stable-Diffusion-Webui-Civitai-Helper/img/all_in_one.png filter=lfs diff=lfs merge=lfs -text
+posex/image/sample-webui2.jpg filter=lfs diff=lfs merge=lfs -text
+posex/image/sample-webui2.png filter=lfs diff=lfs merge=lfs -text

openpose-editor/scripts/openpose/util.py

@@ -0,0 +1,166 @@
+# This code from https://github.com/lllyasviel/ControlNet
+
+import math
+import numpy as np
+import matplotlib
+import cv2
+
+
+def padRightDownCorner(img, stride, padValue):
+    h = img.shape[0]
+    w = img.shape[1]
+
+    pad = 4 * [None]
+    pad[0] = 0 # up
+    pad[1] = 0 # left
+    pad[2] = 0 if (h % stride == 0) else stride - (h % stride) # down
+    pad[3] = 0 if (w % stride == 0) else stride - (w % stride) # right
+
+    img_padded = img
+    pad_up = np.tile(img_padded[0:1, :, :]*0 + padValue, (pad[0], 1, 1))
+    img_padded = np.concatenate((pad_up, img_padded), axis=0)
+    pad_left = np.tile(img_padded[:, 0:1, :]*0 + padValue, (1, pad[1], 1))
+    img_padded = np.concatenate((pad_left, img_padded), axis=1)
+    pad_down = np.tile(img_padded[-2:-1, :, :]*0 + padValue, (pad[2], 1, 1))
+    img_padded = np.concatenate((img_padded, pad_down), axis=0)
+    pad_right = np.tile(img_padded[:, -2:-1, :]*0 + padValue, (1, pad[3], 1))
+    img_padded = np.concatenate((img_padded, pad_right), axis=1)
+
+    return img_padded, pad
+
+# transfer caffe model to pytorch which will match the layer name
+def transfer(model, model_weights):
+    transferred_model_weights = {}
+    for weights_name in model.state_dict().keys():
+        transferred_model_weights[weights_name] = model_weights['.'.join(weights_name.split('.')[1:])]
+    return transferred_model_weights
+
+# draw the body keypoint and lims
+def draw_bodypose(canvas, candidate, subset):
+    stickwidth = 4
+    limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10], \
+               [10, 11], [2, 12], [12, 13], [13, 14], [2, 1], [1, 15], [15, 17], \
+               [1, 16], [16, 18], [3, 17], [6, 18]]
+
+    colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0], \
+              [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255], \
+              [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]]
+    for i in range(18):
+        for n in range(len(subset)):
+            index = int(subset[n][i])
+            if index == -1:
+                continue
+            x, y = candidate[index][0:2]
+            cv2.circle(canvas, (int(x), int(y)), 4, colors[i], thickness=-1)
+    for i in range(17):
+        for n in range(len(subset)):
+            index = subset[n][np.array(limbSeq[i]) - 1]
+            if -1 in index:
+                continue
+            cur_canvas = canvas.copy()
+            Y = candidate[index.astype(int), 0]
+            X = candidate[index.astype(int), 1]
+            mX = np.mean(X)
+            mY = np.mean(Y)
+            length = ((X[0] - X[1]) ** 2 + (Y[0] - Y[1]) ** 2) ** 0.5
+            angle = math.degrees(math.atan2(X[0] - X[1], Y[0] - Y[1]))
+            polygon = cv2.ellipse2Poly((int(mY), int(mX)), (int(length / 2), stickwidth), int(angle), 0, 360, 1)
+            cv2.fillConvexPoly(cur_canvas, polygon, colors[i])
+            canvas = cv2.addWeighted(canvas, 0.4, cur_canvas, 0.6, 0)
+    # plt.imsave("preview.jpg", canvas[:, :, [2, 1, 0]])
+    # plt.imshow(canvas[:, :, [2, 1, 0]])
+    return canvas
+
+
+# image drawn by opencv is not good.
+def draw_handpose(canvas, all_hand_peaks, show_number=False):
+    edges = [[0, 1], [1, 2], [2, 3], [3, 4], [0, 5], [5, 6], [6, 7], [7, 8], [0, 9], [9, 10], \
+             [10, 11], [11, 12], [0, 13], [13, 14], [14, 15], [15, 16], [0, 17], [17, 18], [18, 19], [19, 20]]
+
+    for peaks in all_hand_peaks:
+        for ie, e in enumerate(edges):
+            if np.sum(np.all(peaks[e], axis=1)==0)==0:
+                x1, y1 = peaks[e[0]]
+                x2, y2 = peaks[e[1]]
+                cv2.line(canvas, (x1, y1), (x2, y2), matplotlib.colors.hsv_to_rgb([ie/float(len(edges)), 1.0, 1.0])*255, thickness=2)
+
+        for i, keyponit in enumerate(peaks):
+            x, y = keyponit
+            cv2.circle(canvas, (x, y), 4, (0, 0, 255), thickness=-1)
+            if show_number:
+                cv2.putText(canvas, str(i), (x, y), cv2.FONT_HERSHEY_SIMPLEX, 0.3, (0, 0, 0), lineType=cv2.LINE_AA)
+    return canvas
+
+# detect hand according to body pose keypoints
+# please refer to https://github.com/CMU-Perceptual-Computing-Lab/openpose/blob/master/src/openpose/hand/handDetector.cpp
+def handDetect(candidate, subset, oriImg):
+    # right hand: wrist 4, elbow 3, shoulder 2
+    # left hand: wrist 7, elbow 6, shoulder 5
+    ratioWristElbow = 0.33
+    detect_result = []
+    image_height, image_width = oriImg.shape[0:2]
+    for person in subset.astype(int):
+        # if any of three not detected
+        has_left = np.sum(person[[5, 6, 7]] == -1) == 0
+        has_right = np.sum(person[[2, 3, 4]] == -1) == 0
+        if not (has_left or has_right):
+            continue
+        hands = []
+        #left hand
+        if has_left:
+            left_shoulder_index, left_elbow_index, left_wrist_index = person[[5, 6, 7]]
+            x1, y1 = candidate[left_shoulder_index][:2]
+            x2, y2 = candidate[left_elbow_index][:2]
+            x3, y3 = candidate[left_wrist_index][:2]
+            hands.append([x1, y1, x2, y2, x3, y3, True])
+        # right hand
+        if has_right:
+            right_shoulder_index, right_elbow_index, right_wrist_index = person[[2, 3, 4]]
+            x1, y1 = candidate[right_shoulder_index][:2]
+            x2, y2 = candidate[right_elbow_index][:2]
+            x3, y3 = candidate[right_wrist_index][:2]
+            hands.append([x1, y1, x2, y2, x3, y3, False])
+
+        for x1, y1, x2, y2, x3, y3, is_left in hands:
+            # pos_hand = pos_wrist + ratio * (pos_wrist - pos_elbox) = (1 + ratio) * pos_wrist - ratio * pos_elbox
+            # handRectangle.x = posePtr[wrist*3] + ratioWristElbow * (posePtr[wrist*3] - posePtr[elbow*3]);
+            # handRectangle.y = posePtr[wrist*3+1] + ratioWristElbow * (posePtr[wrist*3+1] - posePtr[elbow*3+1]);
+            # const auto distanceWristElbow = getDistance(poseKeypoints, person, wrist, elbow);
+            # const auto distanceElbowShoulder = getDistance(poseKeypoints, person, elbow, shoulder);
+            # handRectangle.width = 1.5f * fastMax(distanceWristElbow, 0.9f * distanceElbowShoulder);
+            x = x3 + ratioWristElbow * (x3 - x2)
+            y = y3 + ratioWristElbow * (y3 - y2)
+            distanceWristElbow = math.sqrt((x3 - x2) ** 2 + (y3 - y2) ** 2)
+            distanceElbowShoulder = math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+            width = 1.5 * max(distanceWristElbow, 0.9 * distanceElbowShoulder)
+            # x-y refers to the center --> offset to topLeft point
+            # handRectangle.x -= handRectangle.width / 2.f;
+            # handRectangle.y -= handRectangle.height / 2.f;
+            x -= width / 2
+            y -= width / 2  # width = height
+            # overflow the image
+            if x < 0: x = 0
+            if y < 0: y = 0
+            width1 = width
+            width2 = width
+            if x + width > image_width: width1 = image_width - x
+            if y + width > image_height: width2 = image_height - y
+            width = min(width1, width2)
+            # the max hand box value is 20 pixels
+            if width >= 20:
+                detect_result.append([int(x), int(y), int(width), is_left])
+
+    '''
+    return value: [[x, y, w, True if left hand else False]].
+    width=height since the network require squared input.
+    x, y is the coordinate of top left 
+    '''
+    return detect_result
+
+# get max index of 2d array
+def npmax(array):
+    arrayindex = array.argmax(1)
+    arrayvalue = array.max(1)
+    i = arrayvalue.argmax()
+    j = arrayindex[i]
+    return i, j

posex/.gitignore

@@ -0,0 +1,3 @@
+__pycache__ 
+.vscode/
+venv/

posex/README.md

@@ -0,0 +1,98 @@
+# Posex - Estimated Image Generator for Pose2Image
+
+![cover](./image/sample.png)
+
+## Quick Start with [Web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui)
+
+1. Install [Mikubill/sd-webui-controlnet](https://github.com/Mikubill/sd-webui-controlnet).
+2. Install Posex (this).
+3. Open `Posex` accordion in t2i tab (or i2i as you like). Enable `Send this image to ControlNet` checkbox. Editor will appear.
+4. Configure ControlNet as below.
+```
+Preprocessor: none
+Model: control_sd15_openpose
+```
+5. Make pose.
+6. Generate images.
+
+## How to use
+
+```
+Click:      select body
+Left Drag:  move joint (on joint)
+            rotate camera (otherwise)
+Right Drag: move whole body (if selected)
+            move camera (otherwise)
+Wheel:      zoom
+```
+
+## Installation
+
+- [Web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) Extension
+- Online (Github Pages)
+- Standalone
+
+### [Web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) Extension
+
+**Prerequirement: You need to install [Mikubill/sd-webui-controlnet](https://github.com/Mikubill/sd-webui-controlnet) to use Posex with ControlNet Pose2Img.**
+
+Go to `Extensions` tab, then select `Install from URL` tab and input `https://github.com/hnmr293/posex`.
+
+Or move to `extensions` directory and type `git clone https://github.com/hnmr293/posex`.
+
+In webui, open `Posex` accordion in `txt2img` or `img2img` tab, then click a checkbox. The canvas will be opened.
+
+### Online
+
+See Github Pages.
+
+[https://hnmr293.github.io/posex](https://hnmr293.github.io/posex)
+
+### Standalone
+
+```
+$ pip install -r requirements.txt
+$ python app.py
+```
+
+Then open `localhost:55502` or `127.0.0.1:55502` in your browser.
+
+## Example
+
+### Web UI
+
+sample 1:
+
+![sample](./image/sample-webui.png)
+
+result:
+
+![sample result](./image/sample-webui2.jpg)
+
+sample 2:
+
+![sample 2](./saved_poses/bridge.png)
+
+result:
+
+![sample 2 result](./image/sample-webui3.png)
+
+### Standalone
+
+![sample](./image/sample.png)
+
+## History
+
+### v0.3 -> v0.4 features
+- background setting
+- save/load pose
+- fixed camera roll
+
+### v0.2 -> v0.3 features
+- Web UI extension
+
+### v0.1 -> v0.2 features
+- copying the image to clipboard
+- multiple bodies
+- canvas size changing
+- UI has become ugly >_<;

posex/app.py

@@ -0,0 +1,85 @@
+from typing import Union
+
+def ensure_install(module_name: str, lib_name: Union[str,None] = None):
+    from importlib.util import find_spec
+    
+    if lib_name is None:
+        lib_name = module_name
+    
+    if find_spec(module_name) is None:
+        import subprocess
+        try:
+            print('-' * 80, file=sys.stderr)
+            print(f'| installing {lib_name} ...', file=sys.stderr)
+            print('-' * 80, file=sys.stderr)
+            subprocess.check_call(
+                [sys.executable, "-m", "pip", "install", lib_name],
+                stdout=sys.stdout,
+                stderr=sys.stderr
+            )
+        except Exception as e:
+            msg = ''.join(traceback.TracebackException.from_exception(e).format())
+            print(msg, file=sys.stderr)
+            print('-' * 80, file=sys.stderr)
+            print(f'| failed to install {lib_name}. exit...', file=sys.stderr)
+            print('-' * 80, file=sys.stderr)
+            sys.exit(1)
+
+if __name__ == '__main__':
+    import mimetypes
+    mimetypes.add_type('application/javascript', '.js')
+
+    import os, sys, traceback
+    from functools import wraps
+    
+    ensure_install('flask')
+    ensure_install('PIL', 'pillow')
+    
+    from flask import Flask, jsonify, request
+    from common import posex_utils as posex
+    
+    app = Flask(__name__, static_folder='.', static_url_path='')
+    
+    posex.set_save_dir(os.path.join(app.static_folder, 'saved_poses'))
+    
+    @app.route('/')
+    def index():
+        return app.send_static_file('index.html')
+    
+    def api_try(fn):
+        @wraps(fn)
+        def f(*args, **kwargs):
+            try:
+                return fn(*args, **kwargs)
+            except Exception as e:
+                msg = ''.join(traceback.TracebackException.from_exception(e).format())
+                print(msg, file=sys.stderr)
+                return jsonify(result=str(e), ok=False)
+        return f
+    
+    @app.route('/pose/all')
+    @api_try
+    def all_poses():
+        return jsonify(list(posex.all_poses()))
+    
+    @app.route('/pose/save', methods=['POST'])
+    @api_try
+    def save_pose():
+        data = request.json
+        posex.save_pose(data)
+        return jsonify(result='pose saved', ok=True)
+    
+    @app.route('/pose/delete', methods=['POST'])
+    @api_try
+    def delete_pose():
+        data = request.json
+        posex.delete_pose(data['name'])
+        return jsonify(result='pose deleted', ok=True)
+    
+    @app.route('/pose/load', methods=['POST'])
+    @api_try
+    def load_pose():
+        data = request.json
+        return jsonify(posex.load_pose(data['name']))
+
+    app.run(port=55502, debug=True)

posex/common/posex_utils.py

@@ -0,0 +1,111 @@
+import os, glob, json, base64, re
+from io import BytesIO
+from PIL import Image, PngImagePlugin
+
+_SAVED_POSES_DIR = ''
+
+def set_save_dir(dir: str):
+    global _SAVED_POSES_DIR
+    _SAVED_POSES_DIR = os.path.realpath(str(dir))
+
+def get_save_dir():
+    assert len(_SAVED_POSES_DIR) != 0
+    return _SAVED_POSES_DIR
+
+def get_saved_path(name: str):
+    #return os.path.realpath(os.path.join(get_save_dir(), name))
+    return os.path.join(get_save_dir(), name)
+
+def atoi(text):
+    return int(text) if text.isdigit() else text
+
+def natural_keys(text):
+    return [ atoi(c) for c in re.split(r'(\d+)', text) ]
+
+def sorted_glob(path):
+    return sorted(glob.glob(path), key=natural_keys)
+
+def name2path(name: str):
+    if not isinstance(name, str):
+        raise ValueError(f'str object expected, but {type(name)}')
+    
+    if len(name) == 0:
+        raise ValueError(f'empty name')
+    
+    if '.' in name or '/' in name or '\\' in name:
+        raise ValueError(f'invalid name: {name}')
+    
+    path = get_saved_path(f'{name}.png')
+    if not path.startswith(get_save_dir()):
+        raise ValueError(f'invalid name: {name}')
+    
+    return path
+
+def saved_poses():
+    for path in sorted_glob(os.path.join(get_save_dir(), '*.png')):
+        yield Image.open(path)
+
+def all_poses():
+    for img in saved_poses():
+        buffer = BytesIO()
+        img.save(buffer, format='png')
+        
+        if not hasattr(img, 'text'):
+            continue
+        
+        pose_dict = {
+            'name': img.text['name'],                   # type: ignore
+            'image': base64.b64encode(buffer.getvalue()).decode('ascii'),
+            'screen': json.loads(img.text['screen']),   # type: ignore
+            'camera': json.loads(img.text['camera']),   # type: ignore
+            'joints': json.loads(img.text['joints']),   # type: ignore
+        }
+        
+        yield pose_dict
+
+def save_pose(data: dict):
+    name = data['name']
+    screen = data['screen']
+    camera = data['camera']
+    joints = data['joints']
+    
+    info = PngImagePlugin.PngInfo()
+    info.add_text('name', name)
+    info.add_text('screen', json.dumps(screen))
+    info.add_text('camera', json.dumps(camera))
+    info.add_text('joints', json.dumps(joints))
+    
+    filepath = name2path(name)
+    
+    image = Image.open(BytesIO(base64.b64decode(data['image'][len('data:image/png;base64,'):])))
+    unit = max(image.width, image.height)
+    mx, my = (unit - image.width) // 2, (unit - image.height) // 2
+    canvas = Image.new('RGB', (unit, unit), color=(68, 68, 68))
+    canvas.paste(image, (mx, my))
+    image = canvas.resize((canvas.width//4, canvas.height//4))
+    
+    image.save(filepath, pnginfo=info)
+
+def delete_pose(name: str):
+    filepath = name2path(name)
+    os.remove(filepath)
+
+def load_pose(name: str):
+    filepath = name2path(name)
+    img = Image.open(filepath)
+    
+    buffer = BytesIO()
+    img.save(buffer, format='png')
+    
+    if not hasattr(img, 'text'):
+        raise ValueError(f'not pose data: {filepath}')
+    
+    pose_dict = {
+        'name': img.text['name'],                   # type: ignore
+        'image': base64.b64encode(buffer.getvalue()).decode('ascii'),
+        'screen': json.loads(img.text['screen']),   # type: ignore
+        'camera': json.loads(img.text['camera']),   # type: ignore
+        'joints': json.loads(img.text['joints']),   # type: ignore
+    }
+    
+    return pose_dict

posex/css/main.css

@@ -0,0 +1,125 @@
+#cont {
+    display: flex;
+    flex-flow: column;
+    gap: 0.5em 0;
+    width: max-content;
+}
+
+.box {
+    display: block;
+    border: 1px solid gray;
+    padding: 0.5em 0;
+    text-decoration: none;
+    text-align: center;
+}
+
+#notation {
+    display: none;
+    position: absolute;
+    color: black;
+    background-color: rgba(255, 255, 255, 0.75);
+    padding: 0.1em 0.25em;
+    pointer-events: none;
+    font-size: small;
+}
+
+#notifications {
+    left: 1em;
+    bottom: 0;
+    width: 25%;
+}
+
+#notifications .item {
+    padding: 0.5em;
+    border: 1px solid gray;
+    animation: erase 2s ease-out 0.5s forwards;
+}
+
+@keyframes erase {
+    100% {
+        opacity: 0;
+    }
+}
+
+#notifications .success {
+    background-color: #aaccaa;
+    color: #004000;
+}
+
+#notifications .info {
+    background-color: white;
+    color: black;
+}
+
+#notifications .error {
+    background-color: #ffcccc;
+    color: red;
+}
+
+#body_indicator1 {
+    display: none;
+    position: absolute;
+    outline: 1px solid white;
+    pointer-events: none;
+}
+
+#body_indicator2 {
+    display: none;
+    position: absolute;
+    outline: 1px solid gray;
+    pointer-events: none;
+}
+
+#saved_poses {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25em;
+    font-size: small;
+}
+
+#saved_poses > * {
+    margin: 0;
+    outline: 1px solid gray;
+    max-width: 128px;
+}
+
+#saved_poses img {
+    max-width: 128px;
+    max-height: 128px;
+}
+
+#saved_poses figcaption {
+    padding: 0 0.25em;
+    overflow-wrap: anywhere; /* Opera Android may not be able to interpret `anywhere` keyword. */
+}
+
+#saved_poses .close {
+    position: absolute;
+    cursor: pointer;
+    border: 1px solid gray;
+    background-color: white;
+    opacity: 0.5;
+    width: 1.25em;
+    height: 1.25em;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0;
+    font-family: monospace;
+}
+
+#saved_poses .close:hover {
+    opacity: 1.0;
+}
+
+#saved_poses .close2 {
+    display: none;
+    position: absolute;
+    left: 1.5em;
+    top: 0;
+}
+
+#saved_poses .close:hover .close2 {
+    display: block;
+    color: white;
+    pointer-events: none;
+}

posex/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Posex - Estimated Image Generator for Pose2Image</title>
+  <link rel="icon" type="image/png" href="image/favicon.png">
+  <link rel="stylesheet" href="css/main.css">
+  <script async src="js/es-module-shims.js"></script>
+  <script type="importmap">
+      {
+        "imports": {
+          "three": "./js/three.module.js",
+          "three-trackballcontrols": "./js/TrackballControls.js",
+          "three-dragcontrols": "./js/DragControls.js",
+          "three-meshline": "./js/THREE.MeshLine.Module.min.js",
+          "posex": "./js/posex.js"
+        }
+      }
+    </script>
+  <script type="esms-options">
+        {
+            "noLoadEventRetriggers": true
+        }
+    </script>
+  <script defer type="module" src="js/app.js"></script>
+</head>
+
+<body>
+  <div id="cont">
+    <button id="all_reset" class="box">&#x1f504; All Reset</button>
+    <div style="display: flex; flex-direction: row; gap: 0 0.5em;">
+      <button id="reset_camera" class="box" style="flex: 1 1 0">&#x1f3a5; Reset Camera</button>
+      <button id="reset_pose" class="box" style="flex: 1 1 0">&#x1f9cd; Reset Pose</button>
+    </div>
+    <div style="display: flex; flex-direction: row; ">
+
+      <canvas width="512" height="512" id="main_canvas"></canvas>
+
+      <div style="margin-left: 1em; display: flex; flex-direction: column; gap: 0.25em; font-size: smaller;">
+        <div>- Camera</div>
+        <label><input type="checkbox" id="fixed_roll">Fixed Roll</label>
+        <div>- Body</div>
+        <button id="add_body" style="width: max-content; min-width: 100%; text-align: left;">&#x2795; Add</button>
+        <button id="remove_body" style="width: max-content; min-width: 100%; text-align: left;">&#x2796; Remove</button>
+        <div>- Canvas Size</div>
+        <input type="number" id="canvas_width" value="512" min="64" />
+        <input type="number" id="canvas_height" value="512" min="64" />
+        <div>- Background</div>
+        <div style="display: flex; flex-direction: row; gap: 0 0.25em;">
+          <label style="flex: 0 0 0;"><button onclick="document.querySelector('#bg_file').click();">&#x1f5bc; Set</button><input type="file" id="bg_file" style="display: none;"/></label>
+          <button id="reset_bg" style="flex: 0 0 0;">&#x274c; Del</button>
+        </div>
+        <div>- Joints and Limbs</div>
+        <!-- <label><input type="range" id="joint_radius" min="1" max="16" value="4" />Joint Radius</label> -->
+        <label><input type="range" id="limb_width" min="1" max="16" value="4" />Limb Width</label>
+        <label><input type="checkbox" id="elliptic_limbs" checked />Elliptic Limbs</label>
+        <div>- Others</div>
+        <label><input type="checkbox" id="low_fps" />Low fps</label>
+      </div>
+    </div>
+    <div id="body_indicator2"></div>
+    <div id="body_indicator1"></div>
+    <div style="display: flex; flex-direction: row; gap: 0 0.25em;">
+      <a id="save_button" class="box" style="flex: 1 1 0;" href="#">&#x1f4be; Save Image</a>
+      <a id="copy_button" class="box" style="flex: 1 1 0;" href="#">&#x1f4cb; Copy to clipboard</a>
+    </div>
+    <button id="save_pose" class="box">&#x1f4be;&#x1f9cd; Save Pose</button>
+    <div id="saved_poses"></div>
+  </div>
+  <p id="notation"></p>
+  <div id="notifications"></div>
+</body>
+
+</html>

posex/javascript/lazyload/posex-webui.js

@@ -0,0 +1,386 @@
+async function _import() {
+    if (!globalThis.posex || !globalThis.posex.import) {
+        return await import('posex');
+    } else {
+        return await globalThis.posex.imports.posex();
+    }
+}
+const { init, init_3d } = await _import();
+
+(async function () {
+    let _r = 0;
+    function to_gradio(v) {
+        // force call `change` event on gradio
+        return [v.toString(), (_r++).toString()];
+    }
+
+    function js2py(type, gradio_field, value) {
+        // set `value` to gradio's field
+        // (1) Click gradio's button.
+        // (2) Gradio will fire js callback to retrieve value to be set.
+        // (3) Gradio will fire another js callback to notify the process has been completed.
+        return new Promise(resolve => {
+            const callback_name = `posex-${type}-${gradio_field}`;
+
+            // (2)
+            globalThis[callback_name] = () => {
+
+                delete globalThis[callback_name];
+
+                // (3)
+                const callback_after = callback_name + '_after';
+                globalThis[callback_after] = () => {
+                    delete globalThis[callback_after];
+                    resolve();
+                };
+
+                return to_gradio(value);
+            };
+
+            // (1)
+            gradioApp().querySelector(`#${callback_name}_set`).click();
+        });
+    }
+
+    function py2js(type, pyname, ...args) {
+        // call python's function
+        // (1) Set args to gradio's field
+        // (2) Click gradio's button
+        // (3) JS callback will be kicked with return value from gradio
+
+        // (1)
+        return (args.length == 0 ? Promise.resolve() : js2py(type, pyname + '_args', JSON.stringify(args)))
+            .then(() => {
+                return new Promise(resolve => {
+                    const callback_name = `posex-${type}-${pyname}`;
+                    // (3)
+                    globalThis[callback_name] = value => {
+                        delete globalThis[callback_name];
+                        resolve(value);
+                    }
+                    // (2)
+                    gradioApp().querySelector(`#${callback_name}_get`).click();
+                });
+            });
+    }
+
+    function reload_poses(json, ui) {
+        const df = document.createDocumentFragment();
+        for (let data of json) {
+            const fig = document.createElement('figure')
+            const img = document.createElement('img');
+            const cap = document.createElement('figcaption');
+            const clo = document.createElement('div');
+            const cloimg = document.createElement('img');
+            const clo2 = document.createElement('span');
+            fig.dataset.poseName = data.name;
+            cap.textContent = data.name;
+            clo.classList.add('close');
+            cloimg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAG3RFWHRTb2Z0d2FyZQBDZWxzeXMgU3R1ZGlvIFRvb2zBp+F8AAAAxElEQVQ4y82T0REBQRBEX0dAJk4GJwKXgZMBESADIiADJwKXATI4GRBB+1lqKa62+DFV+7E7U6+6e2plm19K/wWQ1AE2QBcobZ9fehVwCb3rWwWShmHwaLsfvW+BAihs71otSJoBc2BuexFBl7anSRlI2gN5OBXQxIpSAB2gCXlcgCzOJGkLkg5ABhyB/B5cqoI1UAb5BbCxPU4CSBqFdda2B1GoE9urVoCkHlCH68N3ZOfzGkNw9dvBZ3Bu+/SHf+GbugG9/4ThhKqF8gAAAABJRU5ErkJggg==';
+            clo2.classList.add('close2');
+            clo2.textContent = 'delete';
+            clo.append(cloimg, clo2);
+
+            img.src = 'data:image/png;base64,' + data.image;
+            img.title = data.name;
+            fig.append(clo, img, cap);
+
+            df.appendChild(fig);
+        }
+
+        ui.saved_poses.innerHTML = '';
+        ui.saved_poses.appendChild(df);
+    }
+
+    function init_ui(type, api) {
+        const $ = x => document.createElement(x);
+
+        const all_reset = $('button');
+        all_reset.innerHTML = '🔄 All Reset';
+        all_reset.classList.add('posex_all_reset', 'posex_box');
+
+        const reset_camera = $('button');
+        reset_camera.innerHTML = '🎥 Reset Camera';
+        reset_camera.classList.add('posex_reset_camera', 'posex_box');
+
+        const reset_pose = $('button');
+        reset_pose.innerHTML = '🧍 Reset Pose';
+        reset_pose.classList.add('posex_reset_pose', 'posex_box');
+
+        const reset_cont = $('div');
+        reset_cont.classList.add('posex_reset_cont');
+        reset_cont.append(reset_camera, reset_pose);
+
+        const canvas = $('canvas');
+        canvas.width = 512;
+        canvas.height = 512;
+
+        const camera_marker = $('div'); camera_marker.textContent = '- Camera';
+        const fixed_roll_label = $('label');
+        const fixed_roll = $('input'); fixed_roll.type = 'checkbox'; fixed_roll.classList.add('posex_fixed_roll', 'posex_camera'); fixed_roll.checked = true;
+        fixed_roll_label.append(fixed_roll, document.createTextNode('Fixed Roll'));
+        const body_marker = $('div'); body_marker.textContent = '- Body';
+        const add_body = $('button'); add_body.classList.add('posex_add_body', 'posex_body'); add_body.innerHTML = '➕ Add';
+        const remove_body = $('button'); remove_body.classList.add('posex_remove_body', 'posex_body'); remove_body.innerHTML = '➖ Remove';
+        const canvas_marker = $('div'); canvas_marker.textContent = '- Canvas Size';
+        const canvas_width = $('input'); canvas_width.type = 'number'; canvas_width.value = 512; canvas_width.min = 64; canvas_width.classList.add('posex_canvas_width', 'posex_canvas_size');
+        const canvas_height = $('input'); canvas_height.type = 'number'; canvas_height.value = 512; canvas_height.min = 64; canvas_height.classList.add('posex_canvas_height', 'posex_canvas_size');
+        const bg_marker = $('div'); bg_marker.textContent = '- Background';
+        const set_bg = $('label'); set_bg.classList.add('posex_bg');
+        const bg_button = $('button'); bg_button.innerHTML = '🖼 Set'; bg_button.onclick = () => bg_input.click();
+        const bg_input = $('input'); bg_input.type = 'file'; bg_input.style.display = 'none';
+        set_bg.append(bg_button, bg_input);
+        const reset_bg = $('button'); reset_bg.classList.add('posex_bg'); reset_bg.innerHTML = '❌ Del';
+        const bg_cont = $('div'); bg_cont.classList.add('posex_bg_cont');
+        bg_cont.append(set_bg, reset_bg);
+        const joint_marker = $('div'); joint_marker.textContent = '- Joints and Limbs';
+        const limb_width_label = $('label');
+        const limb_width = $('input'); limb_width.type = 'range'; limb_width.min = 1; limb_width.max = 16; limb_width.value = 4; limb_width.classList.add('posex_joints', 'posex_limb_width');
+        limb_width_label.append(limb_width, document.createTextNode('Limb Width'));
+        const elliptic_limbs_label = $('label');
+        const elliptic_limbs = $('input'); elliptic_limbs.type = 'checkbox'; elliptic_limbs.classList.add('posex_joints', 'posex_elliptic_limbs'); elliptic_limbs.checked = true;
+        elliptic_limbs_label.append(elliptic_limbs, document.createTextNode('Elliptic Limbs'));
+        const other_marker = $('div'); other_marker.textContent = '- Others';
+        const low_fps_label = $('label');
+        const low_fps = $('input'); low_fps.type = 'checkbox'; low_fps.classList.add('posex_low_fps', 'posex_others'); low_fps.checked = false;
+        low_fps_label.append(low_fps, document.createTextNode('Low fps'));
+
+        const setting_cont = $('div');
+        setting_cont.classList.add('posex_setting_cont');
+        setting_cont.append(
+            camera_marker,
+            fixed_roll_label,
+            body_marker,
+            add_body,
+            remove_body,
+            canvas_marker,
+            canvas_width,
+            canvas_height,
+            bg_marker,
+            bg_cont,
+            joint_marker,
+            limb_width_label,
+            elliptic_limbs_label,
+            other_marker,
+            low_fps_label,
+        );
+
+        const canvas_cont = $('div');
+        canvas_cont.classList.add('posex_canvas_cont');
+        canvas_cont.append(
+            canvas,
+            setting_cont,
+        );
+
+        const notation = $('p');
+        notation.classList.add('posex_notation');
+
+        const indicator1 = $('div');
+        indicator1.classList.add('posex_indicator1');
+
+        const indicator2 = $('div');
+        indicator2.classList.add('posex_indicator2');
+
+        const copy = $('button'); copy.classList.add('posex_copy', 'posex_misc', 'posex_box'); copy.innerHTML = '📋 Copy to clipboard';
+        const save = $('button'); save.classList.add('posex_save', 'posex_misc', 'posex_box'); save.innerHTML = '💾 Download image';
+
+        const misc_cont = $('div');
+        misc_cont.classList.add('posex_misc_cont');
+        misc_cont.append(
+            copy,
+            save
+        );
+
+        const save_pose = $('button');
+        save_pose.classList.add('posex_save_pose', 'posex_box');
+        save_pose.innerHTML = '💾🧍 Save Pose';
+
+        const save_pose_callback = async obj => {
+            await py2js(type, 'savepose', obj);
+            const json = await py2js(type, 'allposes')
+            reload_poses(JSON.parse(json), ui);
+            return { result: '', ok: true };
+        };
+
+        const saved_poses = $('div');
+        saved_poses.classList.add('posex_saved_poses');
+
+        saved_poses.addEventListener('click', async e => {
+            const get_name = ele => {
+                while (ele && ele !== document) {
+                    if (ele.dataset && ele.dataset.poseName !== undefined)
+                        return ele.dataset.poseName;
+                    ele = ele.parentNode;
+                }
+                return '';
+            };
+
+            let target = e.target;
+            if (target.tagName === 'IMG') target = target.parentNode;
+            if (target.classList.contains('close2')) target = target.parentNode;
+            if (target.tagName === 'FIGURE') {
+                const name = get_name(target);
+                if (name.length != 0) {
+                    const json = await py2js(type, 'loadpose', name);
+                    ui.loadPose(JSON.parse(json));
+                }
+            } else if (target.classList.contains('close')) {
+                const name = get_name(target);
+                if (name.length != 0) {
+                    await py2js(type, 'delpose', name);
+                    const json = await py2js(type, 'allposes')
+                    reload_poses(JSON.parse(json), ui);
+                }
+            }
+        }, false);
+
+        const ui = {
+            canvas,
+            notation,
+            indicator1,
+            indicator2,
+            all_reset,
+            reset_camera,
+            reset_pose,
+            fixed_roll,
+            add_body,
+            remove_body,
+            canvas_width,
+            canvas_height,
+            bg: bg_input,
+            reset_bg,
+            limb_width,
+            elliptic_limbs,
+            low_fps,
+            save,
+            copy,
+            save_pose,
+            save_pose_callback,
+            saved_poses,
+        };
+
+        const df = document.createDocumentFragment();
+        df.append(
+            all_reset,
+            reset_cont,
+            canvas_cont,
+            indicator2,
+            indicator1,
+            notation,
+            misc_cont,
+            save_pose,
+            saved_poses,
+        );
+
+        return { ui, df };
+    };
+
+    async function init_canvas(
+        type,
+        enabled,
+        generate_button,
+        container,
+        api
+    ) {
+        container.classList.add('posex_cont');
+        container.innerHTML = '';
+        const { ui, df } = init_ui(type, api);
+        container.appendChild(df);
+
+        ui.container = container;
+        ui.notify = function (str, type) { if (type === 'error') console.error(str); };
+
+        if (!posex[`${type}_click`]) {
+            // Send canvas image to ControlNet when button is clicked.
+            let force = false;
+            gradioApp().addEventListener('click', async e => {
+                if (e.target !== generate_button) return;
+
+                if (!enabled.checked) return;
+
+                if (force) {
+                    force = false;
+                    return;
+                }
+
+                // hook `generate` button to add canvas data
+                e.preventDefault();
+                e.stopPropagation();
+
+                const data_url = await ui.getDataURL();
+                await js2py(type, 'base64', data_url);
+                force = true;
+                generate_button.click();
+            }, true);
+            posex[`${type}_click`] = true;
+        }
+
+        {
+            // Load saved poses.
+            const json = await py2js(type, 'allposes')
+            reload_poses(JSON.parse(json), ui);
+        }
+
+        init(ui);
+
+        const animate = init_3d(ui);
+
+        animate();
+
+        onUiTabChange(() => {
+            const tabname = get_uiCurrentTabContent().id;
+            if (type === 't2i') {
+                if (0 <= tabname.indexOf('txt2img')) {
+                    ui.play();
+                } else {
+                    ui.stop();
+                }
+            } else if (type === 'i2i') {
+                if (0 <= tabname.indexOf('img2img')) {
+                    ui.play();
+                } else {
+                    ui.stop();
+                }
+            } else {
+                ui.stop();
+            }
+        });
+    }
+
+    async function init_t2i() {
+        const app = gradioApp();
+        await init_canvas(
+            't2i',
+            app.querySelector('#posex-t2i-enabled input[type=checkbox]'),
+            app.querySelector('#txt2img_generate'),
+            Array.from(app.querySelectorAll('#posex-t2i-html')).at(-1), // !
+            {
+                load_all_poses: app.querySelector('#posex-t2i-api-all_pose'),
+                delete_pose: app.querySelector('#posex-t2i-api-delete_pose'),
+            }
+        );
+    }
+
+    async function init_i2i() {
+        const app = gradioApp();
+        await init_canvas(
+            'i2i',
+            app.querySelector('#posex-i2i-enabled input[type=checkbox]'),
+            app.querySelector('#img2img_generate'),
+            Array.from(app.querySelectorAll('#posex-i2i-html')).at(-1), // !
+            {
+                load_all_poses: app.querySelector('#posex-i2i-api-all_pose'),
+                delete_pose: app.querySelector('#posex-i2i-api-delete_pose'),
+            }
+        );
+    }
+
+    if (!globalThis.posex) globalThis.posex = {};
+    const posex = globalThis.posex;
+    posex.init_t2i = init_t2i;
+    posex.init_i2i = init_i2i;
+
+    posex.script_loaded = true;
+    document.dispatchEvent(new CustomEvent('posexscriptloaded'));
+
+})();

posex/javascript/posex-webui.js

@@ -0,0 +1,93 @@
+(function () {
+    if (!globalThis.posex) globalThis.posex = {};
+    const posex = globalThis.posex;
+
+    function load(cont) {
+        function load_() {
+            if (posex.script_loading || posex.script_loaded) return;
+            posex.script_loading = true;
+            
+            const scripts = cont.textContent.trim().split('\n');
+            const base_path = `/file=${scripts.shift()}/js`;
+            cont.textContent = '';
+
+            const df = document.createDocumentFragment();
+            for (let src of scripts) {
+                console.log(`[Posex] loading ${src}`);
+                const script = document.createElement('script');
+                script.async = true;
+                script.type = 'module';
+                script.src = `file=${src}`;
+                df.appendChild(script);
+            }
+
+            globalThis.posex.import = async () => {
+                const THREE = await import(`${base_path}/three.module.js`);
+                const { TrackballControls } = await import(`${base_path}/TrackballControls.js`);
+                const { DragControls } = await import(`${base_path}/DragControls.js`);
+                const { MeshLine, MeshLineMaterial } = await import(`${base_path}/THREE.MeshLine.Module.min.js`);
+                return { THREE, TrackballControls, DragControls, MeshLine, MeshLineMaterial };
+            };
+            if (!globalThis.posex.imports) globalThis.posex.imports = {};
+            if (!globalThis.posex.imports.three) globalThis.posex.imports.three = async () => await import(`${base_path}/three.module.js`);
+            if (!globalThis.posex.imports.posex) globalThis.posex.imports.posex = async () => await import(`${base_path}/posex.js`);
+            cont.appendChild(df);
+        }
+
+        return posex.script_loaded ? Promise.resolve() : new Promise(resolve => {
+            document.addEventListener('posexscriptloaded', () => resolve(), false);
+            load_();
+        });
+    }
+
+    function lazy(fn, timeout) {
+        if (timeout === undefined) timeout = 500;
+        return new Promise(function callback(resolve) {
+            const result = fn();
+            if (result) {
+                resolve(result);
+            } else {
+                setTimeout(() => callback(resolve), timeout);
+            }
+        });
+    }
+
+    function hook_acc(acc, fn) {
+        const observer = new MutationObserver(list => {
+            for (let mut of list) {
+                if (mut.type === 'childList') {
+                    if (mut.addedNodes.length != 0) {
+                        // closed -> opened
+                        fn();
+                    } else {
+                        // opened -> closed
+                        // do nothing
+                    }
+                }
+            }
+        });
+        observer.observe(acc, { childList: true, attributes: false, subtree: false });
+    }
+
+    function launch(type) {
+        return lazy(() => gradioApp()?.querySelector(`#posex-${type}-accordion`)).
+            then(acc => hook_acc(acc, async () => {
+                const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); // !
+                const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`);
+                await load(cont);
+                if (enabled.checked) {
+                    await posex[`init_${type}`]();
+                    console.log(`[Posex] ${type} initialized`);
+                } else {
+                    enabled.addEventListener('change', async () => {
+                        await posex[`init_${type}`]();
+                        console.log(`[Posex] ${type} initialized`);
+                    }, { once: true });
+                }
+            }));
+    }
+    
+    launch('t2i');
+    launch('i2i');
+
+})();

posex/js/DragControls.js

@@ -0,0 +1,228 @@
+async function _import() {
+	if (!globalThis.posex || !globalThis.posex.import) {
+		return await import('three');
+	} else {
+		return await globalThis.posex.imports.three();
+	}
+}
+const {
+	EventDispatcher,
+	Matrix4,
+	Plane,
+	Raycaster,
+	Vector2,
+	Vector3
+} = await _import();
+
+const _plane = new Plane();
+const _raycaster = new Raycaster();
+
+const _pointer = new Vector2();
+const _offset = new Vector3();
+const _intersection = new Vector3();
+const _worldPosition = new Vector3();
+const _inverseMatrix = new Matrix4();
+
+class DragControls extends EventDispatcher {
+
+	constructor( _objects, _camera, _domElement ) {
+
+		super();
+
+		_domElement.style.touchAction = 'none'; // disable touch scroll
+
+		let _selected = null, _hovered = null;
+
+		const _intersections = [];
+
+		//
+
+		const scope = this;
+
+		function activate() {
+
+			_domElement.addEventListener( 'pointermove', onPointerMove );
+			_domElement.addEventListener( 'pointerdown', onPointerDown );
+			_domElement.addEventListener( 'pointerup', onPointerCancel );
+			_domElement.addEventListener( 'pointerleave', onPointerCancel );
+
+		}
+
+		function deactivate() {
+
+			_domElement.removeEventListener( 'pointermove', onPointerMove );
+			_domElement.removeEventListener( 'pointerdown', onPointerDown );
+			_domElement.removeEventListener( 'pointerup', onPointerCancel );
+			_domElement.removeEventListener( 'pointerleave', onPointerCancel );
+
+			_domElement.style.cursor = '';
+
+		}
+
+		function dispose() {
+
+			deactivate();
+
+		}
+
+		function getObjects() {
+
+			return _objects;
+
+		}
+
+		function getRaycaster() {
+
+			return _raycaster;
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_raycaster.setFromCamera( _pointer, _camera );
+
+			if ( _selected ) {
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+				}
+
+				scope.dispatchEvent( { type: 'drag', object: _selected } );
+
+				return;
+
+			}
+
+			// hover support
+
+			if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
+
+				_intersections.length = 0;
+
+				_raycaster.setFromCamera( _pointer, _camera );
+				_raycaster.intersectObjects( _objects, true, _intersections );
+
+				if ( _intersections.length > 0 ) {
+
+					const object = _intersections[ 0 ].object;
+
+					_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
+
+					if ( _hovered !== object && _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+					if ( _hovered !== object ) {
+
+						scope.dispatchEvent( { type: 'hoveron', object: object } );
+
+						_domElement.style.cursor = 'pointer';
+						_hovered = object;
+
+					}
+
+				} else {
+
+					if ( _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+				}
+
+			}
+
+		}
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_intersections.length = 0;
+
+			_raycaster.setFromCamera( _pointer, _camera );
+			_raycaster.intersectObjects( _objects, true, _intersections );
+
+			if ( _intersections.length > 0 ) {
+
+				_selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
+
+				_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
+					_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				}
+
+				_domElement.style.cursor = 'move';
+
+				scope.dispatchEvent( { type: 'dragstart', object: _selected } );
+
+			}
+
+
+		}
+
+		function onPointerCancel() {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _selected ) {
+
+				scope.dispatchEvent( { type: 'dragend', object: _selected } );
+
+				_selected = null;
+
+			}
+
+			_domElement.style.cursor = _hovered ? 'pointer' : 'auto';
+
+		}
+
+		function updatePointer( event ) {
+
+			const rect = _domElement.getBoundingClientRect();
+
+			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
+			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
+
+		}
+
+		activate();
+
+		// API
+
+		this.enabled = true;
+		this.transformGroup = false;
+
+		this.activate = activate;
+		this.deactivate = deactivate;
+		this.dispose = dispose;
+		this.getObjects = getObjects;
+		this.getRaycaster = getRaycaster;
+		this.onPointerDown = onPointerDown;
+
+	}
+
+}
+
+export { DragControls };

posex/js/LICENSE/THREE.MeshLine

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Jaume Sanchez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

posex/js/LICENSE/es-module-shims

@@ -0,0 +1,10 @@
+MIT License
+-----------
+
+Copyright (C) 2018-2021 Guy Bedford
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

posex/js/LICENSE/three

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2010-2023 three.js authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

posex/js/THREE.MeshLine.Module.min.js

@@ -0,0 +1,15 @@
+/**
+ * Minified by jsDelivr using Terser v5.15.1.
+ * Original file: /npm/[email protected]/src/THREE.MeshLine.Module.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+async function _import() {
+	if (!globalThis.posex || !globalThis.posex.import) {
+		return await import('three');
+	} else {
+		return await globalThis.posex.imports.three();
+	}
+}
+const THREE=await _import();class MeshLine extends THREE.BufferGeometry{constructor(){super(),this.isMeshLine=!0,this.type="MeshLine",this.positions=[],this.previous=[],this.next=[],this.side=[],this.width=[],this.indices_array=[],this.uvs=[],this.counters=[],this._points=[],this._geom=null,this.widthCallback=null,this.matrixWorld=new THREE.Matrix4,Object.defineProperties(this,{geometry:{enumerable:!0,get:function(){return this}},geom:{enumerable:!0,get:function(){return this._geom},set:function(t){this.setGeometry(t,this.widthCallback)}},points:{enumerable:!0,get:function(){return this._points},set:function(t){this.setPoints(t,this.widthCallback)}}})}}function MeshLineRaycast(t,e){var i=new THREE.Matrix4,s=new THREE.Ray,r=new THREE.Sphere,a=new THREE.Vector3,n=this.geometry;if(n.boundingSphere||n.computeBoundingSphere(),r.copy(n.boundingSphere),r.applyMatrix4(this.matrixWorld),!1!==t.ray.intersectSphere(r,a)){i.copy(this.matrixWorld).invert(),s.copy(t.ray).applyMatrix4(i);var o=new THREE.Vector3,u=new THREE.Vector3,h=new THREE.Vector3,l=this instanceof THREE.LineSegments?2:1,p=n.index,c=n.attributes;if(null!==p)for(var f=p.array,v=c.position.array,d=c.width.array,y=0,m=f.length-1;y<m;y+=l){var b=f[y],x=f[y+1];o.fromArray(v,3*b),u.fromArray(v,3*x);var E=void 0!==d[Math.floor(y/3)]?d[Math.floor(y/3)]:1,g=t.params.Line.threshold+this.material.lineWidth*E/2,A=g*g;if(!(s.distanceSqToSegment(o,u,a,h)>A)){a.applyMatrix4(this.matrixWorld);var M=t.ray.origin.distanceTo(a);M<t.near||M>t.far||(e.push({distance:M,point:h.clone().applyMatrix4(this.matrixWorld),index:y,face:null,faceIndex:null,object:this}),y=m)}}}}function memcpy(t,e,i,s,r){var a;if(t=t.subarray||t.slice?t:t.buffer,i=i.subarray||i.slice?i:i.buffer,t=e?t.subarray?t.subarray(e,r&&e+r):t.slice(e,r&&e+r):t,i.set)i.set(t,s);else for(a=0;a<t.length;a++)i[a+s]=t[a];return i}MeshLine.prototype.setMatrixWorld=function(t){this.matrixWorld=t},MeshLine.prototype.setGeometry=function(t,e){this._geometry=t,this.setPoints(t.getAttribute("position").array,e)},MeshLine.prototype.setPoints=function(t,e){if(t instanceof Float32Array||t instanceof Array){if(this._points=t,this.widthCallback=e,this.positions=[],this.counters=[],t.length&&t[0]instanceof THREE.Vector3)for(var i=0;i<t.length;i++){var s=t[i],r=i/t.length;this.positions.push(s.x,s.y,s.z),this.positions.push(s.x,s.y,s.z),this.counters.push(r),this.counters.push(r)}else for(i=0;i<t.length;i+=3){r=i/t.length;this.positions.push(t[i],t[i+1],t[i+2]),this.positions.push(t[i],t[i+1],t[i+2]),this.counters.push(r),this.counters.push(r)}this.process()}else console.error("ERROR: The BufferArray of points is not instancied correctly.")},MeshLine.prototype.raycast=MeshLineRaycast,MeshLine.prototype.compareV3=function(t,e){var i=6*t,s=6*e;return this.positions[i]===this.positions[s]&&this.positions[i+1]===this.positions[s+1]&&this.positions[i+2]===this.positions[s+2]},MeshLine.prototype.copyV3=function(t){var e=6*t;return[this.positions[e],this.positions[e+1],this.positions[e+2]]},MeshLine.prototype.process=function(){var t,e,i=this.positions.length/6;this.previous=[],this.next=[],this.side=[],this.width=[],this.indices_array=[],this.uvs=[],e=this.compareV3(0,i-1)?this.copyV3(i-2):this.copyV3(0),this.previous.push(e[0],e[1],e[2]),this.previous.push(e[0],e[1],e[2]);for(var s=0;s<i;s++){if(this.side.push(1),this.side.push(-1),t=this.widthCallback?this.widthCallback(s/(i-1)):1,this.width.push(t),this.width.push(t),this.uvs.push(s/(i-1),0),this.uvs.push(s/(i-1),1),s<i-1){e=this.copyV3(s),this.previous.push(e[0],e[1],e[2]),this.previous.push(e[0],e[1],e[2]);var r=2*s;this.indices_array.push(r,r+1,r+2),this.indices_array.push(r+2,r+1,r+3)}s>0&&(e=this.copyV3(s),this.next.push(e[0],e[1],e[2]),this.next.push(e[0],e[1],e[2]))}e=this.compareV3(i-1,0)?this.copyV3(1):this.copyV3(i-1),this.next.push(e[0],e[1],e[2]),this.next.push(e[0],e[1],e[2]),this._attributes&&this._attributes.position.count===this.positions.length?(this._attributes.position.copyArray(new Float32Array(this.positions)),this._attributes.position.needsUpdate=!0,this._attributes.previous.copyArray(new Float32Array(this.previous)),this._attributes.previous.needsUpdate=!0,this._attributes.next.copyArray(new Float32Array(this.next)),this._attributes.next.needsUpdate=!0,this._attributes.side.copyArray(new Float32Array(this.side)),this._attributes.side.needsUpdate=!0,this._attributes.width.copyArray(new Float32Array(this.width)),this._attributes.width.needsUpdate=!0,this._attributes.uv.copyArray(new Float32Array(this.uvs)),this._attributes.uv.needsUpdate=!0,this._attributes.index.copyArray(new Uint16Array(this.indices_array)),this._attributes.index.needsUpdate=!0):this._attributes={position:new THREE.BufferAttribute(new Float32Array(this.positions),3),previous:new THREE.BufferAttribute(new Float32Array(this.previous),3),next:new THREE.BufferAttribute(new Float32Array(this.next),3),side:new THREE.BufferAttribute(new Float32Array(this.side),1),width:new THREE.BufferAttribute(new Float32Array(this.width),1),uv:new THREE.BufferAttribute(new Float32Array(this.uvs),2),index:new THREE.BufferAttribute(new Uint16Array(this.indices_array),1),counters:new THREE.BufferAttribute(new Float32Array(this.counters),1)},this.setAttribute("position",this._attributes.position),this.setAttribute("previous",this._attributes.previous),this.setAttribute("next",this._attributes.next),this.setAttribute("side",this._attributes.side),this.setAttribute("width",this._attributes.width),this.setAttribute("uv",this._attributes.uv),this.setAttribute("counters",this._attributes.counters),this.setIndex(this._attributes.index),this.computeBoundingSphere(),this.computeBoundingBox()},MeshLine.prototype.advance=function(t){var e=this._attributes.position.array,i=this._attributes.previous.array,s=this._attributes.next.array,r=e.length;memcpy(e,0,i,0,r),memcpy(e,6,e,0,r-6),e[r-6]=t.x,e[r-5]=t.y,e[r-4]=t.z,e[r-3]=t.x,e[r-2]=t.y,e[r-1]=t.z,memcpy(e,6,s,0,r-6),s[r-6]=t.x,s[r-5]=t.y,s[r-4]=t.z,s[r-3]=t.x,s[r-2]=t.y,s[r-1]=t.z,this._attributes.position.needsUpdate=!0,this._attributes.previous.needsUpdate=!0,this._attributes.next.needsUpdate=!0},THREE.ShaderChunk.meshline_vert=["",THREE.ShaderChunk.logdepthbuf_pars_vertex,THREE.ShaderChunk.fog_pars_vertex,"","attribute vec3 previous;","attribute vec3 next;","attribute float side;","attribute float width;","attribute float counters;","","uniform vec2 resolution;","uniform float lineWidth;","uniform vec3 color;","uniform float opacity;","uniform float sizeAttenuation;","","varying vec2 vUV;","varying vec4 vColor;","varying float vCounters;","","vec2 fix( vec4 i, float aspect ) {","","    vec2 res = i.xy / i.w;","    res.x *= aspect;","\t vCounters = counters;","    return res;","","}","","void main() {","","    float aspect = resolution.x / resolution.y;","","    vColor = vec4( color, opacity );","    vUV = uv;","","    mat4 m = projectionMatrix * modelViewMatrix;","    vec4 finalPosition = m * vec4( position, 1.0 );","    vec4 prevPos = m * vec4( previous, 1.0 );","    vec4 nextPos = m * vec4( next, 1.0 );","","    vec2 currentP = fix( finalPosition, aspect );","    vec2 prevP = fix( prevPos, aspect );","    vec2 nextP = fix( nextPos, aspect );","","    float w = lineWidth * width;","","    vec2 dir;","    if( nextP == currentP ) dir = normalize( currentP - prevP );","    else if( prevP == currentP ) dir = normalize( nextP - currentP );","    else {","        vec2 dir1 = normalize( currentP - prevP );","        vec2 dir2 = normalize( nextP - currentP );","        dir = normalize( dir1 + dir2 );","","        vec2 perp = vec2( -dir1.y, dir1.x );","        vec2 miter = vec2( -dir.y, dir.x );","        //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );","","    }","","    //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;","    vec4 normal = vec4( -dir.y, dir.x, 0., 1. );","    normal.xy *= .5 * w;","    normal *= projectionMatrix;","    if( sizeAttenuation == 0. ) {","        normal.xy *= finalPosition.w;","        normal.xy /= ( vec4( resolution, 0., 1. ) * projectionMatrix ).xy;","    }","","    finalPosition.xy += normal.xy * side;","","    gl_Position = finalPosition;","",THREE.ShaderChunk.logdepthbuf_vertex,THREE.ShaderChunk.fog_vertex&&"    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.ShaderChunk.fog_vertex,"}"].join("\n"),THREE.ShaderChunk.meshline_frag=["",THREE.ShaderChunk.fog_pars_fragment,THREE.ShaderChunk.logdepthbuf_pars_fragment,"","uniform sampler2D map;","uniform sampler2D alphaMap;","uniform float useMap;","uniform float useAlphaMap;","uniform float useDash;","uniform float dashArray;","uniform float dashOffset;","uniform float dashRatio;","uniform float visibility;","uniform float alphaTest;","uniform vec2 repeat;","","varying vec2 vUV;","varying vec4 vColor;","varying float vCounters;","","void main() {","",THREE.ShaderChunk.logdepthbuf_fragment,"","    vec4 c = vColor;","    if( useMap == 1. ) c *= texture2D( map, vUV * repeat );","    if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;","    if( c.a < alphaTest ) discard;","    if( useDash == 1. ){","        c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));","    }","    gl_FragColor = c;","    gl_FragColor.a *= step(vCounters, visibility);","",THREE.ShaderChunk.fog_fragment,"}"].join("\n");class MeshLineMaterial extends THREE.ShaderMaterial{constructor(t){super({uniforms:Object.assign({},THREE.UniformsLib.fog,{lineWidth:{value:1},map:{value:null},useMap:{value:0},alphaMap:{value:null},useAlphaMap:{value:0},color:{value:new THREE.Color(16777215)},opacity:{value:1},resolution:{value:new THREE.Vector2(1,1)},sizeAttenuation:{value:1},dashArray:{value:0},dashOffset:{value:0},dashRatio:{value:.5},useDash:{value:0},visibility:{value:1},alphaTest:{value:0},repeat:{value:new THREE.Vector2(1,1)}}),vertexShader:THREE.ShaderChunk.meshline_vert,fragmentShader:THREE.ShaderChunk.meshline_frag}),this.isMeshLineMaterial=!0,this.type="MeshLineMaterial",Object.defineProperties(this,{lineWidth:{enumerable:!0,get:function(){return this.uniforms.lineWidth.value},set:function(t){this.uniforms.lineWidth.value=t}},map:{enumerable:!0,get:function(){return this.uniforms.map.value},set:function(t){this.uniforms.map.value=t}},useMap:{enumerable:!0,get:function(){return this.uniforms.useMap.value},set:function(t){this.uniforms.useMap.value=t}},alphaMap:{enumerable:!0,get:function(){return this.uniforms.alphaMap.value},set:function(t){this.uniforms.alphaMap.value=t}},useAlphaMap:{enumerable:!0,get:function(){return this.uniforms.useAlphaMap.value},set:function(t){this.uniforms.useAlphaMap.value=t}},color:{enumerable:!0,get:function(){return this.uniforms.color.value},set:function(t){this.uniforms.color.value=t}},opacity:{enumerable:!0,get:function(){return this.uniforms.opacity.value},set:function(t){this.uniforms.opacity.value=t}},resolution:{enumerable:!0,get:function(){return this.uniforms.resolution.value},set:function(t){this.uniforms.resolution.value.copy(t)}},sizeAttenuation:{enumerable:!0,get:function(){return this.uniforms.sizeAttenuation.value},set:function(t){this.uniforms.sizeAttenuation.value=t}},dashArray:{enumerable:!0,get:function(){return this.uniforms.dashArray.value},set:function(t){this.uniforms.dashArray.value=t,this.useDash=0!==t?1:0}},dashOffset:{enumerable:!0,get:function(){return this.uniforms.dashOffset.value},set:function(t){this.uniforms.dashOffset.value=t}},dashRatio:{enumerable:!0,get:function(){return this.uniforms.dashRatio.value},set:function(t){this.uniforms.dashRatio.value=t}},useDash:{enumerable:!0,get:function(){return this.uniforms.useDash.value},set:function(t){this.uniforms.useDash.value=t}},visibility:{enumerable:!0,get:function(){return this.uniforms.visibility.value},set:function(t){this.uniforms.visibility.value=t}},alphaTest:{enumerable:!0,get:function(){return this.uniforms.alphaTest.value},set:function(t){this.uniforms.alphaTest.value=t}},repeat:{enumerable:!0,get:function(){return this.uniforms.repeat.value},set:function(t){this.uniforms.repeat.value.copy(t)}}}),this.setValues(t)}}MeshLineMaterial.prototype.copy=function(t){return THREE.ShaderMaterial.prototype.copy.call(this,t),this.lineWidth=t.lineWidth,this.map=t.map,this.useMap=t.useMap,this.alphaMap=t.alphaMap,this.useAlphaMap=t.useAlphaMap,this.color.copy(t.color),this.opacity=t.opacity,this.resolution.copy(t.resolution),this.sizeAttenuation=t.sizeAttenuation,this.dashArray.copy(t.dashArray),this.dashOffset.copy(t.dashOffset),this.dashRatio.copy(t.dashRatio),this.useDash=t.useDash,this.visibility=t.visibility,this.alphaTest=t.alphaTest,this.repeat.copy(t.repeat),this};export{MeshLine,MeshLineMaterial,MeshLineRaycast};
+//# sourceMappingURL=/sm/a10f0fbff9ef9e01c8548236b6b20610cf5d5cba1f631d8ebab539add9c04974.map

posex/js/TrackballControls.js

@@ -0,0 +1,821 @@
+async function _import() {
+	if (!globalThis.posex || !globalThis.posex.import) {
+		return await import('three');
+	} else {
+		return await globalThis.posex.imports.three();
+	}
+}
+const {
+	EventDispatcher,
+	MOUSE,
+	Quaternion,
+	Vector2,
+	Vector3
+} = await _import();
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+
+class TrackballControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		const scope = this;
+		const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// API
+
+		this.enabled = true;
+
+		this.screen = { left: 0, top: 0, width: 0, height: 0 };
+
+		this.rotateSpeed = 1.0;
+		this.zoomSpeed = 1.2;
+		this.panSpeed = 0.3;
+
+		this.noRotate = false;
+		this.noZoom = false;
+		this.noPan = false;
+
+		this.staticMoving = false;
+		this.dynamicDampingFactor = 0.2;
+
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];
+
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// internals
+
+		this.target = new Vector3();
+
+		const EPS = 0.000001;
+
+		const lastPosition = new Vector3();
+		let lastZoom = 1;
+
+		let _state = STATE.NONE,
+			_keyState = STATE.NONE,
+
+			_touchZoomDistanceStart = 0,
+			_touchZoomDistanceEnd = 0,
+
+			_lastAngle = 0;
+
+		const _eye = new Vector3(),
+
+			_movePrev = new Vector2(),
+			_moveCurr = new Vector2(),
+
+			_lastAxis = new Vector3(),
+
+			_zoomStart = new Vector2(),
+			_zoomEnd = new Vector2(),
+
+			_panStart = new Vector2(),
+			_panEnd = new Vector2(),
+
+			_pointers = [],
+			_pointerPositions = {};
+
+		// for reset
+
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.up0 = this.object.up.clone();
+		this.zoom0 = this.object.zoom;
+
+		// methods
+
+		this.handleResize = function () {
+
+			const box = scope.domElement.getBoundingClientRect();
+			// adjustments come from similar code in the jquery offset() function
+			const d = scope.domElement.ownerDocument.documentElement;
+			scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
+			scope.screen.top = box.top + window.pageYOffset - d.clientTop;
+			scope.screen.width = box.width;
+			scope.screen.height = box.height;
+
+		};
+
+		const getMouseOnScreen = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnScreen( pageX, pageY ) {
+
+				vector.set(
+					( pageX - scope.screen.left ) / scope.screen.width,
+					( pageY - scope.screen.top ) / scope.screen.height
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		const getMouseOnCircle = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnCircle( pageX, pageY ) {
+
+				vector.set(
+					( ( pageX - scope.screen.width * 0.5 - scope.screen.left ) / ( scope.screen.width * 0.5 ) ),
+					( ( scope.screen.height + 2 * ( scope.screen.top - pageY ) ) / scope.screen.width ) // screen.width intentional
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		this.rotateCamera = ( function () {
+
+			const axis = new Vector3(),
+				quaternion = new Quaternion(),
+				eyeDirection = new Vector3(),
+				objectUpDirection = new Vector3(),
+				objectSidewaysDirection = new Vector3(),
+				moveDirection = new Vector3();
+
+			return function rotateCamera() {
+
+				moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
+				let angle = moveDirection.length();
+
+				if ( angle ) {
+
+					_eye.copy( scope.object.position ).sub( scope.target );
+
+					eyeDirection.copy( _eye ).normalize();
+					objectUpDirection.copy( scope.object.up ).normalize();
+					objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
+
+					objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
+					objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
+
+					moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
+
+					axis.crossVectors( moveDirection, _eye ).normalize();
+
+					angle *= scope.rotateSpeed;
+					quaternion.setFromAxisAngle( axis, angle );
+
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+					_lastAxis.copy( axis );
+					_lastAngle = angle;
+
+				} else if ( ! scope.staticMoving && _lastAngle ) {
+
+					_lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor );
+					_eye.copy( scope.object.position ).sub( scope.target );
+					quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+				}
+
+				_movePrev.copy( _moveCurr );
+
+			};
+
+		}() );
+
+
+		this.zoomCamera = function () {
+
+			let factor;
+
+			if ( _state === STATE.TOUCH_ZOOM_PAN ) {
+
+				factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
+				_touchZoomDistanceStart = _touchZoomDistanceEnd;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					_eye.multiplyScalar( factor );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					scope.object.zoom /= factor;
+					scope.object.updateProjectionMatrix();
+
+				} else {
+
+					console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+				}
+
+			} else {
+
+				factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed;
+
+				if ( factor !== 1.0 && factor > 0.0 ) {
+
+					if ( scope.object.isPerspectiveCamera ) {
+
+						_eye.multiplyScalar( factor );
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						scope.object.zoom /= factor;
+						scope.object.updateProjectionMatrix();
+
+					} else {
+
+						console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+					}
+
+				}
+
+				if ( scope.staticMoving ) {
+
+					_zoomStart.copy( _zoomEnd );
+
+				} else {
+
+					_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
+
+				}
+
+			}
+
+		};
+
+		this.panCamera = ( function () {
+
+			const mouseChange = new Vector2(),
+				objectUp = new Vector3(),
+				pan = new Vector3();
+
+			return function panCamera() {
+
+				mouseChange.copy( _panEnd ).sub( _panStart );
+
+				if ( mouseChange.lengthSq() ) {
+
+					if ( scope.object.isOrthographicCamera ) {
+
+						const scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
+						const scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;
+
+						mouseChange.x *= scale_x;
+						mouseChange.y *= scale_y;
+
+					}
+
+					mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );
+
+					pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
+					pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );
+
+					scope.object.position.add( pan );
+					scope.target.add( pan );
+
+					if ( scope.staticMoving ) {
+
+						_panStart.copy( _panEnd );
+
+					} else {
+
+						_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );
+
+					}
+
+				}
+
+			};
+
+		}() );
+
+		this.checkDistances = function () {
+
+			if ( ! scope.noZoom || ! scope.noPan ) {
+
+				if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+				if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+			}
+
+		};
+
+		this.update = function () {
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			if ( ! scope.noRotate ) {
+
+				scope.rotateCamera();
+
+			}
+
+			if ( ! scope.noZoom ) {
+
+				scope.zoomCamera();
+
+			}
+
+			if ( ! scope.noPan ) {
+
+				scope.panCamera();
+
+			}
+
+			scope.object.position.addVectors( scope.target, _eye );
+
+			if ( scope.object.isPerspectiveCamera ) {
+
+				scope.checkDistances();
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+
+				}
+
+			} else if ( scope.object.isOrthographicCamera ) {
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastZoom = scope.object.zoom;
+
+				}
+
+			} else {
+
+				console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+			}
+
+		};
+
+		this.reset = function () {
+
+			_state = STATE.NONE;
+			_keyState = STATE.NONE;
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.up.copy( scope.up0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			scope.object.lookAt( scope.target );
+
+			scope.dispatchEvent( _changeEvent );
+
+			lastPosition.copy( scope.object.position );
+			lastZoom = scope.object.zoom;
+
+		};
+
+		// listeners
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchEnd( event );
+
+			} else {
+
+				onMouseUp();
+
+			}
+
+			//
+
+			removePointer( event );
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			}
+
+
+		}
+
+		function onPointerCancel( event ) {
+
+			removePointer( event );
+
+		}
+
+		function keydown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			window.removeEventListener( 'keydown', keydown );
+
+			if ( _keyState !== STATE.NONE ) {
+
+				return;
+
+			} else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
+
+				_keyState = STATE.ROTATE;
+
+			} else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
+
+				_keyState = STATE.ZOOM;
+
+			} else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
+
+				_keyState = STATE.PAN;
+
+			}
+
+		}
+
+		function keyup() {
+
+			if ( scope.enabled === false ) return;
+
+			_keyState = STATE.NONE;
+
+			window.addEventListener( 'keydown', keydown );
+
+		}
+
+		function onMouseDown( event ) {
+
+			if ( _state === STATE.NONE ) {
+
+				switch ( event.button ) {
+
+					case scope.mouseButtons.LEFT:
+						_state = STATE.ROTATE;
+						break;
+
+					case scope.mouseButtons.MIDDLE:
+						_state = STATE.ZOOM;
+						break;
+
+					case scope.mouseButtons.RIGHT:
+						_state = STATE.PAN;
+						break;
+
+				}
+
+			}
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+				_movePrev.copy( _moveCurr );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_zoomEnd.copy( _zoomStart );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_panEnd.copy( _panStart );
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onMouseMove( event ) {
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_movePrev.copy( _moveCurr );
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			}
+
+		}
+
+		function onMouseUp() {
+
+			_state = STATE.NONE;
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( scope.noZoom === true ) return;
+
+			event.preventDefault();
+
+			switch ( event.deltaMode ) {
+
+				case 2:
+					// Zoom in pages
+					_zoomStart.y -= event.deltaY * 0.025;
+					break;
+
+				case 1:
+					// Zoom in lines
+					_zoomStart.y -= event.deltaY * 0.01;
+					break;
+
+				default:
+					// undefined, 0, assume pixels
+					_zoomStart.y -= event.deltaY * 0.00025;
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				default: // 2 or more
+					_state = STATE.TOUCH_ZOOM_PAN;
+					const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX;
+					const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY;
+					_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
+					const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;
+					_panStart.copy( getMouseOnScreen( x, y ) );
+					_panEnd.copy( _panStart );
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_movePrev.copy( _moveCurr );
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					break;
+
+				default: // 2 or more
+
+					const position = getSecondPointerPosition( event );
+
+					const dx = event.pageX - position.x;
+					const dy = event.pageY - position.y;
+					_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( event.pageX + position.x ) / 2;
+					const y = ( event.pageY + position.y ) / 2;
+					_panEnd.copy( getMouseOnScreen( x, y ) );
+					break;
+
+			}
+
+		}
+
+		function onTouchEnd( event ) {
+
+			switch ( _pointers.length ) {
+
+				case 0:
+					_state = STATE.NONE;
+					break;
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				case 2:
+					_state = STATE.TOUCH_ZOOM_PAN;
+
+					for ( let i = 0; i < _pointers.length; i ++ ) {
+
+						if ( _pointers[ i ].pointerId !== event.pointerId ) {
+
+							const position = _pointerPositions[ _pointers[ i ].pointerId ];
+							_moveCurr.copy( getMouseOnCircle( position.x, position.y ) );
+							_movePrev.copy( _moveCurr );
+							break;
+
+						}
+
+					}
+
+					break;
+
+			}
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function contextmenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			_pointers.push( event );
+
+		}
+
+		function removePointer( event ) {
+
+			delete _pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < _pointers.length; i ++ ) {
+
+				if ( _pointers[ i ].pointerId == event.pointerId ) {
+
+					_pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = _pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				_pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointer = ( event.pointerId === _pointers[ 0 ].pointerId ) ? _pointers[ 1 ] : _pointers[ 0 ];
+
+			return _pointerPositions[ pointer.pointerId ];
+
+		}
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', contextmenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			window.removeEventListener( 'keydown', keydown );
+			window.removeEventListener( 'keyup', keyup );
+
+		};
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+
+		this.domElement.addEventListener( 'pointerdown', onPointerDown );
+		this.domElement.addEventListener( 'pointercancel', onPointerCancel );
+		this.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+
+		window.addEventListener( 'keydown', keydown );
+		window.addEventListener( 'keyup', keyup );
+
+		this.handleResize();
+
+		// force an update at start
+		this.update();
+
+	}
+
+}
+
+export { TrackballControls };

posex/js/app.js

@@ -0,0 +1,145 @@
+const POSES = new Map();
+
+function notify(str, type) {
+    if (type === undefined) type = 'success';
+
+    switch (type) {
+        case 'success': console.log(str); break;
+        case 'info': console.log(str); break;
+        case 'warn': console.warn(str); break;
+        case 'error': console.error(str); break;
+    }
+
+    const p = document.createElement('p');
+    p.textContent = str;
+    p.classList.add('item', type);
+    const cont = document.querySelector('#notifications');
+    cont.appendChild(p);
+    setTimeout(() => cont.removeChild(p), 3000);
+}
+
+async function save_pose(obj) {
+    const res = await fetch('/pose/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(obj),
+    });
+    const result = await res.json();
+    if (result.ok) reload_poses();
+    return result;
+}
+
+async function delete_pose(name) {
+    const res = await fetch('/pose/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+    });
+    const result = await res.json();
+    notify(result.result, result.ok ? 'success' : 'error');
+    if (result.ok) reload_poses();
+    return result;
+}
+
+async function reload_poses() {
+    POSES.clear();
+
+    const res = await fetch('/pose/all');
+    const cont = document.querySelector('#saved_poses');
+    cont.innerHTML = '';
+    const df = document.createDocumentFragment();
+    for (let data of await res.json()) {
+        POSES.set(data.name, data);
+
+        const fig = document.createElement('figure')
+        const img = document.createElement('img');
+        const cap = document.createElement('figcaption');
+        const clo = document.createElement('div');
+        const clo2 = document.createElement('span');
+        fig.dataset.poseName = data.name;
+        cap.textContent = data.name;
+        clo.textContent = 'x';
+        clo.classList.add('close');
+        clo2.classList.add('close2');
+        clo2.textContent = 'delete';
+        clo.appendChild(clo2);
+
+        img.src = 'data:image/png;base64,' + data.image;
+        img.title = data.name;
+        fig.append(clo, img, cap);
+
+        df.appendChild(fig);
+    }
+    cont.appendChild(df);
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+
+    const ui = {
+        container: document.querySelector('#cont'),
+        canvas: document.querySelector('#main_canvas'),
+        notation: document.querySelector('#notation'),
+        indicator1: document.querySelector('#body_indicator1'),
+        indicator2: document.querySelector('#body_indicator2'),
+        all_reset: document.querySelector('#all_reset'),
+        reset_camera: document.querySelector('#reset_camera'),
+        reset_pose: document.querySelector('#reset_pose'),
+        fixed_roll: document.querySelector('#fixed_roll'),
+        add_body: document.querySelector('#add_body'),
+        remove_body: document.querySelector('#remove_body'),
+        canvas_width: document.querySelector('#canvas_width'),
+        canvas_height: document.querySelector('#canvas_height'),
+        bg: document.querySelector('#bg_file'),
+        reset_bg: document.querySelector('#reset_bg'),
+        elliptic_limbs: document.querySelector('#elliptic_limbs'),
+        //joint_radius: document.querySelector('#joint_radius'),
+        limb_width: document.querySelector('#limb_width'),
+        low_fps: document.querySelector('#low_fps'),
+        save: document.querySelector('#save_button'),
+        copy: document.querySelector('#copy_button'),
+        save_pose: document.querySelector('#save_pose'),
+        save_pose_callback: save_pose,
+        notify: notify,
+    };
+
+    document.addEventListener('poseload', e => {
+        const obj = POSES.get(e.detail.name);
+        if (obj) ui.loadPose(obj);
+    }, false);
+
+    const { init, init_3d } = await import('posex');
+
+    init(ui);
+    const animate = init_3d(ui);
+    animate();
+
+    await reload_poses();
+
+}, false);
+
+document.addEventListener('DOMContentLoaded', () => {
+    const get_name = ele => {
+        while (ele && ele !== document) {
+            if (ele.dataset && ele.dataset.poseName !== undefined)
+                return ele.dataset.poseName;
+            ele = ele.parentNode;
+        }
+        return '';
+    };
+
+    document.querySelector('#saved_poses').addEventListener('click', e => {
+        let target = e.target;
+        if (target.tagName === 'IMG') target = target.parentNode;
+        if (target.classList.contains('close2')) target = target.parentNode;
+        if (target.tagName === 'FIGURE') {
+            const name = get_name(target);
+            const ev = new CustomEvent('poseload', { bubbles: true, detail: { name } });
+            target.dispatchEvent(ev);
+        } else if (target.classList.contains('close')) {
+            const name = get_name(target);
+            if (name.length != 0) {
+                delete_pose(name);
+            }
+        }
+    }, false);
+}, false);

posex/js/es-module-shims.js

@@ -0,0 +1,790 @@
+// https://github.com/guybedford/es-module-shims
+
+/* ES Module Shims 1.3.6 */
+(function () {
+
+    const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
+
+    let baseUrl;
+
+    function createBlob(source, type = 'text/javascript') {
+        return URL.createObjectURL(new Blob([source], { type }));
+    }
+
+    const noop = () => { };
+
+    const baseEl = document.querySelector('base[href]');
+    if (baseEl)
+        baseUrl = baseEl.href;
+
+    if (!baseUrl && typeof location !== 'undefined') {
+        baseUrl = location.href.split('#')[0].split('?')[0];
+        const lastSepIndex = baseUrl.lastIndexOf('/');
+        if (lastSepIndex !== -1)
+            baseUrl = baseUrl.slice(0, lastSepIndex + 1);
+    }
+
+    function isURL(url) {
+        try {
+            new URL(url);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+
+    const backslashRegEx = /\\/g;
+    function resolveIfNotPlainOrUrl(relUrl, parentUrl) {
+        // strip off any trailing query params or hashes
+        parentUrl = parentUrl && parentUrl.split('#')[0].split('?')[0];
+        if (relUrl.indexOf('\\') !== -1)
+            relUrl = relUrl.replace(backslashRegEx, '/');
+        // protocol-relative
+        if (relUrl[0] === '/' && relUrl[1] === '/') {
+            return parentUrl.slice(0, parentUrl.indexOf(':') + 1) + relUrl;
+        }
+        // relative-url
+        else if (relUrl[0] === '.' && (relUrl[1] === '/' || relUrl[1] === '.' && (relUrl[2] === '/' || relUrl.length === 2 && (relUrl += '/')) ||
+            relUrl.length === 1 && (relUrl += '/')) ||
+            relUrl[0] === '/') {
+            const parentProtocol = parentUrl.slice(0, parentUrl.indexOf(':') + 1);
+            // Disabled, but these cases will give inconsistent results for deep backtracking
+            //if (parentUrl[parentProtocol.length] !== '/')
+            //  throw new Error('Cannot resolve');
+            // read pathname from parent URL
+            // pathname taken to be part after leading "/"
+            let pathname;
+            if (parentUrl[parentProtocol.length + 1] === '/') {
+                // resolving to a :// so we need to read out the auth and host
+                if (parentProtocol !== 'file:') {
+                    pathname = parentUrl.slice(parentProtocol.length + 2);
+                    pathname = pathname.slice(pathname.indexOf('/') + 1);
+                }
+                else {
+                    pathname = parentUrl.slice(8);
+                }
+            }
+            else {
+                // resolving to :/ so pathname is the /... part
+                pathname = parentUrl.slice(parentProtocol.length + (parentUrl[parentProtocol.length] === '/'));
+            }
+
+            if (relUrl[0] === '/')
+                return parentUrl.slice(0, parentUrl.length - pathname.length - 1) + relUrl;
+
+            // join together and split for removal of .. and . segments
+            // looping the string instead of anything fancy for perf reasons
+            // '../../../../../z' resolved to 'x/y' is just 'z'
+            const segmented = pathname.slice(0, pathname.lastIndexOf('/') + 1) + relUrl;
+
+            const output = [];
+            let segmentIndex = -1;
+            for (let i = 0; i < segmented.length; i++) {
+                // busy reading a segment - only terminate on '/'
+                if (segmentIndex !== -1) {
+                    if (segmented[i] === '/') {
+                        output.push(segmented.slice(segmentIndex, i + 1));
+                        segmentIndex = -1;
+                    }
+                }
+
+                // new segment - check if it is relative
+                else if (segmented[i] === '.') {
+                    // ../ segment
+                    if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i + 2 === segmented.length)) {
+                        output.pop();
+                        i += 2;
+                    }
+                    // ./ segment
+                    else if (segmented[i + 1] === '/' || i + 1 === segmented.length) {
+                        i += 1;
+                    }
+                    else {
+                        // the start of a new segment as below
+                        segmentIndex = i;
+                    }
+                }
+                // it is the start of a new segment
+                else {
+                    segmentIndex = i;
+                }
+            }
+            // finish reading out the last segment
+            if (segmentIndex !== -1)
+                output.push(segmented.slice(segmentIndex));
+            return parentUrl.slice(0, parentUrl.length - pathname.length) + output.join('');
+        }
+    }
+
+    /*
+     * Import maps implementation
+     *
+     * To make lookups fast we pre-resolve the entire import map
+     * and then match based on backtracked hash lookups
+     *
+     */
+    function resolveUrl(relUrl, parentUrl) {
+        return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
+    }
+
+    function resolveAndComposePackages(packages, outPackages, baseUrl, parentMap) {
+        for (let p in packages) {
+            const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
+            if (outPackages[resolvedLhs]) {
+                throw new Error(`Dynamic import map rejected: Overrides entry "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
+            }
+            let target = packages[p];
+            if (typeof target !== 'string')
+                continue;
+            const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
+            if (mapped) {
+                outPackages[resolvedLhs] = mapped;
+                continue;
+            }
+            targetWarning(p, packages[p], 'bare specifier did not resolve');
+        }
+    }
+
+    function resolveAndComposeImportMap(json, baseUrl, parentMap) {
+        const outMap = { imports: Object.assign({}, parentMap.imports), scopes: Object.assign({}, parentMap.scopes) };
+
+        if (json.imports)
+            resolveAndComposePackages(json.imports, outMap.imports, baseUrl, parentMap);
+
+        if (json.scopes)
+            for (let s in json.scopes) {
+                const resolvedScope = resolveUrl(s, baseUrl);
+                resolveAndComposePackages(json.scopes[s], outMap.scopes[resolvedScope] || (outMap.scopes[resolvedScope] = {}), baseUrl, parentMap);
+            }
+
+        return outMap;
+    }
+
+    function getMatch(path, matchObj) {
+        if (matchObj[path])
+            return path;
+        let sepIndex = path.length;
+        do {
+            const segment = path.slice(0, sepIndex + 1);
+            if (segment in matchObj)
+                return segment;
+        } while ((sepIndex = path.lastIndexOf('/', sepIndex - 1)) !== -1)
+    }
+
+    function applyPackages(id, packages) {
+        const pkgName = getMatch(id, packages);
+        if (pkgName) {
+            const pkg = packages[pkgName];
+            if (pkg === null) return;
+            if (id.length > pkgName.length && pkg[pkg.length - 1] !== '/')
+                targetWarning(pkgName, pkg, "should have a trailing '/'");
+            else
+                return pkg + id.slice(pkgName.length);
+        }
+    }
+
+    function targetWarning(match, target, msg) {
+        console.warn("Package target " + msg + ", resolving target '" + target + "' for " + match);
+    }
+
+    function resolveImportMap(importMap, resolvedOrPlain, parentUrl) {
+        let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes);
+        while (scopeUrl) {
+            const packageResolution = applyPackages(resolvedOrPlain, importMap.scopes[scopeUrl]);
+            if (packageResolution)
+                return packageResolution;
+            scopeUrl = getMatch(scopeUrl.slice(0, scopeUrl.lastIndexOf('/')), importMap.scopes);
+        }
+        return applyPackages(resolvedOrPlain, importMap.imports) || resolvedOrPlain.indexOf(':') !== -1 && resolvedOrPlain;
+    }
+
+    const optionsScript = document.querySelector('script[type=esms-options]');
+
+    const esmsInitOptions = optionsScript ? JSON.parse(optionsScript.innerHTML) : self.esmsInitOptions ? self.esmsInitOptions : {};
+
+    let shimMode = !!esmsInitOptions.shimMode;
+    const resolveHook = globalHook(shimMode && esmsInitOptions.resolve);
+
+    const skip = esmsInitOptions.skip ? new RegExp(esmsInitOptions.skip) : null;
+
+    let nonce = esmsInitOptions.nonce;
+
+    if (!nonce) {
+        const nonceElement = document.querySelector('script[nonce]');
+        if (nonceElement)
+            nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
+    }
+
+    const onerror = globalHook(esmsInitOptions.onerror || noop);
+    const onpolyfill = globalHook(esmsInitOptions.onpolyfill || noop);
+
+    const { revokeBlobURLs, noLoadEventRetriggers } = esmsInitOptions;
+
+    const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
+
+    function globalHook(name) {
+        return typeof name === 'string' ? self[name] : name;
+    }
+
+    const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
+    const cssModulesEnabled = enable.includes('css-modules');
+    const jsonModulesEnabled = enable.includes('json-modules');
+
+    function setShimMode() {
+        shimMode = true;
+    }
+
+    let err;
+    window.addEventListener('error', _err => err = _err);
+    function dynamicImportScript(url, { errUrl = url } = {}) {
+        err = undefined;
+        const src = createBlob(`import*as m from'${url}';self._esmsi=m`);
+        const s = Object.assign(document.createElement('script'), { type: 'module', src });
+        s.setAttribute('nonce', nonce);
+        s.setAttribute('noshim', '');
+        const p = new Promise((resolve, reject) => {
+            // Safari is unique in supporting module script error events
+            s.addEventListener('error', cb);
+            s.addEventListener('load', cb);
+
+            function cb(_err) {
+                document.head.removeChild(s);
+                if (self._esmsi) {
+                    resolve(self._esmsi, baseUrl);
+                    self._esmsi = undefined;
+                }
+                else {
+                    reject(!(_err instanceof Event) && _err || err && err.error || new Error(`Error loading or executing the graph of ${errUrl} (check the console for ${src}).`));
+                    err = undefined;
+                }
+            }
+        });
+        document.head.appendChild(s);
+        return p;
+    }
+
+    let dynamicImport = dynamicImportScript;
+
+    const supportsDynamicImportCheck = dynamicImportScript(createBlob('export default u=>import(u)')).then(_dynamicImport => {
+        if (_dynamicImport)
+            dynamicImport = _dynamicImport.default;
+        return !!_dynamicImport;
+    }, noop);
+
+    // support browsers without dynamic import support (eg Firefox 6x)
+    let supportsJsonAssertions = false;
+    let supportsCssAssertions = false;
+
+    let supportsImportMeta = false;
+    let supportsImportMaps = false;
+
+    let supportsDynamicImport = false;
+
+    const featureDetectionPromise = Promise.resolve(supportsDynamicImportCheck).then(_supportsDynamicImport => {
+        if (!_supportsDynamicImport)
+            return;
+        supportsDynamicImport = true;
+
+        return Promise.all([
+            dynamicImport(createBlob('import.meta')).then(() => supportsImportMeta = true, noop),
+            cssModulesEnabled && dynamicImport(createBlob('import"data:text/css,{}"assert{type:"css"}')).then(() => supportsCssAssertions = true, noop),
+            jsonModulesEnabled && dynamicImport(createBlob('import"data:text/json,{}"assert{type:"json"}')).then(() => supportsJsonAssertions = true, noop),
+            new Promise(resolve => {
+                self._$s = v => {
+                    document.head.removeChild(iframe);
+                    if (v) supportsImportMaps = true;
+                    delete self._$s;
+                    resolve();
+                };
+                const iframe = document.createElement('iframe');
+                iframe.style.display = 'none';
+                document.head.appendChild(iframe);
+                iframe.src = createBlob(`<script type=importmap nonce="${nonce}">{"imports":{"x":"data:text/javascript,"}}<${''}/script><script nonce="${nonce}">import('x').then(()=>1,()=>0).then(v=>parent._$s(v))<${''}/script>`, 'text/html');
+            })
+        ]);
+    });
+
+    let e, r, a, i = 4194304; const s = 1 === new Uint8Array(new Uint16Array([1]).buffer)[0]; let t, f, c$1; function parse(k, l = "@") { if (t = k, f = l, t.length > i || !e) { for (; t.length > i;)i *= 2; r = new ArrayBuffer(4 * i), e = function (e, r, a) { "use asm"; var i = new e.Int8Array(a), s = new e.Int16Array(a), t = new e.Int32Array(a), f = new e.Uint8Array(a), c = new e.Uint16Array(a), n = 816; function b(e) { e = e | 0; var r = 0, a = 0, f = 0, b = 0, l = 0; l = n; n = n + 14336 | 0; b = l; i[589] = 1; s[291] = 0; s[292] = 0; s[293] = -1; t[15] = t[2]; i[590] = 0; t[14] = 0; i[588] = 0; t[16] = l + 10240; t[17] = l + 2048; i[591] = 0; e = (t[3] | 0) + -2 | 0; t[18] = e; r = e + (t[12] << 1) | 0; t[19] = r; e: while (1) { a = e + 2 | 0; t[18] = a; if (e >>> 0 >= r >>> 0) { f = 18; break } r: do { switch (s[a >> 1] | 0) { case 9: case 10: case 11: case 12: case 13: case 32: break; case 101: { if ((((s[292] | 0) == 0 ? R(a) | 0 : 0) ? B(e + 4 | 0, 120, 112, 111, 114, 116) | 0 : 0) ? (u(), (i[589] | 0) == 0) : 0) { f = 9; break e } else f = 17; break } case 105: { if (R(a) | 0 ? B(e + 4 | 0, 109, 112, 111, 114, 116) | 0 : 0) { k(); f = 17; } else f = 17; break } case 59: { f = 17; break } case 47: switch (s[e + 4 >> 1] | 0) { case 47: { G(); break r } case 42: { p(1); break r } default: { f = 16; break e } }default: { f = 16; break e } } } while (0); if ((f | 0) == 17) { f = 0; t[15] = t[18]; } e = t[18] | 0; r = t[19] | 0; } if ((f | 0) == 9) { e = t[18] | 0; t[15] = e; f = 19; } else if ((f | 0) == 16) { i[589] = 0; t[18] = e; f = 19; } else if ((f | 0) == 18) if (!(i[588] | 0)) { e = a; f = 19; } else e = 0; do { if ((f | 0) == 19) { e: while (1) { r = e + 2 | 0; t[18] = r; a = r; if (e >>> 0 >= (t[19] | 0) >>> 0) { f = 75; break } r: do { switch (s[r >> 1] | 0) { case 9: case 10: case 11: case 12: case 13: case 32: break; case 101: { if (((s[292] | 0) == 0 ? R(r) | 0 : 0) ? B(e + 4 | 0, 120, 112, 111, 114, 116) | 0 : 0) { u(); f = 74; } else f = 74; break } case 105: { if (R(r) | 0 ? B(e + 4 | 0, 109, 112, 111, 114, 116) | 0 : 0) { k(); f = 74; } else f = 74; break } case 99: { if ((R(r) | 0 ? z(e + 4 | 0, 108, 97, 115, 115) | 0 : 0) ? Z(s[e + 12 >> 1] | 0) | 0 : 0) { i[591] = 1; f = 74; } else f = 74; break } case 40: { r = t[15] | 0; a = t[17] | 0; f = s[292] | 0; s[292] = f + 1 << 16 >> 16; t[a + ((f & 65535) << 2) >> 2] = r; f = 74; break } case 41: { e = s[292] | 0; if (!(e << 16 >> 16)) { f = 36; break e } f = e + -1 << 16 >> 16; s[292] = f; e = t[11] | 0; if ((e | 0) != 0 ? (t[e + 20 >> 2] | 0) == (t[(t[17] | 0) + ((f & 65535) << 2) >> 2] | 0) : 0) { r = e + 4 | 0; if (!(t[r >> 2] | 0)) t[r >> 2] = a; t[e + 12 >> 2] = a; t[11] = 0; f = 74; } else f = 74; break } case 123: { f = t[15] | 0; a = t[8] | 0; e = f; do { if ((s[f >> 1] | 0) == 41 & (a | 0) != 0 ? (t[a + 4 >> 2] | 0) == (f | 0) : 0) { r = t[9] | 0; t[8] = r; if (!r) { t[4] = 0; break } else { t[r + 28 >> 2] = 0; break } } } while (0); r = s[292] | 0; f = r & 65535; i[b + f >> 0] = i[591] | 0; i[591] = 0; a = t[17] | 0; s[292] = r + 1 << 16 >> 16; t[a + (f << 2) >> 2] = e; f = 74; break } case 125: { e = s[292] | 0; if (!(e << 16 >> 16)) { f = 49; break e } a = e + -1 << 16 >> 16; s[292] = a; r = s[293] | 0; if (e << 16 >> 16 != r << 16 >> 16) if (r << 16 >> 16 != -1 & (a & 65535) < (r & 65535)) { f = 53; break e } else { f = 74; break r } else { a = t[16] | 0; f = (s[291] | 0) + -1 << 16 >> 16; s[291] = f; s[293] = s[a + ((f & 65535) << 1) >> 1] | 0; h(); f = 74; break r } } case 39: { d(39); f = 74; break } case 34: { d(34); f = 74; break } case 47: switch (s[e + 4 >> 1] | 0) { case 47: { G(); break r } case 42: { p(1); break r } default: { r = t[15] | 0; a = s[r >> 1] | 0; a: do { if (!(x(a) | 0)) { switch (a << 16 >> 16) { case 41: if (L(t[(t[17] | 0) + (c[292] << 2) >> 2] | 0) | 0) { f = 71; break a } else { f = 68; break a } case 125: break; default: { f = 68; break a } }e = c[292] | 0; if (!(y(t[(t[17] | 0) + (e << 2) >> 2] | 0) | 0) ? (i[b + e >> 0] | 0) == 0 : 0) f = 68; else f = 71; } else switch (a << 16 >> 16) { case 46: if (((s[r + -2 >> 1] | 0) + -48 & 65535) < 10) { f = 68; break a } else { f = 71; break a } case 43: if ((s[r + -2 >> 1] | 0) == 43) { f = 68; break a } else { f = 71; break a } case 45: if ((s[r + -2 >> 1] | 0) == 45) { f = 68; break a } else { f = 71; break a } default: { f = 71; break a } } } while (0); a: do { if ((f | 0) == 68) { f = 0; if (!(o(r) | 0)) { switch (a << 16 >> 16) { case 0: { f = 71; break a } case 47: break; default: { e = 1; break a } }if (!(i[590] | 0)) e = 1; else f = 71; } else f = 71; } } while (0); if ((f | 0) == 71) { I(); e = 0; } i[590] = e; f = 74; break r } }case 96: { h(); f = 74; break } default: f = 74; } } while (0); if ((f | 0) == 74) { f = 0; t[15] = t[18]; } e = t[18] | 0; } if ((f | 0) == 36) { Y(); e = 0; break } else if ((f | 0) == 49) { Y(); e = 0; break } else if ((f | 0) == 53) { Y(); e = 0; break } else if ((f | 0) == 75) { e = (s[293] | 0) == -1 & (s[292] | 0) == 0 & (i[588] | 0) == 0; break } } } while (0); n = l; return e | 0 } function u() { var e = 0, r = 0, a = 0, f = 0, c = 0, n = 0; c = t[18] | 0; n = c + 12 | 0; t[18] = n; r = w(1) | 0; e = t[18] | 0; if (!((e | 0) == (n | 0) ? !(S(r) | 0) : 0)) f = 3; e: do { if ((f | 0) == 3) { r: do { switch (r << 16 >> 16) { case 100: { J(e, e + 14 | 0); break e } case 97: { t[18] = e + 10; w(1) | 0; e = t[18] | 0; f = 6; break } case 102: { f = 6; break } case 99: { if (z(e + 2 | 0, 108, 97, 115, 115) | 0 ? (a = e + 10 | 0, F(s[a >> 1] | 0) | 0) : 0) { t[18] = a; c = w(1) | 0; n = t[18] | 0; H(c) | 0; J(n, t[18] | 0); t[18] = (t[18] | 0) + -2; break e } e = e + 4 | 0; t[18] = e; f = 13; break } case 108: case 118: { f = 13; break } case 123: { t[18] = e + 2; e = w(1) | 0; a = t[18] | 0; while (1) { if (_(e) | 0) { d(e); e = (t[18] | 0) + 2 | 0; t[18] = e; } else { H(e) | 0; e = t[18] | 0; } w(1) | 0; e = g(a, e) | 0; if (e << 16 >> 16 == 44) { t[18] = (t[18] | 0) + 2; e = w(1) | 0; } r = a; a = t[18] | 0; if (e << 16 >> 16 == 125) { f = 32; break } if ((a | 0) == (r | 0)) { f = 29; break } if (a >>> 0 > (t[19] | 0) >>> 0) { f = 31; break } } if ((f | 0) == 29) { Y(); break e } else if ((f | 0) == 31) { Y(); break e } else if ((f | 0) == 32) { t[18] = a + 2; f = 34; break r } break } case 42: { t[18] = e + 2; w(1) | 0; f = t[18] | 0; g(f, f) | 0; f = 34; break } default: { } } } while (0); if ((f | 0) == 6) { t[18] = e + 16; e = w(1) | 0; if (e << 16 >> 16 == 42) { t[18] = (t[18] | 0) + 2; e = w(1) | 0; } n = t[18] | 0; H(e) | 0; J(n, t[18] | 0); t[18] = (t[18] | 0) + -2; break } else if ((f | 0) == 13) { e = e + 4 | 0; t[18] = e; i[589] = 0; r: while (1) { t[18] = e + 2; n = w(1) | 0; e = t[18] | 0; switch ((H(n) | 0) << 16 >> 16) { case 91: case 123: { f = 15; break r } default: { } }r = t[18] | 0; if ((r | 0) == (e | 0)) break e; J(e, r); switch ((w(1) | 0) << 16 >> 16) { case 61: { f = 19; break r } case 44: break; default: { f = 20; break r } }e = t[18] | 0; } if ((f | 0) == 15) { t[18] = (t[18] | 0) + -2; break } else if ((f | 0) == 19) { t[18] = (t[18] | 0) + -2; break } else if ((f | 0) == 20) { t[18] = (t[18] | 0) + -2; break } } else if ((f | 0) == 34) r = w(1) | 0; e = t[18] | 0; if (r << 16 >> 16 == 102 ? K(e + 2 | 0, 114, 111, 109) | 0 : 0) { t[18] = e + 8; l(c, w(1) | 0); break } t[18] = e + -2; } } while (0); return } function k() { var e = 0, r = 0, a = 0, f = 0, c = 0; c = t[18] | 0; r = c + 12 | 0; t[18] = r; e: do { switch ((w(1) | 0) << 16 >> 16) { case 40: { r = t[17] | 0; a = s[292] | 0; s[292] = a + 1 << 16 >> 16; t[r + ((a & 65535) << 2) >> 2] = c; if ((s[t[15] >> 1] | 0) != 46) { v(c, (t[18] | 0) + 2 | 0, 0, c); t[11] = t[8]; t[18] = (t[18] | 0) + 2; switch ((w(1) | 0) << 16 >> 16) { case 39: { d(39); break } case 34: { d(34); break } default: { t[18] = (t[18] | 0) + -2; break e } }t[18] = (t[18] | 0) + 2; switch ((w(1) | 0) << 16 >> 16) { case 44: { c = t[18] | 0; t[(t[8] | 0) + 4 >> 2] = c; t[18] = c + 2; w(1) | 0; c = t[18] | 0; a = t[8] | 0; t[a + 16 >> 2] = c; i[a + 24 >> 0] = 1; t[18] = c + -2; break e } case 41: { s[292] = (s[292] | 0) + -1 << 16 >> 16; a = t[18] | 0; c = t[8] | 0; t[c + 4 >> 2] = a; t[c + 12 >> 2] = a; i[c + 24 >> 0] = 1; break e } default: { t[18] = (t[18] | 0) + -2; break e } } } break } case 46: { t[18] = (t[18] | 0) + 2; if (((w(1) | 0) << 16 >> 16 == 109 ? (e = t[18] | 0, K(e + 2 | 0, 101, 116, 97) | 0) : 0) ? (s[t[15] >> 1] | 0) != 46 : 0) v(c, c, e + 8 | 0, 2); break } case 42: case 39: case 34: { f = 16; break } case 123: { e = t[18] | 0; if (s[292] | 0) { t[18] = e + -2; break e } while (1) { if (e >>> 0 >= (t[19] | 0) >>> 0) break; e = w(1) | 0; if (!(_(e) | 0)) { if (e << 16 >> 16 == 125) { f = 31; break } } else d(e); e = (t[18] | 0) + 2 | 0; t[18] = e; } if ((f | 0) == 31) t[18] = (t[18] | 0) + 2; w(1) | 0; e = t[18] | 0; if (!(z(e, 102, 114, 111, 109) | 0)) { Y(); break e } t[18] = e + 8; e = w(1) | 0; if (_(e) | 0) { l(c, e); break e } else { Y(); break e } } default: if ((t[18] | 0) != (r | 0)) f = 16; } } while (0); do { if ((f | 0) == 16) { if (s[292] | 0) { t[18] = (t[18] | 0) + -2; break } e = t[19] | 0; r = t[18] | 0; while (1) { if (r >>> 0 >= e >>> 0) { f = 23; break } a = s[r >> 1] | 0; if (_(a) | 0) { f = 21; break } f = r + 2 | 0; t[18] = f; r = f; } if ((f | 0) == 21) { l(c, a); break } else if ((f | 0) == 23) { Y(); break } } } while (0); return } function l(e, r) { e = e | 0; r = r | 0; var a = 0, i = 0; a = (t[18] | 0) + 2 | 0; switch (r << 16 >> 16) { case 39: { d(39); i = 5; break } case 34: { d(34); i = 5; break } default: Y(); }do { if ((i | 0) == 5) { v(e, a, t[18] | 0, 1); t[18] = (t[18] | 0) + 2; i = (w(0) | 0) << 16 >> 16 == 97; r = t[18] | 0; if (i ? B(r + 2 | 0, 115, 115, 101, 114, 116) | 0 : 0) { t[18] = r + 12; if ((w(1) | 0) << 16 >> 16 != 123) { t[18] = r; break } e = t[18] | 0; a = e; e: while (1) { t[18] = a + 2; a = w(1) | 0; switch (a << 16 >> 16) { case 39: { d(39); t[18] = (t[18] | 0) + 2; a = w(1) | 0; break } case 34: { d(34); t[18] = (t[18] | 0) + 2; a = w(1) | 0; break } default: a = H(a) | 0; }if (a << 16 >> 16 != 58) { i = 16; break } t[18] = (t[18] | 0) + 2; switch ((w(1) | 0) << 16 >> 16) { case 39: { d(39); break } case 34: { d(34); break } default: { i = 20; break e } }t[18] = (t[18] | 0) + 2; switch ((w(1) | 0) << 16 >> 16) { case 125: { i = 25; break e } case 44: break; default: { i = 24; break e } }t[18] = (t[18] | 0) + 2; if ((w(1) | 0) << 16 >> 16 == 125) { i = 25; break } a = t[18] | 0; } if ((i | 0) == 16) { t[18] = r; break } else if ((i | 0) == 20) { t[18] = r; break } else if ((i | 0) == 24) { t[18] = r; break } else if ((i | 0) == 25) { i = t[8] | 0; t[i + 16 >> 2] = e; t[i + 12 >> 2] = (t[18] | 0) + 2; break } } t[18] = r + -2; } } while (0); return } function o(e) { e = e | 0; e: do { switch (s[e >> 1] | 0) { case 100: switch (s[e + -2 >> 1] | 0) { case 105: { e = q(e + -4 | 0, 118, 111) | 0; break e } case 108: { e = P(e + -4 | 0, 121, 105, 101) | 0; break e } default: { e = 0; break e } }case 101: { switch (s[e + -2 >> 1] | 0) { case 115: break; case 116: { e = E(e + -4 | 0, 100, 101, 108, 101) | 0; break e } default: { e = 0; break e } }switch (s[e + -4 >> 1] | 0) { case 108: { e = D(e + -6 | 0, 101) | 0; break e } case 97: { e = D(e + -6 | 0, 99) | 0; break e } default: { e = 0; break e } } } case 102: { if ((s[e + -2 >> 1] | 0) == 111 ? (s[e + -4 >> 1] | 0) == 101 : 0) switch (s[e + -6 >> 1] | 0) { case 99: { e = O(e + -8 | 0, 105, 110, 115, 116, 97, 110) | 0; break e } case 112: { e = q(e + -8 | 0, 116, 121) | 0; break e } default: { e = 0; break e } } else e = 0; break } case 110: { e = e + -2 | 0; if (D(e, 105) | 0) e = 1; else e = $(e, 114, 101, 116, 117, 114) | 0; break } case 111: { e = D(e + -2 | 0, 100) | 0; break } case 114: { e = m(e + -2 | 0, 100, 101, 98, 117, 103, 103, 101) | 0; break } case 116: { e = E(e + -2 | 0, 97, 119, 97, 105) | 0; break } case 119: switch (s[e + -2 >> 1] | 0) { case 101: { e = D(e + -4 | 0, 110) | 0; break e } case 111: { e = P(e + -4 | 0, 116, 104, 114) | 0; break e } default: { e = 0; break e } }default: e = 0; } } while (0); return e | 0 } function h() { var e = 0, r = 0, a = 0; r = t[19] | 0; a = t[18] | 0; e: while (1) { e = a + 2 | 0; if (a >>> 0 >= r >>> 0) { r = 8; break } switch (s[e >> 1] | 0) { case 96: { r = 9; break e } case 36: { if ((s[a + 4 >> 1] | 0) == 123) { r = 6; break e } break } case 92: { e = a + 4 | 0; break } default: { } }a = e; } if ((r | 0) == 6) { t[18] = a + 4; e = s[293] | 0; r = t[16] | 0; a = s[291] | 0; s[291] = a + 1 << 16 >> 16; s[r + ((a & 65535) << 1) >> 1] = e; a = (s[292] | 0) + 1 << 16 >> 16; s[292] = a; s[293] = a; } else if ((r | 0) == 8) { t[18] = e; Y(); } else if ((r | 0) == 9) t[18] = e; return } function w(e) { e = e | 0; var r = 0, a = 0, i = 0; a = t[18] | 0; e: do { r = s[a >> 1] | 0; r: do { if (r << 16 >> 16 != 47) if (e) if (Z(r) | 0) break; else break e; else if (Q(r) | 0) break; else break e; else switch (s[a + 2 >> 1] | 0) { case 47: { G(); break r } case 42: { p(e); break r } default: { r = 47; break e } } } while (0); i = t[18] | 0; a = i + 2 | 0; t[18] = a; } while (i >>> 0 < (t[19] | 0) >>> 0); return r | 0 } function d(e) { e = e | 0; var r = 0, a = 0, i = 0, f = 0; f = t[19] | 0; r = t[18] | 0; while (1) { i = r + 2 | 0; if (r >>> 0 >= f >>> 0) { r = 9; break } a = s[i >> 1] | 0; if (a << 16 >> 16 == e << 16 >> 16) { r = 10; break } if (a << 16 >> 16 == 92) { a = r + 4 | 0; if ((s[a >> 1] | 0) == 13) { r = r + 6 | 0; r = (s[r >> 1] | 0) == 10 ? r : a; } else r = a; } else if (ae(a) | 0) { r = 9; break } else r = i; } if ((r | 0) == 9) { t[18] = i; Y(); } else if ((r | 0) == 10) t[18] = i; return } function v(e, r, a, s) { e = e | 0; r = r | 0; a = a | 0; s = s | 0; var f = 0, c = 0; f = t[13] | 0; t[13] = f + 32; c = t[8] | 0; t[((c | 0) == 0 ? 16 : c + 28 | 0) >> 2] = f; t[9] = c; t[8] = f; t[f + 8 >> 2] = e; do { if (2 != (s | 0)) if (1 == (s | 0)) { t[f + 12 >> 2] = a + 2; break } else { t[f + 12 >> 2] = t[3]; break } else t[f + 12 >> 2] = a; } while (0); t[f >> 2] = r; t[f + 4 >> 2] = a; t[f + 16 >> 2] = 0; t[f + 20 >> 2] = s; i[f + 24 >> 0] = 1 == (s | 0) & 1; t[f + 28 >> 2] = 0; return } function A() { var e = 0, r = 0, a = 0; a = t[19] | 0; r = t[18] | 0; e: while (1) { e = r + 2 | 0; if (r >>> 0 >= a >>> 0) { r = 6; break } switch (s[e >> 1] | 0) { case 13: case 10: { r = 6; break e } case 93: { r = 7; break e } case 92: { e = r + 4 | 0; break } default: { } }r = e; } if ((r | 0) == 6) { t[18] = e; Y(); e = 0; } else if ((r | 0) == 7) { t[18] = e; e = 93; } return e | 0 } function C(e, r, a, i, t, f, c, n) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; t = t | 0; f = f | 0; c = c | 0; n = n | 0; if ((((((s[e + 12 >> 1] | 0) == n << 16 >> 16 ? (s[e + 10 >> 1] | 0) == c << 16 >> 16 : 0) ? (s[e + 8 >> 1] | 0) == f << 16 >> 16 : 0) ? (s[e + 6 >> 1] | 0) == t << 16 >> 16 : 0) ? (s[e + 4 >> 1] | 0) == i << 16 >> 16 : 0) ? (s[e + 2 >> 1] | 0) == a << 16 >> 16 : 0) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function y(e) { e = e | 0; switch (s[e >> 1] | 0) { case 62: { e = (s[e + -2 >> 1] | 0) == 61; break } case 41: case 59: { e = 1; break } case 104: { e = E(e + -2 | 0, 99, 97, 116, 99) | 0; break } case 121: { e = O(e + -2 | 0, 102, 105, 110, 97, 108, 108) | 0; break } case 101: { e = P(e + -2 | 0, 101, 108, 115) | 0; break } default: e = 0; }return e | 0 } function g(e, r) { e = e | 0; r = r | 0; var a = 0, i = 0; a = t[18] | 0; i = s[a >> 1] | 0; if (i << 16 >> 16 == 97) { t[18] = a + 4; a = w(1) | 0; e = t[18] | 0; if (_(a) | 0) { d(a); r = (t[18] | 0) + 2 | 0; t[18] = r; } else { H(a) | 0; r = t[18] | 0; } i = w(1) | 0; a = t[18] | 0; } if ((a | 0) != (e | 0)) J(e, r); return i | 0 } function I() { var e = 0, r = 0, a = 0; e: while (1) { e = t[18] | 0; r = e + 2 | 0; t[18] = r; if (e >>> 0 >= (t[19] | 0) >>> 0) { a = 7; break } switch (s[r >> 1] | 0) { case 13: case 10: { a = 7; break e } case 47: break e; case 91: { A() | 0; break } case 92: { t[18] = e + 4; break } default: { } } } if ((a | 0) == 7) Y(); return } function p(e) { e = e | 0; var r = 0, a = 0, i = 0, f = 0, c = 0; f = (t[18] | 0) + 2 | 0; t[18] = f; a = t[19] | 0; while (1) { r = f + 2 | 0; if (f >>> 0 >= a >>> 0) break; i = s[r >> 1] | 0; if (!e ? ae(i) | 0 : 0) break; if (i << 16 >> 16 == 42 ? (s[f + 4 >> 1] | 0) == 47 : 0) { c = 8; break } f = r; } if ((c | 0) == 8) { t[18] = r; r = f + 4 | 0; } t[18] = r; return } function U(e, r, a, i, t, f, c) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; t = t | 0; f = f | 0; c = c | 0; if (((((s[e + 10 >> 1] | 0) == c << 16 >> 16 ? (s[e + 8 >> 1] | 0) == f << 16 >> 16 : 0) ? (s[e + 6 >> 1] | 0) == t << 16 >> 16 : 0) ? (s[e + 4 >> 1] | 0) == i << 16 >> 16 : 0) ? (s[e + 2 >> 1] | 0) == a << 16 >> 16 : 0) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function m(e, r, a, i, f, c, n, b) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; f = f | 0; c = c | 0; n = n | 0; b = b | 0; var u = 0, k = 0; k = e + -12 | 0; u = t[3] | 0; if (k >>> 0 >= u >>> 0 ? C(k, r, a, i, f, c, n, b) | 0 : 0) if ((k | 0) == (u | 0)) u = 1; else u = F(s[e + -14 >> 1] | 0) | 0; else u = 0; return u | 0 } function S(e) { e = e | 0; e: do { switch (e << 16 >> 16) { case 38: case 37: case 33: { e = 1; break } default: if ((e & -8) << 16 >> 16 == 40 | (e + -58 & 65535) < 6) e = 1; else { switch (e << 16 >> 16) { case 91: case 93: case 94: { e = 1; break e } default: { } }e = (e + -123 & 65535) < 4; } } } while (0); return e | 0 } function x(e) { e = e | 0; e: do { switch (e << 16 >> 16) { case 38: case 37: case 33: break; default: if (!((e + -58 & 65535) < 6 | (e + -40 & 65535) < 7 & e << 16 >> 16 != 41)) { switch (e << 16 >> 16) { case 91: case 94: break e; default: { } }return e << 16 >> 16 != 125 & (e + -123 & 65535) < 4 | 0 } } } while (0); return 1 } function O(e, r, a, i, f, c, n) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; f = f | 0; c = c | 0; n = n | 0; var b = 0, u = 0; u = e + -10 | 0; b = t[3] | 0; if (u >>> 0 >= b >>> 0 ? U(u, r, a, i, f, c, n) | 0 : 0) if ((u | 0) == (b | 0)) b = 1; else b = F(s[e + -12 >> 1] | 0) | 0; else b = 0; return b | 0 } function $(e, r, a, i, f, c) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; f = f | 0; c = c | 0; var n = 0, b = 0; b = e + -8 | 0; n = t[3] | 0; if (b >>> 0 >= n >>> 0 ? B(b, r, a, i, f, c) | 0 : 0) if ((b | 0) == (n | 0)) n = 1; else n = F(s[e + -10 >> 1] | 0) | 0; else n = 0; return n | 0 } function j(e) { e = e | 0; var r = 0, a = 0, i = 0, f = 0; a = n; n = n + 16 | 0; i = a; t[i >> 2] = 0; t[12] = e; r = t[3] | 0; f = r + (e << 1) | 0; e = f + 2 | 0; s[f >> 1] = 0; t[i >> 2] = e; t[13] = e; t[4] = 0; t[8] = 0; t[6] = 0; t[5] = 0; t[10] = 0; t[7] = 0; n = a; return r | 0 } function B(e, r, a, i, t, f) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; t = t | 0; f = f | 0; if ((((s[e + 8 >> 1] | 0) == f << 16 >> 16 ? (s[e + 6 >> 1] | 0) == t << 16 >> 16 : 0) ? (s[e + 4 >> 1] | 0) == i << 16 >> 16 : 0) ? (s[e + 2 >> 1] | 0) == a << 16 >> 16 : 0) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function E(e, r, a, i, f) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; f = f | 0; var c = 0, n = 0; n = e + -6 | 0; c = t[3] | 0; if (n >>> 0 >= c >>> 0 ? z(n, r, a, i, f) | 0 : 0) if ((n | 0) == (c | 0)) c = 1; else c = F(s[e + -8 >> 1] | 0) | 0; else c = 0; return c | 0 } function P(e, r, a, i) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; var f = 0, c = 0; c = e + -4 | 0; f = t[3] | 0; if (c >>> 0 >= f >>> 0 ? K(c, r, a, i) | 0 : 0) if ((c | 0) == (f | 0)) f = 1; else f = F(s[e + -6 >> 1] | 0) | 0; else f = 0; return f | 0 } function q(e, r, a) { e = e | 0; r = r | 0; a = a | 0; var i = 0, f = 0; f = e + -2 | 0; i = t[3] | 0; if (f >>> 0 >= i >>> 0 ? N(f, r, a) | 0 : 0) if ((f | 0) == (i | 0)) i = 1; else i = F(s[e + -4 >> 1] | 0) | 0; else i = 0; return i | 0 } function z(e, r, a, i, t) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; t = t | 0; if (((s[e + 6 >> 1] | 0) == t << 16 >> 16 ? (s[e + 4 >> 1] | 0) == i << 16 >> 16 : 0) ? (s[e + 2 >> 1] | 0) == a << 16 >> 16 : 0) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function D(e, r) { e = e | 0; r = r | 0; var a = 0; a = t[3] | 0; if (a >>> 0 <= e >>> 0 ? (s[e >> 1] | 0) == r << 16 >> 16 : 0) if ((a | 0) == (e | 0)) a = 1; else a = F(s[e + -2 >> 1] | 0) | 0; else a = 0; return a | 0 } function F(e) { e = e | 0; e: do { if ((e + -9 & 65535) < 5) e = 1; else { switch (e << 16 >> 16) { case 32: case 160: { e = 1; break e } default: { } }e = e << 16 >> 16 != 46 & (S(e) | 0); } } while (0); return e | 0 } function G() { var e = 0, r = 0, a = 0; e = t[19] | 0; a = t[18] | 0; e: while (1) { r = a + 2 | 0; if (a >>> 0 >= e >>> 0) break; switch (s[r >> 1] | 0) { case 13: case 10: break e; default: a = r; } } t[18] = r; return } function H(e) { e = e | 0; while (1) { if (Z(e) | 0) break; if (S(e) | 0) break; e = (t[18] | 0) + 2 | 0; t[18] = e; e = s[e >> 1] | 0; if (!(e << 16 >> 16)) { e = 0; break } } return e | 0 } function J(e, r) { e = e | 0; r = r | 0; var a = 0, i = 0; a = t[13] | 0; t[13] = a + 12; i = t[10] | 0; t[((i | 0) == 0 ? 20 : i + 8 | 0) >> 2] = a; t[10] = a; t[a >> 2] = e; t[a + 4 >> 2] = r; t[a + 8 >> 2] = 0; return } function K(e, r, a, i) { e = e | 0; r = r | 0; a = a | 0; i = i | 0; if ((s[e + 4 >> 1] | 0) == i << 16 >> 16 ? (s[e + 2 >> 1] | 0) == a << 16 >> 16 : 0) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function L(e) { e = e | 0; if (!($(e, 119, 104, 105, 108, 101) | 0) ? !(P(e, 102, 111, 114) | 0) : 0) e = q(e, 105, 102) | 0; else e = 1; return e | 0 } function M() { var e = 0; e = t[(t[6] | 0) + 20 >> 2] | 0; switch (e | 0) { case 1: { e = -1; break } case 2: { e = -2; break } default: e = e - (t[3] | 0) >> 1; }return e | 0 } function N(e, r, a) { e = e | 0; r = r | 0; a = a | 0; if ((s[e + 2 >> 1] | 0) == a << 16 >> 16) r = (s[e >> 1] | 0) == r << 16 >> 16; else r = 0; return r | 0 } function Q(e) { e = e | 0; switch (e << 16 >> 16) { case 160: case 32: case 12: case 11: case 9: { e = 1; break } default: e = 0; }return e | 0 } function R(e) { e = e | 0; if ((t[3] | 0) == (e | 0)) e = 1; else e = F(s[e + -2 >> 1] | 0) | 0; return e | 0 } function T() { var e = 0; e = t[(t[6] | 0) + 16 >> 2] | 0; if (!e) e = -1; else e = e - (t[3] | 0) >> 1; return e | 0 } function V() { var e = 0; e = t[6] | 0; e = t[((e | 0) == 0 ? 16 : e + 28 | 0) >> 2] | 0; t[6] = e; return (e | 0) != 0 | 0 } function W() { var e = 0; e = t[7] | 0; e = t[((e | 0) == 0 ? 20 : e + 8 | 0) >> 2] | 0; t[7] = e; return (e | 0) != 0 | 0 } function X(e) { e = e | 0; var r = 0; r = n; n = n + e | 0; n = n + 15 & -16; return r | 0 } function Y() { i[588] = 1; t[14] = (t[18] | 0) - (t[3] | 0) >> 1; t[18] = (t[19] | 0) + 2; return } function Z(e) { e = e | 0; return (e | 128) << 16 >> 16 == 160 | (e + -9 & 65535) < 5 | 0 } function _(e) { e = e | 0; return e << 16 >> 16 == 39 | e << 16 >> 16 == 34 | 0 } function ee() { return (t[(t[6] | 0) + 12 >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function re() { return (t[(t[6] | 0) + 8 >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function ae(e) { e = e | 0; return e << 16 >> 16 == 13 | e << 16 >> 16 == 10 | 0 } function ie() { return (t[(t[6] | 0) + 4 >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function se() { return (t[(t[7] | 0) + 4 >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function te() { return (t[t[6] >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function fe() { return (t[t[7] >> 2] | 0) - (t[3] | 0) >> 1 | 0 } function ce() { return f[(t[6] | 0) + 24 >> 0] | 0 | 0 } function ne(e) { e = e | 0; t[3] = e; return } function be() { return (i[589] | 0) != 0 | 0 } function ue() { return t[14] | 0 } return { ai: T, e: ue, ee: se, es: fe, f: be, id: M, ie: ie, ip: ce, is: te, p: b, re: W, ri: V, sa: j, se: ee, ses: ne, ss: re, sta: X } }({ Int8Array: Int8Array, Int16Array: Int16Array, Int32Array: Int32Array, Uint8Array: Uint8Array, Uint16Array: Uint16Array }, {}, r), a = e.sta(2 * i); } const o = t.length + 1; e.ses(a), e.sa(o - 1), (s ? b : n)(t, new Uint16Array(r, a, o)), e.p() || (c$1 = e.e(), h()); const w = [], d = []; for (; e.ri();) { const r = e.is(), a = e.ie(), i = e.ai(), s = e.id(), f = e.ss(), c = e.se(); let n; e.ip() && (n = u(-1 === s ? r : r + 1, t.charCodeAt(-1 === s ? r - 1 : r))), w.push({ n: n, s: r, e: a, ss: f, se: c, d: s, a: i }); } for (; e.re();) { const r = e.es(), a = t.charCodeAt(r); d.push(34 === a || 39 === a ? u(r + 1, a) : t.slice(e.es(), e.ee())); } return [w, d, !!e.f()] } function n(e, r) { const a = e.length; let i = 0; for (; i < a;) { const a = e.charCodeAt(i); r[i++] = (255 & a) << 8 | a >>> 8; } } function b(e, r) { const a = e.length; let i = 0; for (; i < a;)r[i] = e.charCodeAt(i++); } function u(e, r) { c$1 = e; let a = "", i = c$1; for (; ;) { c$1 >= t.length && h(); const e = t.charCodeAt(c$1); if (e === r) break; 92 === e ? (a += t.slice(i, c$1), a += k(), i = c$1) : (8232 === e || 8233 === e || o(e) && h(), ++c$1); } return a += t.slice(i, c$1++), a } function k() { let e = t.charCodeAt(++c$1); switch (++c$1, e) { case 110: return "\n"; case 114: return "\r"; case 120: return String.fromCharCode(l(2)); case 117: return function () { let e; 123 === t.charCodeAt(c$1) ? (++c$1, e = l(t.indexOf("}", c$1) - c$1), ++c$1, e > 1114111 && h()) : e = l(4); return e <= 65535 ? String.fromCharCode(e) : (e -= 65536, String.fromCharCode(55296 + (e >> 10), 56320 + (1023 & e))) }(); case 116: return "\t"; case 98: return "\b"; case 118: return "\v"; case 102: return "\f"; case 13: 10 === t.charCodeAt(c$1) && ++c$1; case 10: return ""; case 56: case 57: h(); default: if (e >= 48 && e <= 55) { let r = t.substr(c$1 - 1, 3).match(/^[0-7]+/)[0], a = parseInt(r, 8); return a > 255 && (r = r.slice(0, -1), a = parseInt(r, 8)), c$1 += r.length - 1, e = t.charCodeAt(c$1), "0" === r && 56 !== e && 57 !== e || h(), String.fromCharCode(a) } return o(e) ? "" : String.fromCharCode(e) } } function l(e) { const r = c$1; let a = 0, i = 0; for (let r = 0; r < e; ++r, ++c$1) { let e, s = t.charCodeAt(c$1); if (95 !== s) { if (s >= 97) e = s - 97 + 10; else if (s >= 65) e = s - 65 + 10; else { if (!(s >= 48 && s <= 57)) break; e = s - 48; } if (e >= 16) break; i = s, a = 16 * a + e; } else 95 !== i && 0 !== r || h(), i = s; } return 95 !== i && c$1 - r === e || h(), a } function o(e) { return 13 === e || 10 === e } function h() { throw Object.assign(new Error(`Parse error ${f}:${t.slice(0, c$1).split("\n").length}:${c$1 - t.lastIndexOf("\n", c$1 - 1)}`), { idx: c$1 }) }
+
+    async function defaultResolve(id, parentUrl) {
+        return resolveImportMap(importMap, resolveIfNotPlainOrUrl(id, parentUrl) || id, parentUrl);
+    }
+
+    async function _resolve(id, parentUrl) {
+        const urlResolved = resolveIfNotPlainOrUrl(id, parentUrl);
+        return {
+            r: resolveImportMap(importMap, urlResolved || id, parentUrl),
+            // b = bare specifier
+            b: !urlResolved && !isURL(id)
+        };
+    }
+
+    const resolve = resolveHook ? async (id, parentUrl) => ({ r: await resolveHook(id, parentUrl, defaultResolve), b: false }) : _resolve;
+
+    let id = 0;
+    const registry = {};
+
+    async function loadAll(load, seen) {
+        if (load.b || seen[load.u])
+            return;
+        seen[load.u] = 1;
+        await load.L;
+        await Promise.all(load.d.map(dep => loadAll(dep, seen)));
+        if (!load.n)
+            load.n = load.d.some(dep => dep.n);
+    }
+
+    let importMap = { imports: {}, scopes: {} };
+    let importMapSrcOrLazy = false;
+    let baselinePassthrough;
+
+    const initPromise = featureDetectionPromise.then(() => {
+        // shim mode is determined on initialization, no late shim mode
+        if (!shimMode) {
+            let seenScript = false;
+            for (const script of document.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]')) {
+                if (!seenScript && script.type === 'module')
+                    seenScript = true;
+                if (script.type.endsWith('-shim')) {
+                    setShimMode();
+                    break;
+                }
+                if (seenScript && script.type === 'importmap') {
+                    importMapSrcOrLazy = true;
+                    break;
+                }
+            }
+        }
+        baselinePassthrough = supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy && !false;
+        if (!baselinePassthrough) onpolyfill();
+        if (shimMode || !baselinePassthrough) {
+            new MutationObserver(mutations => {
+                for (const mutation of mutations) {
+                    if (mutation.type !== 'childList') continue;
+                    for (const node of mutation.addedNodes) {
+                        if (node.tagName === 'SCRIPT') {
+                            if (!shimMode && node.type === 'module' || shimMode && node.type === 'module-shim')
+                                processScript(node);
+                            if (!shimMode && node.type === 'importmap' || shimMode && node.type === 'importmap-shim')
+                                processImportMap(node);
+                        }
+                        else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
+                            processPreload(node);
+                    }
+                }
+            }).observe(document, { childList: true, subtree: true });
+            processImportMaps();
+            processScriptsAndPreloads();
+            return undefined;
+        }
+    });
+    let importMapPromise = initPromise;
+
+    let acceptingImportMaps = true;
+    async function topLevelLoad(url, fetchOpts, source, nativelyLoaded, lastStaticLoadPromise) {
+        if (!shimMode)
+            acceptingImportMaps = false;
+        await importMapPromise;
+        // early analysis opt-out - no need to even fetch if we have feature support
+        if (!shimMode && baselinePassthrough) {
+            // for polyfill case, only dynamic import needs a return value here, and dynamic import will never pass nativelyLoaded
+            if (nativelyLoaded)
+                return null;
+            await lastStaticLoadPromise;
+            return dynamicImport(source ? createBlob(source) : url, { errUrl: url || source });
+        }
+        const load = getOrCreateLoad(url, fetchOpts, source);
+        const seen = {};
+        await loadAll(load, seen);
+        lastLoad = undefined;
+        resolveDeps(load, seen);
+        await lastStaticLoadPromise;
+        if (source && !shimMode && !load.n && !false) {
+            const module = await dynamicImport(createBlob(source), { errUrl: source });
+            if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
+            return module;
+        }
+        const module = await dynamicImport(!shimMode && !load.n && nativelyLoaded ? load.u : load.b, { errUrl: load.u });
+        // if the top-level load is a shell, run its update function
+        if (load.s)
+            (await dynamicImport(load.s)).u$_(module);
+        if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
+        // when tla is supported, this should return the tla promise as an actual handle
+        // so readystate can still correspond to the sync subgraph exec completions
+        return module;
+    }
+
+    function revokeObjectURLs(registryKeys) {
+        let batch = 0;
+        const keysLength = registryKeys.length;
+        const schedule = self.requestIdleCallback ? self.requestIdleCallback : self.requestAnimationFrame;
+        schedule(cleanup);
+        function cleanup() {
+            const batchStartIndex = batch * 100;
+            if (batchStartIndex > keysLength) return
+            for (const key of registryKeys.slice(batchStartIndex, batchStartIndex + 100)) {
+                const load = registry[key];
+                if (load) URL.revokeObjectURL(load.b);
+            }
+            batch++;
+            schedule(cleanup);
+        }
+    }
+
+    async function importShim(id, parentUrl = baseUrl, _assertion) {
+        // needed for shim check
+        await initPromise;
+        if (acceptingImportMaps || shimMode || !baselinePassthrough) {
+            processImportMaps();
+            if (!shimMode)
+                acceptingImportMaps = false;
+        }
+        await importMapPromise;
+        return topLevelLoad((await resolve(id, parentUrl)).r || throwUnresolved(id, parentUrl), { credentials: 'same-origin' });
+    }
+
+    self.importShim = importShim;
+
+    if (shimMode) {
+        importShim.getImportMap = () => JSON.parse(JSON.stringify(importMap));
+    }
+
+    const meta = {};
+
+    async function importMetaResolve(id, parentUrl = this.url) {
+        return (await resolve(id, `${parentUrl}`)).r || throwUnresolved(id, parentUrl);
+    }
+
+    self._esmsm = meta;
+
+    function urlJsString(url) {
+        return `'${url.replace(/'/g, "\\'")}'`;
+    }
+
+    let lastLoad;
+    function resolveDeps(load, seen) {
+        if (load.b || !seen[load.u])
+            return;
+        seen[load.u] = 0;
+
+        for (const dep of load.d)
+            resolveDeps(dep, seen);
+
+        const [imports] = load.a;
+
+        // "execution"
+        const source = load.S;
+
+        // edge doesnt execute sibling in order, so we fix this up by ensuring all previous executions are explicit dependencies
+        let resolvedSource = edge && lastLoad ? `import '${lastLoad}';` : '';
+
+        if (!imports.length) {
+            resolvedSource += source;
+        }
+        else {
+            // once all deps have loaded we can inline the dependency resolution blobs
+            // and define this blob
+            let lastIndex = 0, depIndex = 0;
+            for (const { s: start, se: end, d: dynamicImportIndex } of imports) {
+                // dependency source replacements
+                if (dynamicImportIndex === -1) {
+                    const depLoad = load.d[depIndex++];
+                    let blobUrl = depLoad.b;
+                    if (!blobUrl) {
+                        // circular shell creation
+                        if (!(blobUrl = depLoad.s)) {
+                            blobUrl = depLoad.s = createBlob(`export function u$_(m){${depLoad.a[1].map(
+                                name => name === 'default' ? `$_default=m.default` : `${name}=m.${name}`
+                            ).join(',')
+                                }}${depLoad.a[1].map(name =>
+                                    name === 'default' ? `let $_default;export{$_default as default}` : `export let ${name}`
+                                ).join(';')
+                                }\n//# sourceURL=${depLoad.r}?cycle`);
+                        }
+                    }
+                    // circular shell execution
+                    else if (depLoad.s) {
+                        resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)};import*as m$_${depIndex} from'${depLoad.b}';import{u$_ as u$_${depIndex}}from'${depLoad.s}';u$_${depIndex}(m$_${depIndex})`;
+                        lastIndex = end;
+                        depLoad.s = undefined;
+                        continue;
+                    }
+                    resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)}`;
+                    lastIndex = end;
+                }
+                // import.meta
+                else if (dynamicImportIndex === -2) {
+                    meta[load.r] = { url: load.r, resolve: importMetaResolve };
+                    resolvedSource += `${source.slice(lastIndex, start)}self._esmsm[${urlJsString(load.r)}]`;
+                    lastIndex = end;
+                }
+                // dynamic import
+                else {
+                    resolvedSource += `${source.slice(lastIndex, dynamicImportIndex + 6)}Shim(${source.slice(start, end)}, ${load.r && urlJsString(load.r)}`;
+                    lastIndex = end;
+                }
+            }
+
+            resolvedSource += source.slice(lastIndex);
+        }
+
+        // ; and // trailer support added for Ruby 7 source maps compatibility
+        let hasSourceURL = false;
+        resolvedSource = resolvedSource.replace(sourceMapURLRegEx, (match, isMapping, url) => (hasSourceURL = !isMapping, match.replace(url, () => new URL(url, load.r))));
+        if (!hasSourceURL)
+            resolvedSource += '\n//# sourceURL=' + load.r;
+
+        load.b = lastLoad = createBlob(resolvedSource);
+        load.S = undefined;
+    }
+
+    const sourceMapURLRegEx = /\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]*)\s*)*$/;
+
+    const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
+    const jsonContentType = /^(text|application)\/json(;|$)/;
+    const cssContentType = /^(text|application)\/css(;|$)/;
+    const wasmContentType = /^application\/wasm(;|$)/;
+
+    const cssUrlRegEx = /url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;
+
+    // restrict in-flight fetches to a pool of 100
+    let p = [];
+    let c = 0;
+    function pushFetchPool() {
+        if (++c > 100)
+            return new Promise(r => p.push(r));
+    }
+    function popFetchPool() {
+        c--;
+        if (p.length)
+            p.shift()();
+    }
+
+    async function doFetch(url, fetchOpts) {
+        const poolQueue = pushFetchPool();
+        if (poolQueue) await poolQueue;
+        try {
+            var res = await fetchHook(url, fetchOpts);
+        }
+        finally {
+            popFetchPool();
+        }
+        if (!res.ok)
+            throw new Error(`${res.status} ${res.statusText} ${res.url}`);
+        const contentType = res.headers.get('content-type');
+        if (jsContentType.test(contentType))
+            return { r: res.url, s: await res.text(), t: 'js' };
+        else if (jsonContentType.test(contentType))
+            return { r: res.url, s: `export default ${await res.text()}`, t: 'json' };
+        else if (cssContentType.test(contentType))
+            return {
+                r: res.url, s: `var s=new CSSStyleSheet();s.replaceSync(${JSON.stringify((await res.text()).replace(cssUrlRegEx, (_match, quotes, relUrl1, relUrl2) => `url(${quotes}${resolveUrl(relUrl1 || relUrl2, url)}${quotes})`))
+                    });export default s;`, t: 'css'
+            };
+        else if (wasmContentType.test(contentType))
+            throw new Error('WASM modules not supported');
+        else
+            throw new Error(`Unknown Content-Type "${contentType}"`);
+    }
+
+    function getOrCreateLoad(url, fetchOpts, source) {
+        let load = registry[url];
+        if (load)
+            return load;
+
+        load = registry[url] = {
+            // url
+            u: url,
+            // response url
+            r: undefined,
+            // fetchPromise
+            f: undefined,
+            // source
+            S: undefined,
+            // linkPromise
+            L: undefined,
+            // analysis
+            a: undefined,
+            // deps
+            d: undefined,
+            // blobUrl
+            b: undefined,
+            // shellUrl
+            s: undefined,
+            // needsShim
+            n: false,
+            // type
+            t: null
+        };
+
+        load.f = (async () => {
+            if (!source) {
+                // preload fetch options override fetch options (race)
+                let t;
+                ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
+                if (t && !shimMode) {
+                    if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
+                        throw new Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
+                    if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
+                        load.n = true;
+                }
+            }
+            try {
+                load.a = parse(source, load.u);
+            }
+            catch (e) {
+                console.warn(e);
+                load.a = [[], []];
+            }
+            load.S = source;
+            return load;
+        })();
+
+        load.L = load.f.then(async () => {
+            let childFetchOpts = fetchOpts;
+            load.d = (await Promise.all(load.a[0].map(async ({ n, d }) => {
+                if (d >= 0 && !supportsDynamicImport || d === 2 && !supportsImportMeta)
+                    load.n = true;
+                if (!n) return;
+                const { r, b } = await resolve(n, load.r || load.u);
+                if (b && (!supportsImportMaps || importMapSrcOrLazy))
+                    load.n = true;
+                if (d !== -1) return;
+                if (!r)
+                    throwUnresolved(n, load.r || load.u);
+                if (skip && skip.test(r)) return { b: r };
+                if (childFetchOpts.integrity)
+                    childFetchOpts = Object.assign({}, childFetchOpts, { integrity: undefined });
+                return getOrCreateLoad(r, childFetchOpts).f;
+            }))).filter(l => l);
+        });
+
+        return load;
+    }
+
+    function processScriptsAndPreloads() {
+        for (const script of document.querySelectorAll(shimMode ? 'script[type="module-shim"]' : 'script[type="module"]'))
+            processScript(script);
+        for (const link of document.querySelectorAll('link[rel="modulepreload"]'))
+            processPreload(link);
+    }
+
+    function processImportMaps() {
+        for (const script of document.querySelectorAll(shimMode ? 'script[type="importmap-shim"]' : 'script[type="importmap"]'))
+            processImportMap(script);
+    }
+
+    function getFetchOpts(script) {
+        const fetchOpts = {};
+        if (script.integrity)
+            fetchOpts.integrity = script.integrity;
+        if (script.referrerpolicy)
+            fetchOpts.referrerPolicy = script.referrerpolicy;
+        if (script.crossorigin === 'use-credentials')
+            fetchOpts.credentials = 'include';
+        else if (script.crossorigin === 'anonymous')
+            fetchOpts.credentials = 'omit';
+        else
+            fetchOpts.credentials = 'same-origin';
+        return fetchOpts;
+    }
+
+    let lastStaticLoadPromise = Promise.resolve();
+
+    let domContentLoadedCnt = 1;
+    function domContentLoadedCheck() {
+        if (--domContentLoadedCnt === 0 && !noLoadEventRetriggers)
+            document.dispatchEvent(new Event('DOMContentLoaded'));
+    }
+    // this should always trigger because we assume es-module-shims is itself a domcontentloaded requirement
+    document.addEventListener('DOMContentLoaded', async () => {
+        await initPromise;
+        domContentLoadedCheck();
+        if (shimMode || !baselinePassthrough) {
+            processImportMaps();
+            processScriptsAndPreloads();
+        }
+    });
+
+    let readyStateCompleteCnt = 1;
+    if (document.readyState === 'complete') {
+        readyStateCompleteCheck();
+    }
+    else {
+        document.addEventListener('readystatechange', async () => {
+            processImportMaps();
+            await initPromise;
+            readyStateCompleteCheck();
+        });
+    }
+    function readyStateCompleteCheck() {
+        if (--readyStateCompleteCnt === 0 && !noLoadEventRetriggers)
+            document.dispatchEvent(new Event('readystatechange'));
+    }
+
+    function processImportMap(script) {
+        if (script.ep) // ep marker = script processed
+            return;
+        // empty inline scripts sometimes show before domready
+        if (!script.src && !script.innerHTML)
+            return;
+        script.ep = true;
+        // we dont currently support multiple, external or dynamic imports maps in polyfill mode to match native
+        if (script.src) {
+            if (!shimMode)
+                return;
+            importMapSrcOrLazy = true;
+        }
+        if (acceptingImportMaps) {
+            importMapPromise = importMapPromise
+                .then(async () => {
+                    importMap = resolveAndComposeImportMap(script.src ? await (await fetchHook(script.src)).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
+                })
+                .catch(error => setTimeout(() => { throw error }));
+            if (!shimMode)
+                acceptingImportMaps = false;
+        }
+    }
+
+    function processScript(script) {
+        if (script.ep) // ep marker = script processed
+            return;
+        if (script.getAttribute('noshim') !== null)
+            return;
+        // empty inline scripts sometimes show before domready
+        if (!script.src && !script.innerHTML)
+            return;
+        script.ep = true;
+        // does this load block readystate complete
+        const isReadyScript = readyStateCompleteCnt > 0;
+        // does this load block DOMContentLoaded
+        const isDomContentLoadedScript = domContentLoadedCnt > 0;
+        if (isReadyScript) readyStateCompleteCnt++;
+        if (isDomContentLoadedScript) domContentLoadedCnt++;
+        const blocks = script.getAttribute('async') === null && isReadyScript;
+        const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(e => {
+            setTimeout(() => { throw e });
+            onerror(e);
+        });
+        if (blocks)
+            lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
+        if (isDomContentLoadedScript)
+            loadPromise.then(domContentLoadedCheck);
+    }
+
+    const fetchCache = {};
+    function processPreload(link) {
+        if (link.ep) // ep marker = processed
+            return;
+        link.ep = true;
+        if (fetchCache[link.href])
+            return;
+        fetchCache[link.href] = doFetch(link.href, getFetchOpts(link));
+    }
+
+    function throwUnresolved(id, parentUrl) {
+        throw Error("Unable to resolve specifier '" + id + (parentUrl ? "' from " + parentUrl : "'"));
+    }
+
+})();

posex/js/posex.js

@@ -0,0 +1,844 @@
+async function _import() {
+    if (!globalThis.posex || !globalThis.posex.import) {
+        const THREE = await import('three');
+        const { TrackballControls } = await import('three-trackballcontrols');
+        const { DragControls } = await import('three-dragcontrols');
+        const { MeshLine, MeshLineMaterial } = await import('three-meshline');
+        return { THREE, TrackballControls, DragControls, MeshLine, MeshLineMaterial };
+    } else {
+        return await globalThis.posex.import();
+    }
+}
+const { THREE, TrackballControls, DragControls, MeshLine, MeshLineMaterial } = await _import();
+
+const JOINT_RADIUS = 4.0;
+const LIMB_SIZE = 4.0;
+const LIMB_N = 64;
+
+const joint_names = [
+    'nose',
+    'neck',
+    'right shoulder',
+    'right elbow',
+    'right wrist',
+    'left shoulder',
+    'left elbow',
+    'left wrist',
+    'right hip',
+    'right knee',
+    'right ancle',
+    'left hip',
+    'left knee',
+    'left ancle',
+    'right eye',
+    'left eye',
+    'right ear',
+    'left ear'
+];
+
+const joint_colors = [
+    // r  g  b
+    [255, 0, 0],    // 0:  nose
+    [255, 85, 0],   // 1:  neck
+    [255, 170, 0],  // 2:  right shoulder
+    [255, 255, 0],  // 3:  right elbow
+    [170, 255, 0],  // 4:  right wrist
+    [85, 255, 0],   // 5:  left shoulder
+    [0, 255, 0],    // 6:  left elbow
+    [0, 255, 85],   // 7:  left wrist
+    [0, 255, 170],  // 8:  right hip
+    [0, 255, 255],  // 9:  right knee
+    [0, 170, 255],  // 10: right ancle
+    [0, 85, 255],   // 11: left hip
+    [0, 0, 255],    // 12: left knee
+    [85, 0, 255],   // 13: left ancle
+    [170, 0, 255],  // 14: right eye
+    [255, 0, 255],  // 15: left eye
+    [255, 0, 170],  // 16: right ear
+    [255, 0, 85]    // 17: left ear
+];
+
+const limb_pairs = [
+    [1, 2],   // 0:  right shoulder
+    [1, 5],   // 1:  left shoulder
+    [2, 3],   // 2:  right upper arm
+    [3, 4],   // 3:  right forearm
+    [5, 6],   // 4:  left upper arm
+    [6, 7],   // 5:  left forearm
+    [1, 8],   // 6:  right hip
+    [8, 9],   // 7:  right upper leg
+    [9, 10],  // 8:  right lower leg
+    [1, 11],  // 9:  left hip
+    [11, 12], // 10: left upper leg
+    [12, 13], // 11: left lower leg
+    [1, 0],   // 12: neck
+    [0, 14],  // 13: right eye
+    [14, 16], // 14: right ear
+    [0, 15],  // 15: left eye
+    [15, 17], // 16: left ear
+];
+
+const standard_pose = [
+    //   x      y      z ∈ [0,1]
+    [0.500, 0.820, 0.000],  // 0:  nose
+    [0.500, 0.750, 0.000],  // 1:  neck
+    [0.416, 0.750, 0.000],  // 2:  right shoulder
+    [0.305, 0.750, 0.000],  // 3:  right elbow
+    [0.188, 0.750, 0.000],  // 4:  right wrist
+    [0.584, 0.750, 0.000],  // 5:  left shoulder
+    [0.695, 0.750, 0.000],  // 6:  left elbow
+    [0.812, 0.750, 0.000],  // 7:  left wrist
+    [0.447, 0.511, 0.000],  // 8:  right hip
+    [0.453, 0.295, 0.000],  // 9:  right knee
+    [0.445, 0.109, 0.000],  // 10: right ancle
+    [0.553, 0.511, 0.000],  // 11: left hip
+    [0.547, 0.295, 0.000],  // 12: left knee
+    [0.555, 0.109, 0.000],  // 13: left ancle
+    [0.480, 0.848, 0.000],  // 14: right eye
+    [0.520, 0.848, 0.000],  // 15: left eye
+    [0.450, 0.834, 0.000],  // 16: right ear
+    [0.550, 0.834, 0.000]   // 17: left ear
+]
+
+for (let xyz of standard_pose) {
+    xyz[0] = xyz[0] - 0.5; // [0,1] -> [-0.5,0.5]
+    xyz[1] = xyz[1] - 0.5; // [0,1] -> [-0.5,0.5]
+    //xyz[2] = xyz[2] * 2 - 1.0;
+}
+
+function create_body(unit, x0, y0, z0) {
+    const joints = [];
+    const limbs = [];
+
+    for (let i = 0; i < standard_pose.length; ++i) {
+        const [x, y, z] = standard_pose[i];
+        const [r, g, b] = joint_colors[i];
+        const color = (r << 16) | (g << 8) | (b << 0);
+        const geom = new THREE.SphereGeometry(JOINT_RADIUS, 32, 32);
+        const mat = new THREE.MeshBasicMaterial({ color: color });
+        const joint = new THREE.Mesh(geom, mat);
+        joint.name = joint_names[i];
+        joint.position.x = x * unit + x0;
+        joint.position.y = y * unit + y0;
+        joint.position.z = z + z0;
+        joint.dirty = true; // update limbs in next frame
+        joints.push(joint);
+    }
+
+    for (let i = 0; i < limb_pairs.length; ++i) {
+        const [r, g, b] = joint_colors[i];
+        const color = (r << 16) | (g << 8) | (b << 0);
+        const line = new MeshLine();
+        const mat = new MeshLineMaterial({ color: color, opacity: 0.6, transparent: true });
+        limbs.push(new THREE.Mesh(line, mat));
+    }
+
+    return [joints, limbs];
+}
+
+function init_3d(ui) {
+    const
+        container = ui.container,
+        canvas = ui.canvas,
+        notation = ui.notation,
+        indicator1 = ui.indicator1,
+        indicator2 = ui.indicator2,
+        width = () => canvas.width,
+        height = () => canvas.height,
+        unit = () => Math.min(width(), height()),
+        unit_max = () => Math.max(width(), height());
+
+    canvas.addEventListener('contextmenu', e => {
+        e.preventDefault();
+    }, false);
+
+    const scene = new THREE.Scene();
+    const default_bg = () => new THREE.Color(0x000000);
+    scene.background = default_bg();
+    const camera = new THREE.OrthographicCamera(width() / -2, width() / 2, height() / 2, height() / -2, 1, width() * 4);
+    camera.fixed_roll = ui.fixed_roll ? !!ui.fixed_roll.checked : false;
+    camera.position.z = unit_max() * 2;
+
+    const renderer = new THREE.WebGLRenderer({
+        canvas: canvas,
+        antialias: true,
+        alpha: true,
+        preserveDrawingBuffer: true,
+    });
+    renderer.setSize(width(), height());
+
+    function set_bg(image_path, dont_dispose) {
+        const old_tex = scene.background;
+        if (image_path === null) {
+            scene.background = default_bg();
+            if (old_tex && old_tex.dispose && !dont_dispose) old_tex.dispose();
+            return;
+        }
+        const tex = (image_path.isTexture || image_path.isColor) ? image_path : new THREE.TextureLoader().load(image_path);
+        scene.background = tex;
+        if (old_tex && old_tex.dispose && !dont_dispose) old_tex.dispose();
+    }
+
+    const bodies = new Map();
+    let selected_body = null;
+    let touched_body = null;
+    const touchable_objects = [];
+    const touchable_bodies = [];
+    const object_to_body = new Map();
+
+    function remove(mesh) {
+        if (mesh instanceof Array) {
+            for (let m of mesh) remove(m);
+        } else {
+            mesh.material.dispose();
+            mesh.geometry.dispose();
+            object_to_body.delete(mesh);
+        }
+    };
+    const add_body = (name, x0, y0, z0) => {
+        remove_body(name);
+        const [joints, limbs] = create_body(unit(), x0, y0, z0);
+        const group = new THREE.Group(); // for DragControls
+
+        const dispose = () => {
+            for (let joint of joints) {
+                array_remove(touchable_objects, joint);
+                remove(joint);
+            }
+            for (let limb of limbs) {
+                remove(limb);
+                scene.remove(limb);
+            }
+            array_remove(touchable_bodies, group);
+            scene.remove(group);
+        };
+
+        const reset = (dx, dy, dz) => {
+            if (dx === undefined) dx = x0;
+            if (dy === undefined) dy = y0;
+            if (dz === undefined) dz = z0;
+            for (let i = 0; i < standard_pose.length; ++i) {
+                const [x, y, z] = standard_pose[i];
+                joints[i].position.set(x * unit() + dx, y * unit() + dy, z + dz);
+                joints[i].dirty = true;
+            }
+            group.position.set(0, 0, 0);
+            body.dirty = true;
+        };
+
+        const body = {
+            name,
+            group,
+            joints,
+            limbs,
+            x0, y0, z0,
+            dispose,
+            reset,
+            dirty: true, // update limbs in next frame
+        };
+
+        for (let joint of joints) {
+            touchable_objects.push(joint);
+            object_to_body.set(joint, body);
+            group.add(joint);
+        }
+        for (let limb of limbs) {
+            scene.add(limb);
+            object_to_body.set(limb, body);
+        }
+        object_to_body.set(group, body);
+
+        bodies.set(name, body);
+        scene.add(group);
+        touchable_bodies.push(group);
+
+        return body;
+    };
+
+    const remove_body = name => {
+        if (!bodies.get(name)) return;
+        bodies.get(name).dispose();
+        bodies.delete(name);
+    };
+
+    const get_body_rect = body => {
+        const v = new THREE.Vector3();
+        let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity;
+        for (let joint of body.joints) {
+            const wpos = joint.getWorldPosition(v);
+            const spos = wpos.project(camera);
+            if (spos.x < xmin) xmin = spos.x;
+            if (xmax < spos.x) xmax = spos.x;
+            if (spos.y < ymin) ymin = spos.y;
+            if (ymax < spos.y) ymax = spos.y;
+        }
+        return [xmin, ymin, xmax, ymax];
+    };
+
+    const default_body = add_body('defualt', 0, 0, 0);
+
+    const controls = new TrackballControls(camera, renderer.domElement);
+    const dragger_joint = new DragControls(touchable_objects, camera, renderer.domElement);
+    const dragger_body = new DragControls([], camera, renderer.domElement);
+    dragger_body.transformGroup = true;
+
+    dragger_joint.addEventListener('dragstart', () => { controls.enabled = false; });
+    dragger_joint.addEventListener('dragend', () => { controls.enabled = true; });
+    dragger_joint.addEventListener('drag', e => {
+        e.object.dirty = true;
+        object_to_body.get(e.object).dirty = true;
+    });
+
+    dragger_body.addEventListener('dragstart', () => { controls.enabled = false; });
+    dragger_body.addEventListener('dragend', () => { controls.enabled = true; });
+    dragger_body.addEventListener('drag', e => {
+        const body = object_to_body.get(e.object);
+        body.dirty = true;
+        for (let i = 0; i < body.joints.length; ++i) {
+            body.joints[i].dirty = true;
+        }
+    });
+
+    renderer.domElement.addEventListener('pointerdown', e => {
+        dragger_joint.enabled = e.button === 0;
+        dragger_body.enabled = e.button === 2;
+    }, true);
+
+    const rc = new THREE.Raycaster();
+    const m = new THREE.Vector2();
+    renderer.domElement.addEventListener('pointermove', e => {
+        e.preventDefault();
+        m.x = (e.offsetX / width()) * 2 - 1;
+        m.y = (1 - e.offsetY / height()) * 2 - 1;
+        rc.setFromCamera(m, camera);
+        const touched = rc.intersectObjects(touchable_objects);
+
+        // show label
+        if (touched.length != 0) {
+            const [dx, dy] = get_relative_offset(renderer.domElement, container);
+            notation.textContent = touched[0].object.name;
+            notation.style.left = `${e.offsetX + dx}px`;
+            notation.style.top = `${e.offsetY + dy - 32}px`;
+            notation.style.display = 'block';
+        } else {
+            notation.textContent = '';
+            notation.style.display = 'none';
+        }
+
+        // show temporary selection
+        if (touched.length != 0) {
+            touched_body = object_to_body.get(touched[0].object);
+        } else {
+            touched_body = null;
+        }
+    }, false);
+
+    renderer.domElement.addEventListener('pointerdown', e => {
+        e.preventDefault();
+        m.x = (e.offsetX / width()) * 2 - 1;
+        m.y = (1 - e.offsetY / height()) * 2 - 1;
+        rc.setFromCamera(m, camera);
+        const touched = rc.intersectObjects(touchable_objects);
+
+        // show selection
+        if (touched.length != 0) {
+            selected_body = object_to_body.get(touched[0].object);
+            const objs = dragger_body.getObjects();
+            objs.length = 0;
+            objs.push(selected_body.group);
+            dragger_body.onPointerDown(e);
+        } else {
+            selected_body = null;
+            dragger_body.getObjects().length = 0;
+        }
+    }, false);
+
+    if (ui.all_reset)
+        ui.all_reset.addEventListener('click', () => {
+            touched_body = null;
+            selected_body = null;
+            camera.position.set(0, 0, unit_max() * 2);
+            camera.rotation.set(0, 0, 0);
+            controls.reset();
+            for (let name of Array.from(bodies.keys()).slice(1)) {
+                remove_body(name);
+            }
+            for (let body of bodies.values()) {
+                body.reset(0, 0, 0);
+            }
+        }, false);
+
+    if (ui.reset_camera)
+        ui.reset_camera.addEventListener('click', () => {
+            camera.position.set(0, 0, unit_max() * 2);
+            camera.rotation.set(0, 0, 0);
+            controls.reset();
+        }, false);
+
+    if (ui.reset_pose)
+        ui.reset_pose.addEventListener('click', () => {
+            if (selected_body) {
+                selected_body.reset();
+            } else {
+                for (let [name, body] of bodies) {
+                    body.reset();
+                }
+            }
+        }, false);
+
+    if (ui.fixed_roll)
+        ui.fixed_roll.addEventListener('change', () => {
+            camera.fixed_roll = !!ui.fixed_roll.checked;
+        }, false);
+
+    let body_num = 1;
+    if (ui.add_body)
+        ui.add_body.addEventListener('click', () => {
+            const last_body = selected_body ?? Array.from(bodies.values()).at(-1);
+            const base = last_body.joints[0].getWorldPosition(new THREE.Vector3());
+            const
+                dx = base.x - standard_pose[0][0] * unit(),
+                dy = base.y - standard_pose[0][1] * unit(),
+                dz = base.z - standard_pose[0][2];
+            add_body(`body_${body_num++}`, dx + 32, dy, dz);
+        }, false);
+
+    if (ui.remove_body)
+        ui.remove_body.addEventListener('click', () => {
+            if (!selected_body) {
+                ui.notify('No body is selected.', 'error');
+                return;
+            }
+            if (bodies.size <= 1) {
+                ui.notify('No body is not allowed.', 'error');
+                return;
+            }
+            remove_body(selected_body.name);
+            touched_body = null;
+            selected_body = null;
+        }, false);
+
+    const get_client_boundary = body => {
+        let [xmin, ymin, xmax, ymax] = get_body_rect(body);
+
+        // [-1,1] -> [0,width]
+        xmin = (xmin + 1) * width() / 2;
+        xmax = (xmax + 1) * width() / 2;
+        ymin = height() - (ymin + 1) * height() / 2;
+        ymax = height() - (ymax + 1) * height() / 2;
+        [ymin, ymax] = [ymax, ymin];
+
+        // add margin
+        xmin = xmin - 5 + renderer.domElement.offsetLeft;
+        xmax = xmax + 5 + renderer.domElement.offsetLeft;
+        ymin = ymin - 5 + renderer.domElement.offsetTop;
+        ymax = ymax + 5 + renderer.domElement.offsetTop;
+
+        return [xmin, ymin, xmax, ymax];
+    }
+
+    const size_change = (w, h) => {
+        if (w < 64 || h < 64) return;
+        canvas.width = w;
+        canvas.height = h;
+        renderer.setSize(w, h);
+        // update camera
+        camera.left = w / -2;
+        camera.right = w / 2;
+        camera.top = h / 2;
+        camera.bottom = h / -2;
+        camera.near = 1;
+        camera.far = w * 4;
+        camera.position.z = unit_max() * 2;
+        camera.updateProjectionMatrix();
+        controls.handleResize();
+    };
+
+    const width_input = ui.canvas_width, height_input = ui.canvas_height;
+    if (width_input && height_input) {
+        width_input.addEventListener('change', () => {
+            const w = +width_input.value;
+            const h = +height_input.value;
+            size_change(w, h);
+        }, false);
+        height_input.addEventListener('change', () => {
+            const w = +width_input.value;
+            const h = +height_input.value;
+            size_change(w, h);
+        }, false);
+    }
+
+    if (ui.bg)
+        ui.bg.addEventListener('change', e => {
+            const files = ui.bg.files;
+            if (files.length != 0) {
+                const file = files[0];
+                const r = new FileReader();
+                r.onload = () => set_bg(r.result);
+                r.readAsDataURL(file);
+            }
+            ui.bg.value = '';
+        }, false);
+
+    if (ui.reset_bg)
+        ui.reset_bg.addEventListener('click', () => set_bg(null), false);
+
+    function get_pose_dict(obj3d) {
+        return {
+            position: obj3d.position.toArray(),
+            rotation: obj3d.rotation.toArray(),
+            scale: obj3d.scale.toArray(),
+            up: obj3d.up.toArray(),
+        };
+    }
+
+    function set_pose_dict(obj3d, dict) {
+        obj3d.position.set(...dict.position);
+        obj3d.rotation.set(...dict.rotation);
+        obj3d.scale.set(...dict.scale);
+        obj3d.up.set(...dict.up);
+    }
+
+    if (ui.save_pose && ui.save_pose_callback)
+        ui.save_pose.addEventListener('click', async () => {
+            const name = prompt('Input pose name.');
+            if (name === undefined || name === null || name === '') return;
+
+            const screen = {
+                width: width(),
+                height: height(),
+            }
+
+            const camera_ = get_pose_dict(camera);
+            camera_.zoom = camera.zoom;
+
+            const joints = [];
+            for (let [name, body] of bodies) {
+                joints.push({
+                    name,
+                    joints: body.joints.map(j => get_pose_dict(j)),
+                    group: get_pose_dict(body.group),
+                    x0: body.x0,
+                    y0: body.y0,
+                    z0: body.z0,
+                });
+            }
+
+            const image = await ui.getDataURL();
+
+            const data = { name, image, screen, camera: camera_, joints };
+            const result = await ui.save_pose_callback(data);
+            ui.notify(result.result, result.ok ? 'success' : 'error');
+        }, false);
+
+    const onAnimateEndOneshot = [];
+
+    // joint and limb update
+    let elliptic_limbs = ui.elliptic_limbs ? !!ui.elliptic_limbs.checked : true;
+    //let joint_size_m = ui.joint_radius ? +ui.joint_radius.value / JOINT_RADIUS : 1.0;
+    let limb_size_m = ui.limb_width ? +ui.limb_width.value / LIMB_SIZE : 1.0;
+    if (ui.elliptic_limbs)
+        ui.elliptic_limbs.addEventListener('change', () => {
+            const b = !!ui.elliptic_limbs.checked;
+            if (elliptic_limbs !== b) {
+                elliptic_limbs = b;
+                for (let body of bodies.values()) {
+                    body.dirty = true;
+                    for (let i = 0; i < body.joints.length; ++i) {
+                        body.joints[i].dirty = true;
+                    }
+                }
+            }
+        }, false);
+
+    //if (ui.joint_radius)
+    //    ui.joint_radius.addEventListener('input', () => {
+    //        const new_val = +ui.joint_radius.value / JOINT_RADIUS;
+    //        if (joint_size_m !== new_val) {
+    //            joint_size_m = new_val;
+    //            for (let body of bodies.values()) {
+    //                body.dirty = true;
+    //                for (let i = 0; i < body.joints.length; ++i) {
+    //                    body.joints[i].dirty = true;
+    //                }
+    //            }
+    //        }
+    //    }, false);
+
+    if (ui.limb_width)
+        ui.limb_width.addEventListener('input', () => {
+            const new_val = +ui.limb_width.value / LIMB_SIZE;
+            if (limb_size_m !== new_val) {
+                limb_size_m = new_val;
+                for (let body of bodies.values()) {
+                    body.dirty = true;
+                    for (let i = 0; i < body.joints.length; ++i) {
+                        body.joints[i].dirty = true;
+                    }
+                }
+            }
+        }, false);
+
+    const limb_vecs = Array.from(Array(LIMB_N)).map(x => new THREE.Vector3());
+    function elliptic_limb_width(p) {
+        // draw limb ellipse
+        //   x^2 / a^2 + y^2 / b^2 = 1
+        //     a := half of distance between two joints
+        //     b := 2 * LIMB_SIZE / camera.zoom
+        //   {a(2p-1)}^2 / a^2 + y^2 / b^2 = 1
+        //   y^2 = b^2 { 1 - (2p-1)^2 }
+        const b = 2 * LIMB_SIZE * limb_size_m / camera.zoom;
+        const pp = 2 * p - 1;
+        return b * Math.sqrt(1 - pp * pp);
+    }
+    function stick_limb_width(p) {
+        // half width of ellipse
+        return LIMB_SIZE * limb_size_m / camera.zoom;
+    }
+    function create_limb(mesh, from, to) {
+        const s0 = limb_vecs[0];
+        const s1 = limb_vecs[LIMB_N - 1];
+        from.getWorldPosition(s0);
+        to.getWorldPosition(s1);
+        const N = LIMB_N - 1;
+        for (let i = 1; i < limb_vecs.length - 1; ++i) {
+            limb_vecs[i].lerpVectors(s0, s1, i / N);
+        }
+        mesh.geometry.setPoints(limb_vecs, elliptic_limbs ? elliptic_limb_width : stick_limb_width);
+    }
+
+    let low_fps = ui.low_fps ? !!ui.low_fps.checked : false;
+    if (ui.low_fps)
+        ui.low_fps.addEventListener('change', () => {
+            low_fps = !!ui.low_fps.checked;
+        }, false);
+
+    let last_zoom = camera.zoom;
+    let running = true;
+    //const frames = [0,0,0,0,0,0,0,0,0,0], frame_index = 0;
+    let last_tick = globalThis.performance.now();
+    const animate = () => {
+        const t0 = globalThis.performance.now();
+        //frames[(frame_index++)%frames.length] = t0 - last_tick;
+        //last_tick = t0;
+        //console.log(frames.reduce((acc, cur) => acc + cur) / frames.length);
+
+        requestAnimationFrame(animate);
+        if (!running) return;
+
+        if (controls.enabled) {
+            if (controls.screen.width === 0 && controls.screen.height === 0) {
+                controls.handleResize();
+            }
+        }
+        controls.update();
+
+        if (low_fps && t0 - last_tick < 30) return; // nearly 30fps
+        last_tick = t0;
+        
+        for (let [name, body] of bodies) {
+            const { joints, limbs, group } = body;
+
+            // update joint size
+            for (let joint of joints) {
+                joint.scale.setScalar(1 / camera.zoom);
+            }
+
+            // show limbs
+            const zoom_changed = last_zoom !== camera.zoom;
+            if (body.dirty || zoom_changed) {
+                for (let i = 0; i < limb_pairs.length; ++i) {
+                    const [from_index, to_index] = limb_pairs[i];
+                    const [from, to] = [joints[from_index], joints[to_index]];
+                    if (from.dirty || to.dirty || zoom_changed) {
+                        create_limb(limbs[i], from, to);
+                    }
+                }
+
+                for (let i = 0; i < joints.length; ++i) {
+                    joints[i].dirty = false;
+                }
+                body.dirty = false;
+            }
+        }
+
+        last_zoom = camera.zoom;
+
+        // show selection
+        if (touched_body) {
+            let [xmin, ymin, xmax, ymax] = get_client_boundary(touched_body);
+            const st = indicator2.style;
+            st.display = 'block';
+            st.left = `${xmin}px`;
+            st.top = `${ymin}px`;
+            st.width = `${xmax - xmin}px`;
+            st.height = `${ymax - ymin}px`;
+        } else {
+            indicator2.style.display = 'none';
+        }
+
+        if (selected_body) {
+            let [xmin, ymin, xmax, ymax] = get_client_boundary(selected_body);
+            const st = indicator1.style;
+            st.display = 'block';
+            st.left = `${xmin}px`;
+            st.top = `${ymin}px`;
+            st.width = `${xmax - xmin}px`;
+            st.height = `${ymax - ymin}px`;
+        } else {
+            indicator1.style.display = 'none';
+        }
+
+        if (camera.fixed_roll) camera.up.set(0, 1, 0);
+        renderer.render(scene, camera);
+
+        for (let fn of onAnimateEndOneshot) {
+            fn();
+        }
+        onAnimateEndOneshot.length = 0;
+    };
+
+    ui.loadPose = function (data) {
+        selected_body = null;
+        touched_body = null;
+        touchable_objects.length = 0;
+        touchable_bodies.length = 0;
+        object_to_body.clear();
+        for (let name of bodies.keys()) {
+            remove_body(name);
+        }
+
+        // screen
+        size_change(data.screen.width, data.screen.height);
+        if (width_input) width_input.value = data.screen.width;
+        if (height_input) height_input.value = data.screen.height;
+
+        // camera
+        set_pose_dict(camera, data.camera);
+        camera.zoom = data.camera.zoom;
+        camera.updateProjectionMatrix();
+
+        // bodies
+
+        // update `body_num`
+        const body_names = data.joints.map(x => {
+            const m = /^body_(\d+)$/.exec(x.name);
+            return m ? +m[1] : -1;
+        }).filter(x => 0 <= x);
+        if (body_names.length == 0) {
+            body_num = 0;
+        } else {
+            body_num = Math.max(...body_names) + 1;
+        }
+
+        for (let dict of data.joints) {
+            const body = add_body(dict.name, dict.x0, dict.y0, dict.z0);
+            for (let i = 0, e = Math.min(body.joints.length, dict.joints.length); i < e; ++i) {
+                set_pose_dict(body.joints[i], dict.joints[i]);
+            }
+            set_pose_dict(body.group, dict.group);
+        }
+    };
+
+    ui.getDataURL = async function () {
+        const pr = new Promise(resolve => {
+            const current_bg = scene.background;
+            set_bg(null, true);
+            onAnimateEndOneshot.push(() => {
+                resolve(renderer.domElement.toDataURL('image/png'));
+                set_bg(current_bg);
+            });
+        });
+        return await pr;
+    };
+
+    ui.getBlob = async function () {
+        const pr = new Promise(resolve => {
+            const current_bg = scene.background;
+            set_bg(null, true);
+            onAnimateEndOneshot.push(() => {
+                renderer.domElement.toBlob(blob => {
+                    resolve(blob);
+                    set_bg(current_bg);
+                });
+            });
+        });
+        return await pr;
+    };
+
+    ui.stop = function () {
+        running = false;
+        dragger_joint.deactivate();
+        dragger_joint.enabled = false;
+        dragger_body.deactivate();
+        dragger_body.enabled = false;
+        controls.enabled = false;
+    };
+
+    ui.play = function () {
+        running = true;
+        dragger_joint.activate();
+        dragger_joint.enabled = true;
+        dragger_body.activate();
+        dragger_body.enabled = true;
+        controls.enabled = true;
+        controls.handleResize();
+    };
+
+    return animate;
+}
+
+function init(ui) {
+    if (ui.save)
+        ui.save.addEventListener('click', async () => {
+            const a = document.createElement('a');
+            if (ui.getDataURL) {
+                a.href = await ui.getDataURL('image/png');
+            } else {
+                a.href = ui.canvas.toDataURL('image/png');
+            }
+            a.download = 'download.png';
+            a.click();
+            ui.notify('save success');
+        }, false);
+
+    if (ui.copy)
+        ui.copy.addEventListener('click', async () => {
+            if (globalThis.ClipboardItem === undefined) {
+                alert('`ClipboardItem` is not defined. If you are in Firefox, change about:config -> dom.events.asyncClipboard.clipboardItem to `true`.')
+                return;
+            }
+
+            async function get_blob() {
+                if (ui.getBlob) {
+                    return await ui.getBlob();
+                } else {
+                    return await new Promise(resolve => ui.canvas.toBlob(blob => resolve(blob)));
+                }
+            }
+            try {
+                const blob = await get_blob();
+                const data = new ClipboardItem({ [blob.type]: blob });
+                navigator.clipboard.write([data]);
+                ui.notify('copy success');
+            } catch (e) {
+                ui.notify(`failed to copy data: ${e.message}`, 'error');
+            }
+        }, false);
+}
+
+function array_remove(array, item) {
+    let index = array.indexOf(item);
+    while (0 <= index) {
+        array.splice(index, 1);
+        index = array.indexOf(item);
+    }
+}
+
+function get_relative_offset(target, origin) {
+    const r0 = origin.getBoundingClientRect();
+    const r1 = target.getBoundingClientRect();
+    return [r1.left - r0.left, r1.top - r0.top];
+}
+
+export { init, init_3d };

posex/requirements.txt

@@ -0,0 +1,2 @@
+flask
+pillow

posex/scripts/posex.py

@@ -0,0 +1,184 @@
+import os
+import io
+import base64
+import json
+from typing import Callable, Any
+from PIL import Image
+import gradio as gr
+from modules import scripts
+from modules.processing import StableDiffusionProcessing
+from modules.shared import opts
+from modules import extensions
+
+from common import posex_utils as posex
+
+if '__file__' in globals():
+    posex.set_save_dir(os.path.join(os.path.dirname(__file__), '..', 'saved_poses'))
+else:
+    # cf. https://stackoverflow.com/a/53293924
+    import inspect
+    posex.set_save_dir(os.path.join(os.path.dirname(inspect.getfile(lambda: None)), '..', 'saved_poses'))
+
+class Script(scripts.Script):
+
+    def title(self):
+        return 'Posex'
+    
+    def show(self, is_img2img):
+        return scripts.AlwaysVisible
+    
+    def ui(self, is_img2img):
+        id = lambda s: f'posex-{["t2i", "i2i"][is_img2img]}-{s}'
+        js = lambda s: f'globalThis["{id(s)}"]'
+        
+        ext = get_self_extension()
+        if ext is None:
+            return []
+        js_ = [f'{x.path}?{os.path.getmtime(x.path)}' for x in ext.list_files('javascript/lazyload', '.js')]
+        js_.insert(0, ext.path)
+        
+        with gr.Accordion('Posex', open=False, elem_id=id('accordion')):
+            with gr.Row():
+                enabled = gr.Checkbox(value=False, label='Send this image to ControlNet.', elem_id=id('enabled'))
+                cn_num = gr.Number(value=0, precision=0, label='Target ControlNet number', visible=self.max_cn_num()!=1)
+            
+            gr.HTML(value='\n'.join(js_), elem_id=id('js'), visible=False)
+            
+            gr.HTML(value='', elem_id=id('html'))
+            
+            with gr.Group(visible=False):
+                sink = gr.HTML(value='', visible=False) # to suppress error in javascript
+                base64 = js2py('base64', id, js, sink)
+                py2js('allposes', all_pose, id, js, sink)
+                jscall('delpose', delete_pose, id, js, sink)
+                jscall('savepose', save_pose, id, js, sink)
+                jscall('loadpose', load_pose, id, js, sink)
+            
+        return [enabled, base64, cn_num]
+
+    def process(self, p: StableDiffusionProcessing, enabled: bool = False, b64: str = '', cn_num: int = 0):
+        if not enabled or b64 is None or len(b64) == 0:
+            return
+        
+        cn_num = int(cn_num)
+        max_cn_num = self.max_cn_num()
+        if max_cn_num != 1:
+            v = (cn_num + max_cn_num) % max_cn_num
+            if v < 0:
+                raise ValueError(f'[posex] invalid ControlNet number: {cn_num}')
+            cn_num = v
+        else:
+            cn_num = 0
+        
+        binary = io.BytesIO(base64.b64decode(b64[len('data:image/png;base64,'):]))
+        image = Image.open(binary)
+        
+        opts.control_net_allow_script_control = True
+        self.set_p_value(p, 'control_net_enabled', cn_num, True)
+        self.set_p_value(p, 'control_net_input_image', cn_num, image)
+    
+    def postprocess(self, p, processed, enabled: bool = False, b64: str = '', cn_num: int = 0):
+        if not enabled or b64 is None or len(b64) == 0:
+            return
+        
+        opts.control_net_allow_script_control = False
+    
+    def set_p_value(self, p: StableDiffusionProcessing, attr: str, idx: int, v: Any):
+        value = getattr(p, attr, None)
+        if isinstance(value, list):
+            value[idx] = v
+        else:
+            # if value is None, ControlNet uses default value
+            value = [value] * self.max_cn_num()
+            value[idx] = v
+        setattr(p, attr, value)
+    
+    def max_cn_num(self):
+        if opts.data is None:
+            return 1
+        return int(opts.data.get('control_net_max_models_num', 1))
+
+
+def js2py(
+    name: str,
+    id: Callable[[str], str],
+    js: Callable[[str], str],
+    sink: gr.components.IOComponent,
+) -> gr.Textbox:
+    
+    v_set = gr.Button(elem_id=id(f'{name}_set'))
+    v = gr.Textbox(elem_id=id(name))
+    v_sink = gr.Textbox()
+    v_set.click(fn=None, _js=js(name), outputs=[v, v_sink])
+    v_sink.change(fn=None, _js=js(f'{name}_after'), outputs=[sink])    
+    return v
+
+def py2js(
+    name: str,
+    fn: Callable[[], str],
+    id: Callable[[str], str],
+    js: Callable[[str], str],
+    sink: gr.components.IOComponent,
+) -> None:
+    
+    v_fire = gr.Button(elem_id=id(f'{name}_get'))
+    v_sink = gr.Textbox()
+    v_sink2 = gr.Textbox()
+    v_fire.click(fn=wrap_api(fn), outputs=[v_sink, v_sink2])
+    v_sink2.change(fn=None, _js=js(name), inputs=[v_sink], outputs=[sink])
+
+def jscall(
+    name: str,
+    fn: Callable[[str], str],
+    id: Callable[[str], str],
+    js: Callable[[str], str],
+    sink: gr.components.IOComponent,
+) -> None:
+    
+    v_args_set = gr.Button(elem_id=id(f'{name}_args_set'))
+    v_args = gr.Textbox(elem_id=id(f'{name}_args'))
+    v_args_sink = gr.Textbox()
+    v_args_set.click(fn=None, _js=js(f'{name}_args'), outputs=[v_args, v_args_sink])
+    v_args_sink.change(fn=None, _js=js(f'{name}_args_after'), outputs=[sink])
+    
+    v_fire = gr.Button(elem_id=id(f'{name}_get'))
+    v_sink = gr.Textbox()
+    v_sink2 = gr.Textbox()
+    v_fire.click(fn=wrap_api(fn), inputs=[v_args], outputs=[v_sink, v_sink2])
+    v_sink2.change(fn=None, _js=js(name), inputs=[v_sink], outputs=[sink])
+
+
+def get_self_extension():
+    if '__file__' in globals():
+        filepath = __file__
+    else:
+        import inspect
+        filepath = inspect.getfile(lambda: None)
+    for ext in extensions.active():
+        if ext.path in filepath:
+            return ext
+
+# APIs
+
+def wrap_api(fn):
+    _r = 0
+    def f(*args, **kwargs):
+        nonlocal _r
+        _r += 1
+        v = fn(*args, **kwargs)
+        return v, str(_r)
+    return f
+
+def all_pose():
+    return json.dumps(list(posex.all_poses()))
+
+def delete_pose(args):
+    posex.delete_pose(json.loads(args)[0])
+    return ''
+
+def save_pose(args):
+    posex.save_pose(json.loads(args)[0])
+    return ''
+
+def load_pose(args):
+    return json.dumps(posex.load_pose(json.loads(args)[0]))

posex/style.css

@@ -0,0 +1,159 @@
+/*
+ * CSS for WebUI
+**/
+
+.posex_cont {
+    display: flex;
+    flex-flow: column;
+    gap: 0.5em 0;
+    width: max-content;
+    overflow: auto !important;
+    max-width: 100%;
+}
+
+.posex_cont input[type=checkbox] {
+    appearance: auto;
+}
+
+.posex_reset_cont {
+    display: flex;
+    flex-direction: row;
+    gap: 0 0.5em;
+}
+
+.posex_box {
+    display: block;
+    border: 1px solid gray;
+    padding: 0.5em 0;
+    text-decoration: none;
+    text-align: center;
+}
+
+.posex_reset_cont .posex_box {
+    flex: 1 1 0;
+}
+
+.posex_canvas_cont {
+    display: flex;
+    flex-direction: row;
+}
+
+.posex_canvas_size {
+    background-color: transparent !important;
+}
+
+.posex_setting_cont {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+}
+
+.posex_body {
+    width: max-content;
+    min-width: 100%;
+    text-align: left;    
+    border: 1px solid gray;
+    padding: 0.5em;
+}
+
+.posex_bg_cont {
+    display: flex;
+    flex-direction: row;
+    gap: 0 0.25em;
+}
+
+.posex_bg {
+    flex: 0 0 0;
+    border: 1px solid gray;
+    padding: 0.25em 1em;
+    min-width: 5em;
+}
+
+.posex_notation {
+    display: none;
+    position: absolute;
+    color: black;
+    background-color: rgba(255, 255, 255, 0.75);
+    padding: 0.1em 0.25em;
+    pointer-events: none;
+    font-size: small;
+}
+
+.posex_indicator1 {
+    display: none;
+    position: absolute;
+    outline: 1px solid white;
+    pointer-events: none;
+}
+
+.posex_indicator2 {
+    display: none;
+    position: absolute;
+    outline: 1px solid gray;
+    pointer-events: none;
+}
+
+.posex_misc_cont {
+    display: flex;
+    flex-flow: row;
+    gap: 0 0.5em;
+}
+
+.posex_misc {
+    flex: 1 1 0;
+}
+
+.posex_saved_poses {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25em;
+    font-size: small;
+}
+
+.posex_saved_poses > * {
+    margin: 0;
+    outline: 1px solid gray;
+    max-width: 128px;
+}
+
+.posex_saved_poses img {
+    max-width: 128px;
+    max-height: 128px;
+}
+
+.posex_saved_poses figcaption {
+    padding: 0 0.25em;
+    overflow-wrap: anywhere; /* Opera Android may not be able to interpret `anywhere` keyword. */
+}
+
+.posex_saved_poses .close {
+    position: absolute;
+    cursor: pointer;
+    background-color: white;
+    opacity: 0.5 !important;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    font-family: monospace;
+}
+
+.posex_saved_poses .close:hover {
+    opacity: 1.0 !important;
+}
+
+.posex_saved_poses .close2 {
+    display: none;
+    position: absolute;
+    left: 1.5em;
+    top: 0;
+}
+
+.posex_saved_poses .close:hover .close2 {
+    display: block;
+    color: white;
+    pointer-events: none;
+}

sd-webui-lora-block-weight/README.md

@@ -0,0 +1,350 @@
+# LoRA Block Weight
+- custom script for [AUTOMATIC1111's stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 
+- When applying Lora, strength can be set block by block.
+
+- [AUTOMATIC1111's stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 用のスクリプトです
+- Loraを適用する際、強さを階層ごとに設定できます
+
+### Updates/更新情報
+2023.5.24.2000(JST)
+- changed directory for presets(extentions/sd-webui-lora-block-weight/scripts/)
+- プリセットの保存フォルダがextentions/sd-webui-lora-block-weight/scripts/に変更になりました。
+
+2023.5.12.2100(JST)
+- changed syntax of lycoris
+- lycorisの書式を変更しました
+
+2023.04.14.2000(JST)
+- support LyCORIS(a1111-sd-webui-lycoris)
+- LyCORIS(a1111-sd-webui-lycoris)に対応
+
+2023.03.20.2030(JST)
+- Comment lines can now be added to presets
+- プリセットにコメント行を追加できるようになりました
+- support XYZ plot hires.fix
+- XYZプロットがhires.fixに対応しました
+
+2023.03.16.2030(JST)
+- [LyCORIS](https://github.com/KohakuBlueleaf/LyCORIS)に対応しました
+- Support [LyCORIS](https://github.com/KohakuBlueleaf/LyCORIS)
+
+別途[LyCORIS Extention](https://github.com/KohakuBlueleaf/a1111-sd-webui-locon)が必要です。
+For use LyCORIS, [Extension](https://github.com/KohakuBlueleaf/a1111-sd-webui-locon) for LyCORIS needed.
+
+日本語説明は[後半](#概要)後半にあります。
+
+# Overview
+Lora is a powerful tool, but it is sometimes difficult to use and can affect areas that you do not want it to affect. This script allows you to set the weights block-by-block. Using this script, you may be able to get the image you want.
+
+## Usage
+Place lora_block_weight.py in the script folder.  
+Or you can install from Extentions tab in web-ui. When installing, please restart web-ui.bat.
+
+### Active  
+Check this box to activate it.
+
+### Prompt
+In the prompt box, enter the Lora you wish to use as usual. Enter the weight or identifier by typing ":" after the strength value. The identifier can be edited in the Weights setting.  
+```
+<lora:"lora name":1:0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0>.  
+<lora:"lora name":1:0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0>.  (a1111-sd-webui-locon, etc.)
+<lora:"lora name":1:IN02>  
+<lyco:"lora name":1:1:lbw=IN02>  (a1111-sd-webui-lycoris)
+<lyco:"lora name":1:1:lbw=1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0>  (a1111-sd-webui-lycoris)
+```
+For LyCORIS using a1111-sd-webui-lycoris, syntax is different.
+`lbw=IN02` is used and follow lycoirs syntax for others such as unet or else.
+a1111-sd-webui-lycoris is under under development, so this syntax might be changed. 
+
+Lora strength is in effect and applies to the entire Blocks.  
+It is case-sensitive.
+For LyCORIS, full-model blobks used,so you need to input 26 weights.
+You can use weight for LoRA, in this case, the weight of blocks not in LoRA is set to 1.　　
+If the above format is not used, the preset will treat it as a comment line.
+
+### Weights Setting
+Enter the identifier and weights.
+Unlike the full model, Lora is divided into 17 blocks, including the encoder. Therefore, enter 17 values.
+BASE, IN, OUT, etc. are the blocks equivalent to the full model.
+
+|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|  
+|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|  
+|BASE|IN01|IN02|IN04|IN05|IN07|IN08|MID|OUT03|OUT04|OUT05|OUT06|OUT07|OUT08|OUT09|OUT10|OUT11|
+
+LyCORIS, etc.  
+|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|  
+|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|
+|BASE|IN00|IN01|IN02|IN03|IN04|IN05|IN06|IN07|IN08|IN09|IN10|IN11|MID|OUT00|OUT01|OUT02|OUT03|OUT04|OUT05|OUT06|OUT07|OUT08|OUT09|OUT10|OUT11|
+
+### Special Values (Random)
+Basically, a numerical value must be entered to work correctly, but by entering `R` and `U`, a random value will be entered.  
+R : Numerical value with 3 decimal places from 0~1
+U : 3 decimal places from -1.5 to 1.5
+
+For example, if ROUT:1,1,1,1,1,1,1,1,R,R,R,R,R,R,R,R,R  
+Only the OUT blocks is randomized.
+The randomized values will be displayed on the command prompt screen when the image is generated.
+
+### Special Values (Dynamic)
+The special value `X` may also be included to use a dynamic weight specified in the LoRA syntax. This is activated by including an additional weight value after the specified `Original Weight`.
+
+For example, if ROUT:X,1,1,1,1,1,1,1,1,1,1,1,X,X,X,X,X and you had a prompt containing \<lora:my_lore:0.5:ROUT:0.7\>. The `X` weights in ROUT would be replaced with `0.7` at runtime.
+
+> NOTE: If you select an `Original Weight` tag that has a dynamic weight (`X`) and you do not specify a value in the LoRA syntax, it will default to `1`.
+
+### Save Presets
+
+The "Save Presets" button saves the text in the current text box. It is better to use a text editor, so use the "Open TextEditor" button to open a text editor, edit the text, and reload it.  
+The text box above the Weights setting is a list of currently available identifiers, useful for copying and pasting into an XY plot. 17 identifiers are required to appear in the list.
+
+### Fun Usage
+Used in conjunction with the XY plot, it is possible to examine the impact of each level of the hierarchy.  
+![xy_grid-0017-4285963917](https://user-images.githubusercontent.com/122196982/215341315-493ce5f9-1d6e-4990-a38c-6937e78c6b46.jpg)
+
+The setting values are as follows.  
+NOT:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0  
+ALL:1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1  
+INS:1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0  
+IND:1,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0  
+INALL:1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0  
+MIDD:1,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0  
+OUTD:1,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0  
+OUTS:1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1  
+OUTALL:1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1 
+
+## XYZ Plotting Function
+The optimal value can be searched by changing the value of each layer individually.
+### Usage 
+Check "Active" to activate the function. If Script (such as XYZ plot in Automatic1111) is enabled, it will take precedence.
+Hires. fix is not supported. batch size is fixed to 1. batch count should be set to 1.  
+Enter XYZ as the identifier of the LoRA that you want to change. It will work even if you do not enter a value corresponding to XYZ in the preset. If a value corresponding to XYZ is entered, that value will be used as the initial value.  
+Inputting ZYX, inverted value will be automatically inputted.
+This feature enables to match weights of two LoRAs.  
+Inputing XYZ for LoRA1 and ZYX for LoRA2, you get,  
+LoRA1 1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0  
+LoRA2 0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1    
+### Axis type
+#### values
+Sets the weight of the hierarchy to be changed. Enter the values separated by commas. 0,0.25,0.5,0.75,1", etc.
+
+#### Block ID
+If a block ID is entered, only that block will change to the value specified by value. As with the other types, use commas to separate them. Multiple blocks can be changed at the same time by separating them with a space or hyphen. The initial NOT will invert the change, so NOT IN09-OUT02 will change all blocks except IN09-OUT02.
+
+#### seed
+Seed changes, and is intended to be specified on the Z-axis.
+
+#### Original Weights
+Specify the initial value to change the weight of each block. If Original Weight is enabled, the value entered for XYZ is ignored.
+
+### Input example
+X : value, value : 1,0.25,0.5,0.75,1  
+Y : Block ID, value : BASE,IN01-IN08,IN05-OUT05,OUT03-OUT11,NOT OUT03-OUT11  
+Z : Original Weights, Value : NONE,ALL0.5,ALL  
+
+In this case, an XY plot is created corresponding to the initial values NONE,ALL0.5,ALL.
+If you select Seed for Z and enter -1,-1,-1, the XY plot will be created 3 times with different seeds.
+
+### Effective Block Analyzer
+This function check which layers are working well. The effect of the block is visualized and quantified by setting the intensity of the other bocks to 1, decreasing the intensity of the block you want to examine, and taking the difference.  
+#### Range
+If you enter 0.5, 1, all initial values are set to 1, and only the target block is calculated as 0.5. Normally, 0.5 will make a difference, but some LoRAs may have difficulty making a difference, in which case, set 0.5 to 0 or a negative value.
+
+#### settings
+##### diff color
+Specify the background color of the diff file.
+
+##### chnage X-Y
+Swaps the X and Y axes. By default, Block is assigned to the Y axis.
+
+##### Threshold
+Sets the threshold at which a change is recognized when calculating the difference. Basically, the default value is fine, but if you want to detect subtle differences in color, etc., lower the value.
+
+#### Blocks
+Enter the blocks to be examined, using the same format as for XYZ plots.
+
+For more information on block-by-block merging, see
+
+https://github.com/bbc-mc/sdweb-merge-block-weighted-gui
+
+# 概要
+Loraは強力なツールですが、時に扱いが難しく、影響してほしくないところにまで影響がでたりします。このスクリプトではLoraを適用する際、適用度合いをU-Netの階層ごとに設定することができます。これを使用することで求める画像に近づけることができるかもしれません。
+
+## 使い方
+scriptフォルダにlora_block_weightを置いてください。  インストール時はWeb-ui.batを再起動をしてください。
+
+### Active  
+ここにチェックを入れることで動作します。
+
+### プロンプト
+プロンプト画面では通常通り使用したいLoraを記入してください。その際、強さの値の次に「:」を入力しウェイトか識別子を入力します。識別子はWeights setting で編集します。  
+```
+<lora:"lora name":1:0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0>.  
+<lora:"lora name":1:0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0>.  (a1111-sd-webui-locon, etc.)
+<lyco:"lora name":1:1:lbw=IN02>  (a1111-sd-webui-lycoris)
+<lyco:"lora name":1:1:lbw=1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0>  (a1111-sd-webui-lycoris)
+```
+Loraの強さは有効で、階層全体にかかります。大文字と小文字は区別されます。
+LyCORISに対してLoRAのプリセットも使用できますが、その場合LoRAで使われていない階層のウェイトは1に設定されます。  
+上記の形式になっていない場合プリセットではコメント行として扱われます。
+a1111-sd-webui-lycoris版のLyCORISを使用する場合構文が異なります。`lbw=IN02`を使って下さい。順番は問いません。その他の書式はlycorisの書式にしたがって下さい。詳しくはLyCORISのドキュメントを参照して下さい。識別子を入力して下さい。a1111-sd-webui-lycoris版は開発途中のためこの構文は変更される可能性があります。
+
+### Weights setting
+識別子とウェイトを入力します。
+フルモデルと異なり、Loraではエンコーダーを含め17のブロックに分かれています。よって、17個の数値を入力してください。
+BASE,IN,OUTなどはフルモデル相当の階層です。
+
+
+|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|  
+|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|
+|BASE|IN01|IN02|IN04|IN05|IN07|IN08|MID|OUT03|OUT04|OUT05|OUT06|OUT07|OUT08|OUT09|OUT10|OUT11|
+
+LyCORISなどの場合
+|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|
+|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|
+|BASE|IN00|IN01|IN02|IN03|IN04|IN05|IN06|IN07|IN08|IN09|IN10|IN11|MID|OUT00|OUT01|OUT02|OUT03|OUT04|OUT05|OUT06|OUT07|OUT08|OUT09|OUT10|OUT11|
+
+### 特別な値
+基本的には数値を入れないと正しく動きませんが R および U を入力することでランダムな数値が入力されます。  
+R : 0~1までの小数点3桁の数値
+U : -1.5～1.5までの小数点3桁の数値
+
+例えば　ROUT:1,1,1,1,1,1,1,1,R,R,R,R,R,R,R,R,R  とすると  
+OUT層のみダンダム化されます  
+ランダム化された数値は画像生成時にコマンドプロンプト画面に表示されます
+
+saveボタンで現在のテキストボックスのテキストを保存できます。テキストエディタを使った方がいいので、open Texteditorボタンでテキストエディタ開き、編集後reloadしてください。  
+Weights settingの上にあるテキストボックスは現在使用できる識別子の一覧です。XYプロットにコピペするのに便利です。17個ないと一覧に表示されません。
+
+### 楽しい使い方
+XY plotと併用することで各階層の影響を調べることが可能になります。  
+![xy_grid-0017-4285963917](https://user-images.githubusercontent.com/122196982/215341315-493ce5f9-1d6e-4990-a38c-6937e78c6b46.jpg)
+
+設定値は以下の通りです。  
+NOT:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0  
+ALL:1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1  
+INS:1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0  
+IND:1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0  
+INALL:1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0  
+MIDD:1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0  
+OUTD:1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0  
+OUTS:1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1  
+OUTALL:1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1 
+
+## XYZ プロット機能
+各層の値を個別に変化させることで最適値を総当たりに探せます。
+### 使い方 
+Activeをチェックすることで動作します。 Script(Automatic1111本体のXYZプロットなど)が有効になっている場合そちらが優先されます。noneを選択してください。
+Hires. fixには対応していません。Batch sizeは1に固定されます。Batch countは1に設定してください。  
+変化させたいLoRAの識別子にXYZと入力します\<lora:"lora名":1:XYZ>。 プリセットにXYZに対応する値を入力していなくても動作します。その場合すべてのウェイトが0の状態からスタートします。XYZに対応する値が入力されている場合はその値が初期値になります。  
+ZYXと入力するとXYZとは反対の値が入力されます。これはふたつのLoRAのウェイトを合わせる際に有効です。
+例えばLoRA1にXYZ,LoRA2にZYXと入力すると、  
+LoRA1 1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0  
+LoRA2 0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1    
+となります。
+### 軸タイプ
+#### values
+変化させる階層のウェイトを設定します。カンマ区切りで入力してください。「0,0.25,0.5,0.75,1」など。
+
+#### Block ID
+ブロックIDを入力すると、そのブロックのみvalueで指定した値に変わります。他のタイプと同様にカンマで区切ります。スペースまたはハイフンで区切ることで複数のブロックを同時に変化させることもできます。最初にNOTをつけることで変化対象が反転します。NOT IN09-OUT02とすると、IN09-OUT02以外が変化します。NOTは最初に入力しないと効果がありません。IN08-M00-OUT03は繋がっています。
+
+#### Seed
+シードが変わります。Z軸に指定することを想定��ています。
+
+#### Original Weights
+各ブロックのウェイトを変化させる初期値を指定します。プリセットに登録されている識別子を入力してください。Original Weightが有効になっている場合XYZに入力された値は無視されます。
+
+### 入力例
+X : value, 値 : 1,0.25,0.5,0.75,1  
+Y : Block ID, 値 : BASE,IN01-IN08,IN05-OUT05,OUT03-OUT11,NOT OUT03-OUT11  
+Z : Original Weights, 値 : NONE,ALL0.5,ALL  
+
+この場合、初期値NONE,ALL0.5,ALLに対応したXY plotが作製されます。
+ZにSeedを選び、-1,-1,-1を入力すると、異なるseedでXY plotを3回作製します。
+
+### Effective Block Analyzer
+どの階層が良く効いているかを判別する機能です。対象の階層以外の強度を1にして、調べたい階層の強度を下げ、差分を取ることで階層の効果を可視化・数値化します。  
+#### Range
+0.5, 1　と入力した場合、初期値がすべて1になり、対象のブロックのみ0.5として計算が行われます。普通は0.5で差がでますが、LoRAによっては差が出にくい場合があるので、その場合は0.5を0あるいはマイナスの値に設定してください。
+
+#### 設定
+##### diff color
+差分ファイルの背景カラーを指定します。
+
+##### chnage X-Y
+X軸とY軸を入れ替えます。デフォルトではY軸にBlockが割り当てられています。
+
+##### Threshold
+差分を計算する際の変化したと認識される閾値を設定します。基本的にはデフォルト値で問題ありませんが、微妙な色の違いなどを検出したい場合は値を下げて下さい。
+
+#### Blocks
+調べたい階層を入力します。XYZプロットと同じ書式が使用可能です。
+
+階層別マージについては下記を参照してください
+
+### elemental
+詳細は[こちら](https://github.com/hako-mikan/sd-webui-supermerger/blob/main/elemental_ja.md)を参照して下さい。
+#### 使い方
+Elementaタブにて階層指定と同じように識別子を設定します。識別子は階層の識別子の後に入力します。
+\<lora:"lora名":1:IN04:ATTNON>
+ATTNON:
+
+書式は  
+識別子:階層指定:要素指定:ウェイト  
+のように指定します。要素は部分一致で判定されます。attn1ならattn1のみ、attnならattn1及びattn2が反応します。階層、要素共に空白で区切ると複数指定できます。  
+print changeをオンにすると反応した要素がコマンドプロンプト上に表示されます。
+
+ALL0:::0  
+はすべての要素のウェイトをゼロに設定します。  
+IN1:IN00-IN11::1  
+はINのすべての要素を1にします  
+ATTNON::attn:1
+はすべての階層のattnを1にします。
+
+#### XYZプロット
+XYZプロットのelementsの項ではカンマ区切りでXYZプロットが可能になります。
+その場合は  
+\<lora:"lora名":1:XYZ:XYZ>  
+と指定して下さい。
+elements  
+の項に  
+IN05-OUT05:attn:0,IN05-OUT05:attn:0.5,IN05-OUT05:attn:1  
+と入力して走らせるとIN05からOUT05までのattnのみを変化させることができます。
+この際、XYZの値を変更することで初期値を変更できます。デフォルトではelementalのXYZはXYZ:::1となっており、これは全階層、全要素を1にしますが、ここをXYZ:encoder::1とするとテキストエンコーダーのみを有効にした状態で評価ができます。
+
+https://github.com/bbc-mc/sdweb-merge-block-weighted-gui
+
+### updates/更新情報
+2023.02.07 1250(JST)
+- Changed behavior when XYZ plot Active (Script of the main UI is prioritized).
+
+2023.02.06 2000(JST)
+- Feature added: XYZ plotting is added.
+
+2023.01.31 0200(JST)
+- Feature added: Random feature is added
+- Fixed: Weighting now works for negative values.
+
+2023.02.16 2040(JST)
+- Original Weight をxやyに設定できない問題を解決しました
+- Effective Weight Analyzer選択時にXYZのXやYがValuesとBlockIdになっていないとエラーになる問題を解決しました
+
+2023.02.08 2120(JST)
+- 階層適応した後通常使用する際、階層適応が残る問題を解決しました
+- 効果のある階層をワンクリックで判別する機能を追加しました
+
+2023.02.08 0050(JST)
+- 一部環境でseedが固定されない問題を解決しました
+
+2023.02.07 2015(JST)
+- マイナスのウェイトが正常に働かない問題を修正しました
+
+2023.02.07 1250(JST)
+- XYZプロットActive時の動作を変更しました(本体のScriptが優先されるようになります)
+
+2023.02.06 2000(JST)
+- 機能追加：XYZプロット機能を追加しました
+
+2023.01.31 0200(JST)
+- 機能追加：ランダム機能を追加しました
+- 機能修正：ウェイトがマイナスにも効くようになりました

sd-webui-lora-block-weight/scripts/elempresets.txt

@@ -0,0 +1,7 @@
+ATTNDEEPON:IN05-OUT05:attn:1
+
+ATTNDEEPOFF:IN05-OUT05:attn:0
+
+PROJDEEPOFF:IN05-OUT05:proj:0
+
+XYZ:::1

sd-webui-lora-block-weight/scripts/lbwpresets.txt

@@ -0,0 +1,10 @@
+NONE:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+ALL:1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+INS:1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0
+IND:1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0
+INALL:1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0
+MIDD:1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0
+OUTD:1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0
+OUTS:1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1
+OUTALL:1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1
+ALL0.5:0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5

sd-webui-lora-block-weight/scripts/lora_block_weight.py

@@ -0,0 +1,744 @@
+import cv2
+import os
+import gc
+import re
+import sys
+import torch
+import shutil
+import math
+import numpy as np
+import gradio as gr
+import os.path
+import random
+from pprint import pprint
+import modules.ui
+import modules.scripts as scripts
+from PIL import Image, ImageFont, ImageDraw
+import modules.shared as shared
+from modules import devices, sd_models, images,extra_networks
+from modules.shared import opts, state
+from modules.processing import process_images, Processed
+
+lxyz = ""
+lzyx = ""
+prompts = ""
+xyelem = ""
+princ = False
+
+BLOCKID=["BASE","IN00","IN01","IN02","IN03","IN04","IN05","IN06","IN07","IN08","IN09","IN10","IN11","M00","OUT00","OUT01","OUT02","OUT03","OUT04","OUT05","OUT06","OUT07","OUT08","OUT09","OUT10","OUT11"]
+
+BLOCKS=["encoder",
+"diffusion_model_input_blocks_0_",
+"diffusion_model_input_blocks_1_",
+"diffusion_model_input_blocks_2_",
+"diffusion_model_input_blocks_3_",
+"diffusion_model_input_blocks_4_",
+"diffusion_model_input_blocks_5_",
+"diffusion_model_input_blocks_6_",
+"diffusion_model_input_blocks_7_",
+"diffusion_model_input_blocks_8_",
+"diffusion_model_input_blocks_9_",
+"diffusion_model_input_blocks_10_",
+"diffusion_model_input_blocks_11_",
+"diffusion_model_middle_block_",
+"diffusion_model_output_blocks_0_",
+"diffusion_model_output_blocks_1_",
+"diffusion_model_output_blocks_2_",
+"diffusion_model_output_blocks_3_",
+"diffusion_model_output_blocks_4_",
+"diffusion_model_output_blocks_5_",
+"diffusion_model_output_blocks_6_",
+"diffusion_model_output_blocks_7_",
+"diffusion_model_output_blocks_8_",
+"diffusion_model_output_blocks_9_",
+"diffusion_model_output_blocks_10_",
+"diffusion_model_output_blocks_11_"]
+
+loopstopper = True
+
+ATYPES =["none","Block ID","values","seed","Original Weights","elements"]
+
+DEF_WEIGHT_PRESET = "\
+NONE:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0\n\
+ALL:1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1\n\
+INS:1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0\n\
+IND:1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0\n\
+INALL:1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0\n\
+MIDD:1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0\n\
+OUTD:1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0\n\
+OUTS:1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1\n\
+OUTALL:1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1\n\
+ALL0.5:0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5"
+
+class Script(modules.scripts.Script):   
+    def title(self):
+        return "LoRA Block Weight"
+
+    def show(self, is_img2img):
+        return modules.scripts.AlwaysVisible
+
+    def ui(self, is_img2img):
+        import lora
+        LWEIGHTSPRESETS = DEF_WEIGHT_PRESET
+
+        runorigin = scripts.scripts_txt2img.run
+        runorigini = scripts.scripts_img2img.run
+
+        path_root = scripts.basedir()
+        extpath = os.path.join(path_root,"extensions","sd-webui-lora-block-weight","scripts", "lbwpresets.txt")
+        extpathe = os.path.join(path_root,"extensions","sd-webui-lora-block-weight","scripts", "elempresets.txt")
+        filepath = os.path.join(path_root,"scripts", "lbwpresets.txt")
+        filepathe = os.path.join(path_root,"scripts", "elempresets.txt")
+
+        if os.path.isfile(filepath) and not os.path.isfile(extpath):
+            shutil.move(filepath,extpath)
+    
+        if os.path.isfile(filepathe) and not os.path.isfile(extpathe):
+            shutil.move(filepathe,extpathe)
+
+        lbwpresets=""
+
+        try:
+            with open(extpath,encoding="utf-8") as f:
+                lbwpresets = f.read()
+        except OSError as e:
+                lbwpresets=LWEIGHTSPRESETS
+                if not os.path.isfile(extpath):
+                    try:
+                        with open(extpath,mode = 'w',encoding="utf-8") as f:
+                            f.write(lbwpresets)
+                    except:
+                        pass
+
+        try:
+            with open(extpathe,encoding="utf-8") as f:
+                elempresets = f.read()
+        except OSError as e:
+                elempresets=ELEMPRESETS
+                if not os.path.isfile(extpathe):
+                    try:
+                        with open(extpathe,mode = 'w',encoding="utf-8") as f:
+                            f.write(elempresets)
+                    except:
+                        pass
+
+        loraratios=lbwpresets.splitlines()
+        lratios={}
+        for i,l in enumerate(loraratios):
+            if ":" not in l or not (l.count(",") == 16 or l.count(",") == 25) : continue
+            lratios[l.split(":")[0]]=l.split(":")[1]
+        ratiostags = [k for k in lratios.keys()]
+        ratiostags = ",".join(ratiostags)
+
+        with gr.Accordion("LoRA Block Weight",open = False):
+            with gr.Row():
+                with gr.Column(min_width = 50, scale=1):
+                    lbw_useblocks =  gr.Checkbox(value = True,label="Active",interactive =True,elem_id="lbw_active")
+                with gr.Column(scale=5):
+                    bw_ratiotags= gr.TextArea(label="",value=ratiostags,visible =True,interactive =True,elem_id="lbw_ratios") 
+            with gr.Accordion("XYZ plot",open = False):
+                gr.HTML(value='<p style= "word-wrap:break-word;">changeable blocks : BASE,IN00,IN01,IN02,IN03,IN04,IN05,IN06,IN07,IN08,IN09,IN10,IN11,M00,OUT00,OUT01,OUT02,OUT03,OUT04,OUT05,OUT06,OUT07,OUT08,OUT09,OUT10,OUT11</p>')
+                xyzsetting = gr.Radio(label = "Active",choices = ["Disable","XYZ plot","Effective Block Analyzer"], value ="Disable",type = "index") 
+                with gr.Row(visible = False) as esets:
+                    diffcol = gr.Radio(label = "diff image color",choices = ["black","white"], value ="black",type = "value",interactive =True) 
+                    revxy = gr.Checkbox(value = False,label="change X-Y",interactive =True,elem_id="lbw_changexy")
+                    thresh = gr.Textbox(label="difference threshold",lines=1,value="20",interactive =True,elem_id="diff_thr")
+                xtype = gr.Dropdown(label="X Types         ", choices=[x for x in ATYPES], value=ATYPES [2],interactive =True,elem_id="lbw_xtype")
+                xmen = gr.Textbox(label="X Values         ",lines=1,value="0,0.25,0.5,0.75,1",interactive =True,elem_id="lbw_xmen")
+                ytype = gr.Dropdown(label="Y Types         ", choices=[y for y in ATYPES], value=ATYPES [1],interactive =True,elem_id="lbw_ytype")    
+                ymen = gr.Textbox(label="Y Values         " ,lines=1,value="IN05-OUT05",interactive =True,elem_id="lbw_ymen")
+                ztype = gr.Dropdown(label="Z type         ", choices=[z for z in ATYPES], value=ATYPES[0],interactive =True,elem_id="lbw_ztype")    
+                zmen = gr.Textbox(label="Z values         ",lines=1,value="",interactive =True,elem_id="lbw_zmen")
+
+                exmen = gr.Textbox(label="Range",lines=1,value="0.5,1",interactive =True,elem_id="lbw_exmen",visible = False) 
+                eymen = gr.Textbox(label="Blocks" ,lines=1,value="BASE,IN00,IN01,IN02,IN03,IN04,IN05,IN06,IN07,IN08,IN09,IN10,IN11,M00,OUT00,OUT01,OUT02,OUT03,OUT04,OUT05,OUT06,OUT07,OUT08,OUT09,OUT10,OUT11",interactive =True,elem_id="lbw_eymen",visible = False)  
+                ecount = gr.Number(value=1, label="number of seed", interactive=True, visible = True)           
+
+            with gr.Accordion("Weights setting",open = True):
+                with gr.Row():
+                    reloadtext = gr.Button(value="Reload Presets",variant='primary',elem_id="lbw_reload")
+                    reloadtags = gr.Button(value="Reload Tags",variant='primary',elem_id="lbw_reload")
+                    savetext = gr.Button(value="Save Presets",variant='primary',elem_id="lbw_savetext")
+                    openeditor = gr.Button(value="Open TextEditor",variant='primary',elem_id="lbw_openeditor")
+                lbw_loraratios = gr.TextArea(label="",value=lbwpresets,visible =True,interactive  = True,elem_id="lbw_ratiospreset")      
+            
+            with gr.Accordion("Elemental",open = False):  
+                with gr.Row():
+                    e_reloadtext = gr.Button(value="Reload Presets",variant='primary',elem_id="lbw_reload")
+                    e_savetext = gr.Button(value="Save Presets",variant='primary',elem_id="lbw_savetext")
+                    e_openeditor = gr.Button(value="Open TextEditor",variant='primary',elem_id="lbw_openeditor")
+                elemsets = gr.Checkbox(value = False,label="print change",interactive =True,elem_id="lbw_print_change")
+                elemental = gr.TextArea(label="Identifer:BlockID:Elements:Ratio,...,separated by empty line ",value = elempresets,interactive =True,elem_id="element") 
+
+                d_true = gr.Checkbox(value = True,visible = False)
+                d_false = gr.Checkbox(value = False,visible = False)
+        
+        import subprocess
+        def openeditors(b):
+            path = extpath if b else extpathe
+            subprocess.Popen(['start', path], shell=True)
+                  
+        def reloadpresets(isweight):
+            if isweight:
+                try:
+                    with open(extpath,encoding="utf-8") as f:
+                        return f.read()
+                except OSError as e:
+                    pass
+            else:
+                try:
+                    with open(extpath,encoding="utf-8") as f:
+                        return f.read()
+                except OSError as e:
+                    pass
+
+        def tagdicter(presets):
+            presets=presets.splitlines()
+            wdict={}
+            for l in presets:
+                if ":" not in l or not (l.count(",") == 16 or l.count(",") == 25) : continue
+                w=[]
+                if ":" in l :
+                    key = l.split(":",1)[0]
+                    w = l.split(":",1)[1]
+                if len([w for w in w.split(",")]) == 17 or len([w for w in w.split(",")]) ==26:
+                    wdict[key.strip()]=w
+            return ",".join(list(wdict.keys()))
+
+        def savepresets(text,isweight):
+            if isweight:
+                with open(extpath,mode = 'w',encoding="utf-8") as f:
+                    f.write(text)
+            else:
+                with open(extpathe,mode = 'w',encoding="utf-8") as f:
+                    f.write(text)
+
+        reloadtext.click(fn=reloadpresets,inputs=[d_true],outputs=[lbw_loraratios])
+        reloadtags.click(fn=tagdicter,inputs=[lbw_loraratios],outputs=[bw_ratiotags])
+        savetext.click(fn=savepresets,inputs=[lbw_loraratios,d_true],outputs=[])
+        openeditor.click(fn=openeditors,inputs=[d_true],outputs=[])
+
+        e_reloadtext.click(fn=reloadpresets,inputs=[d_false],outputs=[elemental])
+        e_savetext.click(fn=savepresets,inputs=[elemental,d_false],outputs=[])
+        e_openeditor.click(fn=openeditors,inputs=[d_false],outputs=[])
+
+        def urawaza(active):
+            if active > 0:
+                for obj in scripts.scripts_txt2img.alwayson_scripts:
+                    if "lora_block_weight" in obj.filename:
+                        scripts.scripts_txt2img.selectable_scripts.append(obj)
+                        scripts.scripts_txt2img.titles.append("LoRA Block Weight")
+                for obj in scripts.scripts_img2img.alwayson_scripts:
+                    if "lora_block_weight" in obj.filename:
+                        scripts.scripts_img2img.selectable_scripts.append(obj)
+                        scripts.scripts_img2img.titles.append("LoRA Block Weight")
+                scripts.scripts_txt2img.run = newrun
+                scripts.scripts_img2img.run = newrun
+                if active == 1:return [*[gr.update(visible = True) for x in range(6)],*[gr.update(visible = False) for x in range(4)]]
+                else:return [*[gr.update(visible = False) for x in range(6)],*[gr.update(visible = True) for x in range(4)]]
+            else:
+                scripts.scripts_txt2img.run = runorigin
+                scripts.scripts_img2img.run = runorigini
+                return [*[gr.update(visible = True) for x in range(6)],*[gr.update(visible = False) for x in range(4)]]
+
+        xyzsetting.change(fn=urawaza,inputs=[xyzsetting],outputs =[xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,esets])
+
+        return lbw_loraratios,lbw_useblocks,xyzsetting,xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,diffcol,thresh,revxy,elemental,elemsets
+
+    def process(self, p, loraratios,useblocks,xyzsetting,xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,diffcol,thresh,revxy,elemental,elemsets):
+        #print("self =",self,"p =",p,"presets =",loraratios,"useblocks =",useblocks,"xyzsettings =",xyzsetting,"xtype =",xtype,"xmen =",xmen,"ytype =",ytype,"ymen =",ymen,"ztype =",ztype,"zmen =",zmen)
+        #Note that this does not use the default arg syntax because the default args are supposed to be at the end of the function
+        if(loraratios == None):
+            loraratios = DEF_WEIGHT_PRESET
+        if(useblocks == None):
+            useblocks = True
+            
+        if useblocks:
+            loraratios=loraratios.splitlines()
+            elemental = elemental.split("\n\n") if elemental is not None else []
+            lratios={}
+            elementals={}
+            for l in loraratios:
+                if ":" not in l or not (l.count(",") == 16 or l.count(",") == 25) : continue
+                l0=l.split(":",1)[0]
+                lratios[l0.strip()]=l.split(":",1)[1]
+            for e in elemental:
+                e0=e.split(":",1)[0]
+                elementals[e0.strip()]=e.split(":",1)[1]
+            if elemsets : print(xyelem)
+            if xyzsetting and "XYZ" in p.prompt:
+                lratios["XYZ"] = lxyz
+                lratios["ZYX"] = lzyx
+            if xyelem != "":
+                if "XYZ" in elementals.keys():
+                    elementals["XYZ"] = elementals["XYZ"] + ","+ xyelem
+                else:
+                    elementals["XYZ"] = xyelem
+            self.lratios = lratios
+            self.elementals = elementals
+            global princ
+            princ = elemsets
+        return
+    
+    def before_process_batch(self, p, loraratios,useblocks,xyzsetting,xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,diffcol,thresh,revxy,elemental,elemsets,**kwargs):
+        if useblocks:
+            global prompts
+            prompts = kwargs["prompts"].copy()
+
+    def process_batch(self, p, loraratios,useblocks,xyzsetting,xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,diffcol,thresh,revxy,elemental,elemsets,**kwargs):
+        if useblocks:
+            o_prompts = [p.prompt]
+            for prompt in prompts:
+                if "<lora" in prompt or "<lyco" in prompt:
+                    o_prompts = prompts.copy()
+            loradealer(o_prompts ,self.lratios,self.elementals)
+
+    def postprocess(self, p, processed, *args):
+        import lora
+        lora.loaded_loras.clear()
+        global lxyz,lzyx,xyelem             
+        lxyz = lzyx = xyelem = ""
+        gc.collect()
+
+    def run(self,p,presets,useblocks,xyzsetting,xtype,xmen,ytype,ymen,ztype,zmen,exmen,eymen,ecount,diffcol,thresh,revxy,elemental,elemsets):
+        if xyzsetting >0:
+            import lora
+            loraratios=presets.splitlines()
+            lratios={}
+            for l in loraratios:
+                if ":" not in l or not (l.count(",") == 16 or l.count(",") == 25) : continue
+                l0=l.split(":",1)[0]
+                lratios[l0.strip()]=l.split(":",1)[1]
+
+            if "XYZ" in p.prompt:
+                base = lratios["XYZ"] if "XYZ" in lratios.keys() else "1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1"
+            else: return
+
+            if xyzsetting > 1: 
+                xmen,ymen = exmen,eymen
+                xtype,ytype = "values","ID"
+                ebase = xmen.split(",")[1]
+                ebase = [ebase.strip()]*26
+                base = ",".join(ebase)
+                ztype = ""
+                if ecount > 1:
+                    ztype = "seed"
+                    zmen = ",".join([str(random.randrange(4294967294)) for x in range(int(ecount))])
+
+            #ATYPES =["none","Block ID","values","seed","Base Weights"]
+
+            def dicedealer(am):
+                for i,a in enumerate(am):
+                    if a =="-1": am[i] = str(random.randrange(4294967294))
+                print(f"the die was thrown : {am}")
+
+            if p.seed == -1: p.seed = str(random.randrange(4294967294))
+                
+            #print(f"xs:{xmen},ys:{ymen},zs:{zmen}")
+
+            def adjuster(a,at):
+                if "none" in at:a = ""
+                a = [a.strip() for a in a.split(',')]
+                if "seed" in at:dicedealer(a)
+                return a
+            
+            xs = adjuster(xmen,xtype)
+            ys = adjuster(ymen,ytype)
+            zs = adjuster(zmen,ztype)
+
+            ids = alpha =seed = ""
+            p.batch_size = 1
+
+            print(f"xs:{xs},ys:{ys},zs:{zs}")
+
+            images = []
+
+            def weightsdealer(alpha,ids,base):
+                blockid17=["BASE","IN01","IN02","IN04","IN05","IN07","IN08","M00","OUT03","OUT04","OUT05","OUT06","OUT07","OUT08","OUT09","OUT10","OUT11"]
+                blockid26=["BASE","IN00","IN01","IN02","IN03","IN04","IN05","IN06","IN07","IN08","IN09","IN10","IN11","M00","OUT00","OUT01","OUT02","OUT03","OUT04","OUT05","OUT06","OUT07","OUT08","OUT09","OUT10","OUT11"]
+                #print(f"weights from : {base}")
+                ids = [z.strip() for z in ids.split(' ')]
+                weights_t = [w.strip() for w in base.split(',')]
+                blockid = blockid17 if len(weights_t) ==17 else blockid26
+                if ids[0]!="NOT":
+                    flagger=[False]*len(weights_t)
+                    changer = True
+                else:
+                    flagger=[True]*len(weights_t)
+                    changer = False
+                for id in ids:
+                    if id =="NOT":continue
+                    if "-" in id:
+                        it = [it.strip() for it in id.split('-')]
+                        if  blockid.index(it[1]) > blockid.index(it[0]):
+                            flagger[blockid.index(it[0]):blockid.index(it[1])+1] = [changer]*(blockid.index(it[1])-blockid.index(it[0])+1)
+                        else:
+                            flagger[blockid.index(it[1]):blockid.index(it[0])+1] = [changer]*(blockid.index(it[0])-blockid.index(it[1])+1)
+                    else:
+                        flagger[blockid.index(id)] =changer    
+                for i,f in enumerate(flagger):
+                    if f:weights_t[i]=alpha
+                outext = ",".join(weights_t)
+                #print(f"weights changed: {outext}")
+                return outext
+
+            def xyzdealer(a,at):
+                nonlocal ids,alpha,p,base,c_base
+                if "ID" in at:return
+                if "values" in at:alpha = a
+                if "seed" in at:
+                    p.seed = int(a)
+                if "Weights" in at:base =c_base = lratios[a]
+                if "elements" in at:
+                    global xyelem
+                    xyelem = a
+
+            grids = []
+            images =[]
+
+            totalcount = len(xs)*len(ys)*len(zs) if xyzsetting < 2 else len(xs)*len(ys)*len(zs)  //2 +1
+            shared.total_tqdm.updateTotal(totalcount)
+            xc = yc =zc = 0
+            state.job_count = totalcount 
+            totalcount = len(xs)*len(ys)*len(zs)
+            c_base = base
+
+            for z in zs:
+                images = []
+                yc = 0
+                xyzdealer(z,ztype)
+                for y in ys:
+                    xc = 0
+                    xyzdealer(y,ytype)
+                    for x in xs:
+                        xyzdealer(x,xtype)
+                        if "ID" in xtype:
+                            if "values" in ytype:c_base = weightsdealer(y,x,base)
+                            if "values" in ztype:c_base = weightsdealer(z,x,base)
+                        if "ID" in ytype:
+                            if "values" in xtype:c_base = weightsdealer(x,y,base)
+                            if "values" in ztype:c_base = weightsdealer(z,y,base)
+                        if "ID" in ztype:
+                            if "values" in xtype:c_base = weightsdealer(x,z,base)
+                            if "values" in ytype:c_base = weightsdealer(y,z,base)
+
+                        print(f"X:{xtype}, {x},Y: {ytype},{y}, Z:{ztype},{z}, base:{c_base} ({len(xs)*len(ys)*zc + yc*len(xs) +xc +1}/{totalcount})")
+                        
+                        global lxyz,lzyx
+                        lxyz = c_base
+
+                        cr_base = c_base.split(",")
+                        cr_base_t=[]
+                        for x in cr_base:
+                            if not identifier(x):
+                                cr_base_t.append(str(1-float(x)))
+                            else:
+                                cr_base_t.append(x)
+                        lzyx = ",".join(cr_base_t)
+
+                        if not(xc == 1 and not (yc ==0 ) and xyzsetting >1):
+                            lora.loaded_loras.clear()
+                            processed:Processed = process_images(p)
+                            images.append(processed.images[0])
+                        xc += 1
+                    yc += 1
+                zc += 1
+                origin = loranames(processed.all_prompts) + ", "+ znamer(ztype,z,base)
+                images,xst,yst = effectivechecker(images,xs.copy(),ys.copy(),diffcol,thresh,revxy) if xyzsetting >1 else (images,xs.copy(),ys.copy())
+                grids.append(smakegrid(images,xst,yst,origin,p))
+            processed.images= grids
+            lora.loaded_loras.clear()
+            return processed
+
+def identifier(char):
+    return char[0] in ["R", "U", "X"]
+
+def znamer(at,a,base):
+    if "ID" in at:return f"Block : {a}"
+    if "values" in at:return f"value : {a}"
+    if "seed" in at:return f"seed : {a}"
+    if "Weights" in at:return f"original weights :\n {base}"
+    else: return ""
+
+def loranames(all_prompts):
+    _, extra_network_data = extra_networks.parse_prompts(all_prompts[0:1])
+    calledloras = extra_network_data["lora"] if "lyco" not in extra_network_data.keys() else extra_network_data["lyco"]
+    names = ""
+    for called in calledloras:
+        if len(called.items) <3:continue
+        names += called.items[0] 
+    return names
+
+def lycodealer(called):
+    for item in called.items[1:]:
+        if "lbw" in item:
+            called.items[2] = item.split("=")[1]
+    return called
+
+def loradealer(prompts,lratios,elementals):
+    _, extra_network_data = extra_networks.parse_prompts(prompts)
+    moduletypes = extra_network_data.keys()
+
+    for ltype in moduletypes:
+        lorans = []
+        lorars = []
+        multipliers = []
+        elements = []
+        if not (ltype == "lora" or ltype == "lyco") : continue
+        for called in extra_network_data[ltype]:
+            if ltype == "lyco":
+                called = lycodealer(called)
+            multiple = float(called.items[1])
+            multipliers.append(multiple)
+            if len(called.items) <3:
+                continue
+            lorans.append(called.items[0])
+            if called.items[2] in lratios or called.items[2].count(",") ==16 or called.items[2].count(",") ==25:
+                wei = lratios[called.items[2]] if called.items[2] in lratios else called.items[2] 
+                ratios = [w.strip() for w in wei.split(",")]
+                for i,r in enumerate(ratios):
+                    if r =="R":
+                        ratios[i] = round(random.random(),3)
+                    elif r == "U":
+                        ratios[i] = round(random.uniform(-0.5,1.5),3)
+                    elif r[0] == "X":
+                        base = called.items[3] if len(called.items) >= 4 else 1
+                        ratios[i] = getinheritedweight(base, r)
+                    else:
+                        ratios[i] = float(r)
+                print(f"LoRA Block weight ({ltype}): {called.items[0]}: {multiple} x {[x  for x in ratios]}")
+                if len(ratios)==17:
+                    ratios = [ratios[0]] + [1] + ratios[1:3]+ [1] + ratios[3:5]+[1] + ratios[5:7]+[1,1,1] + [ratios[7]] + [1,1,1] + ratios[8:]
+                lorars.append(ratios)
+            if len(called.items) > 3:
+                if called.items[3] in elementals:
+                    elements.append(elementals[called.items[3]])
+                else:
+                    elements.append(called.items[3])
+            else:
+                elements.append("")
+        if len(lorars) > 0: load_loras_blocks(lorans,lorars,multipliers,elements,ltype)
+
+def isfloat(t):
+    try:
+        float(t)
+        return True
+    except:
+        return False
+
+re_inherited_weight = re.compile(r"X([+-])?([\d.]+)?")
+
+def getinheritedweight(weight, offset):
+    match = re_inherited_weight.search(offset)
+    if match.group(1) == "+":
+        return float(weight) + float(match.group(2))
+    elif match.group(1) == "-":
+        return float(weight) - float(match.group(2))  
+    else:
+        return float(weight) 
+
+def load_loras_blocks(names, lwei,multipliers,elements = [],ltype = "lora"):
+    if "lora" == ltype:
+        print(names,lwei,elements)
+        import lora
+        for l, loaded in enumerate(lora.loaded_loras):
+            for n, name in enumerate(names):
+                if name == loaded.name:
+                    lbw(lora.loaded_loras[l],lwei[n],elements[n])
+                    lora.loaded_loras[l].name = lora.loaded_loras[l].name +"added_by_lora_block_weight"+ str(random.random())
+
+    elif "lyco" == ltype:
+        import lycoris as lycomo
+        for l, loaded in enumerate(lycomo.loaded_lycos):
+            for n, name in enumerate(names):
+                if name == loaded.name:
+                    lbw(lycomo.loaded_lycos[l],lwei[n],elements[n])
+                    lycomo.loaded_lycos[l].name = lycomo.loaded_lycos[l].name +"added_by_lora_block_weight"+ str(random.random())
+
+def smakegrid(imgs,xs,ys,currentmodel,p):
+    ver_texts = [[images.GridAnnotation(y)] for y in ys]
+    hor_texts = [[images.GridAnnotation(x)] for x in xs]
+
+    w, h = imgs[0].size
+    grid = Image.new('RGB', size=(len(xs) * w, len(ys) * h), color='black')
+
+    for i, img in enumerate(imgs):
+        grid.paste(img, box=(i % len(xs) * w, i // len(xs) * h))
+
+    grid = images.draw_grid_annotations(grid,w, h, hor_texts, ver_texts)
+    grid = draw_origin(grid, currentmodel,w*len(xs),h*len(ys),w)
+    if opts.grid_save:
+        images.save_image(grid, opts.outdir_txt2img_grids, "xy_grid", extension=opts.grid_format, prompt=p.prompt, seed=p.seed, grid=True, p=p)
+
+    return grid
+
+def get_font(fontsize):
+    path_root = scripts.basedir()
+    fontpath = os.path.join(path_root,"extensions","sd-webui-lora-block-weight","scripts", "Roboto-Regular.ttf")
+    try:
+        return ImageFont.truetype(opts.font or fontpath, fontsize)
+    except Exception:
+        return ImageFont.truetype(fontpath, fontsize)
+
+def draw_origin(grid, text,width,height,width_one):
+    grid_d= Image.new("RGB", (grid.width,grid.height), "white")
+    grid_d.paste(grid,(0,0))
+
+    d= ImageDraw.Draw(grid_d)
+    color_active = (0, 0, 0)
+    fontsize = (width+height)//25
+    fnt = get_font(fontsize)
+
+    if grid.width != width_one:
+        while d.multiline_textsize(text, font=fnt)[0] > width_one*0.75 and fontsize > 0:
+            fontsize -=1
+            fnt = get_font(fontsize)
+    d.multiline_text((0,0), text, font=fnt, fill=color_active,align="center")
+    return grid_d
+
+def newrun(p, *args):
+        script_index = args[0]
+
+        if args[0] ==0:
+            script = None
+            for obj in scripts.scripts_txt2img.alwayson_scripts:
+                if "lora_block_weight" in obj.filename:
+                    script = obj 
+                    script_args = args[script.args_from:script.args_to]
+        else:
+            script = scripts.scripts_txt2img.selectable_scripts[script_index-1]
+            
+            if script is None:
+                return None
+
+            script_args = args[script.args_from:script.args_to]
+
+        processed = script.run(p, *script_args)
+
+        shared.total_tqdm.clear()
+
+        return processed
+
+def effectivechecker(imgs,ss,ls,diffcol,thresh,revxy):
+    diffs = []
+    outnum =[]
+    imgs[0],imgs[1] = imgs[1],imgs[0]
+    im1 = np.array(imgs[0])
+
+    for i in range(len(imgs)-1):
+            im2 = np.array(imgs[i+1])
+
+            abs_diff = cv2.absdiff(im2 ,  im1)
+
+            abs_diff_t = cv2.threshold(abs_diff, int(thresh), 255, cv2.THRESH_BINARY)[1]        
+            res = abs_diff_t.astype(np.uint8)
+            percentage = (np.count_nonzero(res) * 100)/ res.size
+            if "white" in diffcol: abs_diff = cv2.bitwise_not(abs_diff)
+            outnum.append(percentage)
+
+            abs_diff = Image.fromarray(abs_diff)     
+
+            diffs.append(abs_diff)
+            
+    outs = []
+    for i in range(len(ls)):
+        ls[i] = ls[i] + "\n Diff : " + str(round(outnum[i],3)) + "%"
+
+    if not revxy:
+        for diff,img in zip(diffs,imgs[1:]):
+            outs.append(diff)
+            outs.append(img)
+            outs.append(imgs[0])
+        ss = ["diff",ss[0],"source"]
+        return outs,ss,ls
+    else:
+        outs = [imgs[0]]*len(diffs)  + imgs[1:]+ diffs
+        ss = ["source",ss[0],"diff"]
+        return outs,ls,ss
+
+def lbw(lora,lwei,elemental):
+    elemental = elemental.split(",")
+    for key in lora.modules.keys():
+        ratio = 1
+        picked = False
+        errormodules = []
+
+        for i,block in enumerate(BLOCKS):
+            if block in key:
+                ratio = lwei[i]
+                picked = True
+                currentblock = i
+
+        if not picked:
+            errormodules.append(key)
+        
+        if len(elemental) > 0:
+            skey = key + BLOCKID[currentblock]
+            for d in elemental:
+                if d.count(":") != 2 :continue
+                dbs,dws,dr = (hyphener(d.split(":")[0]),d.split(":")[1],d.split(":")[2])
+                dbs,dws = (dbs.split(" "), dws.split(" "))
+                dbn,dbs = (True,dbs[1:]) if dbs[0] == "NOT" else (False,dbs)
+                dwn,dws = (True,dws[1:]) if dws[0] == "NOT" else (False,dws)
+                flag = dbn
+                for db in dbs:
+                    if db in skey:
+                        flag = not dbn
+                if flag:flag = dwn
+                else:continue
+                for dw in dws:
+                    if dw in skey:
+                        flag = not dwn
+                if flag:
+                    dr = float(dr)
+                    if princ :print(dbs,dws,key,dr)
+                    ratio = dr
+
+        ltype = type(lora.modules[key]).__name__
+        set = False
+        if ltype in LORAANDSOON.keys():
+            setattr(lora.modules[key],LORAANDSOON[ltype],torch.nn.Parameter(getattr(lora.modules[key],LORAANDSOON[ltype]) * ratio))
+            #print(ltype)
+            set = True
+        else:
+            if hasattr(lora.modules[key],"up_model"):
+                lora.modules[key].up_model.weight= torch.nn.Parameter(lora.modules[key].up_model.weight *ratio)
+                #print("LoRA using LoCON")
+                set = True
+            else:
+                lora.modules[key].up.weight= torch.nn.Parameter(lora.modules[key].up.weight *ratio)
+                #print("LoRA")
+                set = True
+        if not set : 
+            print("unkwon LoRA")
+
+    lora.name = lora.name +"added_by_lora_block_weight"+ str(random.random())
+    if len(errormodules) > 0:
+        print(errormodules)
+    return lora
+
+LORAANDSOON = {
+    "LoraHadaModule" : "w1a",
+    "LycoHadaModule" : "w1a",
+    "FullModule" : "weight",
+    "IA3Module" : "w",
+    "LoraKronModule" : "w1",
+    "LycoKronModule" : "w1",
+}
+
+def hyphener(t):
+    t = t.split(" ")
+    for i,e in enumerate(t):
+        if "-" in e:
+            e = e.split("-")
+            if  BLOCKID.index(e[1]) > BLOCKID.index(e[0]):
+                t[i] = " ".join(BLOCKID[BLOCKID.index(e[0]):BLOCKID.index(e[1])+1])
+            else:
+                t[i] = " ".join(BLOCKID[BLOCKID.index(e[1]):BLOCKID.index(e[0])+1])
+    return " ".join(t)
+
+ELEMPRESETS="\
+ATTNDEEPON:IN05-OUT05:attn:1\n\n\
+ATTNDEEPOFF:IN05-OUT05:attn:0\n\n\
+PROJDEEPOFF:IN05-OUT05:proj:0\n\n\
+XYZ:::1"

sd-webui-stablesr/.gitignore

@@ -0,0 +1,7 @@
+# meta
+.vscode/
+__pycache__/
+.DS_Store
+
+# settings
+models/*.ckpt

sd-webui-stablesr/LICENSE

@@ -0,0 +1,35 @@
+S-Lab License 1.0
+
+Copyright 2022 S-Lab
+
+Redistribution and use for non-commercial purpose in source and 
+binary forms, with or without modification, are permitted provided 
+that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright 
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright 
+   notice, this list of conditions and the following disclaimer in 
+   the documentation and/or other materials provided with the 
+   distribution.
+
+3. Neither the name of the copyright holder nor the names of its 
+   contributors may be used to endorse or promote products derived 
+   from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+In the event that redistribution and/or use for commercial purpose in 
+source or binary forms, with or without modification is required, 
+please contact the contributor(s) of the work.

sd-webui-stablesr/LICENSE2

@@ -0,0 +1,437 @@
+Attribution-NonCommercial-ShareAlike 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+    wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More considerations
+     for the public:
+    wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
+Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-NonCommercial-ShareAlike 4.0 International Public License
+("Public License"). To the extent this Public License may be
+interpreted as a contract, You are granted the Licensed Rights in
+consideration of Your acceptance of these terms and conditions, and the
+Licensor grants You such rights in consideration of benefits the
+Licensor receives from making the Licensed Material available under
+these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. BY-NC-SA Compatible License means a license listed at
+     creativecommons.org/compatiblelicenses, approved by Creative
+     Commons as essentially the equivalent of this Public License.
+
+  d. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  e. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  f. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  g. License Elements means the license attributes listed in the name
+     of a Creative Commons Public License. The License Elements of this
+     Public License are Attribution, NonCommercial, and ShareAlike.
+
+  h. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  i. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  j. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  k. NonCommercial means not primarily intended for or directed towards
+     commercial advantage or monetary compensation. For purposes of
+     this Public License, the exchange of the Licensed Material for
+     other material subject to Copyright and Similar Rights by digital
+     file-sharing or similar means is NonCommercial provided there is
+     no payment of monetary compensation in connection with the
+     exchange.
+
+  l. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  m. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  n. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part, for NonCommercial purposes only; and
+
+            b. produce, reproduce, and Share Adapted Material for
+               NonCommercial purposes only.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. Additional offer from the Licensor -- Adapted Material.
+               Every recipient of Adapted Material from You
+               automatically receives an offer from the Licensor to
+               exercise the Licensed Rights in the Adapted Material
+               under the conditions of the Adapter's License You apply.
+
+            c. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties, including when
+          the Licensed Material is used other than for NonCommercial
+          purposes.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+  b. ShareAlike.
+
+     In addition to the conditions in Section 3(a), if You Share
+     Adapted Material You produce, the following conditions also apply.
+
+       1. The Adapter's License You apply must be a Creative Commons
+          license with the same License Elements, this version or
+          later, or a BY-NC-SA Compatible License.
+
+       2. You must include the text of, or the URI or hyperlink to, the
+          Adapter's License You apply. You may satisfy this condition
+          in any reasonable manner based on the medium, means, and
+          context in which You Share Adapted Material.
+
+       3. You may not offer or impose any additional or different terms
+          or conditions on, or apply any Effective Technological
+          Measures to, Adapted Material that restrict exercise of the
+          rights granted under the Adapter's License You apply.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database for NonCommercial purposes
+     only;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material,
+     including for purposes of Section 3(b); and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

sd-webui-stablesr/README.md

@@ -0,0 +1,156 @@
+# StableSR for Stable Diffusion WebUI
+
+Licensed under S-Lab License 1.0
+
+[![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa]
+
+English｜[中文](README_CN.md)
+
+- StableSR is a competitive super-resolution method originally proposed by Jianyi Wang et al.
+- This repository is a migration of the StableSR project to the Automatic1111 WebUI.
+
+Relevant Links
+
+> Click to view high-quality official examples!
+
+- [Project Page](https://iceclear.github.io/projects/stablesr/)
+- [Official Repository](https://github.com/IceClear/StableSR)
+- [Paper on arXiv](https://arxiv.org/abs/2305.07015)
+
+> If you find this project useful, please give me & Jianyi Wang a star! ⭐
+
+***
+
+## Features
+
+1. **High-fidelity detailed image upscaling**:
+    - Being very detailed while keeping the face identity of your characters.
+    - Suitable for most images (Realistic or Anime, Photography or AIGC, SD 1.5 or Midjourney images...) [Official Examples](https://iceclear.github.io/projects/stablesr/)
+2. **Less VRAM consumption**
+    - I remove the VRAM-expensive modules in the official implementation.
+    - The remaining model is much smaller than ControlNet Tile model and requires less VRAM.
+    - When combined with Tiled Diffusion & VAE, you can do 4k image super-resolution with limited VRAM (e.g., < 12 GB).
+    > Please be aware that sdp may lead to OOM for some unknown reasons. You may use xformers instead.
+3. **Wavelet Color Fix**
+    - The official StableSR will significantly change the color of the generated image. The problem will be even more prominent when upscaling in tiles.
+    - I implement a powerful post-processing technique that effectively matches the color of the upscaled image to the original. See [Wavelet Color Fix Example](https://imgsli.com/MTgwNDg2/).
+
+***
+
+## Usage
+
+### 1. Installation
+
+⚪ Method 1: Official Market
+
+- Open Automatic1111 WebUI -> Click Tab "Extensions" -> Click Tab "Available" -> Find "StableSR" -> Click "Install"
+
+⚪ Method 2: URL Install
+
+- Open Automatic1111 WebUI -> Click Tab "Extensions" -> Click Tab "Install from URL" -> type in https://github.com/pkuliyi2015/sd-webui-stablesr.git -> Click "Install" 
+
+![installation](https://github.com/pkuliyi2015/multidiffusion-img-demo/blob/master/installation.png?raw=true)
+
+### 2. Download the main components
+
+- You MUST use the Stable Diffusion V2.1 512 **EMA** checkpoint (~5.21GB) from StabilityAI
+    - You can download it from [HuggingFace](https://huggingface.co/stabilityai/stable-diffusion-2-1-base)
+    - Put into stable-diffusion-webui/models/Stable-Diffusion/
+
+    > While it requires a SD2.1 checkpoint, you can still upscale ANY image (even from SD1.5 or NSFW). Your image won't be censored and the output quality won't be affected.
+
+- Download the extracted StableSR module
+    - Official resources: [HuggingFace](https://huggingface.co/Iceclear/StableSR/resolve/main/weibu_models.zip) (~1.2 G). Note that this is a zip file containing both the StableSR module and the VQVAE.
+    - My resources: <[GoogleDrive](https://drive.google.com/file/d/1tWjkZQhfj07sHDR4r9Ta5Fk4iMp1t3Qw/view?usp=sharing)> <[百度网盘-提取码aguq](https://pan.baidu.com/s/1Nq_6ciGgKnTu0W14QcKKWg?pwd=aguq)>
+    - Put the StableSR module (~400MB) into your stable-diffusion-webui/extensions/sd-webui-stablesr/models/
+
+### 3. Optional components
+
+- Install [Tiled Diffusion & VAE]((https://github.com/pkuliyi2015/multidiffusion-upscaler-for-automatic1111)) extension
+    - The original StableSR easily gets OOM for large images > 512.
+    - For better quality and less VRAM usage, we recommend Tiled Diffusion & VAE.
+- Use the Official VQGAN VAE
+    - Official resources: See the link in 2.
+    - My resources: <[GoogleDrive](https://drive.google.com/file/d/1ARtDMia3_CbwNsGxxGcZ5UP75W4PeIEI/view?usp=share_link)> <[百度网盘-提取码83u9](https://pan.baidu.com/s/1YCYmGBethR9JZ8-eypoIiQ?pwd=83u9)>
+    - Put the VQVAE (~700MB) into your stable-diffusion-webui/models/VAE
+
+### 4. Extension Usage
+
+- At the top of the WebUI, select the v2-1_512-ema-pruned checkpoint you downloaded.
+- Switch to img2img tag. Find the "Scripts" dropdown at the bottom of the page.
+    - Select the StableSR script.
+    - Click the refresh button and select the StableSR checkpoint you have downloaded.
+    - Choose a scale factor.
+- Upload your image and start generation (can work without prompts).
+- Euler a sampler is recommended. CFG Scale<=2, Steps >= 20.
+- For output image size > 512, we recommend using Tiled Diffusion & VAE, otherwise, the image quality may not be ideal, and the VRAM usage will be huge. 
+- Here are the official Tiled Diffusion settings:
+    - Method = Mixture of Diffusers
+    - Latent tile size = 64, Latent tile overlap = 32
+    - Latent tile batch size as large as possible before Out of Memory.
+    - Upscaler MUST be None (will not upscale here; instead, upscale in StableSR).
+- The following figure shows the recommended settings for 24GB VRAM.
+    - For a 6GB device, **just change Tiled Diffusion Latent tile batch size to 1, Tiled VAE Encoder Tile Size to 1024, Decoder Tile Size to 128.**
+    - SDP attention optimization may lead to OOM. Please use xformers in that case.
+    - You DON'T need to change other settings in Tiled Diffusion & Tiled VAE unless you have a very deep understanding. **These params are almost optimal for StableSR.**
+![recommended settings](https://github.com/pkuliyi2015/multidiffusion-img-demo/blob/master/recommended_settings_24GB.jpg?raw=true)
+
+    
+
+### 5. Options Explained
+
+- What is "Pure Noise"?
+    - Pure Noise refers to starting from a fully random noise tensor instead of your image. **This is the default behavior in the StableSR paper.**
+    - When enabling it, the script ignores your denoising strength and gives you much more detailed images, but also changes the color & sharpness significantly
+    - When disabling it, the script starts by adding some noise to your image. The result will be not fully detailed, even if you set denoising strength = 1 (but maybe aesthetically good). See [Comparison](https://imgsli.com/MTgwMTMx).
+    - If you disable Pure Noise, we recommend denoising strength=1
+- What is "Color Fix"?
+    - This is to mitigate the color shift problem from StableSR and the tiling process.
+    - AdaIN simply adjusts the color statistics between the original and the outcome images. This is the official algorithm but ineffective in many cases.
+    - Wavelet decomposes the original and the outcome images into low and high frequency, and then replace the outcome image's low-frequency part (colors) with the original image's. This is very powerful for uneven color shifting. The algorithm is from GIMP and Krita, which will take several seconds for each image.
+    - When enabling color fix, the original image will also show up in your preview window, but will NOT be saved automatically.
+
+### 6. Important Notice
+
+> Why my results are different from the offical examples?
+
+- It is not your or our fault.
+    - This extension has the same UNet model weights as the StableSR if installed correctly. 
+    - If you install the optional VQVAE, the whole model weights will be the same as the official model with fusion weights=0.
+- However, your result will be **not as good as** the official results, because:
+    - Sampler Difference: 
+        - The official repo does 100 or 200 steps of legacy DDPM sampling with a custom timestep scheduler, and samples without negative prompts.
+        - However, WebUI doesn't offer such a sampler, and it must sample with negative prompts. **This is the main difference.**
+    - VQVAE Decoder Difference: 
+        - The official VQVAE Decoder takes some Encoder features as input. 
+        - However, in practice, I found these features are astonishingly huge for large images. (>10G for 4k images even in float16!) 
+        - Hence, **I removed the CFW component in VAE Decoder**. As this lead to inferior fidelity in details, I will try to add it back later as an option.
+
+***
+## License
+
+This project is licensed under:
+
+- S-Lab License 1.0.
+- [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa], due to the use of the NVIDIA SPADE module.
+
+[![CC BY-NC-SA 4.0][cc-by-nc-sa-image]][cc-by-nc-sa]
+
+[cc-by-nc-sa]: http://creativecommons.org/licenses/by-nc-sa/4.0/
+[cc-by-nc-sa-image]: https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png
+[cc-by-nc-sa-shield]: https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg
+
+### Disclaimer
+
+- All code in this extension is for research purposes only. 
+- The commercial use of the code and checkpoint is **strictly prohibited**.
+
+### Important Notice for Outcome Images
+
+- Please note that the CC BY-NC-SA 4.0 license in the NVIDIA SPADE module also prohibits the commercial use of outcome images. 
+- Jianyi Wang may change the SPADE module to a commercial-friendly one but he is busy.
+- If you wish to *speed up* his process for commercial purposes, please contact him through email: [email protected]
+
+## Acknowledgments
+
+I would like to thank Jianyi Wang et al. for the original StableSR method.

sd-webui-stablesr/README_CN.md

@@ -0,0 +1,150 @@
+# StableSR - Stable Diffusion WebUI
+
+Licensed under S-Lab License 1.0
+
+[![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa]
+
+[English](README.md) | 中文
+
+- StableSR 是由 Jianyi Wang 等人提出的强力超分辨率项目。
+- 本仓库将 StableSR 项目迁移到 Automatic1111 WebUI。
+
+相关链接
+
+> 点击查看大量官方示例！
+
+- [项目页面](https://iceclear.github.io/projects/stablesr/)
+- [官方仓库](https://github.com/IceClear/StableSR)
+- [论文](https://arxiv.org/abs/2305.07015)
+
+> 如果你觉得这个项目有帮助，请给我和 Jianyi Wang 的仓库点个星！⭐
+***
+
+## 功能
+
+1. **高保真图像放大**：
+    - 不修改人物脸部的同时添加非常细致的细节和纹理
+    - 适合大多数图片（真实或动漫，摄影作品或AIGC，SD 1.5或Midjourney图片...）
+2. **较少的显存消耗**：
+    - 我移除了官方实现中显存消耗高的模块。
+    - 剩下的模型比ControlNet Tile模型小得多，需要的显存也少得多。
+    - 当结合Tiled Diffusion & VAE时，你可以在有限的显存（例如，<12GB）中进行4k图像放大。
+    > 注意，sdp可能会不明原因炸显存。建议使用xformers。
+3. **小波分解颜色修正**：
+    - StableSR官方实现有明显的颜色偏移，这一问题在分块放大时更加明显。
+    - 我实现了一个强大的后处理技术，有效地匹配放大图像与原图的颜色。请看[小波分解颜色修正例子](https://imgsli.com/MTgwNDg2/)。
+
+***
+## 使用
+
+### 1. 安装
+
+⚪ 方法 1: 官方市场
+
+- 打开Automatic1111 WebUI -> 点击“扩展”选项卡 -> 点击“可用”选项卡 -> 找到“StableSR” -> 点击“安装”
+
+⚪ 方法 2: URL 安装
+
+- 打开 Automatic1111 WebUI -> 点击 "Extensions" 标签页 -> 点击 "Install from URL" 标签页 -> 输入 https://github.com/pkuliyi2015/sd-webui-stablesr.git -> 点击 "Install"
+
+![installation](https://github.com/pkuliyi2015/multidiffusion-img-demo/blob/master/installation.png?raw=true)
+
+### 2. 必须模型
+
+- 你必须使用 StabilityAI 官方的 Stable Diffusion V2.1 512 **EMA** 模型（约 5.21GB）
+    - 你可以从 [HuggingFace](https://huggingface.co/stabilityai/stable-diffusion-2-1-base) 下载
+    - 放入 stable-diffusion-webui/models/Stable-Diffusion/ 文件夹
+    > 虽然StableSR需要一个SD2.1的模型权重，但你仍然可以放大来自SD1.5的图片。NSFW图片不会被模型扭曲，输出质量也不会受到影响。
+- 下载 StableSR 模块
+    - 官方资源：[HuggingFace](https://huggingface.co/Iceclear/StableSR/resolve/main/weibu_models.zip) (约1.2G)。请注意这是一个zip文件，同时包含StableSR模块和可选组件VQVAE.
+    - 我的资源：<[GoogleDrive](https://drive.google.com/file/d/1tWjkZQhfj07sHDR4r9Ta5Fk4iMp1t3Qw/view?usp=sharing)> <[百度网盘-提取码aguq](https://pan.baidu.com/s/1Nq_6ciGgKnTu0W14QcKKWg?pwd=aguq)>
+    - 把StableSR模块（约400M大小）放入 stable-diffusion-webui/extensions/sd-webui-stablesr/models/ 文件夹
+
+### 3. 可选组件
+
+- 安装 [Tiled Diffusion & VAE](https://github.com/pkuliyi2015/multidiffusion-upscaler-for-automatic1111) 扩展
+    - 原始的 StableSR 对大于 512 的大图像容易出现 OOM。
+    - 为了获得更好的质量和更少的 VRAM 使用，我们建议使用 Tiled Diffusion & VAE。
+- 使用官方 VQGAN VAE
+    - 官方资源：同2中的链接
+    - 我的资源：<[GoogleDrive](https://drive.google.com/file/d/1ARtDMia3_CbwNsGxxGcZ5UP75W4PeIEI/view?usp=share_link)> <[百度网盘-提取码83u9](https://pan.baidu.com/s/1YCYmGBethR9JZ8-eypoIiQ?pwd=83u9)>
+    - 把VQVAE（约750MB大小）放在你的 stable-diffusion-webui/models/VAE 中
+
+### 4. 扩展使用
+
+- 在 WebUI 的顶部，选择你下载的 v2-1_512-ema-pruned 模型。
+- 切换到 img2img 标签。在页面底部找到 "Scripts" 下拉列表。
+    - 选择 StableSR 脚本。
+    - 点击刷新按钮，选择你已下载的 StableSR 检查点。
+    - 选择一个放大因子。
+- 上传你的图像并开始生成（无需提示也能工作）。
+- 推荐使用 Euler a 采样器，CFG值<=2，步数 >= 20。
+- 如果生成图像尺寸 > 512，我们推荐使用 Tiled Diffusion & VAE，否则，图像质量可能不理想，VRAM 使用量也会很大。
+- 这里是官方推荐的 Tiled Diffusion 设置。
+    - 方法 = Mixture of Diffusers
+    - 隐空间Tile大小 = 64，隐空间Tile重叠 = 32
+    - Tile批大小尽可能大，直到差一点点就炸显存为止。
+    - Upscaler**必须**选择None。
+- 下图是24GB显存的推荐设置。
+    - 对于4GB的设备，**只需将Tiled Diffusion Latent tile批处理大小改为1，Tiled VAE编码器Tile大小改为1024，解码器Tile大小改为128。**
+    - SDP注意力优化可能会导致OOM（内存不足），因此推荐使用xformers。
+    - 除非你有深入的理解，否则你**不要**改变Tiled Diffusion & Tiled VAE中的其他设置。**这些参数对于StableSR基本上是最优��。**
+![推荐设置](https://github.com/pkuliyi2015/multidiffusion-img-demo/blob/master/recommended_settings_24GB.jpg?raw=true)
+
+### 5. 参数解释
+
+- 什么是 "Pure Noise"？
+    - Pure Noise也就是纯噪声，指的是从完全随机的噪声张量开始，而不是从你的图像开始。**这是 StableSR 论文中的默认做法。**
+    - 启用这个选项时，脚本会忽略你的重绘幅度设置。产出将会是更详细的图像，但也会显著改变颜色和锐度。
+    - 禁用这个选项时，脚本会开始添加一些噪声到你的图像。即使你将去噪强度设为1，结果也不会那么的细节（但可能更和谐好看）。参见 [对比图](https://imgsli.com/MTgwMTMx)。
+    - 如果禁用Pure Noise，推荐重绘幅度设置为1
+- 什么是"颜色修正"？
+    - 这是为了缓解来自StableSR和Tile处理过程中的颜色偏移问题。
+    - AdaIN简单地匹配原图和结果图的颜色统计信息。这是StableSR官方算法，但常常效果不佳。
+    - Wavelet将原图和结果图分解为低频和高频，然后用原图的低频信息（颜色）替换掉结果图的低频信息。该算法对于不均匀的颜色偏移非常强力。算法来自GIMP和Krita，对每张图像需要几秒钟的时间。
+    - 启用颜色修正时，原图也会出现在您的预览窗口中，但不会被自动保存。
+
+### 6. 重要问题
+
+> 为什么我的结果和官方示例不同？
+
+- 这不是你或我们的错。
+    - 如果正确安装，这个扩展有与 StableSR 相同的 UNet 模型权重。
+    - 如果你安装了可选的 VQVAE，整个模型权重将与融合权重为 0 的官方模型相同。
+- 但是，你的结果将**不如**官方结果，因为：
+    - 采样器差异：
+        - 官方仓库进行 100 或 200 步的 legacy DDPM 采样，并使用自定义的时间步调度器，采样时不使用负提示。
+        - 然而，WebUI 不提供这样的采样器，必须带有负提示进行采样。**这是主要的差异。**
+    - VQVAE 解码器差异：
+        - 官方 VQVAE 解码器将一些编码器特征作为输入。
+        - 然而，在实践中，我发现这些特征对于大图像来说非常大。 (>10G 用于 4k 图像，即使是在 float16！)
+        - 因此，**我移除了 VAE 解码器中的 CFW 组件**。由于这导致了对细节的较低保真度，我将尝试将它作为一个选项添加回去。
+
+***
+## 许可
+
+此项目在以下许可下授权：
+
+- S-Lab License 1.0.
+- [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa]，由于使用了 NVIDIA SPADE 模块。
+
+[![CC BY-NC-SA 4.0][cc-by-nc-sa-image]][cc-by-nc-sa]
+
+[cc-by-nc-sa]: http://creativecommons.org/licenses/by-nc-sa/4.0/
+[cc-by-nc-sa-image]: https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png
+[cc-by-nc-sa-shield]: https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg
+
+### 免责声明
+
+- 此扩展中的所有代码仅供研究目的。
+- 严禁贩售代码和权重
+
+### 产出图像的重要通知
+
+- 请注意，NVIDIA SPADE 模块中的 CC BY-NC-SA 4.0 许可也禁止把产生的图像用于商业用途。
+- Jianyi Wang 可能会将 SPADE 模块更改为商业友好的一个，但他很忙。
+- 如果你希望**加快**他的进度，请通过电子邮件与他联系：[email protected]
+
+## 致谢
+
+感谢 Jianyi Wang 等人提出的 StableSR 方法

sd-webui-stablesr/scripts/stablesr.py

@@ -0,0 +1,276 @@
+'''
+# --------------------------------------------------------------------------------
+#
+#   StableSR for Automatic1111 WebUI
+#
+#   Introducing state-of-the super-resolution method: StableSR!
+#   Techniques is originally proposed by my schoolmate Jianyi Wang et, al.
+#
+#   Project Page: https://iceclear.github.io/projects/stablesr/
+#   Official Repo: https://github.com/IceClear/StableSR
+#   Paper: https://arxiv.org/abs/2305.07015
+#   
+#   @original author: Jianyi Wang et, al.
+#   @migration: LI YI 
+#   @organization: Nanyang Technological University - Singapore
+#   @date: 2023-05-20
+#   @license: 
+#       S-Lab License 1.0 (see LICENSE file)
+#       CC BY-NC-SA 4.0 (required by NVIDIA SPADE module)
+# 
+#   @disclaimer: 
+#       All code in this extension is for research purpose only. 
+#       The commercial use of the code & checkpoint is strictly prohibited.
+#
+# --------------------------------------------------------------------------------
+#
+#   IMPORTANT NOTICE FOR OUTCOME IMAGES:
+#       - Please be aware that the CC BY-NC-SA 4.0 license in SPADE module
+#         also prohibits the commercial use of outcome images.
+#       - Jianyi Wang may change the SPADE module to a commercial-friendly one.
+#         If you want to use the outcome images for commercial purposes, please
+#         contact Jianyi Wang for more information.
+#
+#   Please give me a star (and also Jianyi's repo) if you like this project!
+#
+# --------------------------------------------------------------------------------
+'''
+
+import os
+import torch
+import gradio as gr
+import numpy as np
+import PIL.Image as Image
+
+from pathlib import Path
+from torch import Tensor
+from tqdm import tqdm
+
+from modules import scripts, processing, sd_samplers, devices, images, shared
+from modules.processing import StableDiffusionProcessingImg2Img, Processed
+from modules.shared import opts
+from ldm.modules.diffusionmodules.openaimodel import UNetModel
+
+from srmodule.spade import SPADELayers
+from srmodule.struct_cond import EncoderUNetModelWT, build_unetwt
+from srmodule.colorfix import adain_color_fix, wavelet_color_fix
+
+SD_WEBUI_PATH = Path.cwd()
+ME_PATH = SD_WEBUI_PATH / 'extensions' / 'sd-webui-stablesr'
+MODEL_PATH = ME_PATH / 'models'
+FORWARD_CACHE_NAME = 'org_forward_stablesr'
+
+class StableSR:
+    def __init__(self, path, dtype, device):
+        state_dict = torch.load(path, map_location='cpu')
+        self.struct_cond_model: EncoderUNetModelWT = build_unetwt()
+        self.spade_layers: SPADELayers = SPADELayers()
+        self.struct_cond_model.load_from_dict(state_dict)
+        self.spade_layers.load_from_dict(state_dict)
+        del state_dict
+        self.struct_cond_model.apply(lambda x: x.to(dtype=dtype, device=device))
+        self.spade_layers.apply(lambda x: x.to(dtype=dtype, device=device))
+
+        self.latent_image: Tensor = None
+        self.set_image_hooks = {}
+        self.struct_cond: Tensor = None
+
+    def set_latent_image(self, latent_image):
+        self.latent_image = latent_image
+        for hook in self.set_image_hooks.values():
+            hook(latent_image)
+
+    def hook(self, unet: UNetModel):
+        # hook unet to set the struct_cond
+        if not hasattr(unet, FORWARD_CACHE_NAME):
+            setattr(unet, FORWARD_CACHE_NAME, unet.forward)
+
+        def unet_forward(x, timesteps=None, context=None, y=None,**kwargs):
+            self.latent_image = self.latent_image.to(x.device)
+            # Ensure the device of all modules layers is the same as the unet
+            # This will fix the issue when user use --medvram or --lowvram
+            self.spade_layers.to(x.device)
+            self.struct_cond_model.to(x.device)
+            timesteps = timesteps.to(x.device)
+            self.struct_cond = None # mitigate vram peak
+            self.struct_cond = self.struct_cond_model(self.latent_image, timesteps[:self.latent_image.shape[0]])
+            return getattr(unet, FORWARD_CACHE_NAME)(x, timesteps, context, y, **kwargs)
+        
+        unet.forward = unet_forward
+
+        self.spade_layers.hook(unet, lambda: self.struct_cond)
+
+
+    def unhook(self, unet: UNetModel):
+        # clean up cache
+        self.latent_image = None
+        self.struct_cond = None
+        self.set_image_hooks = {}
+        # unhook unet forward
+        if hasattr(unet, FORWARD_CACHE_NAME):
+            unet.forward = getattr(unet, FORWARD_CACHE_NAME)
+            delattr(unet, FORWARD_CACHE_NAME)
+
+        # unhook spade layers
+        self.spade_layers.unhook()
+
+
+class Script(scripts.Script):
+    def __init__(self) -> None:
+        self.model_list = {}
+        self.load_model_list()
+        self.last_path = None
+        self.stablesr_model: StableSR = None
+
+    def load_model_list(self):
+        # traverse the CFG_PATH and add all files to the model list
+        self.model_list = {}
+        if not MODEL_PATH.exists():
+            MODEL_PATH.mkdir()
+        for file in MODEL_PATH.iterdir():
+            if file.is_file():
+                # save tha absolute path
+                self.model_list[file.name] = str(file.absolute())
+        self.model_list['None'] = None
+
+    def title(self):
+        return "StableSR"
+
+    def show(self, is_img2img):
+        return is_img2img
+
+    def ui(self, is_img2img):
+        with gr.Row():
+            model = gr.Dropdown(list(self.model_list.keys()), label="SR Model")
+            refresh = gr.Button(value='↻', variant='tool')
+            def refresh_fn(selected):
+                self.load_model_list()
+                if selected not in self.model_list:
+                    selected = 'None'
+                return gr.Dropdown.update(value=selected, choices=list(self.model_list.keys()))
+            refresh.click(fn=refresh_fn,inputs=model, outputs=model)
+        with gr.Row():
+            scale_factor = gr.Slider(minimum=1, maximum=16, step=0.1, value=2, label='Scale Factor', elem_id=f'StableSR-scale')
+        with gr.Row():
+            color_fix = gr.Dropdown(['None', 'Wavelet', 'AdaIN'], label="Color Fix", value='Wavelet', elem_id=f'StableSR-color-fix')
+            save_original = gr.Checkbox(label='Save Original', value=False, elem_id=f'StableSR-save-original', visible=color_fix.value != 'None')
+            color_fix.change(fn=lambda selected: gr.Checkbox.update(visible=selected != 'None'), inputs=color_fix, outputs=save_original, show_progress=False)
+            pure_noise = gr.Checkbox(label='Pure Noise', value=True, elem_id=f'StableSR-pure-noise')
+            unload_model= gr.Button(value='Unload Model', variant='tool')
+            def unload_model_fn():
+                if self.stablesr_model is not None:
+                    self.stablesr_model = None
+                    devices.torch_gc()
+                    print('[StableSR] Model unloaded!')
+                else:
+                    print('[StableSR] No model loaded.')
+            unload_model.click(fn=unload_model_fn)
+        return [model, scale_factor, pure_noise, color_fix, save_original]
+
+    def run(self, p: StableDiffusionProcessingImg2Img, model: str, scale_factor:float, pure_noise: bool, color_fix:str, save_original:bool) -> Processed:
+
+        if model == 'None':
+            # do clean up
+            self.stablesr_model = None
+            self.last_model_path = None
+            return
+        
+        if model not in self.model_list:
+            raise gr.Error(f"Model {model} is not in the list! Please refresh your browser!")
+        
+        if not os.path.exists(self.model_list[model]):
+            raise gr.Error(f"Model {model} is not on your disk! Please refresh the model list!")
+
+        if color_fix not in ['None', 'Wavelet', 'AdaIN']:
+            print(f'[StableSR] Invalid color fix method: {color_fix}')
+            color_fix = 'None'
+
+        # upscale the image, set the ouput size 
+        init_img: Image = p.init_images[0]
+        target_width = int(init_img.width * scale_factor)
+        target_height = int(init_img.height * scale_factor)
+        # if the target width is not dividable by 8, then round it up
+        if target_width % 8 != 0:
+            target_width = target_width + 8 - target_width % 8
+        # if the target height is not dividable by 8, then round it up
+        if target_height % 8 != 0:
+            target_height = target_height + 8 - target_height % 8
+        init_img = init_img.resize((target_width, target_height), Image.LANCZOS)
+        p.init_images[0] = init_img
+        p.width = init_img.width
+        p.height = init_img.height
+
+        print('[StableSR] Target image size: {}x{}'.format(init_img.width, init_img.height))
+
+        first_param = shared.sd_model.parameters().__next__()
+        if self.last_path != self.model_list[model]:
+            # load the model
+            self.stablesr_model = None
+        
+        if self.stablesr_model is None:
+            self.stablesr_model = StableSR(self.model_list[model], dtype=first_param.dtype, device=first_param.device)
+            self.last_path = self.model_list[model]
+
+        def sample_custom(conditioning, unconditional_conditioning, seeds, subseeds, subseed_strength, prompts):
+            try:
+                unet: UNetModel = shared.sd_model.model.diffusion_model
+                self.stablesr_model.hook(unet)
+                self.stablesr_model.set_latent_image(p.init_latent)
+                x = processing.create_random_tensors(p.init_latent.shape[1:], seeds=seeds, subseeds=subseeds, subseed_strength=p.subseed_strength, seed_resize_from_h=p.seed_resize_from_h, seed_resize_from_w=p.seed_resize_from_w, p=p)
+                sampler = sd_samplers.create_sampler(p.sampler_name, p.sd_model)
+                if pure_noise:
+                    # NOTE: use txt2img instead of img2img sampling
+                    samples = sampler.sample(p, x, conditioning, unconditional_conditioning, image_conditioning=p.image_conditioning)
+                else:
+                    if p.initial_noise_multiplier != 1.0:
+                        p.extra_generation_params["Noise multiplier"] =p.initial_noise_multiplier
+                        x *= p.initial_noise_multiplier
+                    samples = sampler.sample_img2img(p, p.init_latent, x, conditioning, unconditional_conditioning, image_conditioning=p.image_conditioning)
+                
+                if p.mask is not None:
+                    samples = samples * p.nmask + p.init_latent * p.mask
+                del x
+                devices.torch_gc()
+                return samples
+            finally:
+                self.stablesr_model.unhook(unet)
+                # in --medvram and --lowvram mode, we send the model back to the initial device
+                self.stablesr_model.struct_cond_model.to(device=first_param.device)
+                self.stablesr_model.spade_layers.to(device=first_param.device)
+
+                
+        # replace the sample function
+        p.sample = sample_custom
+        
+        if color_fix != 'None':
+            p.do_not_save_samples = True
+
+        result: Processed = processing.process_images(p)
+
+        if color_fix != 'None':
+
+            fixed_images = []
+            # fix the color
+            color_fix_func = wavelet_color_fix if color_fix == 'Wavelet' else adain_color_fix
+            for i in range(len(result.images)):
+                try:
+                    fixed_images.append(color_fix_func(result.images[i], init_img))
+                except Exception as e:
+                    print(f'[StableSR] Error fixing color with default method: {e}')
+
+            # save the fixed color images
+            for i in range(len(fixed_images)):
+                try:
+                    images.save_image(fixed_images[i], p.outpath_samples, "", p.all_seeds[i], p.all_prompts[i], opts.samples_format, info=result.infotexts[i], p=p)
+                except Exception as e:
+                    print(f'[StableSR] Error saving color fixed image: {e}')
+
+            if save_original:
+                for i in range(len(result.images)):
+                    try:
+                        images.save_image(result.images[i], p.outpath_samples, "", p.all_seeds[i], p.all_prompts[i], opts.samples_format, info=result.infotexts[i], p=p, suffix="-before-color-fix")
+                    except Exception as e:
+                        print(f'[StableSR] Error saving original image: {e}')
+            result.images = result.images + fixed_images
+
+        return result