Upload 27 files

.gitattributes

@@ -32,3 +32,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+house.mp4 filter=lfs diff=lfs merge=lfs -text
+house.png filter=lfs diff=lfs merge=lfs -text
+person_control.mp4 filter=lfs diff=lfs merge=lfs -text
+person.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,13 +1,45 @@
 ---
-title: ControlnetOverMask
+title: ControlnetWithBackground
 emoji: 🌖
-colorFrom: pink
+colorFrom: gray
 colorTo: blue
 sdk: gradio
-sdk_version: 3.28.3
+sdk_version: 3.28.2
 app_file: app.py
 pinned: false
 license: mit
+
+tags:
+  - jax-diffusers-event
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ControlnetWithBackground
+### Controlnet
+### Inpainting
+### Stable diffusion
+
+Use controlnet to generate sketches and characters, and keep the background unchanged.
+
+Usually when we generate a very perfect background image, we want to add image elements, but using controlnet directly will affect the original background. This project aims to add elements to the page while keeping the background unchanged, and can directly operate on the original background.
+
+Support skeletal character generation and sketch generation.
+
+Optimize an inpaint model for the general domain against the stablediffusion-inpaint model.
+
+### Two modes, openpose control and manuscript control
+#### openpose control
+Add character skeletons to a forest scene generated by SD, and keep the background unchanged to generate controllable characters
+<img src="https://huggingface.co/spaces/hirol/ControlnetWithBackground/resolve/main/person.png"  width="400" height="300">
+<video width="320" height="240" controls>
+  <source src="https://huggingface.co/spaces/hirol/ControlnetWithBackground/resolve/main/person_control.mp4" type="video/mp4">
+</video>
+
+#### manuscript control
+Added manuscript houses to an SD generated forest scene
+<img src="https://huggingface.co/spaces/hirol/ControlnetWithBackground/resolve/main/house.png"  width="600" height="300">
+<video width="320" height="240" controls>
+  <source src="https://huggingface.co/spaces/hirol/ControlnetWithBackground/resolve/main/house.mp4" type="video/mp4">
+</video>
+Added manuscript chairs to an SD generated snow scene
+<img src="https://huggingface.co/spaces/hirol/ControlnetWithBackground/resolve/main/chair.png"  width="600" height="300">
+

app.py

@@ -0,0 +1,229 @@
+import os
+import io
+import base64
+import json
+from typing import Callable, Any
+from PIL import Image
+import gradio as gr
+from common import utils as posex
+project_dir = os.path.dirname(os.path.abspath(__file__))
+print(project_dir)
+
+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'))
+
+
+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'),visible=False)
+    v = gr.Textbox(elem_id=id(name),visible=False)
+    v_sink = gr.Textbox(visible=False)
+    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'),visible=False)
+    v_sink = gr.Textbox(visible=False)
+    v_sink2 = gr.Textbox(visible=False)
+    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'), visible=False)
+
+    v_args = gr.JSON(elem_id=id(f'{name}_args'), visible=False)
+    v_args_sink = gr.JSON(visible=False)
+    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'),visible=False)
+    v_sink = gr.Textbox(visible=False)
+    v_sink2 = gr.Textbox(visible=False)
+    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 generatecall(
+        name: str,
+        fn: Callable[[str], str],
+        id: Callable[[str], str],
+        js: Callable[[str], str],
+        sink: gr.components.IOComponent,
+        prompt,
+        prompt_n,
+        output_img,
+) -> None:
+    v_args_set = gr.Button(elem_id=id(f'{name}_args_set'), visible=False)
+    v_args = gr.JSON(elem_id=id(f'{name}_args'), visible=False)
+    v_args_sink = gr.JSON(visible=False)
+    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'),visible=False)
+    v_sink = gr.Textbox(visible=False)
+    v_sink2 = gr.Textbox(visible=False)
+    v_fire.click(fn=fn, inputs=[v_args,prompt,prompt_n], outputs=[output_img])
+    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)
+
+
+
+# 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]))
+
+# def get_imgs(args):
+#     return posex.get_img(args)
+
+def generate_imgs(data, image_prompt, image_n_prompt):
+    return posex.generate_img(data, image_prompt, image_n_prompt)
+def get_image_sketch(image_prompt, image_n_prompt, image):
+    return posex.get_image_sketch(image, image_prompt, image_n_prompt)
+
+
+def javascript_html():
+    script_js = f'script.js?{os.path.getmtime(os.path.join(project_dir,"script.js"))}'
+    path7 = f'javascript/posex-webui.js?{os.path.getmtime(os.path.join(project_dir,"javascript/posex-webui.js"))}'
+    head = f'<script type="text/javascript" src="file={script_js}"></script>\n'
+    head += f'<script type="text/javascript" src="file={path7}"></script>\n'
+
+    return head
+
+
+def css_html():
+    head = f'<link rel="stylesheet" property="stylesheet" href="file=style.css">'
+
+    return head
+
+
+def reload_javascript():
+    js = javascript_html()
+    css = css_html()
+
+    def template_response(*args, **kwargs):
+        res = GradioTemplateResponseOriginal(*args, **kwargs)
+        res.body = res.body.replace(b'</head>', f'{js}</head>'.encode("utf8"))
+        res.body = res.body.replace(b'</body>', f'{css}</body>'.encode("utf8"))
+        res.init_headers()
+        return res
+    gr.routes.templates.TemplateResponse = template_response
+
+GradioTemplateResponseOriginal = gr.routes.templates.TemplateResponse
+
+
+if __name__ == '__main__':
+    reload_javascript()
+    app = gr.Blocks()
+    with app:
+        is_img2img = []
+        # id = lambda s: f'posex-{["t2i", "i2i"]}-{s}'
+        id = lambda s: f'posex-t2i-{s}'
+        js = lambda s: f'globalThis["{id(s)}"]'
+
+        ext = get_self_extension()
+
+        xpath = os.path.join(project_dir,"javascript/lazyload/posex-webui.js")
+        js_ = [project_dir, f'{xpath}?{os.path.getmtime(xpath)}']
+        print(js_)
+        with gr.Blocks() as demo:
+            with gr.Tab("sketch"):
+                with gr.Row():
+                    image_prompt_sketch = gr.Textbox(label="image prompt", value='', elem_id=id('image_prompt'))
+                    image_n_prompt_sketch = gr.Textbox(label="negative prompt", value='',
+                                                       elem_id=id('image_n_prompt'))
+                with gr.Row():
+                    image_sketch = gr.Image(interactive=True,source='upload', type="numpy", tool="sketch").style(height=512, width=512)
+                    result_img = gr.Gallery(label='Output', show_label=False, elem_id="gallery").style(grid=2,
+                                                                                                   height='auto')
+                with gr.Row():
+                    generate_result_button = gr.Button(value='generate')
+                    generate_result_button.click(fn=get_image_sketch,inputs=[image_prompt_sketch, image_n_prompt_sketch, image_sketch],
+                                          outputs=[result_img])
+
+            with gr.Tab("openpose", elem_id=id('tab')):
+                # 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=True)
+                with gr.Row():
+                    # segment_prompt = gr.Textbox(label="segment prompt", value='',
+                    #                             elem_id=id('segment_prompt'))
+                    image_prompt = gr.Textbox(label="image prompt", value='', elem_id=id('image_prompt'))
+                    image_n_prompt = gr.Textbox(label="negative prompt", value='',
+                                                elem_id=id('image_n_prompt'))
+
+                gr.HTML(value='\n'.join(js_), elem_id=id('js'), visible=False)
+
+                gr.HTML(value='', elem_id=id('html'))
+
+                generate_button = gr.Button(elem_id=id(f'generate'), value='generate')
+
+                with gr.Column():
+                    result_img = gr.Gallery(label='Output', show_label=False, elem_id="gallery").style(grid=2,
+                                                                                                           height='auto')
+
+                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)
+                    # jscall('getimgs', get_imgs, id, js, sink)
+                    generatecall('getimgs', generate_imgs, id, js, sink, image_prompt, image_n_prompt, result_img)
+    app.launch()

common/utils.py

@@ -0,0 +1,173 @@
+import os, glob, json, base64, re
+from io import BytesIO
+from PIL import Image, PngImagePlugin
+from image_process import image_canny,image_pose_mask,image_pose_mask_numpy
+from generate_img import generate_image, generate_image_sketch
+
+_SAVED_POSES_DIR = ''
+
+image_cache = dict()
+
+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):
+    print(data)
+    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
+def base64_PIL(data:str):
+    return Image.open(BytesIO(base64.b64decode(data)))
+
+def PIL_base64(data):
+    return base64.b64encode(data.tobytes()).decode('utf-8')
+
+def resizeImg(image1,image2):
+    width1, height1 = image1.size
+    # 使用图像1的宽高来resize图像2
+    image2_resized = image2.resize((width1, height1))
+    # 返回resize后的图像2
+    return image2_resized
+
+# def get_img(data):
+#     #执行逻辑
+#     if (data[0]):
+#         bgImgBase64 = data[0]['bgImg'][len('data:image/png;base64,'):]
+#         maskImgBase64 = data[0]['maskImg'][len('data:image/png;base64,'):]
+#         image_cache['bgImgBase64'] = bgImgBase64
+#         image_cache['maskImgBase64'] = maskImgBase64
+#     return 'success'
+
+def generate_img(data, image_prompt, image_n_prompt):
+    if (data[0]):
+        bg_img = data[0]['bgImg'][len('data:image/png;base64,'):]
+        mask_img_openpose = data[0]['maskImg'][len('data:image/png;base64,'):]
+        print((len(bg_img), len(mask_img_openpose)))
+        print((image_prompt, image_n_prompt))
+
+        maskImg_base64 = image_pose_mask(mask_img_openpose)
+
+        controlnet_img_pil = base64_PIL(mask_img_openpose)
+        bg_img_pil = base64_PIL(bg_img)
+        mask_img_pil = base64_PIL(maskImg_base64)
+        bg_img_pil = resizeImg(mask_img_pil, bg_img_pil)
+
+        img = generate_image(image_prompt, image_n_prompt, controlnet_img_pil, bg_img_pil, mask_img_pil)
+
+        return [img]
+        # return [mask_img_pil]
+    #openpose流程
+
+    return None
+
+
+def get_image_sketch(image, image_prompt, image_n_prompt):
+    img_origin_numpy = image['image']
+    img_sketch_numpy = image['mask']
+    # print(type(img_origin))
+    # print(type(PIL_base64(Image.fromarray(img_masj))))
+    mask_pil = base64_PIL(image_pose_mask_numpy(img_sketch_numpy))
+    img_origin_pil = Image.fromarray(img_origin_numpy)
+    sketch_pil = Image.fromarray(img_sketch_numpy)
+    img = generate_image_sketch(image_prompt, image_n_prompt, sketch_pil, img_origin_pil, mask_pil)
+
+    return img
+    # return [mask_pil,img_origin_pil,Image.fromarray(img_masj)]

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;
+}

generate_img.py

@@ -0,0 +1,77 @@
+import os
+from diffusers import StableDiffusionControlNetPipeline, ControlNetModel, UniPCMultistepScheduler
+import torch
+import numpy as np
+from pipeline_stable_diffusion_controlnet_inpaint import *
+from diffusers.pipelines.stable_diffusion.pipeline_stable_diffusion_controlnet import *
+import random
+#model1
+controlnet =  ControlNetModel.from_pretrained("lllyasviel/control_v11p_sd15_openpose", torch_dtype=torch.float16,cache_dir='./models')
+pipe = StableDiffusionControlNetInpaintPipeline.from_pretrained(
+    "./models/Any-inpainting", controlnet=controlnet, torch_dtype=torch.float16,cache_dir='./models'
+)
+
+pipe.scheduler = UniPCMultistepScheduler.from_config(pipe.scheduler.config)
+pipe.to('cuda')
+
+# model2
+controlnet1 =  ControlNetModel.from_pretrained("lllyasviel/control_v11p_sd15_scribble",torch_dtype=torch.float16,cache_dir='./models')
+
+pipe1 = StableDiffusionControlNetInpaintPipeline.from_pretrained(
+    "./models/Any-inpainting", controlnet=controlnet1, torch_dtype=torch.float16,cache_dir='./models'
+)
+
+pipe1.scheduler = UniPCMultistepScheduler.from_config(pipe.scheduler.config)
+pipe1.to('cuda')
+
+def make_inpaint_condition(image, image_mask):
+    image = np.array(image.convert("RGB")).astype(np.float32) / 255.0
+    image_mask = np.array(image_mask.convert("L"))
+    assert image.shape[0:1] == image_mask.shape[0:1], "image and image_mask must have the same image size"
+    image[image_mask > 128] = -1.0 # set as masked pixel
+    image = np.expand_dims(image, 0).transpose(0, 3, 1, 2)
+    image = torch.from_numpy(image)
+    return image
+
+
+def generate_image(prompt:str, negative_prompt:str, openpose_image, original_image, mask_image):
+
+    a = random.randint(10000,90000)
+    generator = torch.manual_seed(a)
+    # control_image = make_inpaint_condition(original_image, mask_image)
+    # images = [openpose_image, control_image]
+
+    image = pipe(
+        prompt=prompt,
+        # images,
+        image=original_image,
+        control_image=openpose_image,
+        mask_image=mask_image,
+        num_inference_steps=20,
+        generator=generator,
+        negative_prompt=negative_prompt,
+        #     controlnet_conditioning_scale=[1.0, 0.8],
+    ).images[0]
+
+    return image
+
+
+def generate_image_sketch(prompt: str, negative_prompt: str, openpose_image, original_image, mask_image):
+    b = random.randint(10000, 90000)
+    generator = torch.manual_seed(b)
+    # control_image = make_inpaint_condition(original_image, mask_image)
+    # images = [openpose_image, control_image]
+
+    image = pipe1(
+        prompt=prompt,
+        # images,
+        image=original_image,
+        control_image=openpose_image,
+        mask_image=mask_image,
+        num_inference_steps=20,
+        generator=generator,
+        negative_prompt=negative_prompt,
+        #     controlnet_conditioning_scale=[1.0, 0.8],
+    ).images[0]
+
+    return [image]

house.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ba5c5749d85848e88cbd570a055608f2b809c75cb9c1258ac14b55dd1a94547
+size 1360888

image_process.py

@@ -0,0 +1,131 @@
+# This is a sample Python script.
+
+# Press ⌃R to execute it or replace it with your code.
+# Press Double ⇧ to search everywhere for classes, files, tool windows, actions, and settings.
+
+import numpy as np
+import cv2
+import base64
+
+
+def cv2_base64(image):
+    base64_str = cv2.imencode('.png',image)[1].tobytes()
+    base64_str = base64.b64encode(base64_str)
+    return base64_str.decode('utf-8')
+
+def base64_cv2(base64_str):
+    imgString = base64.b64decode(base64_str)
+    nparr = np.frombuffer(imgString,np.uint8)
+    image = cv2.imdecode(nparr,cv2.IMREAD_COLOR)
+    return image
+
+
+
+def image_pose_mask(imagepath : str):
+    img = base64_cv2(imagepath)
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    ret, thresh = cv2.threshold(gray, 10, 255, cv2.THRESH_BINARY)
+    contours, hierarchy = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    cnt = contours[-1]
+    hull = cv2.convexHull(cnt)
+    length = len(hull)
+    if length > 4:
+        for i in range(length):
+            cv2.line(img, tuple(hull[i][0]), tuple(hull[(i + 1) % length][0]), (255, 255, 255), 2)
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    _, threshold = cv2.threshold(gray, 10, 255, cv2.THRESH_BINARY)
+    mask = img.copy()
+    kernel = np.ones((30, 30), dtype=np.uint8)
+    dilated = cv2.dilate(threshold, kernel, 20)
+    dilated = cv2.dilate(dilated, kernel, 20)
+    contours, hierarchy = cv2.findContours(dilated, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+    valid = len(contours) > 0
+
+    area = []
+
+    for k in range(len(contours)):
+        area.append(cv2.contourArea(contours[k]))
+    max_idx = np.argmax(np.array(area))
+
+    mask2 = cv2.drawContours(mask, contours, max_idx, (255, 255, 255), thickness=-1)
+    img_base64 = cv2_base64(mask2)
+
+    return img_base64
+
+
+
+def image_pose_mask_numpy(image):
+    img = np.uint8(image)
+    print("shape:" + str(img.shape))
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    ret, thresh = cv2.threshold(gray, 10, 255, cv2.THRESH_BINARY)
+
+    contours, hierarchy = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    cnt = contours[-1]
+    hull = cv2.convexHull(cnt)
+    length = len(hull)
+    if length > 4:
+        for i in range(length):
+            cv2.line(img, tuple(hull[i][0]), tuple(hull[(i + 1) % length][0]), (255, 255, 255), 2)
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    _, threshold = cv2.threshold(gray, 10, 255, cv2.THRESH_BINARY)
+    mask = img.copy()
+    kernel = np.ones((30, 30), dtype=np.uint8)
+
+    dilated = cv2.dilate(threshold, kernel, 20)
+
+    dilated = cv2.dilate(dilated, kernel, 20)
+    contours, hierarchy = cv2.findContours(dilated, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+    valid = len(contours) > 0
+
+    area = []
+
+    for k in range(len(contours)):
+        area.append(cv2.contourArea(contours[k]))
+    max_idx = np.argmax(np.array(area))
+
+    mask2 = cv2.drawContours(mask, contours, max_idx, (255, 255, 255), thickness=-1)
+
+    img_base64 = cv2_base64(mask2)
+
+    return img_base64
+
+def image_canny(imagepath:str):
+
+    img = base64_cv2(imagepath)
+
+    image_map  = cv2.Canny(img, 100, 200)
+
+    contours, hierarchy = cv2.findContours(image_map, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    cnt = contours[-1]
+    hull = cv2.convexHull(cnt)
+    length = len(hull)
+    if length > 4:
+        for i in range(length):
+            cv2.line(img, tuple(hull[i][0]), tuple(hull[(i + 1) % length][0]), (0, 0, 255), 2)
+
+    img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    contours, hierarchy = cv2.findContours(img, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+    valid = len(contours) > 0
+    area = []
+    for k in range(len(contours)):
+        area.append(cv2.contourArea(contours[k]))
+    max_idx = np.argmax(np.array(area))
+
+    mask2 = cv2.drawContours(image_map, contours, max_idx, (0, 0, 255), thickness=3)
+
+    img_base64 = cv2_base64(mask2)
+
+    return img_base64
+
+# Press the green button in the gutter to run the script.
+if __name__ == '__main__':
+    image_canny(imagepath='download (13).png')
+

javascript/lazyload/posex-webui.js

@@ -0,0 +1,415 @@
+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, _r++];
+    }
+
+    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(JSON.parse(value));
+                // 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 img_marker = $('div'); img_marker.textContent = '- Image';
+        const set_img = $('label'); set_img.classList.add('posex_bg');
+        const add_img = $('button'); add_img.classList.add('posex_add_body', 'posex_body'); add_img.innerHTML = '🖼 Add';add_img.onclick = () => img_input.click();
+        const img_input = $('input'); img_input.type = 'file'; img_input.style.display = 'none';
+        set_img.append(add_img, img_input);
+        const reset_img = $('button'); reset_img.classList.add('posex_bg'); reset_img.innerHTML = '❌ Del';
+        const img_cont = $('div'); img_cont.classList.add('posex_bg_cont');
+        img_cont.append(set_img, reset_img);
+
+        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 = '- Image 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,
+            // img_marker,
+            // img_cont,
+            all_reset,
+            bg_marker,
+            bg_cont,
+            canvas_marker,
+            canvas_width,
+            canvas_height,
+            body_marker,
+            add_body,
+            remove_body,
+
+
+            // 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 get_imgs = $('button');
+        get_imgs.classList.add('posex_get_imgs', 'posex_box');
+        get_imgs.innerHTML = '💾🧍 get_imgs';
+
+        const get_imgs_callback = async obj => {
+            await py2js(type, 'getimgs', obj);
+            return { result: '', ok: true };
+        };
+
+        const ui = {
+            canvas,
+            notation,
+            indicator1,
+            indicator2,
+            all_reset,
+            reset_camera,
+            reset_pose,
+            fixed_roll,
+            img: img_input,
+            reset_img,
+            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,
+            get_imgs,
+            get_imgs_callback,
+        };
+
+        const df = document.createDocumentFragment();
+        df.append(
+            // all_reset,
+            // reset_cont,
+            canvas_cont,
+            indicator2,
+            indicator1,
+            notation,
+            // misc_cont,
+            // save_pose,
+            // saved_poses,
+            // get_imgs,
+        );
+
+        return { ui, df };
+    };
+
+    async function init_canvas(
+        type,
+        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); };
+
+        // {
+        //     // 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);
+        // }
+
+        // {
+        //     // Load saved poses.
+        //     const json = await py2js(type, 'allposes')
+        //     reload_poses(JSON.parse(json), ui);
+        // }
+
+        //界面加载
+        init(ui);
+
+        //功能js加载
+        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('#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'));
+
+})();

javascript/posex-webui.js

@@ -0,0 +1,104 @@
+(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 launch1(type) {
+        return lazy(() => gradioApp()?.querySelector(`#posex-${type}-tab`)).
+            then(async acc => {
+                const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); // !
+                const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`);
+                await load(cont);
+                await posex[`init_${type}`]();
+                    console.log(`[Posex] ${type} initialized`);
+        });
+    }
+
+    // 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 });
+    //             }
+    //         }));
+    // }
+    
+    launch1('t2i');
+    // launch('i2i');
+
+})();

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 };

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.

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.

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.

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

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 };

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);

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 : "'"));
+    }
+
+})();

js/posex.js

@@ -0,0 +1,945 @@
+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());
+
+    let bg_backup = new Map();
+    function set_bg(image_path, dont_dispose) {
+        const old_tex = scene.background;
+        if (dont_dispose === false) {
+            bg_backup.clear();
+        }
+        if (image_path === null) {
+            scene.background = default_bg();
+            if (old_tex && old_tex.dispose && !dont_dispose) old_tex.dispose();
+            return;
+        }
+        if (!(image_path.isTexture || image_path.isColor))  {
+            bg_backup.set('image64', image_path);
+        }
+        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 images = new Map();
+    const object_to_img = new Map();
+
+    function set_img(name, image_path , img_width, img_length) {
+        remove_img(name);
+        let geometry = new THREE.PlaneGeometry(img_width, img_length);
+        let plan_texture = new THREE.TextureLoader().load(image_path)
+        let material = new THREE.MeshBasicMaterial({//贴图通过材质添加给几何体
+            map: plan_texture,//给纹理属性map赋值
+            side: THREE.DoubleSide,//两面可见
+        });
+        let rect = new THREE.Mesh(geometry, material);
+        const group_img = new THREE.Group();
+
+        const dispose = () => {
+            scene.remove(group_img);
+        };
+
+
+        const image = {
+            name,
+            group_img,
+            img_width,
+            img_length,
+            rect,
+            dispose,
+        };
+        group_img.add(rect);
+        object_to_img.set(group_img, image);
+
+        images.set(name, image);
+        scene.add(group_img);
+
+        return image;
+    }
+
+    let image_num = 0;
+    if (ui.img) {
+        ui.img.addEventListener('change', e => {
+            const files = ui.img.files;
+            if (files.length != 0) {
+                const file = files[0];
+                const r = new FileReader();
+                r.onload = () => set_img(`img_${image_num}`,r.result,30,30);
+                r.readAsDataURL(file);
+            }
+            ui.img.value = '';
+        }, false);
+    }
+
+    if (ui.reset_img)
+        ui.reset_img.addEventListener('click', () => {
+            if (images.size <= 0) {
+                ui.notify('No image is not allowed.', 'error');
+                return;
+            }
+            remove_img("img_0");
+        }, false);
+
+    const remove_img = name => {
+        if (!images.get(name)) return;
+        images.get(name).dispose();
+        images.delete(name);
+    };
+
+
+    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', () => {
+            if (bodies.size < 1) {
+                add_body('defualt', 0, 0, 0);
+            } else {
+                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 <= 0) {
+                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);
+    
+        
+    if (ui.get_imgs_callback()) {
+        gradioApp().querySelector(`#posex-t2i-generate`).addEventListener('click', async () => {
+            //搜集参数
+            const bgImg = bg_backup.get("image64") === "" ? "" : bg_backup.get("image64");
+            console.log(`bgImgsize:${bgImg.length}`);
+            const maskImg = await ui.getDataURL();
+            console.log(`maskImg:${maskImg.length}`);
+            const data = { bgImg, maskImg };
+            const result = await ui.get_imgs_callback(data);
+            ui.notify(result.result, result.ok ? 'success' : 'error');
+        }, false)
+        // ui.get_imgs.addEventListener('click', async () => {
+        //     //搜集参数
+        //     const bgImg = bg_backup.get("image64") === "" ? "" : bg_backup.get("image64");
+        //     console.log(`bgImgsize:${bgImg.length}`);
+        //     const maskImg = await ui.getDataURL();
+        //     console.log(`maskImg:${maskImg.length}`);
+        //     const data = { bgImg, maskImg };
+        //     const result = await ui.get_imgs_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 };

person_control.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8014b6a3f11441bc6c203ad6ff602d70c6b8c446d890de77e620f2339c378818
+size 2792964

pipeline_stable_diffusion_controlnet_inpaint.py

@@ -0,0 +1,521 @@
+# Copyright 2023 The HuggingFace Team. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import torch
+import PIL.Image
+import numpy as np
+
+from diffusers.pipelines.stable_diffusion.pipeline_stable_diffusion_controlnet import *
+
+EXAMPLE_DOC_STRING = """
+    Examples:
+        ```py
+        >>> # !pip install opencv-python transformers accelerate
+        >>> from diffusers import StableDiffusionControlNetInpaintPipeline, ControlNetModel, UniPCMultistepScheduler
+        >>> from diffusers.utils import load_image
+        >>> import numpy as np
+        >>> import torch
+
+        >>> import cv2
+        >>> from PIL import Image
+        >>> # download an image
+        >>> image = load_image(
+        ...     "https://raw.githubusercontent.com/CompVis/latent-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png"
+        ... )
+        >>> image = np.array(image)
+        >>> mask_image = load_image(
+        ...     "https://raw.githubusercontent.com/CompVis/latent-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo_mask.png"
+        ... )
+        >>> mask_image = np.array(mask_image)
+        >>> # get canny image
+        >>> canny_image = cv2.Canny(image, 100, 200)
+        >>> canny_image = canny_image[:, :, None]
+        >>> canny_image = np.concatenate([canny_image, canny_image, canny_image], axis=2)
+        >>> canny_image = Image.fromarray(canny_image)
+
+        >>> # load control net and stable diffusion v1-5
+        >>> controlnet = ControlNetModel.from_pretrained("lllyasviel/sd-controlnet-canny", torch_dtype=torch.float16)
+        >>> pipe = StableDiffusionControlNetInpaintPipeline.from_pretrained(
+        ...     "runwayml/stable-diffusion-inpainting", controlnet=controlnet, torch_dtype=torch.float16
+        ... )
+
+        >>> # speed up diffusion process with faster scheduler and memory optimization
+        >>> pipe.scheduler = UniPCMultistepScheduler.from_config(pipe.scheduler.config)
+        >>> # remove following line if xformers is not installed
+        >>> pipe.enable_xformers_memory_efficient_attention()
+
+        >>> pipe.enable_model_cpu_offload()
+
+        >>> # generate image
+        >>> generator = torch.manual_seed(0)
+        >>> image = pipe(
+        ...     "futuristic-looking doggo",
+        ...     num_inference_steps=20,
+        ...     generator=generator,
+        ...     image=image,
+        ...     control_image=canny_image,
+        ...     mask_image=mask_image
+        ... ).images[0]
+        ```
+"""
+
+
+def prepare_mask_and_masked_image(image, mask):
+    """
+    Prepares a pair (image, mask) to be consumed by the Stable Diffusion pipeline. This means that those inputs will be
+    converted to ``torch.Tensor`` with shapes ``batch x channels x height x width`` where ``channels`` is ``3`` for the
+    ``image`` and ``1`` for the ``mask``.
+    The ``image`` will be converted to ``torch.float32`` and normalized to be in ``[-1, 1]``. The ``mask`` will be
+    binarized (``mask > 0.5``) and cast to ``torch.float32`` too.
+    Args:
+        image (Union[np.array, PIL.Image, torch.Tensor]): The image to inpaint.
+            It can be a ``PIL.Image``, or a ``height x width x 3`` ``np.array`` or a ``channels x height x width``
+            ``torch.Tensor`` or a ``batch x channels x height x width`` ``torch.Tensor``.
+        mask (_type_): The mask to apply to the image, i.e. regions to inpaint.
+            It can be a ``PIL.Image``, or a ``height x width`` ``np.array`` or a ``1 x height x width``
+            ``torch.Tensor`` or a ``batch x 1 x height x width`` ``torch.Tensor``.
+    Raises:
+        ValueError: ``torch.Tensor`` images should be in the ``[-1, 1]`` range. ValueError: ``torch.Tensor`` mask
+        should be in the ``[0, 1]`` range. ValueError: ``mask`` and ``image`` should have the same spatial dimensions.
+        TypeError: ``mask`` is a ``torch.Tensor`` but ``image`` is not
+            (ot the other way around).
+    Returns:
+        tuple[torch.Tensor]: The pair (mask, masked_image) as ``torch.Tensor`` with 4
+            dimensions: ``batch x channels x height x width``.
+    """
+    if isinstance(image, torch.Tensor):
+        if not isinstance(mask, torch.Tensor):
+            raise TypeError(f"`image` is a torch.Tensor but `mask` (type: {type(mask)} is not")
+
+        # Batch single image
+        if image.ndim == 3:
+            assert image.shape[0] == 3, "Image outside a batch should be of shape (3, H, W)"
+            image = image.unsqueeze(0)
+
+        # Batch and add channel dim for single mask
+        if mask.ndim == 2:
+            mask = mask.unsqueeze(0).unsqueeze(0)
+
+        # Batch single mask or add channel dim
+        if mask.ndim == 3:
+            # Single batched mask, no channel dim or single mask not batched but channel dim
+            if mask.shape[0] == 1:
+                mask = mask.unsqueeze(0)
+
+            # Batched masks no channel dim
+            else:
+                mask = mask.unsqueeze(1)
+
+        assert image.ndim == 4 and mask.ndim == 4, "Image and Mask must have 4 dimensions"
+        assert image.shape[-2:] == mask.shape[-2:], "Image and Mask must have the same spatial dimensions"
+        assert image.shape[0] == mask.shape[0], "Image and Mask must have the same batch size"
+
+        # Check image is in [-1, 1]
+        if image.min() < -1 or image.max() > 1:
+            raise ValueError("Image should be in [-1, 1] range")
+
+        # Check mask is in [0, 1]
+        if mask.min() < 0 or mask.max() > 1:
+            raise ValueError("Mask should be in [0, 1] range")
+
+        # Binarize mask
+        mask[mask < 0.5] = 0
+        mask[mask >= 0.5] = 1
+
+        # Image as float32
+        image = image.to(dtype=torch.float32)
+    elif isinstance(mask, torch.Tensor):
+        raise TypeError(f"`mask` is a torch.Tensor but `image` (type: {type(image)} is not")
+    else:
+        # preprocess image
+        if isinstance(image, (PIL.Image.Image, np.ndarray)):
+            image = [image]
+
+        if isinstance(image, list) and isinstance(image[0], PIL.Image.Image):
+            image = [np.array(i.convert("RGB"))[None, :] for i in image]
+            image = np.concatenate(image, axis=0)
+        elif isinstance(image, list) and isinstance(image[0], np.ndarray):
+            image = np.concatenate([i[None, :] for i in image], axis=0)
+
+        image = image.transpose(0, 3, 1, 2)
+        image = torch.from_numpy(image).to(dtype=torch.float32) / 127.5 - 1.0
+
+        # preprocess mask
+        if isinstance(mask, (PIL.Image.Image, np.ndarray)):
+            mask = [mask]
+
+        if isinstance(mask, list) and isinstance(mask[0], PIL.Image.Image):
+            mask = np.concatenate([np.array(m.convert("L"))[None, None, :] for m in mask], axis=0)
+            mask = mask.astype(np.float32) / 255.0
+        elif isinstance(mask, list) and isinstance(mask[0], np.ndarray):
+            mask = np.concatenate([m[None, None, :] for m in mask], axis=0)
+
+        mask[mask < 0.5] = 0
+        mask[mask >= 0.5] = 1
+        mask = torch.from_numpy(mask)
+
+    masked_image = image * (mask < 0.5)
+
+    return mask, masked_image
+
+class StableDiffusionControlNetInpaintPipeline(StableDiffusionControlNetPipeline):
+    r"""
+    Pipeline for text-guided image inpainting using Stable Diffusion with ControlNet guidance.
+
+    This model inherits from [`StableDiffusionControlNetPipeline`]. Check the superclass documentation for the generic methods the
+    library implements for all the pipelines (such as downloading or saving, running on a particular device, etc.)
+
+    Args:
+        vae ([`AutoencoderKL`]):
+            Variational Auto-Encoder (VAE) Model to encode and decode images to and from latent representations.
+        text_encoder ([`CLIPTextModel`]):
+            Frozen text-encoder. Stable Diffusion uses the text portion of
+            [CLIP](https://huggingface.co/docs/transformers/model_doc/clip#transformers.CLIPTextModel), specifically
+            the [clip-vit-large-patch14](https://huggingface.co/openai/clip-vit-large-patch14) variant.
+        tokenizer (`CLIPTokenizer`):
+            Tokenizer of class
+            [CLIPTokenizer](https://huggingface.co/docs/transformers/v4.21.0/en/model_doc/clip#transformers.CLIPTokenizer).
+        unet ([`UNet2DConditionModel`]): Conditional U-Net architecture to denoise the encoded image latents.
+        controlnet ([`ControlNetModel`]):
+            Provides additional conditioning to the unet during the denoising process
+        scheduler ([`SchedulerMixin`]):
+            A scheduler to be used in combination with `unet` to denoise the encoded image latents. Can be one of
+            [`DDIMScheduler`], [`LMSDiscreteScheduler`], or [`PNDMScheduler`].
+        safety_checker ([`StableDiffusionSafetyChecker`]):
+            Classification module that estimates whether generated images could be considered offensive or harmful.
+            Please, refer to the [model card](https://huggingface.co/runwayml/stable-diffusion-v1-5) for details.
+        feature_extractor ([`CLIPFeatureExtractor`]):
+            Model that extracts features from generated images to be used as inputs for the `safety_checker`.
+    """
+    
+    def prepare_mask_latents(
+        self, mask, masked_image, batch_size, height, width, dtype, device, generator, do_classifier_free_guidance
+    ):
+        # resize the mask to latents shape as we concatenate the mask to the latents
+        # we do that before converting to dtype to avoid breaking in case we're using cpu_offload
+        # and half precision
+        mask = torch.nn.functional.interpolate(
+            mask, size=(height // self.vae_scale_factor, width // self.vae_scale_factor)
+        )
+        mask = mask.to(device=device, dtype=dtype)
+
+        masked_image = masked_image.to(device=device, dtype=dtype)
+
+        # encode the mask image into latents space so we can concatenate it to the latents
+        if isinstance(generator, list):
+            masked_image_latents = [
+                self.vae.encode(masked_image[i : i + 1]).latent_dist.sample(generator=generator[i])
+                for i in range(batch_size)
+            ]
+            masked_image_latents = torch.cat(masked_image_latents, dim=0)
+        else:
+            masked_image_latents = self.vae.encode(masked_image).latent_dist.sample(generator=generator)
+        masked_image_latents = self.vae.config.scaling_factor * masked_image_latents
+
+        # duplicate mask and masked_image_latents for each generation per prompt, using mps friendly method
+        if mask.shape[0] < batch_size:
+            if not batch_size % mask.shape[0] == 0:
+                raise ValueError(
+                    "The passed mask and the required batch size don't match. Masks are supposed to be duplicated to"
+                    f" a total batch size of {batch_size}, but {mask.shape[0]} masks were passed. Make sure the number"
+                    " of masks that you pass is divisible by the total requested batch size."
+                )
+            mask = mask.repeat(batch_size // mask.shape[0], 1, 1, 1)
+        if masked_image_latents.shape[0] < batch_size:
+            if not batch_size % masked_image_latents.shape[0] == 0:
+                raise ValueError(
+                    "The passed images and the required batch size don't match. Images are supposed to be duplicated"
+                    f" to a total batch size of {batch_size}, but {masked_image_latents.shape[0]} images were passed."
+                    " Make sure the number of images that you pass is divisible by the total requested batch size."
+                )
+            masked_image_latents = masked_image_latents.repeat(batch_size // masked_image_latents.shape[0], 1, 1, 1)
+
+        mask = torch.cat([mask] * 2) if do_classifier_free_guidance else mask
+        masked_image_latents = (
+            torch.cat([masked_image_latents] * 2) if do_classifier_free_guidance else masked_image_latents
+        )
+
+        # aligning device to prevent device errors when concating it with the latent model input
+        masked_image_latents = masked_image_latents.to(device=device, dtype=dtype)
+        return mask, masked_image_latents
+    
+    @torch.no_grad()
+    @replace_example_docstring(EXAMPLE_DOC_STRING)
+    def __call__(
+        self,
+        prompt: Union[str, List[str]] = None,        
+        image: Union[torch.FloatTensor, PIL.Image.Image] = None,
+        control_image: Union[torch.FloatTensor, PIL.Image.Image, List[torch.FloatTensor], List[PIL.Image.Image]] = None,        
+        mask_image: Union[torch.FloatTensor, PIL.Image.Image] = None,
+        height: Optional[int] = None,
+        width: Optional[int] = None,
+        num_inference_steps: int = 50,
+        guidance_scale: float = 7.5,
+        negative_prompt: Optional[Union[str, List[str]]] = None,
+        num_images_per_prompt: Optional[int] = 1,
+        eta: float = 0.0,
+        generator: Optional[Union[torch.Generator, List[torch.Generator]]] = None,
+        latents: Optional[torch.FloatTensor] = None,
+        prompt_embeds: Optional[torch.FloatTensor] = None,
+        negative_prompt_embeds: Optional[torch.FloatTensor] = None,
+        output_type: Optional[str] = "pil",
+        return_dict: bool = True,
+        callback: Optional[Callable[[int, int, torch.FloatTensor], None]] = None,
+        callback_steps: int = 1,
+        cross_attention_kwargs: Optional[Dict[str, Any]] = None,
+        controlnet_conditioning_scale: float = 1.0,
+    ):
+        r"""
+        Function invoked when calling the pipeline for generation.
+        Args:
+            prompt (`str` or `List[str]`, *optional*):
+                The prompt or prompts to guide the image generation. If not defined, one has to pass `prompt_embeds`.
+                instead.
+            image (`PIL.Image.Image`):
+                `Image`, or tensor representing an image batch which will be inpainted, *i.e.* parts of the image will
+                be masked out with `mask_image` and repainted according to `prompt`.
+            control_image (`torch.FloatTensor`, `PIL.Image.Image`, `List[torch.FloatTensor]` or `List[PIL.Image.Image]`):
+                The ControlNet input condition. ControlNet uses this input condition to generate guidance to Unet. If
+                the type is specified as `Torch.FloatTensor`, it is passed to ControlNet as is. PIL.Image.Image` can
+                also be accepted as an image. The control image is automatically resized to fit the output image.
+            mask_image (`PIL.Image.Image`):
+                `Image`, or tensor representing an image batch, to mask `image`. White pixels in the mask will be
+                repainted, while black pixels will be preserved. If `mask_image` is a PIL image, it will be converted
+                to a single channel (luminance) before use. If it's a tensor, it should contain one color channel (L)
+                instead of 3, so the expected shape would be `(B, H, W, 1)`.            
+            height (`int`, *optional*, defaults to self.unet.config.sample_size * self.vae_scale_factor):
+                The height in pixels of the generated image.
+            width (`int`, *optional*, defaults to self.unet.config.sample_size * self.vae_scale_factor):
+                The width in pixels of the generated image.
+            num_inference_steps (`int`, *optional*, defaults to 50):
+                The number of denoising steps. More denoising steps usually lead to a higher quality image at the
+                expense of slower inference.
+            guidance_scale (`float`, *optional*, defaults to 7.5):
+                Guidance scale as defined in [Classifier-Free Diffusion Guidance](https://arxiv.org/abs/2207.12598).
+                `guidance_scale` is defined as `w` of equation 2. of [Imagen
+                Paper](https://arxiv.org/pdf/2205.11487.pdf). Guidance scale is enabled by setting `guidance_scale >
+                1`. Higher guidance scale encourages to generate images that are closely linked to the text `prompt`,
+                usually at the expense of lower image quality.
+            negative_prompt (`str` or `List[str]`, *optional*):
+                The prompt or prompts not to guide the image generation. If not defined, one has to pass
+                `negative_prompt_embeds`. instead. If not defined, one has to pass `negative_prompt_embeds`. instead.
+                Ignored when not using guidance (i.e., ignored if `guidance_scale` is less than `1`).
+            num_images_per_prompt (`int`, *optional*, defaults to 1):
+                The number of images to generate per prompt.
+            eta (`float`, *optional*, defaults to 0.0):
+                Corresponds to parameter eta (η) in the DDIM paper: https://arxiv.org/abs/2010.02502. Only applies to
+                [`schedulers.DDIMScheduler`], will be ignored for others.
+            generator (`torch.Generator` or `List[torch.Generator]`, *optional*):
+                One or a list of [torch generator(s)](https://pytorch.org/docs/stable/generated/torch.Generator.html)
+                to make generation deterministic.
+            latents (`torch.FloatTensor`, *optional*):
+                Pre-generated noisy latents, sampled from a Gaussian distribution, to be used as inputs for image
+                generation. Can be used to tweak the same generation with different prompts. If not provided, a latents
+                tensor will ge generated by sampling using the supplied random `generator`.
+            prompt_embeds (`torch.FloatTensor`, *optional*):
+                Pre-generated text embeddings. Can be used to easily tweak text inputs, *e.g.* prompt weighting. If not
+                provided, text embeddings will be generated from `prompt` input argument.
+            negative_prompt_embeds (`torch.FloatTensor`, *optional*):
+                Pre-generated negative text embeddings. Can be used to easily tweak text inputs, *e.g.* prompt
+                weighting. If not provided, negative_prompt_embeds will be generated from `negative_prompt` input
+                argument.
+            output_type (`str`, *optional*, defaults to `"pil"`):
+                The output format of the generate image. Choose between
+                [PIL](https://pillow.readthedocs.io/en/stable/): `PIL.Image.Image` or `np.array`.
+            return_dict (`bool`, *optional*, defaults to `True`):
+                Whether or not to return a [`~pipelines.stable_diffusion.StableDiffusionPipelineOutput`] instead of a
+                plain tuple.
+            callback (`Callable`, *optional*):
+                A function that will be called every `callback_steps` steps during inference. The function will be
+                called with the following arguments: `callback(step: int, timestep: int, latents: torch.FloatTensor)`.
+            callback_steps (`int`, *optional*, defaults to 1):
+                The frequency at which the `callback` function will be called. If not specified, the callback will be
+                called at every step.
+            cross_attention_kwargs (`dict`, *optional*):
+                A kwargs dictionary that if specified is passed along to the `AttnProcessor` as defined under
+                `self.processor` in
+                [diffusers.cross_attention](https://github.com/huggingface/diffusers/blob/main/src/diffusers/models/cross_attention.py).
+            controlnet_conditioning_scale (`float`, *optional*, defaults to 1.0):
+                The outputs of the controlnet are multiplied by `controlnet_conditioning_scale` before they are added
+                to the residual in the original unet.
+        Examples:
+        Returns:
+            [`~pipelines.stable_diffusion.StableDiffusionPipelineOutput`] or `tuple`:
+            [`~pipelines.stable_diffusion.StableDiffusionPipelineOutput`] if `return_dict` is True, otherwise a `tuple.
+            When returning a tuple, the first element is a list with the generated images, and the second element is a
+            list of `bool`s denoting whether the corresponding generated image likely represents "not-safe-for-work"
+            (nsfw) content, according to the `safety_checker`.
+        """
+        # 0. Default height and width to unet
+        height, width = self._default_height_width(height, width, control_image)
+
+        # 1. Check inputs. Raise error if not correct
+        self.check_inputs(
+            prompt, control_image, height, width, callback_steps, negative_prompt, prompt_embeds, negative_prompt_embeds
+        )
+
+        # 2. Define call parameters
+        if prompt is not None and isinstance(prompt, str):
+            batch_size = 1
+        elif prompt is not None and isinstance(prompt, list):
+            batch_size = len(prompt)
+        else:
+            batch_size = prompt_embeds.shape[0]
+
+        device = self._execution_device
+        # here `guidance_scale` is defined analog to the guidance weight `w` of equation (2)
+        # of the Imagen paper: https://arxiv.org/pdf/2205.11487.pdf . `guidance_scale = 1`
+        # corresponds to doing no classifier free guidance.
+        do_classifier_free_guidance = guidance_scale > 1.0
+
+        # 3. Encode input prompt
+        prompt_embeds = self._encode_prompt(
+            prompt,
+            device,
+            num_images_per_prompt,
+            do_classifier_free_guidance,
+            negative_prompt,
+            prompt_embeds=prompt_embeds,
+            negative_prompt_embeds=negative_prompt_embeds,
+        )
+
+        # 4. Prepare image
+        control_image = self.prepare_image(
+            control_image,
+            width,
+            height,
+            batch_size * num_images_per_prompt,
+            num_images_per_prompt,
+            device,
+            self.controlnet.dtype,
+        )
+
+        if do_classifier_free_guidance:
+            control_image = torch.cat([control_image] * 2)
+
+        # 5. Prepare timesteps
+        self.scheduler.set_timesteps(num_inference_steps, device=device)
+        timesteps = self.scheduler.timesteps
+
+        # 6. Prepare latent variables
+        num_channels_latents = self.controlnet.config.in_channels
+        latents = self.prepare_latents(
+            batch_size * num_images_per_prompt,
+            num_channels_latents,
+            height,
+            width,
+            prompt_embeds.dtype,
+            device,
+            generator,
+            latents,
+        )
+        
+        # EXTRA: prepare mask latents
+        mask, masked_image = prepare_mask_and_masked_image(image, mask_image)
+        mask, masked_image_latents = self.prepare_mask_latents(
+            mask,
+            masked_image,
+            batch_size * num_images_per_prompt,
+            height,
+            width,
+            prompt_embeds.dtype,
+            device,
+            generator,
+            do_classifier_free_guidance,
+        )
+
+        # 7. Prepare extra step kwargs. TODO: Logic should ideally just be moved out of the pipeline
+        extra_step_kwargs = self.prepare_extra_step_kwargs(generator, eta)
+
+        # 8. Denoising loop
+        num_warmup_steps = len(timesteps) - num_inference_steps * self.scheduler.order
+        with self.progress_bar(total=num_inference_steps) as progress_bar:
+            for i, t in enumerate(timesteps):
+                # expand the latents if we are doing classifier free guidance
+                latent_model_input = torch.cat([latents] * 2) if do_classifier_free_guidance else latents
+                latent_model_input = self.scheduler.scale_model_input(latent_model_input, t)                                
+
+                down_block_res_samples, mid_block_res_sample = self.controlnet(
+                    latent_model_input,
+                    t,
+                    encoder_hidden_states=prompt_embeds,
+                    controlnet_cond=control_image,
+                    return_dict=False,
+                )
+
+                down_block_res_samples = [
+                    down_block_res_sample * controlnet_conditioning_scale
+                    for down_block_res_sample in down_block_res_samples
+                ]
+                mid_block_res_sample *= controlnet_conditioning_scale
+
+                # predict the noise residual
+                latent_model_input = torch.cat([latent_model_input, mask, masked_image_latents], dim=1)
+                noise_pred = self.unet(
+                    latent_model_input,
+                    t,
+                    encoder_hidden_states=prompt_embeds,
+                    cross_attention_kwargs=cross_attention_kwargs,
+                    down_block_additional_residuals=down_block_res_samples,
+                    mid_block_additional_residual=mid_block_res_sample,
+                ).sample
+
+                # perform guidance
+                if do_classifier_free_guidance:
+                    noise_pred_uncond, noise_pred_text = noise_pred.chunk(2)
+                    noise_pred = noise_pred_uncond + guidance_scale * (noise_pred_text - noise_pred_uncond)
+
+                # compute the previous noisy sample x_t -> x_t-1
+                latents = self.scheduler.step(noise_pred, t, latents, **extra_step_kwargs).prev_sample
+
+                # call the callback, if provided
+                if i == len(timesteps) - 1 or ((i + 1) > num_warmup_steps and (i + 1) % self.scheduler.order == 0):
+                    progress_bar.update()
+                    if callback is not None and i % callback_steps == 0:
+                        callback(i, t, latents)
+
+        # If we do sequential model offloading, let's offload unet and controlnet
+        # manually for max memory savings
+        if hasattr(self, "final_offload_hook") and self.final_offload_hook is not None:
+            self.unet.to("cpu")
+            self.controlnet.to("cpu")
+            torch.cuda.empty_cache()
+
+        if output_type == "latent":
+            image = latents
+            has_nsfw_concept = None
+        elif output_type == "pil":
+            # 8. Post-processing
+            image = self.decode_latents(latents)
+
+            # 9. Run safety checker
+            image, has_nsfw_concept = self.run_safety_checker(image, device, prompt_embeds.dtype)
+
+            # 10. Convert to PIL
+            image = self.numpy_to_pil(image)
+        else:
+            # 8. Post-processing
+            image = self.decode_latents(latents)
+
+            # 9. Run safety checker
+            image, has_nsfw_concept = self.run_safety_checker(image, device, prompt_embeds.dtype)
+
+        # Offload last model to CPU
+        if hasattr(self, "final_offload_hook") and self.final_offload_hook is not None:
+            self.final_offload_hook.offload()
+
+        if not return_dict:
+            return (image, has_nsfw_concept)
+
+        return StableDiffusionPipelineOutput(images=image, nsfw_content_detected=has_nsfw_concept)

requirements.txt

@@ -0,0 +1,23 @@
+accelerate==0.18.0
+aiofiles==23.1.0
+aiohttp==3.8.4
+diffusers==0.16.1
+einops==0.6.1
+gradio==3.28.3
+gradio_client==0.1.4
+huggingface-hub==0.14.1
+idna==3.4
+importlib-metadata==6.6.0
+kiwisolver==1.4.4
+lightning-utilities==0.8.0
+matplotlib==3.7.1
+numpy==1.24.3
+open-clip-torch==2.19.0
+opencv-python==4.7.0.72
+Pillow==9.5.0
+pytorch-lightning==2.0.2
+safetensors==0.3.1
+torch==2.0.0
+torchmetrics==0.11.4
+torchvision==0.15.1
+transformers==4.28.1

script.js

@@ -0,0 +1,104 @@
+function gradioApp() {
+    const elems = document.getElementsByTagName('gradio-app')
+    const elem = elems.length == 0 ? document : elems[0]
+
+    if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) }
+    return elem.shadowRoot ? elem.shadowRoot : elem
+}
+
+function get_uiCurrentTab() {
+    return gradioApp().querySelector('#tabs button:not(.border-transparent)')
+}
+
+function get_uiCurrentTabContent() {
+    return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])')
+}
+
+uiUpdateCallbacks = []
+uiLoadedCallbacks = []
+uiTabChangeCallbacks = []
+optionsChangedCallbacks = []
+let uiCurrentTab = null
+
+function onUiUpdate(callback){
+    uiUpdateCallbacks.push(callback)
+}
+function onUiLoaded(callback){
+    uiLoadedCallbacks.push(callback)
+}
+function onUiTabChange(callback){
+    uiTabChangeCallbacks.push(callback)
+}
+function onOptionsChanged(callback){
+    optionsChangedCallbacks.push(callback)
+}
+
+function runCallback(x, m){
+    try {
+        x(m)
+    } catch (e) {
+        (console.error || console.log).call(console, e.message, e);
+    }
+}
+function executeCallbacks(queue, m) {
+    queue.forEach(function(x){runCallback(x, m)})
+}
+
+var executedOnLoaded = false;
+
+document.addEventListener("DOMContentLoaded", function() {
+    var mutationObserver = new MutationObserver(function(m){
+        if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){
+            executedOnLoaded = true;
+            executeCallbacks(uiLoadedCallbacks);
+        }
+
+        executeCallbacks(uiUpdateCallbacks, m);
+        const newTab = get_uiCurrentTab();
+        if ( newTab && ( newTab !== uiCurrentTab ) ) {
+            uiCurrentTab = newTab;
+            executeCallbacks(uiTabChangeCallbacks);
+        }
+    });
+    mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
+});
+
+/**
+ * Add a ctrl+enter as a shortcut to start a generation
+ */
+document.addEventListener('keydown', function(e) {
+    var handled = false;
+    if (e.key !== undefined) {
+        if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
+    } else if (e.keyCode !== undefined) {
+        if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
+    }
+    if (handled) {
+        button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
+        if (button) {
+            button.click();
+        }
+        e.preventDefault();
+    }
+})
+
+/**
+ * checks that a UI element is not in another hidden element or tab content
+ */
+function uiElementIsVisible(el) {
+    let isVisible = !el.closest('.\\!hidden');
+    if ( ! isVisible ) {
+        return false;
+    }
+
+    while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) {
+        if ( ! isVisible ) {
+            return false;
+        } else if ( el.parentElement ) {
+            el = el.parentElement
+        } else {
+            break;
+        }
+    }
+    return isVisible;
+}

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;
+}