Upload folder using huggingface_hub

README.md

@@ -1,19 +1,3 @@
----
-tags:
-- gradio-custom-component
-- gradio-template-Image
-- bounding box
-- annotator
-- annotate
-- boxes
-title: gradio_image_annotation V0.0.8
-colorFrom: yellow
-colorTo: green
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: A Gradio component for image annotation
----
 
 # `gradio_image_annotation`
 <a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  

src/backend/gradio_image_annotation/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}.wrap.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-16nch4a.svelte-16nch4a{top:0;right:0;left:0}.wrap.default.svelte-16nch4a.svelte-16nch4a{top:0;right:0;bottom:0;left:0}.hide.svelte-16nch4a.svelte-16nch4a{opacity:0;pointer-events:none}.generating.svelte-16nch4a.svelte-16nch4a{animation:svelte-16nch4a-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-16nch4a-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-16nch4a.svelte-16nch4a{background:none}@keyframes svelte-16nch4a-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-16nch4a-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-16nch4a.svelte-16nch4a{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-16nch4a.svelte-16nch4a{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-16nch4a.svelte-16nch4a{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-16nch4a.svelte-16nch4a{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-16nch4a.svelte-16nch4a{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-16nch4a .progress-text.svelte-16nch4a{background:var(--block-background-fill)}.border.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary)}.clear-status.svelte-16nch4a.svelte-16nch4a{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1s26xmt{cursor:pointer;width:var(--size-full)}.hidden.svelte-1s26xmt{display:none;height:0!important;position:absolute;width:0;flex-grow:0}.center.svelte-1s26xmt{display:flex;justify-content:center}.flex.svelte-1s26xmt{display:flex;flex-direction:column;justify-content:center;align-items:center}.disable_click.svelte-1s26xmt{cursor:default}input.svelte-1s26xmt{display:none}div.svelte-1wj0ocy{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-1wj0ocy{margin:var(--size-1)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-182gnnj{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-182gnnj{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-182gnnj{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-182gnnj:hover,.icon.svelte-182gnnj:focus{color:var(--color-accent)}.canvas-container.svelte-182gnnj:focus{outline:none}.image-frame.svelte-1gjdske img{width:var(--size-full);height:var(--size-full);object-fit:cover}.image-frame.svelte-1gjdske{object-fit:cover;width:100%}.upload-container.svelte-1gjdske{height:100%;width:100%;flex-shrink:1;max-height:100%}.image-container.svelte-1gjdske{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1gjdske{cursor:crosshair}.icon-buttons.svelte-1gjdske{display:flex;position:absolute;top:6px;right:6px;gap:var(--size-1)}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}
+.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}.wrap.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-16nch4a.svelte-16nch4a{top:0;right:0;left:0}.wrap.default.svelte-16nch4a.svelte-16nch4a{top:0;right:0;bottom:0;left:0}.hide.svelte-16nch4a.svelte-16nch4a{opacity:0;pointer-events:none}.generating.svelte-16nch4a.svelte-16nch4a{animation:svelte-16nch4a-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-16nch4a-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-16nch4a.svelte-16nch4a{background:none}@keyframes svelte-16nch4a-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-16nch4a-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-16nch4a.svelte-16nch4a{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-16nch4a.svelte-16nch4a{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-16nch4a.svelte-16nch4a{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-16nch4a.svelte-16nch4a{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-16nch4a.svelte-16nch4a{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-16nch4a .progress-text.svelte-16nch4a{background:var(--block-background-fill)}.border.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary)}.clear-status.svelte-16nch4a.svelte-16nch4a{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1s26xmt{cursor:pointer;width:var(--size-full)}.hidden.svelte-1s26xmt{display:none;height:0!important;position:absolute;width:0;flex-grow:0}.center.svelte-1s26xmt{display:flex;justify-content:center}.flex.svelte-1s26xmt{display:flex;flex-direction:column;justify-content:center;align-items:center}.disable_click.svelte-1s26xmt{cursor:default}input.svelte-1s26xmt{display:none}div.svelte-1wj0ocy{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-1wj0ocy{margin:var(--size-1)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-10jprmi{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-10jprmi{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-10jprmi{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-10jprmi:hover,.icon.svelte-10jprmi:focus{color:var(--color-accent)}.selected.svelte-10jprmi{color:var(--color-accent)}.canvas-container.svelte-10jprmi:focus{outline:none}.image-frame.svelte-1gjdske img{width:var(--size-full);height:var(--size-full);object-fit:cover}.image-frame.svelte-1gjdske{object-fit:cover;width:100%}.upload-container.svelte-1gjdske{height:100%;width:100%;flex-shrink:1;max-height:100%}.image-container.svelte-1gjdske{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1gjdske{cursor:crosshair}.icon-buttons.svelte-1gjdske{display:flex;position:absolute;top:6px;right:6px;gap:var(--size-1)}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}

src/backend/gradio_image_annotation/templates/example/style.css

@@ -1 +1 @@
-.dropdown-arrow.svelte-145leq6{fill:currentColor}.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-16nch4a.svelte-16nch4a{top:0;right:0;left:0}.wrap.default.svelte-16nch4a.svelte-16nch4a{top:0;right:0;bottom:0;left:0}.hide.svelte-16nch4a.svelte-16nch4a{opacity:0;pointer-events:none}.generating.svelte-16nch4a.svelte-16nch4a{animation:svelte-16nch4a-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-16nch4a-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-16nch4a.svelte-16nch4a{background:none}@keyframes svelte-16nch4a-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-16nch4a-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-16nch4a.svelte-16nch4a{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-16nch4a.svelte-16nch4a{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-16nch4a.svelte-16nch4a{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-16nch4a.svelte-16nch4a{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-16nch4a.svelte-16nch4a{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-16nch4a .progress-text.svelte-16nch4a{background:var(--block-background-fill)}.border.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary)}.clear-status.svelte-16nch4a.svelte-16nch4a{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-182gnnj{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-182gnnj{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-182gnnj{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-182gnnj:hover,.icon.svelte-182gnnj:focus{color:var(--color-accent)}.canvas-container.svelte-182gnnj:focus{outline:none}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}
+.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-16nch4a.svelte-16nch4a{top:0;right:0;left:0}.wrap.default.svelte-16nch4a.svelte-16nch4a{top:0;right:0;bottom:0;left:0}.hide.svelte-16nch4a.svelte-16nch4a{opacity:0;pointer-events:none}.generating.svelte-16nch4a.svelte-16nch4a{animation:svelte-16nch4a-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-16nch4a-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-16nch4a.svelte-16nch4a{background:none}@keyframes svelte-16nch4a-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-16nch4a-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-16nch4a.svelte-16nch4a{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-16nch4a.svelte-16nch4a{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-16nch4a.svelte-16nch4a{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-16nch4a.svelte-16nch4a{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-16nch4a.svelte-16nch4a{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-16nch4a.svelte-16nch4a{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-16nch4a.svelte-16nch4a{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-16nch4a .progress-text.svelte-16nch4a{background:var(--block-background-fill)}.border.svelte-16nch4a.svelte-16nch4a{border:1px solid var(--border-color-primary)}.clear-status.svelte-16nch4a.svelte-16nch4a{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-10jprmi{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-10jprmi{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-10jprmi{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-10jprmi:hover,.icon.svelte-10jprmi:focus{color:var(--color-accent)}.selected.svelte-10jprmi{color:var(--color-accent)}.canvas-container.svelte-10jprmi:focus{outline:none}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}

src/frontend/shared/Box.ts

@@ -25,12 +25,14 @@ export default class Box {
     isDragging: boolean;
     isResizing: boolean;
     isSelected: boolean;
+    isCreating: boolean;
     offsetMouseX: number;
     offsetMouseY: number;
     resizeHandleSize: number;
     resizingHandleIndex: number;
     minSize: number;
     renderCallBack: () => void;
+    onFinishCreation: () => void;
     canvasXmin: number;
     canvasYmin: number;
     canvasXmax: number;
@@ -38,6 +40,8 @@ export default class Box {
     scaleFactor: number;
     thickness: number;
     selectedThickness: number;
+    creatingAnchorX: string;
+    creatingAnchorY: string;
     resizeHandles: {
         xmin: number;
         ymin: number;
@@ -47,6 +51,7 @@ export default class Box {
 
     constructor(
         renderCallBack: () => void,
+        onFinishCreation: () => void,
         canvasXmin: number,
         canvasYmin: number,
         canvasXmax: number,
@@ -62,9 +67,10 @@ export default class Box {
         handleSize: number = 8,
         thickness: number = 2,
         selectedThickness: number = 4,
-        scaleFactor: number = 1
+        scaleFactor: number = 1,
     ) {
         this.renderCallBack = renderCallBack;
+        this.onFinishCreation = onFinishCreation;
         this.canvasXmin = canvasXmin;
         this.canvasYmin = canvasYmin;
         this.canvasXmax = canvasXmax;
@@ -72,6 +78,7 @@ export default class Box {
         this.scaleFactor = scaleFactor;
         this.label = label;
         this.isDragging = false;
+        this.isCreating = false;
         this.xmin = xmin;
         this.ymin = ymin;
         this.xmax = xmax;
@@ -88,6 +95,8 @@ export default class Box {
         this.minSize = minSize;
         this.color = color;
         this.alpha = alpha;
+        this.creatingAnchorX = "xmin";
+        this.creatingAnchorY = "ymin";
     }
 
     toJSON() {
@@ -188,6 +197,10 @@ export default class Box {
         return this.ymax - this.ymin;
     }
 
+    getArea(): number {
+        return this.getWidth() * this.getHeight();
+    }
+
     toCanvasCoordinates(x: number, y: number): [number, number] {
         x = x + this.canvasXmin;
         y = y + this.canvasYmin;
@@ -311,6 +324,110 @@ export default class Box {
         return -1;
     }
 
+    startCreating(event: MouseEvent, canvasX: number, canvasY: number): void {
+        this.isCreating = true;
+        this.offsetMouseX = canvasX;
+        this.offsetMouseY = canvasY;
+        document.addEventListener("mousemove", this.handleCreating);
+        document.addEventListener("mouseup", this.stopCreating);
+    }
+
+    handleCreating = (event: MouseEvent): void => {
+        if (this.isCreating) {
+            let [x, y] = this.toBoxCoordinates(event.clientX, event.clientY);
+            x -= this.offsetMouseX;
+            y -= this.offsetMouseY;
+
+            if (x > this.xmax) {
+                if (this.creatingAnchorX == "xmax") {
+                    this.xmin = this.xmax;
+                }
+                this.xmax = x;
+                this.creatingAnchorX = "xmin";
+            } else if (x > this.xmin && x < this.xmax && this.creatingAnchorX == "xmin") {
+                this.xmax = x;
+            } else if (x > this.xmin && x < this.xmax && this.creatingAnchorX == "xmax") {
+                this.xmin = x;
+            } else if (x < this.xmin) {
+                if (this.creatingAnchorX == "xmin") {
+                    this.xmax = this.xmin;
+                }
+                this.xmin = x;
+                this.creatingAnchorX = "xmax";
+            }
+
+            if (y > this.ymax) {
+                if (this.creatingAnchorY == "ymax") {
+                    this.ymin = this.ymax;
+                }
+                this.ymax = y;
+                this.creatingAnchorY = "ymin";
+            } else if (y > this.ymin && y < this.ymax && this.creatingAnchorY == "ymin") {
+                this.ymax = y;
+            } else if (y > this.ymin && y < this.ymax && this.creatingAnchorY == "ymax") {
+                this.ymin = y;
+            } else if (y < this.ymin) {
+                if (this.creatingAnchorY == "ymin") {
+                    this.ymax = this.ymin;
+                }
+                this.ymin = y;
+                this.creatingAnchorY = "ymax";
+            }
+
+            this.updateHandles();
+            this.renderCallBack();
+        }
+    }
+    
+    stopCreating = (event: MouseEvent): void => {
+        this.isCreating = false;
+        document.removeEventListener("mousemove", this.handleCreating);
+        document.removeEventListener("mouseup", this.stopCreating);
+
+        if (this.getArea() > 0) {
+            const canvasW = this.canvasXmax - this.canvasXmin;
+            const canvasH = this.canvasYmax - this.canvasYmin;
+            this.xmin = clamp(this.xmin, 0, canvasW - this.minSize);
+            this.ymin = clamp(this.ymin, 0, canvasH - this.minSize);
+            this.xmax = clamp(this.xmax, this.minSize, canvasW);
+            this.ymax = clamp(this.ymax, this.minSize, canvasH);
+
+            if (this.minSize > 0) {
+                if (this.getWidth() < this.minSize) {
+                    if (this.creatingAnchorX == "xmin") {
+                        this.xmax = this.xmin + this.minSize;
+                    } else {
+                        this.xmin = this.xmax - this.minSize;
+                    }
+                }
+                if (this.getHeight() < this.minSize) {
+                    if (this.creatingAnchorY == "ymin") {
+                        this.ymax = this.ymin + this.minSize;
+                    } else {
+                        this.ymin = this.ymax - this.minSize;
+                    }
+                }
+                if (this.xmax > canvasW) {
+                    this.xmin -= this.xmax - canvasW;
+                    this.xmax = canvasW;
+                } else if (this.xmin < 0) {
+                    this.xmax -= this.xmin;
+                    this.xmin = 0;
+                }
+                if (this.ymax > canvasH) {
+                    this.ymin -= this.ymax - canvasH;
+                    this.ymax = canvasH;
+                } else if (this.ymin < 0) {
+                    this.ymax -= this.ymin;
+                    this.ymin = 0;
+                }
+            }
+            this.updateHandles();
+            this.renderCallBack();
+        }
+        this.onFinishCreation();
+    }
+
     startResize(handleIndex: number, event: MouseEvent): void {
         this.resizingHandleIndex = handleIndex;
         this.isResizing = true;

src/frontend/shared/Canvas.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { onMount, onDestroy, createEventDispatcher } from "svelte";
-	import { Clear, Edit } from "@gradio/icons";
-	import { Add } from "./icons/index";
+	import { Clear } from "@gradio/icons";
+	import { BoundingBox, Hand } from "./icons/index";
 	import ModalBox from "./ModalBox.svelte";
 	import Box from "./Box";
 	import { Colors } from './Colors.js';
 	import AnnotatedImageData from "./AnnotatedImageData";
 
+	enum Mode {creation, drag}
+
     export let imageUrl: string | null = null;
 	export let interactive: boolean;
 	export let boxAlpha = 0.5;
@@ -23,6 +25,11 @@
 	let ctx: CanvasRenderingContext2D;
     let image = null;
 	let selectedBox = -1;
+	let mode: Mode = Mode.drag;
+
+	if (value !== null && value.boxes.length == 0) {
+		mode = Mode.creation;
+	}
 
 	let canvasXmin = 0;
 	let canvasYmin = 0;
@@ -81,11 +88,19 @@
 		if (!interactive) {
 			return;
 		}
+		
+		if (mode === Mode.creation){
+			createBox(event);
+		} else if (mode === Mode.drag) {
+			clickBox(event);
+		}
+	}
 
+	function clickBox(event: MouseEvent) {
 		const rect = canvas.getBoundingClientRect();
 		const mouseX = event.clientX - rect.left;
 		const mouseY = event.clientY - rect.top;
-		
+
 		// Check if the mouse is over any of the resizing handles
 		for (const [i, box] of value.boxes.entries()) {
 			const handleIndex = box.indexOfPointInsideHandle(mouseX, mouseY);
@@ -123,53 +138,29 @@
 		}
 	}
 
-    function onAddBox() {
-		if (!disableEditBoxes){
-			newModalVisible = true;
+	function createBox(event: MouseEvent) {
+		const rect = canvas.getBoundingClientRect();
+		const x = (event.clientX - rect.left - canvasXmin) / scaleFactor;
+		const y = (event.clientY - rect.top - canvasYmin) / scaleFactor;
+		let color;
+		if (choicesColors.length > 0) {
+			color = colorHexToRGB(choicesColors[0]);
 		} else {
-			createBox();
-		}
-	}
-
-	function createBox(
-		label = null,
-		color = null,
-		xmin = null,
-		ymin = null,
-		xmax = null,
-		ymax = null
-	){
-		if (color === null || color === "") {
 			color = Colors[value.boxes.length % Colors.length];
-		} else {
-			color = colorHexToRGB(color);
-		}
-		if (label === null){
-			label = "";
-		}
-		if (xmin === null){
-			xmin = (imageWidth / 3) / scaleFactor;
-		}
-		if (xmax === null){
-			xmax = ((imageWidth / 3)*2) / scaleFactor;
-		}
-		if (ymin === null){
-			ymin = (imageHeight / 3) / scaleFactor;
-		}
-		if (ymax === null){
-			ymax = ((imageHeight / 3)*2) / scaleFactor;
 		}
+		
 		let box = new Box(
 			draw,
+			onBoxFinishCreation,
 			canvasXmin,
 			canvasYmin,
 			canvasXmax,
 			canvasYmax,
-			label,
-			Math.round(xmin),
-			Math.round(ymin),
-			Math.round(xmax),
-			Math.round(ymax),
+			"",
+			x,
+			y,
+			x,
+			y,
 			color,
 			boxAlpha,
 			boxMinSize,
@@ -177,17 +168,30 @@
 			boxThickness,
 			boxSelectedThickness
 		);
+		box.startCreating(event, rect.left, rect.top);
 		value.boxes = [box, ...value.boxes];
+		selectBox(0);
 		draw();
 		dispatch("change");
 	}
 
-	function onModalNewChange(event) {
-		newModalVisible = false;
-		const { detail } = event;
-		let ok = detail.ok;
-		if (ok) {
-			createBox(detail.label, detail.color)
+	function setCreateMode() {
+		mode = Mode.creation;
+		canvas.style.cursor = "crosshair";
+	}
+
+	function setDragMode() {
+		mode = Mode.drag;
+		canvas.style.cursor = "default";
+	}
+
+	function onBoxFinishCreation() {
+		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
+			if (value.boxes[selectedBox].getArea() < 1) {
+				onDeleteBox();
+			} else if (!disableEditBoxes){
+				newModalVisible = true;
+			}
 		}
 	}
 
@@ -210,13 +214,36 @@
 		const { detail } = event;
 		let label = detail.label;
 		let color = detail.color;
-		let ok = detail.ok;
-		if (ok && selectedBox >= 0 && selectedBox < value.boxes.length) {
+		let ret = detail.ret;
+		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
 			let box = value.boxes[selectedBox];
-			box.label = label;
-			box.color = colorHexToRGB(color);
-			draw();
-			dispatch("change");
+			if (ret == 1) {
+				box.label = label;
+				box.color = colorHexToRGB(color);
+				draw();
+				dispatch("change");
+			} else if (ret == -1) {
+				onDeleteBox();
+			}
+		}
+	}
+
+	function onModalNewChange(event) {
+		newModalVisible = false;
+		const { detail } = event;
+		let label = detail.label;
+		let color = detail.color;
+		let ret = detail.ret;
+		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
+			let box = value.boxes[selectedBox];
+			if (ret == 1) {
+				box.label = label;
+				box.color = colorHexToRGB(color);
+				draw();
+				dispatch("change");
+			} else {
+				onDeleteBox();
+			}
 		}
 	}
 
@@ -293,6 +320,7 @@
 				}
 				box = new Box(
 					draw,
+					onBoxFinishCreation,
 					canvasXmin,
 					canvasYmin,
 					canvasXmax,
@@ -386,17 +414,15 @@
 	<span class="canvas-control">
 		<button
 			class="icon"
-			on:click={() => onAddBox()}><Add/></button
+			class:selected={mode === Mode.creation}
+			aria-label="Create box"
+			on:click={() => setCreateMode()}><BoundingBox/></button
 		>
-		{#if !disableEditBoxes}
-			<button
-				class="icon"
-				on:click={() => onEditBox()}><Edit/></button
-			>
-		{/if}
 		<button
 			class="icon"
-			on:click={() => onDeleteBox()}><Clear/></button
+			class:selected={mode === Mode.drag}
+			aria-label="Edit boxes"
+			on:click={() => setDragMode()}><Hand/></button
 		>
 	</span>
 {/if}
@@ -417,8 +443,10 @@
 		on:change={onModalNewChange}
 		on:enter{onModalNewChange}
 		choices={choices}
+		showRemove={false}
 		choicesColors={choicesColors}
-		color={Array.isArray(choicesColors) && choicesColors.length > 0 ? choicesColors[0] : colorRGBAToHex(Colors[value.boxes.length % Colors.length])}
+		label={selectedBox >= 0 && selectedBox < value.boxes.length ? value.boxes[selectedBox].label : ""}
+		color={selectedBox >= 0 && selectedBox < value.boxes.length ? colorRGBAToHex(value.boxes[selectedBox].color) : ""}
 	/>
 {/if}
 
@@ -458,6 +486,10 @@
 		color: var(--color-accent);
 	}
 	
+	.selected {
+		color: var(--color-accent);
+	}
+
 	.canvas-container:focus {
     	outline: none;
 	}

src/frontend/shared/ModalBox.svelte

@@ -11,16 +11,17 @@
     export let choicesColors = [];
     export let color = "";
     export let currentColor = "";
+    export let showRemove = true;
     
     const dispatch = createEventDispatcher<{
 		change: object;
 	}>();
 
-    function dispatchChange(ok: boolean) {
+    function dispatchChange(ret: number) {
         dispatch("change", {
             label: currentLabel,
             color: currentColor,
-            ok: ok
+            ret: ret // -1: remove, 0: cancel, 1: change
         });
     }
 
@@ -47,13 +48,13 @@
 
     function onDropDownEnter(event) {
         onDropDownChange(event);
-        dispatchChange(true);
+        dispatchChange(1);
     }
 
     function handleKeyPress(event: KeyboardEvent) {
 		switch (event.key) {
 			case "Enter":
-                dispatchChange(true);
+                dispatchChange(1);
 				break;
 		}
 	}
@@ -94,13 +95,21 @@
             </div>
             <div style="margin-right: 8px;">
                 <BaseButton
-                on:click={() => dispatchChange(false)}
+                on:click={() => dispatchChange(0)}
                 >Cancel</BaseButton>
             </div>
+            {#if showRemove}
+                <div style="margin-right: 8px;">
+                    <BaseButton
+                        variant="stop"
+                        on:click={() => dispatchChange(-1)}
+                    >Remove</BaseButton>
+                </div>
+            {/if}
             <div>
                 <BaseButton
                     variant="primary"
-                    on:click={() => dispatchChange(true)}
+                    on:click={() => dispatchChange(1)}
                 >OK</BaseButton>
             </div>
         </span>

src/frontend/shared/icons/BoundingBox.svelte

@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	stroke="currentColor"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
+>
+    <rect x="2" y="2" width="5" height="5" rx="1" ry="1" stroke-width="2" fill="none" />
+    <rect x="17" y="2" width="5" height="5" rx="1" ry="1" stroke-width="2" fill="none" />
+    <rect x="2" y="17" width="5" height="5" rx="1" ry="1" stroke-width="2" fill="none" />
+    <rect x="17" y="17" width="5" height="5" rx="1" ry="1" stroke-width="2" fill="none" />
+    
+    <line x1="7.5" y1="4.5" x2="16" y2="4.5" style="stroke-width:2px;" />
+    <line x1="7.5" y1="19.5" x2="16" y2="19.5" style="stroke-width:2px;" />
+    <line x1="4.5" y1="8" x2="4.5" y2="16" style="stroke-width:2px;" />
+    <line x1="19.5" y1="8" x2="19.5" y2="16" style="stroke-width:2px;" />
+</svg>

src/frontend/shared/icons/Hand.svelte

@@ -0,0 +1,17 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	stroke="currentColor"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
+>
+     <path
+        d="M 14.4 2.85 V 11.1 V 3.95 C 14.4 3.0387 15.1388 2.3 16.05 2.3 C 16.9612 2.3 17.7 3.0387 17.7 3.95 V 11.1 V 7.25 C 17.7 6.3387 18.4388 5.6 19.35 5.6 C 20.2612 5.6 21 6.3387 21 7.25 V 16.6 C 21 20.2451 18.0451 23.2 14.4 23.2 H 13.16 C 11.4831 23.2 9.8692 22.5618 8.6459 21.4149 L 3.1915 16.3014 C 2.403 15.5622 2.3829 14.3171 3.1472 13.5528 C 3.8943 12.8057 5.1057 12.8057 5.8528 13.5528 L 7.8 15.5 V 6.15 C 7.8 5.2387 8.5387 4.5 9.45 4.5 C 10.3612 4.5 11.1 5.2387 11.1 6.15 V 11.1 V 2.85 C 11.1 1.9387 11.8388 1.2 12.75 1.2 C 13.6612 1.2 14.4 1.9387 14.4 2.85 Z"
+        fill="none"
+        stroke-width="2"
+    />
+</svg>

src/frontend/shared/icons/index.ts

@@ -1 +1,3 @@
-export { default as Add } from "./Add.svelte";
+export { default as Add } from "./Add.svelte";
+export { default as BoundingBox } from "./BoundingBox.svelte";
+export { default as Hand } from "./Hand.svelte";

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_image_annotation"
-version = "0.1.0"
+version = "0.2.0"
 description = "A Gradio component that can be used to annotate images with bounding boxes."
 readme = "README.md"
 license = "MIT"

src/test_height.py

@@ -0,0 +1,77 @@
+import gradio as gr
+from gradio_image_annotation import image_annotator
+import time
+import numpy as np
+import random
+
+example_annotation = {
+    "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
+    "boxes": [
+        {
+            "xmin": 636,
+            "ymin": 575,
+            "xmax": 801,
+            "ymax": 697,
+            "label": "Vehicle",
+            "color": (255, 0, 0)
+        },
+        {
+            "xmin": 360,
+            "ymin": 615,
+            "xmax": 386,
+            "ymax": 702,
+            "label": "Person",
+            "color": (0, 255, 0)
+        }
+    ]
+}
+
+example_crop = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "color": (100, 200, 255)
+        }
+    ]
+}
+
+
+def run(annotations):
+    while True:
+        w = 1920
+        # h = random.randint(100, 700)
+        h = 1080
+        img = np.random.random((h, w, 3))
+        yield  {
+            "image": img
+        }
+        time.sleep(1)
+
+def run2(annotations):
+    while True:
+        w = 1920
+        # h = random.randint(100, 700)
+        h = 1080
+        img = np.random.random((h, w, 3))
+        yield  img
+        time.sleep(1)
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        annotator = image_annotator(
+            example_crop,
+            image_type="numpy",
+        )
+        image = gr.Image()
+    button = gr.Button()
+    button.click(run, annotator, annotator)
+    button2 = gr.Button()
+    button2.click(run2, image, image)
+
+
+if __name__ == "__main__":
+    demo.launch()