1import { g as spread_props, i as if_block, r as rest_props, k as each, a as set_attribute, b as set_class, f as set_style, u as index, d as bind_this } from './i18n-CMo5lpzy.js'; 2import { R as push, u as state, v as proxy, y as user_effect, w as get, x as set, S as first_child, a as append, X as sibling, T as pop, a5 as user_derived, W as from_html, V as child, a6 as comment, t as template_effect, Y as reset, a0 as set_text, Z as event } from './index-BvBk1Iap.js'; 3import { B as Block } from './Block-Bx3BikCN.js'; 4import './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js'; 5import { B as BlockLabel } from './BlockLabel-oGSqUii_.js'; 6import { E as Empty } from './Empty-CHa-gxv7.js'; 7import { I as Image } from './Image-C3F5KG1F.js'; 8import { G as Gradio } from './utils.svelte-CYLB_jIA.js'; 9import { I as IconButtonWrapper } from './IconButtonWrapper-Ba0GidgU.js'; 10import { F as FullscreenButton } from './FullscreenButton-CNmhk6nd.js'; 11import { S as Static } from './index-Lz7fsHFt.js'; 12import './StreamingBar.svelte_svelte_type_style_lang-CdFIGsJa.js'; 13import './snippet-Bl5YVoCg.js'; 14import './clone-DaB-S2nH.js'; 15import './Maximize-B_43ylTs.js'; 16import './Clear-Dgs5UhTO.js'; 17import './html-CdUEtR5E.js'; 18import './index-C7e-J7CF.js'; 19 20var root_7 = from_html(`<img/>`); 21var root_9 = from_html(`<button class="legend-item svelte-1oizopk"> </button>`); 22var root_8 = from_html(`<div class="legend svelte-1oizopk"></div>`); 23var root_4 = from_html(`<div class="image-container svelte-1oizopk"><!> <img alt="the base file that is annotated"/> <!></div> <!>`, 1); 24var root_1 = from_html(`<!> <!> <div class="container svelte-1oizopk"><!></div>`, 1); 25 26function Index($$anchor, $$props) { 27 push($$props, true); 28 29 const props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 30 const gradio = new Gradio(props); 31 let old_value = state(proxy(gradio.props.value)); 32 let active = state(null); 33 let image_container; 34 let fullscreen = state(false); 35 let label = user_derived(() => gradio.shared.label || gradio.i18n("annotated_image.annotated_image")); 36 37 user_effect(() => { 38 if (get(old_value) != gradio.props.value) { 39 set(old_value, gradio.props.value, true); 40 gradio.dispatch("change"); 41 } 42 }); 43 44 function handle_mouseover(_label) { 45 set(active, _label, true); 46 } 47 48 function handle_mouseout() { 49 set(active, null); 50 } 51 52 function handle_click(i, value) { 53 gradio.dispatch("select", { value, index: i }); 54 } 55 56 Block($$anchor, { 57 get visible() { 58 return gradio.shared.visible; 59 }, 60 61 get elem_id() { 62 return gradio.shared.elem_id; 63 }, 64 65 get elem_classes() { 66 return gradio.shared.elem_classes; 67 }, 68 padding: false, 69 get height() { 70 return gradio.props.height; 71 }, 72 73 get width() { 74 return gradio.props.width; 75 }, 76 allow_overflow: false, 77 get container() { 78 return gradio.shared.container; 79 }, 80 81 get scale() { 82 return gradio.shared.scale; 83 }, 84 85 get min_width() { 86 return gradio.shared.min_width; 87 }, 88 89 get fullscreen() { 90 return get(fullscreen); 91 }, 92 93 set fullscreen($$value) { 94 set(fullscreen, $$value, true); 95 }, 96 97 children: ($$anchor, $$slotProps) => { 98 var fragment_1 = root_1(); 99 var node = first_child(fragment_1); 100 101 Static(node, spread_props( 102 { 103 get autoscroll() { 104 return gradio.shared.autoscroll; 105 }, 106 107 get i18n() { 108 return gradio.i18n; 109 } 110 }, 111 () => gradio.shared.loading_status 112 )); 113 114 var node_1 = sibling(node, 2); 115 116 BlockLabel(node_1, { 117 get show_label() { 118 return gradio.shared.show_label; 119 }, 120 121 get Icon() { 122 return Image; 123 }, 124 125 get label() { 126 return get(label); 127 } 128 }); 129 130 var div = sibling(node_1, 2); 131 var node_2 = child(div); 132 133 { 134 var consequent = ($$anchor) => { 135 Empty($$anchor, { 136 size: 'large', 137 unpadded_box: true, 138 children: ($$anchor, $$slotProps) => { 139 Image($$anchor); 140 }, 141 $$slots: { default: true } 142 }); 143 }; 144 145 var alternate = ($$anchor) => { 146 var fragment_4 = root_4(); 147 var div_1 = first_child(fragment_4); 148 var node_3 = child(div_1); 149 150 { 151 let $0 = user_derived(() => gradio.props.buttons || []); 152 153 IconButtonWrapper(node_3, { 154 get buttons() { 155 return get($0); 156 }, 157 158 on_custom_button_click: (id) => { 159 gradio.dispatch("custom_button_click", { id }); 160 }, 161 162 children: ($$anchor, $$slotProps) => { 163 var fragment_5 = comment(); 164 var node_4 = first_child(fragment_5); 165 166 { 167 var consequent_1 = ($$anchor) => { 168 FullscreenButton($$anchor, { 169 get fullscreen() { 170 return get(fullscreen); 171 }, 172 173 $$events: { 174 fullscreen: ({ detail }) => { 175 set(fullscreen, detail, true); 176 } 177 } 178 }); 179 }; 180 181 if_block(node_4, ($$render) => { 182 if ((gradio.props.buttons || []).some((btn) => typeof btn === "string" && btn === "fullscreen")) $$render(consequent_1); 183 }); 184 } 185 186 append($$anchor, fragment_5); 187 }, 188 $$slots: { default: true } 189 }); 190 } 191 192 var img = sibling(node_3, 2);
193 let classes; 194 var node_5 = sibling(img, 2); 195 196 each(node_5, 17, () => gradio.props.value ? gradio.props.value.annotations : [], index, ($$anchor, ann, i) => { 197 var img_1 = root_7(); 198 let classes_1; 199 200 template_effect( 201 ($0) => { 202 set_attribute(img_1, 'alt', `segmentation mask identifying ${gradio.shared.label ?? ''} within the uploaded file`); 203 204 classes_1 = set_class(img_1, 1, 'mask fit-height svelte-1oizopk', null, classes_1, { 205 'fit-height': !get(fullscreen), 206 active: get(active) == get(ann).label, 207 inactive: get(active) != get(ann).label && get(active) != null 208 }); 209 210 set_attribute(img_1, 'src', get(ann).image.url); 211 set_style(img_1, $0); 212 }, 213 [ 214 () => gradio.props.color_map && get(ann).label in gradio.props.color_map 215 ? null 216 : `filter: hue-rotate(${Math.round(i * 360 / (gradio.props.value?.annotations.length ?? 1))}deg);` 217 ] 218 ); 219 220 append($$anchor, img_1); 221 }); 222 223 reset(div_1); 224 bind_this(div_1, ($$value) => image_container = $$value, () => image_container); 225 226 var node_6 = sibling(div_1, 2); 227 228 { 229 var consequent_2 = ($$anchor) => { 230 var div_2 = root_8(); 231 232 each(div_2, 21, () => gradio.props.value.annotations, index, ($$anchor, ann, i) => { 233 var button = root_9(); 234 var text = child(button, true); 235 236 reset(button); 237 238 template_effect( 239 ($0) => { 240 set_style(button, `background-color: ${$0 ?? ''}`); 241 set_text(text, get(ann).label); 242 }, 243 [ 244 () => gradio.props.color_map && get(ann).label in gradio.props.color_map 245 ? gradio.props.color_map[get(ann).label] + '88' 246 : `hsla(${Math.round(i * 360 / gradio.props.value.annotations.length)}, 100%, 50%, 0.3)` 247 ] 248 ); 249 250 event('mouseover', button, () => handle_mouseover(get(ann).label)); 251 event('focus', button, () => handle_mouseover(get(ann).label)); 252 event('mouseout', button, () => handle_mouseout()); 253 event('blur', button, () => handle_mouseout()); 254 event('click', button, () => handle_click(i, get(ann).label)); 255 append($$anchor, button); 256 }); 257 258 reset(div_2); 259 append($$anchor, div_2); 260 }; 261 262 if_block(node_6, ($$render) => { 263 if (gradio.props.show_legend && gradio.props.value) $$render(consequent_2); 264 }); 265 } 266 267 template_effect(() => { 268 classes = set_class(img, 1, 'base-image svelte-1oizopk', null, classes, { 'fit-height': gradio.props.height && !get(fullscreen) }); 269 set_attribute(img, 'src', gradio.props.value ? gradio.props.value.image.url : null); 270 }); 271 272 append($$anchor, fragment_4); 273 }; 274 275 if_block(node_2, ($$render) => { 276 if (gradio.props.value == null) $$render(consequent); else $$render(alternate, false); 277 }); 278 } 279 280 reset(div); 281 append($$anchor, fragment_1); 282 }, 283 $$slots: { default: true } 284 }); 285 286 pop(); 287} 288 289export { Index as default }; 290//# sourceMappingURL=Index-DWC_ST0U.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.