1import { B as BranchManager, d as bind_this, r as rest_props, p as prop, i as if_block, k as each, u as index, b as set_class, g as spread_props, f as set_style, h as clsx } from './i18n-dpAHICcw.js'; 2import { p as block, aB as is_promise, O as queue_micro_task, aC as internal_set, aD as Batch, aE as unset_context, aF as is_flushing_sync, U as flushSync, aG as source, aH as UNINITIALIZED, aa as is_runes, a3 as mutable_source, aI as capture, h as hydrating, e as hydrate_next, aJ as HYDRATION_START_ELSE, s as set_hydrate_node, aK as skip_nodes, as as set_hydrating, R as push, y as user_effect, w as get, aL as mount, aM as unmount, x as set, a as append, T as pop, u as state, W as from_html, a6 as comment, S as first_child, X as sibling, ak as delegate, a5 as user_derived, Z as event, V as child, t as template_effect, a0 as set_text, Y as reset } from './index-CDZuCcOm.js'; 3import { B as Block } from './Block-DntE23uJ.js'; 4import './MarkdownCode.svelte_svelte_type_style_lang-GeNUGzep.js'; 5import './ScrollFade.svelte_svelte_type_style_lang-DUvCSfRk.js'; 6import { G as Gradio } from './utils.svelte-CyWLYi-B.js'; 7import { k as key } from './key-BkIRB637.js'; 8import './Textbox-D1wbJ-Bi.js'; 9import './StreamingBar.svelte_svelte_type_style_lang-BxBb9ZZb.js'; 10import Example from './Example-BF3XR3cU.js'; 11import './prism-python-C_fanlsZ.js'; 12import './snippet-DVkMfmSq.js'; 13import './clone-dZfS06Ds.js'; 14import './actions-BTh6ZJJ8.js'; 15import './input-UUW65DyE.js'; 16import './BlockTitle-Xgz-MKYS.js'; 17import './Info-CLoErKII.js'; 18import './MarkdownCode-Q694H4-C.js'; 19import './html-h_YSgefI.js'; 20import './Check-4kogBHUX.js'; 21import './Copy-C8W4pNlO.js'; 22import './Send-DHvsoBjG.js'; 23import './Square-Bg2evxzG.js'; 24import './IconButtonWrapper-KjCt2Pl8.js'; 25import './size-CuuZBRle.js'; 26/* empty css */ 27 28/** @import { Source, TemplateNode } from '#client' */ 29 30const PENDING = 0; 31const THEN = 1; 32 33/** @typedef {typeof PENDING | typeof THEN | typeof CATCH} AwaitState */ 34 35/** 36 * @template V 37 * @param {TemplateNode} node 38 * @param {(() => any)} get_input 39 * @param {null | ((anchor: Node) => void)} pending_fn 40 * @param {null | ((anchor: Node, value: Source<V>) => void)} then_fn 41 * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn 42 * @returns {void} 43 */ 44function await_block(node, get_input, pending_fn, then_fn, catch_fn) { 45 if (hydrating) { 46 hydrate_next(); 47 } 48 49 var runes = is_runes(); 50 51 var v = /** @type {V} */ (UNINITIALIZED); 52 var value = runes ? source(v) : mutable_source(v, false, false); 53 var error = runes ? source(v) : mutable_source(v, false, false); 54 55 var branches = new BranchManager(node); 56 57 block(() => { 58 var input = get_input(); 59 var destroyed = false; 60 61 /** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */ 62 // @ts-ignore coercing `node` to a `Comment` causes TypeScript and Prettier to fight 63 let mismatch = hydrating && is_promise(input) === (node.data === HYDRATION_START_ELSE); 64 65 if (mismatch) { 66 // Hydration mismatch: remove everything inside the anchor and start fresh 67 set_hydrate_node(skip_nodes()); 68 set_hydrating(false); 69 } 70 71 if (is_promise(input)) { 72 var restore = capture(); 73 var resolved = false; 74 75 /** 76 * @param {() => void} fn 77 */ 78 const resolve = (fn) => { 79 if (destroyed) return; 80 81 resolved = true; 82 // We don't want to restore the previous batch here; {#await} blocks don't follow the async logic 83 // we have elsewhere, instead pending/resolve/fail states are each their own batch so to speak. 84 restore(false); 85 // Make sure we have a batch, since the branch manager expects one to exist 86 Batch.ensure(); 87 88 if (hydrating) {
89 // `restore()` could set `hydrating` to `true`, which we very much 90 // don't want â we want to restore everything _except_ this 91 set_hydrating(false); 92 } 93 94 try { 95 fn(); 96 } finally { 97 unset_context(); 98 99 // without this, the DOM does not update until two ticks after the promise 100 // resolves, which is unexpected behaviour (and somewhat irksome to test) 101 if (!is_flushing_sync) flushSync(); 102 } 103 }; 104 105 input.then( 106 (v) => { 107 resolve(() => { 108 internal_set(value, v); 109 branches.ensure(THEN, then_fn && ((target) => then_fn(target, value))); 110 }); 111 }, 112 (e) => { 113 resolve(() => { 114 internal_set(error, e); 115 branches.ensure(THEN, catch_fn && ((target) => catch_fn(target, error))); 116 117 if (!catch_fn) { 118 // Rethrow the error if no catch block exists 119 throw error.v; 120 } 121 }); 122 } 123 ); 124 125 if (hydrating) { 126 branches.ensure(PENDING, pending_fn); 127 } else { 128 // Wait a microtask before checking if we should show the pending state as 129 // the promise might have resolved by then 130 queue_micro_task(() => { 131 if (!resolved) { 132 resolve(() => { 133 branches.ensure(PENDING, pending_fn); 134 }); 135 } 136 }); 137 } 138 } else { 139 internal_set(value, input); 140 branches.ensure(THEN, then_fn && ((target) => then_fn(target, value))); 141 } 142 143 if (mismatch) { 144 // continue in hydration mode 145 set_hydrating(true); 146 } 147 148 return () => { 149 destroyed = true; 150 }; 151 }); 152} 153 154var root = from_html(`<span></span>`); 155 156function MountExample($$anchor, $$props) { 157 push($$props, true); 158 159 let rest = rest_props($$props, ['$$slots', '$$events', '$$legacy', 'component', 'runtime']); 160 let el = state(null); 161 162 user_effect(() => { 163 if (!get(el) || !$$props.component) return; 164 165 const _component = $$props.component; 166 const _runtime = $$props.runtime; 167 const _rest = rest; 168 169 if (_runtime) { 170 const mounted = _runtime.mount(_component.default, { target: get(el), props: _rest }); 171 172 return () => { 173 _runtime.unmount(mounted); 174 }; 175 } else { 176 const mounted = mount(_component.default, { target: get(el), props: _rest }); 177 178 return () => { 179 unmount(mounted); 180 }; 181 } 182 }); 183 184 var span = root(); 185 186 bind_this(span, ($$value) => set(el, $$value), () => get(el)); 187 append($$anchor, span); 188 pop(); 189} 190 191var root_5 = from_html(`<button class="gallery-item svelte-16f20a1"><!></button>`); 192var root_3 = from_html(`<div class="gallery svelte-16f20a1"></div>`); 193var root_13 = from_html(`<th class="svelte-16f20a1"> </th>`); 194var root_16 = from_html(`<td><!></td>`); 195var root_14 = from_html(`<tr class="tr-body svelte-16f20a1"></tr>`); 196var root_12 = from_html(`<div class="table-wrap svelte-16f20a1"><table tabindex="0" role="grid" class="svelte-16f20a1"><thead><tr class="tr-head svelte-16f20a1"></tr></thead><tbody></tbody></table></div>`); 197var root_20 = from_html(`<div>...</div>`); 198var root_21 = from_html(`<button> </button>`); 199var root_18 = from_html(`<div class="paginate svelte-16f20a1">Pages: <!></div>`); 200var root_2$1 = from_html(`<!> <!>`, 1); 201 202function Dataset($$anchor, $$props) { 203 push($$props, true); 204 205 let sample_labels = prop($$props, 'sample_labels', 3, null), 206 value = prop($$props, 'value', 15, null), 207 samples_per_page = prop($$props, 'samples_per_page', 3, 10), 208 layout = prop($$props, 'layout', 3, null); 209 210 // Although the `samples_dir` prop is not used in any of the core Gradio component, it is kept for backward compatibility 211 // with any custom components created with gradio<=4.20.0 212 let samples_dir = user_derived(() => $$props.proxy_url 213 ? `/proxy=${$$props.proxy_url}file=` 214 : `${$$props.root}/file=`); 215 216 let current_hover = state(-1); 217 let gallery = user_derived(() => ($$props.components.length < 2 || sample_labels() !== null) && layout() !== "table"); 218 219 let effective_samples = user_derived(() => { 220 if (sample_labels()) { 221 return sample_labels().map((e) => [e]); 222 } 223 224 return $$props.samples ?? []; 225 }); 226 227 // page resets to 0 whenever effective_samples changes, 228 // but can still be overwritten by user clicks 229 let page = user_derived(() => { 230 get(effective_samples); 231 232 return 0; 233 }); 234 235 let paginate = user_derived(() => get(effective_samples).length > samples_per_page()); 236 237 let selected_samples = user_derived(() => { 238 if (get(paginate)) { 239 return get(effective_samples).slice(get(page) * samples_per_page(), (get(page) + 1) * samples_per_page()); 240 } 241 242 return get(effective_samples).slice(); 243 }); 244 245 let page_count = user_derived(() =>
245 Math.ceil(get(effective_samples).length / samples_per_page())); 246 247 let visible_pages = user_derived(() => { 248 if (!get(paginate)) return []; 249 250 let pages = []; 251 252 [0, get(page), get(page_count) - 1].forEach((anchor) => { 253 for (let i = anchor - 2; i <= anchor + 2; i++) { 254 if (i >= 0 && i < get(page_count) && !pages.includes(i)) { 255 if (pages.length > 0 && i - pages[pages.length - 1] > 1) { 256 pages.push(-1); 257 } 258 259 pages.push(i); 260 } 261 } 262 }); 263 264 return pages; 265 }); 266 267 function handle_mouseenter(i) { 268 set(current_hover, i, true); 269 } 270 271 function handle_mouseleave() { 272 set(current_hover, -1); 273 } 274 275 let component_meta = []; 276 277 async function get_component_meta(selected_samples_json) { 278 const _selected_samples = JSON.parse(selected_samples_json); 279 280 // @ts-ignore 281 component_meta = await Promise.all(_selected_samples && _selected_samples.map(async (sample_row) => await Promise.all(sample_row.map(async (sample_cell, j) => { 282 const loaded = $$props.load_component($$props.components[j].name, "example", $$props.components[j].class_id); 283 284 return { 285 value: sample_cell, 286 component: loaded.component, 287 runtime: loaded.runtime 288 }; 289 })))); 290 } 291 292 // Need to stringify the samples otherwise get_component_meta will trigger infinitely 293 // Saw this when rendering examples in a gr.render block 294 let selected_samples_json = user_derived(() => JSON.stringify(get(selected_samples) || [])); 295 296 var fragment = comment(); 297 var node = first_child(fragment); 298 299 await_block(node, () => get_component_meta(get(selected_samples_json)), null, ($$anchor, _) => { 300 var fragment_1 = root_2$1(); 301 var node_1 = first_child(fragment_1); 302 303 { 304 var consequent_3 = ($$anchor) => { 305 var div = root_3(); 306 307 each(div, 21, () => get(selected_samples), index, ($$anchor, sample_row, i) => { 308 var fragment_2 = comment(); 309 var node_2 = first_child(fragment_2); 310 311 { 312 var consequent_2 = ($$anchor) => { 313 var button = root_5(); 314 315 button.__click = () => { 316 value(i + get(page) * samples_per_page()); 317 $$props.onclick({ index: value(), value: get(sample_row) }); 318 $$props.onselect({ index: value(), value: get(sample_row) }); 319 }; 320 321 var node_3 = child(button); 322 323 { 324 var consequent = ($$anchor) => { 325 { 326 let $0 = user_derived(() => get(current_hover) === i); 327 328 Example($$anchor, { 329 get value() { 330 return get(sample_row)[0]; 331 }, 332 333 get selected() { 334 return get($0); 335 }, 336 type: 'gallery' 337 }); 338 } 339 }; 340 341 var alternate = ($$anchor) => { 342 var fragment_4 = comment(); 343 var node_4 = first_child(fragment_4); 344 345 { 346 var consequent_1 = ($$anchor) => { 347 var fragment_5 = comment(); 348 var node_5 = first_child(fragment_5); 349 350 await_block(node_5, () => Promise.all([component_meta[0][0].component, component_meta[0][0].runtime]), null, ($$anchor, $$source) => { 351 var $$value = user_derived(() => { 352 var [component, runtime] = get($$source); 353 354 return { component, runtime }; 355 }); 356 357 var component = user_derived(() => get($$value).component); 358 var runtime = user_derived(() => get($$value).runtime); 359 var fragment_6 = comment(); 360 var node_6 = first_child(fragment_6); 361 362 key(node_6, () => get(sample_row)[0], ($$anchor) => { 363 { 364 let $0 = user_derived(() => get(current_hover) === i); 365 366 MountExample($$anchor, spread_props( 367 { 368 get component() { 369 return get(component); 370 }, 371 372 get runtime() { 373 return get(runtime); 374 } 375 }, 376 () => $$props.component_props[0], 377 { 378 get value() { 379 return get(sample_row)[0]; 380 }, 381 382 get samples_dir() { 383 return get(samples_dir); 384 }, 385 type: 'gallery', 386 get selected() { 387 return get($0); 388 }, 389 index: i, 390 get root() { 391 return $$props.root; 392 } 393 } 394 )); 395 } 396 }); 397 398 append($$anchor, fragment_6); 399 }); 400 401 append($$anchor, fragment_5); 402 }; 403 404 if_block( 405 node_4, 406 ($$render) => { 407 if (component_meta.length) $$render(consequent_1); 408 }, 409 true 410 ); 411 } 412 413 append($$anchor, fragment_4); 414 }; 415 416 if_block(node_3, ($$render) => { 417 if (sample_labels()) $$render(consequent); else $$render(alternate, false); 418 }); 419 } 420 421 reset(button); 422 event('mouseenter', button, () => handle_mouseenter(i)); 423 event('mouseleave', button, () => handle_mouseleave()); 424 append($$anchor, button); 425 }; 426 427 if_block(node_2, ($$render) => { 428 if (get(sample_row)[0] != null) $$render(consequent_2); 429 }); 430 } 431 432 append($$anchor, fragment_2); 433 }); 434 435 reset(div); 436 append($$anchor, div); 437 }; 438 439 var alternate_1 = ($$anchor) => { 440 var fragment_8 = comment(); 441 var node_7 = first_child(fragment_8); 442 443 { 444 var consequent_5 = ($$anchor) => { 445 var div_1 = root_12(); 446 var table = child(div_1); 447 var thead = child(table); 448 var tr = child(thead); 449 450 each(tr, 21, () => $$props.headers, index, ($$anchor, header) => { 451 var th = root_13(); 452 var text = child(th, true); 453 454 reset(th); 455 template_effect(() => set_text(text, get(header))); 456 append($$anchor, th); 457 }); 458 459 reset(tr); 460 reset(thead); 461 462 var tbody = sibling(thead); 463 464 each(tbody, 21, () => component_meta, index, ($$anchor, sample_row, i) => { 465 var tr_1 = root_14(); 466 467 tr_1.__click = () => { 468 value(i + get(page) * samples_per_page()); 469 $$props.onclick({ index: value(), value: get(sample_row) }); 470 $$props.onselect({ index: value(), value: get(selected_samples)[i] }); 471 }; 472 473 each(tr_1, 21, () => get(sample_row), index, ($$anchor, $$item, j, $$array) => { 474 let value = () => get($$item).value;
475 let component = () => get($$item).component; 476 let runtime = () => get($$item).runtime; 477 const component_name = user_derived(() => $$props.components[j]); 478 var fragment_9 = comment(); 479 var node_8 = first_child(fragment_9); 480 481 { 482 var consequent_4 = ($$anchor) => { 483 var td = root_16(); 484 var node_9 = child(td); 485 486 await_block(node_9, () => Promise.all([component(), runtime()]), null, ($$anchor, $$source) => { 487 var $$value = user_derived(() => { 488 var [component, runtime] = get($$source); 489 490 return { component, runtime }; 491 }); 492 493 var component = user_derived(() => get($$value).component); 494 var runtime = user_derived(() => get($$value).runtime); 495 496 { 497 let $0 = user_derived(() => get(current_hover) === i); 498 499 MountExample($$anchor, spread_props( 500 { 501 get component() { 502 return get(component); 503 }, 504 505 get runtime() { 506 return get(runtime); 507 } 508 }, 509 () => $$props.component_props[j], 510 { 511 get value() { 512 return value(); 513 }, 514 515 get samples_dir() { 516 return get(samples_dir); 517 }, 518 type: 'table', 519 get selected() { 520 return get($0); 521 }, 522 index: i, 523 get root() { 524 return $$props.root; 525 } 526 } 527 )); 528 } 529 }); 530 531 reset(td); 532 533 template_effect(() => { 534 set_style(td, `max-width: ${get(component_name) === 'textbox' ? '35ch' : 'auto'}`); 535 set_class(td, 1, clsx(get(component_name)), 'svelte-16f20a1'); 536 }); 537 538 append($$anchor, td); 539 }; 540 541 if_block(node_8, ($$render) => { 542 if (get(component_name) !== undefined) $$render(consequent_4); 543 }); 544 } 545 546 append($$anchor, fragment_9); 547 }); 548 549 reset(tr_1); 550 event('mouseenter', tr_1, () => handle_mouseenter(i)); 551 event('mouseleave', tr_1, () => handle_mouseleave()); 552 append($$anchor, tr_1); 553 }); 554 555 reset(tbody); 556 reset(table); 557 reset(div_1); 558 append($$anchor, div_1); 559 }; 560 561 if_block( 562 node_7, 563 ($$render) => { 564 if (get(selected_samples).length > 0) $$render(consequent_5); 565 }, 566 true 567 ); 568 } 569 570 append($$anchor, fragment_8); 571 }; 572 573 if_block(node_1, ($$render) => { 574 if (get(gallery)) $$render(consequent_3); else $$render(alternate_1, false); 575 }); 576 } 577 578 var node_10 = sibling(node_1, 2); 579 580 { 581 var consequent_7 = ($$anchor) => { 582 var div_2 = root_18();
583 var node_11 = sibling(child(div_2)); 584 585 each(node_11, 17, () => get(visible_pages), index, ($$anchor, visible_page) => { 586 var fragment_11 = comment(); 587 var node_12 = first_child(fragment_11); 588 589 { 590 var consequent_6 = ($$anchor) => { 591 var div_3 = root_20(); 592 593 append($$anchor, div_3); 594 }; 595 596 var alternate_2 = ($$anchor) => { 597 var button_1 = root_21(); 598 599 button_1.__click = () => set(page, get(visible_page)); 600 601 let classes; 602 var text_1 = child(button_1, true); 603 604 reset(button_1); 605 606 template_effect(() => { 607 classes = set_class(button_1, 1, 'svelte-16f20a1', null, classes, { 'current-page': get(page) === get(visible_page) }); 608 set_text(text_1, get(visible_page) + 1); 609 }); 610 611 append($$anchor, button_1); 612 }; 613 614 if_block(node_12, ($$render) => { 615 if (get(visible_page) === -1) $$render(consequent_6); else $$render(alternate_2, false); 616 }); 617 } 618 619 append($$anchor, fragment_11); 620 }); 621 622 reset(div_2); 623 append($$anchor, div_2); 624 }; 625 626 if_block(node_10, ($$render) => { 627 if (get(paginate)) $$render(consequent_7); 628 }); 629 } 630 631 append($$anchor, fragment_1); 632 }); 633 634 append($$anchor, fragment); 635 pop(); 636} 637 638delegate(['click']); 639 640var root_2 = from_html(`<div class="label svelte-bnxc4d"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="svelte-bnxc4d"><path fill="currentColor" d="M10 6h18v2H10zm0 18h18v2H10zm0-9h18v2H10zm-6 0h2v2H4zm0-9h2v2H4zm0 18h2v2H4z"></path></svg> </div>`); 641var root_1 = from_html(`<!> <!>`, 1); 642 643function Index($$anchor, $$props) { 644 push($$props, true); 645 646 let props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 647 const gradio = new Gradio(props); 648 649 // Need to mark samples as state, otherwise get_component_meta constantly triggers 650 let samples = user_derived(() => gradio.props.samples ?? []); 651 652 Block($$anchor, { 653 get visible() { 654 return gradio.shared.visible; 655 }, 656 padding: false, 657 get elem_id() { 658 return gradio.shared.elem_id; 659 }, 660 661 get elem_classes() { 662 return gradio.shared.elem_classes; 663 }, 664 665 get scale() { 666 return gradio.shared.scale; 667 }, 668 669 get min_width() { 670 return gradio.shared.min_width; 671 }, 672 allow_overflow: false, 673 container: false, 674 children: ($$anchor, $$slotProps) => { 675 var fragment_1 = root_1(); 676 var node = first_child(fragment_1); 677 678 { 679 var consequent = ($$anchor) => { 680 var div = root_2(); 681 var text = sibling(child(div)); 682 683 reset(div); 684 template_effect(() => set_text(text, ` ${(gradio.shared.label || "Examples") ?? ''}`)); 685 append($$anchor, div); 686 }; 687 688 if_block(node, ($$render) => { 689 if (gradio.shared.show_label) $$render(consequent); 690 }); 691 } 692 693 var node_1 = sibling(node, 2); 694 695 Dataset(node_1, spread_props( 696 { 697 onclick: (d) => ( 698 gradio.props.value = d.index, 699 gradio.dispatch("click", gradio.props.value) 700 ), 701 onselect: (data) => gradio.dispatch("select", data), 702 get load_component() { 703 return gradio.shared.load_component; 704 }, 705 706 get samples() { 707 return get(samples); 708 } 709 }, 710 () => gradio.props 711 )); 712 713 append($$anchor, fragment_1); 714 }, 715 $$slots: { default: true } 716 }); 717 718 pop(); 719} 720 721export { Index as default }; 722//# sourceMappingURL=Index-BHpgq8cj.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.