1import { p as prop, i as if_block, a as set_attribute, d as bind_this, k as each, u as index, N as bind_select_value, b as set_class, f as set_style, r as rest_props, g as spread_props } from './i18n-dpAHICcw.js'; 2import { a as append, f as from_svg, N as tick, ak as delegate, R as push, u as state, v as proxy, ab as onMount, x as set, w as get, af as onDestroy, y as user_effect, V as child, Y as reset, t as template_effect, T as pop, X as sibling, S as first_child, a0 as set_text, av as prepare_files, W as from_html, aN as update, aj as user_pre_effect, a7 as text, A as effect, Z as event, a5 as user_derived, a8 as next, a6 as comment, al as remove_textarea_child } from './index-CDZuCcOm.js'; 3import { f as format_time, s as should_show_scroll_fade, G as Gradio } from './utils.svelte-CyWLYi-B.js'; 4import { a as action } from './actions-BTh6ZJJ8.js'; 5import { b as bind_value } from './input-UUW65DyE.js'; 6import { M as Microphone, V as Video } from './ScrollFade.svelte_svelte_type_style_lang-DUvCSfRk.js'; 7import { B as BlockTitle } from './BlockTitle-Xgz-MKYS.js'; 8import './MarkdownCode.svelte_svelte_type_style_lang-GeNUGzep.js'; 9import { A as ArrowUp } from './ArrowUp-BZnStkIc.js'; 10import { C as Check } from './Check-4kogBHUX.js'; 11import { C as Clear } from './Clear-tvJMRS4J.js'; 12import { F as File$1 } from './File-BaXTooE5.js'; 13import { M as Music } from './Music-BRyrikkq.js'; 14import { S as Square } from './Square-Bg2evxzG.js'; 15import { S as ScrollFade } from './ScrollFade-DEIWMnJ8.js'; 16import { U as Upload } from './Upload-BlCAnBIo.js'; 17import { I as Image } from './Image-CJziNDBt.js'; 18/* empty css */ 19import { u, p as process_audio, M as MinimalAudioPlayer } from './MinimalAudioPlayer-CTX1OxKC.js'; 20import { o } from './record.esm-BVY9RaAH.js'; 21import { B as Block } from './Block-DntE23uJ.js'; 22import { S as Static } from './index-DyDpuTN9.js'; 23import './StreamingBar.svelte_svelte_type_style_lang-BxBb9ZZb.js'; 24export { default as BaseExample } from './Example-ScYZgkoj.js'; 25import './clone-dZfS06Ds.js'; 26import './snippet-DVkMfmSq.js'; 27import './Info-CLoErKII.js'; 28import './MarkdownCode-Q694H4-C.js'; 29import './html-h_YSgefI.js'; 30import './prism-python-C_fanlsZ.js'; 31import './misc-C2MjMwBX.js'; 32/* empty css */ 33import './size-CuuZBRle.js'; 34import './Video-BadoRrLY.js'; 35 36var root = from_svg(`<svg fill="currentColor" width="100%" height="100%" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M1752.768 221.109C1532.646.986 1174.283.986 954.161 221.109l-838.588 838.588c-154.052 154.165-154.052 404.894 0 558.946 149.534 149.421 409.976 149.308 559.059 0l758.738-758.626c87.982-88.094 87.982-231.417 0-319.51-88.32-88.208-231.642-87.982-319.51 0l-638.796 638.908 79.85 79.849 638.795-638.908c43.934-43.821 115.539-43.934 159.812 0 43.934 44.047 43.934 115.877 0 159.812l-758.739 758.625c-110.23 110.118-289.355 110.005-399.36 0-110.118-110.117-110.005-289.242 0-399.247l838.588-838.588c175.963-175.962 462.382-176.188 638.909 0 176.075 176.188 176.075 462.833 0 638.908l-798.607 798.72 79.849 79.85 798.607-798.72c220.01-220.123 220.01-578.485 0-798.607" fill-rule="evenodd"></path></g></svg>`); 37 38function Paperclip($$anchor) { 39 var svg = root(); 40 41 append($$anchor, svg); 42} 43 44async function resize(target, lines, max_lines) { 45 await tick(); 46 if (lines === max_lines) return; 47 const computed_styles = window.getComputedStyle(target); 48 const padding_top = parseFloat(computed_styles.paddingTop); 49 const padding_bottom = parseFloat(computed_styles.paddingBottom); 50 const line_height = parseFloat(computed_styles.lineHeight); 51 let max = max_lines === void 0 ? false : padding_top + padding_bottom + line_height * max_lines; 52 let min = padding_top + padding_bottom + lines * line_height; 53 target.style.height = "1px"; 54 let scroll_height; 55 if (max && target.scrollHeight > max) { 56 scroll_height = max; 57 } else if (target.scrollHeight < min) { 58 scroll_height = min; 59 } else { 60 scroll_height = target.scrollHeight; 61 } 62 target.style.height = `${scroll_height}px`; 63} 64function text_area_resize(_el, _value) { 65 if (_value.lines === _value.max_lines) return; 66 _el.style.overflowY = "scroll"; 67 function handle_input(event) { 68 resize(event.target, _value.lines, _value.max_lines); 69 } 70 _el.addEventListener("input", handle_input); 71 if (!_value.text.trim()) return; 72 resize(_el, _value.lines, _value.max_lines); 73 return { 74 destroy: () => _el.removeEventListener("input", handle_input) 75 }; 76} 77 78var root_4$1 = from_html(`<option> </option>`); 79var root_3$1 = from_html(`<select class="device-select-large svelte-doy9oc" aria-label="Select input device"></select>`); 80var root_2 = from_html(`<div class="device-selection-wrapper svelte-doy9oc"><!> <button class="record-button svelte-doy9oc" aria-label="Start recording"></button></div>`); 81var root_5$1 = from_html(`<div class="waveform-wrapper svelte-doy9oc"></div> <div class="timestamp svelte-doy9oc"> </div> <button class="stop-button svelte-doy9oc" aria-label="Stop recording"><!></button>`, 1); 82var root_1$2 = from_html(`<div class="minimal-audio-recorder svelte-doy9oc" data-testid="minimal-audio-recorder"><!></div>`); 83 84function MinimalAudioRecorder($$anchor, $$props) { 85 push($$props, true); 86 87 let waveform_settings = prop($$props, 'waveform_settings', 19, () => ({})), 88 recording = prop($$props, 'recording', 15), 89 max_file_size = prop($$props, 'max_file_size', 3, null), 90 upload_promise = prop($$props, 'upload_promise', 15); 91 92 let container; 93 let waveform; 94 let record = state(void 0); 95 let seconds = state(0); 96 let interval; 97 let is_recording = state(false); 98 let has_started = state(false); 99 let mic_devices = state(proxy([])); 100 let selected_device_id = state(""); 101 let show_device_selection = state(false); 102 103 const start_interval = () => { 104 clearInterval(interval); 105 106 interval = setInterval( 107 () => { 108 update(seconds); 109 }, 110 1000 111 ); 112 }; 113 114 const create_waveform = async () => { 115 if (!container) return; 116 117 if (waveform) { 118 waveform.destroy(); 119 } 120 121 const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--color-accent") || "#ff7c00"; 122 123 waveform = u.create({ 124 container, 125 height: 32, 126 waveColor: "rgba(128, 128, 128, 0.5)", 127 progressColor: accentColor, 128 cursorColor: "transparent", 129 barWidth: 2, 130 barGap: 2, 131 barRadius: 2, 132 interact: false, 133 hideScrollbar: true, 134 ...waveform_settings() 135 }); 136 137 set( 138 record, 139 waveform.registerPlugin(o.create({ 140 scrollingWaveform: true, 141 scrollingWaveformWindow: 7, 142 renderRecordedAudio: false 143 })), 144 true 145 ); 146 147 get(record).on("record-start", () => { 148 start_interval(); 149 set(is_recording, true); 150 set(has_started, true); 151 }); 152 153 get(record).on("record-end", async (blob) => { 154 clearInterval(interval); 155 set(is_recording, false); 156 157 upload_promise((async () => { 158 try { 159 const array_buffer = await blob.arrayBuffer(); 160 const context = new AudioContext({ sampleRate: waveform_settings().sampleRate || 44100 }); 161 const audio_buffer = await context.decodeAudioData(array_buffer); 162 163 if (audio_buffer) { 164 const audio = await process_audio(audio_buffer); 165 const audio_blob = new File([audio], "audio.wav", { type: "audio/wav" }); 166 const prepared_files = await prepare_files([audio_blob], false); 167 const uploaded_files = await $$props.upload(prepared_files, $$props.root, undefined, max_file_size() || undefined); 168 const file_data = uploaded_files?.[0]; 169 170 if (file_data) { 171 $$props.onchange?.(file_data); 172 } 173 } 174 } catch(e) { 175 console.error("Error processing audio:", e); 176 } finally { 177 $$props.onstoprecording?.(); 178 upload_promise(null); 179 } 180 })()); 181 182 await upload_promise(); 183 }); 184 }; 185 186 onMount(async () => { 187 try { 188 const devices = await o.getAvailableAudioDevices(); 189 190 set(mic_devices, devices.filter((device) => device.deviceId), true); 191 192 if (get(mic_devices).length > 0) { 193 set(selected_device_id, get(mic_devices)[0].deviceId, true); 194 } 195 196 if (get(mic_devices).length > 1) { 197 set(show_device_selection, true); 198 } else { 199 await create_waveform(); 200 } 201 } catch(err) { 202 await create_waveform(); 203 } 204 }); 205 206 onDestroy(() => { 207 clearInterval(interval); 208 209 if (get(record)) { 210 get(record).stopMic(); 211 } 212 213 if (waveform) { 214 waveform.destroy(); 215 } 216 }); 217 218 user_effect(() => { 219 if (recording() && !get(is_recording) && get(record) && get(has_started) === false && get(mic_devices).length <= 1) { 220 get(record).startMic({ deviceId: get(selected_device_id) }).then(() => { 221 get(record)?.startRecording(); 222 }).catch((err) => { 223 console.error("Failed to access microphone:", err); 224 $$props.onclear?.(); 225 }); 226 } else if (!recording() && get(is_recording) && get(record)) { 227 get(record).stopRecording(); 228 set(seconds, 0); 229 } 230 }); 231 232 async function startRecording() {
233 set(show_device_selection, false); 234 set(has_started, true); 235 await tick(); 236 await create_waveform(); 237 238 if (!get(record)) return; 239 240 try { 241 await get(record).startMic({ deviceId: get(selected_device_id) }); 242 get(record).startRecording(); 243 } catch(err) { 244 console.error("Error starting recording:", err); 245 set(show_device_selection, get(mic_devices).length > 1); 246 set(has_started, false); 247 recording(false); 248 } 249 } 250 251 var div = root_1$2(); 252 var node = child(div); 253 254 { 255 var consequent_1 = ($$anchor) => { 256 var div_1 = root_2(); 257 var node_1 = child(div_1); 258 259 { 260 var consequent = ($$anchor) => { 261 var select = root_3$1(); 262 263 each(select, 21, () => get(mic_devices), index, ($$anchor, device) => { 264 var option = root_4$1(); 265 var text = child(option, true); 266 267 reset(option); 268 269 var option_value = {}; 270 271 template_effect(() => { 272 set_text(text, get(device).label); 273 274 if (option_value !== (option_value = get(device).deviceId)) { 275 option.value = (option.__value = get(device).deviceId) ?? ''; 276 } 277 }); 278 279 append($$anchor, option); 280 }); 281 282 reset(select); 283 bind_select_value(select, () => get(selected_device_id), ($$value) => set(selected_device_id, $$value)); 284 append($$anchor, select); 285 }; 286 287 if_block(node_1, ($$render) => { 288 if (get(mic_devices).length > 1) $$render(consequent); 289 }); 290 } 291 292 var button = sibling(node_1, 2); 293 294 button.__click = startRecording; 295 reset(div_1); 296 append($$anchor, div_1); 297 }; 298 299 var alternate = ($$anchor) => { 300 var fragment = root_5$1(); 301 var div_2 = first_child(fragment); 302 303 bind_this(div_2, ($$value) => container = $$value, () => container); 304 305 var div_3 = sibling(div_2, 2); 306 var text_1 = child(div_3, true); 307 308 reset(div_3); 309 310 var button_1 = sibling(div_3, 2); 311 312 button_1.__click = () => { 313 if (get(is_recording)) { 314 recording(false); 315 } else { 316 $$props.onclear?.(); 317 } 318 }; 319 320 var node_2 = child(button_1); 321 322 Square(node_2, {}); 323 reset(button_1); 324 template_effect(($0) => set_text(text_1, $0), [() => format_time(get(seconds))]); 325 append($$anchor, fragment); 326 }; 327 328 if_block(node, ($$render) => { 329 if (get(show_device_selection)) $$render(consequent_1); else $$render(alternate, false); 330 }); 331 } 332 333 reset(div); 334 template_effect(() => set_attribute(div, 'aria-label', $$props.label || "Audio Recorder")); 335 append($$anchor, div); 336 pop(); 337} 338 339delegate(['click']); 340 341var root_4 = from_html(`<div class="recording-content svelte-1qn0337"><!></div>`); 342var root_5 = from_html(`<div class="recording-content svelte-1qn0337"><!> <div class="action-buttons svelte-1qn0337"><button class="confirm-button svelte-1qn0337" aria-label="Attach audio"><!></button> <button class="cancel-button svelte-1qn0337" aria-label="Clear audio"><!></button></div></div>`); 343var root_3 = from_html(`<div><!></div>`); 344var root_8 = from_html(`<button data-testid="upload-button" class="upload-button thumbnail-add svelte-1qn0337" aria-label="Upload a file"><!></button>`); 345var root_9 = from_html(`<span class="thumbnail-wrapper svelte-1qn0337" role="listitem" aria-label="File thumbnail"><div class="thumbnail-item thumbnail-small svelte-1qn0337"><!> <button class="delete-button svelte-1qn0337" aria-label="Remove file"><!></button></div></span>`); 346var root_16 = from_html(`<div class="loader svelte-1qn0337" role="status" aria-label="Uploading"></div>`); 347var root_7 = from_html(`<div class="thumbnails svelte-1qn0337" aria-label="Uploaded files" data-testid="container_el"><!> <!> <!></div>`); 348var root_17 = from_html(`<button data-testid="upload-button" class="upload-button icon-button svelte-1qn0337" aria-label="Upload a file"><!></button>`); 349var root_18 = from_html(`<button data-testid="microphone-button" aria-label="Record audio"><!></button>`); 350var root_19 = from_html(`<button data-testid="submit-button" aria-label="Submit"><!></button>`); 351var root_22 = from_html(`<button aria-label="Stop"><!></button>`); 352var root_1$1 = from_html(`<div role="group" aria-label="Multimedia input field"><!> <div class="input-container svelte-1qn0337"><!> <!> <div><!> <div class="input-row svelte-1qn0337"><!> <div class="textarea-wrapper svelte-1qn0337"><textarea data-testid="textbox"></textarea> <!></div> <!> <!> <!></div></div></div></div>`); 353 354function MultimodalTextbox($$anchor, $$props) { 355 push($$props, true); 356 357 let value = prop($$props, 'value', 15), 358 value_is_output = prop($$props, 'value_is_output', 3, false), 359 lines = prop($$props, 'lines', 3, 1), 360 placeholder = prop($$props, 'placeholder', 3, ""), 361 disabled = prop($$props, 'disabled', 3, false), 362 info = prop($$props, 'info', 3, undefined), 363 show_label = prop($$props, 'show_label', 3, true), 364 submit_btn = prop($$props, 'submit_btn', 3, null), 365 stop_btn = prop($$props, 'stop_btn', 3, null), 366 rtl = prop($$props, 'rtl', 3, false), 367 autofocus = prop($$props, 'autofocus', 3, false), 368 text_align = prop($$props, 'text_align', 3, undefined), 369 autoscroll = prop($$props, 'autoscroll', 3, true), 370 file_types_string = prop($$props, 'file_types_string', 3, null), 371 max_file_size = prop($$props, 'max_file_size', 3, null), 372 file_count = prop($$props, 'file_count', 3, "multiple"), 373 max_plain_text_length = prop($$props, 'max_plain_text_length', 3, 1000); 374 prop($$props, 'waveform_options', 19, () => ({ show_recording_waveform: true })); 375 let sources_string = prop($$props, 'sources_string', 3, "upload"), 376 active_source = prop($$props, 'active_source', 15), 377 html_attributes = prop($$props, 'html_attributes', 3, null), 378 upload_promise = prop($$props, 'upload_promise', 15), 379 dragging = prop($$props, 'dragging', 15); 380 381 let upload_component; 382 let el; 383 let can_scroll = state(false); 384 let previous_scroll_top = state(0); 385 let user_has_scrolled_up = state(false); 386 let show_fade = state(false); 387 let uploading = state(false); 388 let oldValue = state(proxy(value()?.text ?? "")); 389 let recording = state(false); 390 let mic_audio = state(null); 391 let full_container; 392 let sources = user_derived(() => sources_string().split(",").map((s) => s.trim()).filter((s) => s === "upload" || s === "microphone")); 393 394 let file_types = user_derived(() => file_types_string() 395 ? file_types_string().split(",").map((s) => s.trim()) 396 : null); 397 398 let show_upload = user_derived(() => get(sources) && get(sources).includes("upload") && !(file_count() === "single" && value(
398)?.files?.length > 0)); 399 400 function update_fade() { 401 set(show_fade, should_show_scroll_fade(el), true); 402 } 403 404 user_effect(() => { 405 if (el && value()?.text !== undefined) { 406 tick().then(update_fade); 407 } 408 }); 409 410 user_effect(() => { 411 $$props.ondrag?.(dragging()); 412 }); 413 414 user_effect(() => { 415 if (value() && get(oldValue) !== value().text) { 416 $$props.onchange?.(value()); 417 set(oldValue, value().text, true); 418 } 419 }); 420 421 user_effect(() => { 422 if (el && lines() !== $$props.max_lines) { 423 resize(el, lines(), $$props.max_lines); 424 } 425 }); 426 427 user_pre_effect(() => { 428 if (el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100) { 429 set(can_scroll, true); 430 } 431 }); 432 433 const scroll = () => { 434 if (get(can_scroll) && autoscroll() && !get(user_has_scrolled_up)) { 435 el.scrollTo(0, el.scrollHeight); 436 } 437 }; 438 439 async function handle_change() { 440 $$props.onchange?.(value()); 441 442 if (!value_is_output()) { 443 $$props.oninput?.(); 444 } 445 } 446 447 user_effect(() => { 448 value(); 449 450 if (autofocus() && el) { 451 el.focus(); 452 } 453 }); 454 455 user_effect(() => { 456 if (get(can_scroll) && autoscroll()) { 457 scroll(); 458 } 459 }); 460 461 function handle_select(event) { 462 const target = event.target; 463 const text = target.value; 464 const index = [target.selectionStart, target.selectionEnd]; 465 466 $$props.onselect?.({ value: text.substring(...index), index }); 467 } 468 469 async function handle_keypress(e) { 470 if (e.key === "Enter" && e.shiftKey && lines() > 1) { 471 e.preventDefault(); 472 await tick(); 473 $$props.onsubmit?.(); 474 } else if (e.key === "Enter" && !e.shiftKey && lines() === 1 && $$props.max_lines >= 1) { 475 e.preventDefault(); 476 add_mic_audio_to_files(); 477 active_source(null); 478 await tick(); 479 $$props.onsubmit?.(); 480 } 481 } 482 483 function handle_scroll(event) { 484 const target = event.target; 485 const current_scroll_top = target.scrollTop; 486 487 if (current_scroll_top < get(previous_scroll_top)) { 488 set(user_has_scrolled_up, true); 489 } 490 491 set(previous_scroll_top, current_scroll_top, true); 492 493 const max_scroll_top = target.scrollHeight - target.clientHeight; 494 const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top; 495 496 if (user_has_scrolled_to_bottom) { 497 set(user_has_scrolled_up, false); 498 } 499 500 update_fade(); 501 } 502 503 async function handle_upload(detail) { 504 handle_change(); 505 506 if (Array.isArray(detail)) { 507 for (let file of detail) { 508 value().files.push(file); 509 } 510 511 value(value()); 512 } else { 513 value().files.push(detail); 514 value(value()); 515 } 516 517 await tick(); 518 $$props.onchange?.(value()); 519 $$props.onupload?.(detail); 520 } 521 522 function remove_thumbnail(event, index) { 523 handle_change(); 524 event.stopPropagation(); 525 value().files.splice(index, 1); 526 value(value()); 527 } 528 529 function handle_upload_click() { 530 upload_component.open_upload(); 531 } 532 533 function handle_stop() { 534 $$props.onstop?.(); 535 } 536 537 function add_mic_audio_to_files() { 538 if (get(mic_audio)) { 539 value().files.push(get(mic_audio)); 540 value(value()); 541 set(mic_audio, null); 542 $$props.onchange?.(value()); 543 } 544 } 545 546 function handle_submit() { 547 add_mic_audio_to_files(); 548 active_source(null); 549 $$props.onsubmit?.(); 550 } 551 552 async function handle_paste(event) { 553 if (!event.clipboardData) return; 554 555 const items = event.clipboardData.items; 556 const text = event.clipboardData.getData("text"); 557 558 if (text && text.length > max_plain_text_length()) { 559 event.preventDefault(); 560 561 const file = new window.File([text], "pasted_text.txt", { type: "text/plain", lastModified: Date.now() }); 562 563 if (upload_component) { 564 upload_component.load_files([file]); 565 } 566 567 return; 568 } 569 570 for (let index in items) { 571 const item = items[index]; 572 573 if (item.kind === "file" && item.type.includes("image")) { 574 const blob = item.getAsFile(); 575 576 if (blob) upload_component.load_files([blob]); 577 } 578 } 579 } 580 581 function handle_dragenter(event) { 582 event.preventDefault(); 583 dragging(true); 584 } 585 586 function handle_dragleave(event) { 587 event.preventDefault(); 588 589 const rect = full_container.getBoundingClientRect(); 590 const { clientX, clientY } = event; 591 592 if (clientX <= rect.left || clientX >= rect.right || clientY <= rect.top || clientY >= rect.bottom) { 593 dragging(false); 594 } 595 } 596 597 function handle_drop(event) { 598 event.preventDefault(); 599 dragging(false); 600 601 if (event.dataTransfer && event.dataTransfer.files) { 602 const files = Array.from(event.dataTransfer.files); 603 604 if (get(file_types)) { 605 const valid_files = files.filter((file) => { 606 return get(file_types).some((type) => { 607 if (type.startsWith(".")) { 608 return file.name.toLowerCase().endsWith(type.toLowerCase()); 609 } 610 611 return file.type.match(new RegExp(type.replace("*", ".*"))); 612 }); 613 }); 614 615 const invalid_files = files.length - valid_files.length; 616 617 if (invalid_files > 0) { 618 $$props.onerror?.(`${invalid_files} file(s) were rejected. Accepted formats: ${get(file_types).join(", ")}`); 619 } 620 621 if (valid_files.length > 0) { 622 upload_component.load_files(valid_files); 623 } 624 } else { 625 upload_component.load_files(files); 626 } 627 } 628 } 629 630 var div = root_1$1(); 631 let classes; 632 var node = child(div); 633 634 BlockTitle(node, { 635 get show_label() { 636 return show_label(); 637 }, 638 639 get info() { 640 return info(); 641 }, 642 643 get rtl() { 644 return rtl(); 645 }, 646 647 children: ($$anchor, $$slotProps) => { 648 next(); 649 650 var text_1 = text(); 651 652 template_effect(() => set_text(text_1, $$props.label)); 653 append($$anchor, text_1); 654 }, 655 $$slots: { default: true } 656 }); 657 658 var div_1 = sibling(node, 2);
659 var node_1 = child(div_1); 660 661 { 662 var consequent_1 = ($$anchor) => { 663 var div_2 = root_3(); 664 let classes_1; 665 var node_2 = child(div_2); 666 667 { 668 var consequent = ($$anchor) => { 669 var div_3 = root_4(); 670 var node_3 = child(div_3); 671 672 { 673 let $0 = user_derived(() => $$props.label || "Audio"); 674 675 MinimalAudioRecorder(node_3, { 676 get label() { 677 return get($0); 678 }, 679 680 get waveform_settings() { 681 return $$props.waveform_settings; 682 }, 683 684 get recording() { 685 return get(recording); 686 }, 687 688 get upload() { 689 return $$props.upload; 690 }, 691 692 get root() { 693 return $$props.root; 694 }, 695 696 get max_file_size() { 697 return max_file_size(); 698 }, 699 700 onchange: (audio_value) => { 701 set(mic_audio, audio_value, true); 702 }, 703 704 onstoprecording: () => { 705 set(recording, false); 706 $$props.onstop_recording?.(); 707 }, 708 709 onclear: () => { 710 active_source(null); 711 set(recording, false); 712 set(mic_audio, null); 713 $$props.onclear?.(); 714 }, 715 716 get upload_promise() { 717 return upload_promise(); 718 }, 719 720 set upload_promise($$value) { 721 upload_promise($$value); 722 } 723 }); 724 } 725 726 reset(div_3); 727 append($$anchor, div_3); 728 }; 729 730 var alternate = ($$anchor) => { 731 var div_4 = root_5(); 732 var node_4 = child(div_4); 733 734 { 735 let $0 = user_derived(() => $$props.label || "Audio"); 736 737 MinimalAudioPlayer(node_4, { 738 get value() { 739 return get(mic_audio); 740 }, 741 742 get label() { 743 return get($0); 744 }, 745 loop: false 746 }); 747 } 748 749 var div_5 = sibling(node_4, 2); 750 var button = child(div_5); 751 752 button.__click = () => { 753 add_mic_audio_to_files(); 754 active_source(null); 755 set(recording, false); 756 }; 757 758 var node_5 = child(button); 759 760 Check(node_5); 761 reset(button); 762 763 var button_1 = sibling(button, 2); 764 765 button_1.__click = () => { 766 active_source(null); 767 set(recording, false); 768 set(mic_audio, null); 769 }; 770 771 var node_6 = child(button_1); 772 773 Clear(node_6); 774 reset(button_1); 775 reset(div_5); 776 reset(div_4); 777 append($$anchor, div_4); 778 }; 779 780 if_block(node_2, ($$render) => { 781 if (!get(mic_audio)) $$render(consequent); else $$render(alternate, false); 782 }); 783 } 784 785 reset(div_2); 786 template_effect(() => classes_1 = set_class(div_2, 1, 'recording-overlay svelte-1qn0337', null, classes_1, { 'has-audio': get(mic_audio) !== null })); 787 append($$anchor, div_2); 788 }; 789 790 if_block(node_1, ($$render) => { 791 if (get(sources) && get(sources).includes("microphone") && active_source() === "microphone") $$render(consequent_1); 792 }); 793 } 794 795 var node_7 = sibling(node_1, 2); 796 797 { 798 var consequent_2 = ($$anchor) => { 799 bind_this( 800 Upload($$anchor, { 801 onload: handle_upload, 802 get file_count() { 803 return file_count(); 804 }, 805 806 get filetype() { 807 return get(file_types); 808 }, 809 810 get root() { 811 return $$props.root; 812 }, 813 814 get max_file_size() { 815 return max_file_size(); 816 }, 817 show_progress: false, 818 disable_click: true,
819 get onerror() { 820 return $$props.onerror; 821 }, 822 hidden: true, 823 get upload() { 824 return $$props.upload; 825 }, 826 827 get stream_handler() { 828 return $$props.stream_handler; 829 }, 830 831 get upload_promise() { 832 return upload_promise(); 833 }, 834 835 set upload_promise($$value) { 836 upload_promise($$value); 837 }, 838 839 get dragging() { 840 return dragging(); 841 }, 842 843 set dragging($$value) { 844 dragging($$value); 845 }, 846 847 get uploading() { 848 return get(uploading); 849 }, 850 851 set uploading($$value) { 852 set(uploading, $$value, true); 853 } 854 }), 855 ($$value) => upload_component = $$value, 856 () => upload_component 857 ); 858 }; 859 860 if_block(node_7, ($$render) => { 861 if (get(show_upload)) $$render(consequent_2); 862 }); 863 } 864 865 var div_6 = sibling(node_7, 2); 866 let classes_2; 867 var node_8 = child(div_6); 868 869 { 870 var consequent_8 = ($$anchor) => { 871 var div_7 = root_7(); 872 var node_9 = child(div_7); 873 874 { 875 var consequent_3 = ($$anchor) => { 876 var button_2 = root_8(); 877 878 button_2.__click = handle_upload_click; 879
880 var node_10 = child(button_2); 881 882 Paperclip(node_10); 883 reset(button_2); 884 template_effect(() => button_2.disabled = disabled()); 885 append($$anchor, button_2); 886 }; 887 888 if_block(node_9, ($$render) => { 889 if (get(show_upload)) $$render(consequent_3); 890 }); 891 } 892 893 var node_11 = sibling(node_9, 2); 894 895 each(node_11, 17, () => value()?.files ?? [], index, ($$anchor, file, index) => { 896 var span = root_9(); 897 var div_8 = child(span); 898 var node_12 = child(div_8); 899 900 { 901 var consequent_4 = ($$anchor) => { 902 Image($$anchor, { 903 get src() { 904 return get(file).url; 905 }, 906 907 restProps: { 908 title: null, 909 alt: "", 910 loading: "lazy", 911 class: "thumbnail-image" 912 } 913 }); 914 }; 915 916 var alternate_3 = ($$anchor) => { 917 var fragment_3 = comment(); 918 var node_13 = first_child(fragment_3); 919 920 { 921 var consequent_5 = ($$anchor) => { 922 Music($$anchor); 923 }; 924 925 var alternate_2 = ($$anchor) => { 926 var fragment_5 = comment();
927 var node_14 = first_child(fragment_5); 928 929 { 930 var consequent_6 = ($$anchor) => { 931 Video($$anchor); 932 }; 933 934 var alternate_1 = ($$anchor) => { 935 File$1($$anchor); 936 }; 937 938 if_block( 939 node_14, 940 ($$render) => { 941 if (get(file).mime_type && get(file).mime_type.includes("video")) $$render(consequent_6); else $$render(alternate_1, false); 942 }, 943 true 944 ); 945 } 946 947 append($$anchor, fragment_5); 948 }; 949 950 if_block( 951 node_13, 952 ($$render) => { 953 if (get(file).mime_type && get(file).mime_type.includes("audio")) $$render(consequent_5); else $$render(alternate_2, false); 954 }, 955 true 956 ); 957 } 958 959 append($$anchor, fragment_3); 960 }; 961 962 if_block(node_12, ($$render) => { 963 if (get(file).mime_type && get(file).mime_type.includes("image")) $$render(consequent_4); else $$render(alternate_3, false); 964 }); 965 } 966 967 var button_3 = sibling(node_12, 2); 968 969 button_3.__click = (event) => remove_thumbnail(event, index); 970
971 var node_15 = child(button_3); 972 973 Clear(node_15); 974 reset(button_3); 975 reset(div_8); 976 reset(span); 977 append($$anchor, span); 978 }); 979 980 var node_16 = sibling(node_11, 2); 981 982 { 983 var consequent_7 = ($$anchor) => { 984 var div_9 = root_16(); 985 986 append($$anchor, div_9); 987 }; 988 989 if_block(node_16, ($$render) => { 990 if (get(uploading)) $$render(consequent_7); 991 }); 992 } 993 994 reset(div_7); 995 append($$anchor, div_7); 996 }; 997 998 if_block(node_8, ($$render) => { 999 if ((value()?.files?.length ?? 0) > 0 || get(uploading)) $$render(consequent_8); 1000 }); 1001 } 1002 1003 var div_10 = sibling(node_8, 2); 1004 var node_17 = child(div_10); 1005 1006 { 1007 var consequent_9 = ($$anchor) => { 1008 var button_4 = root_17(); 1009 1010 button_4.__click = handle_upload_click; 1011 1012 var node_18 = child(button_4); 1013 1014 Paperclip(node_18); 1015 reset(button_4); 1016 template_effect(() => button_4.disabled = disabled()); 1017 append($$anchor, button_4); 1018 }; 1019 1020 if_block(node_17, ($$render) => { 1021 if (get(show_upload) && (value()?.files?.length ?? 0) === 0 && !get(uploading)) $$render(consequent_9); 1022 }); 1023 } 1024 1025 var div_11 = sibling(node_17, 2); 1026 var textarea = child(div_11); 1027 1028 remove_textarea_child(textarea); 1029 1030 let classes_3; 1031 1032 action(textarea, ($$node, $$action_arg) => text_area_resize?.($$node, $$action_arg), () => ({ 1033 text: value().text, 1034 lines: lines(), 1035 max_lines: $$props.max_lines 1036 })); 1037 1038 effect(() => bind_value(textarea, () => value().text, ($$value) => value(value().text = $$value, true))); 1039 bind_this(textarea, ($$value) => el = $$value, () => el); 1040 1041 var node_19 = sibling(textarea, 2); 1042 1043 ScrollFade(node_19, { 1044 get visible() { 1045 return get(show_fade); 1046 }, 1047 position: 'absolute' 1048 }); 1049 1050 reset(div_11); 1051 1052 var node_20 = sibling(div_11, 2); 1053 1054 { 1055 var consequent_10 = ($$anchor) => { 1056 var button_5 = root_18(); 1057 let classes_4; 1058 1059 button_5.__click = async () => { 1060 if (active_source() !== "microphone") { 1061 active_source("microphone"); 1062 await tick(); 1063 set(recording, true); 1064 } else { 1065 active_source(null); 1066 set(recording, false); 1067 } 1068 }; 1069 1070 var node_21 = child(button_5); 1071 1072 Microphone(node_21); 1073 reset(button_5); 1074 1075 template_effect(() => { 1076 classes_4 = set_class(button_5, 1, 'microphone-button svelte-1qn0337', null, classes_4, { recording: get(recording) }); 1077 button_5.disabled = disabled(); 1078 }); 1079 1080 append($$anchor, button_5); 1081 }; 1082 1083 if_block(node_20, ($$render) => { 1084 if (get(sources) && get(sources).includes("microphone")) $$render(consequent_10); 1085 }); 1086 } 1087 1088 var node_22 = sibling(node_20, 2); 1089 1090 { 1091 var consequent_12 = ($$anchor) => { 1092 var button_6 = root_19(); 1093 let classes_5; 1094 1095 button_6.__click = handle_submit; 1096 1097 var node_23 = child(button_6); 1098 1099 { 1100 var consequent_11 = ($$anchor) => { 1101 ArrowUp($$anchor); 1102 }; 1103 1104 var alternate_4 = ($$anchor) => { 1105 var text_2 = text(); 1106 1107 template_effect(() => set_text(text_2, submit_btn())); 1108 append($$anchor, text_2); 1109 }; 1110 1111 if_block(node_23, ($$render) => { 1112 if (submit_btn() === true) $$render(consequent_11); else $$render(alternate_4, false); 1113 }); 1114 } 1115 1116 reset(button_6); 1117 1118 template_effect(() => { 1119 classes_5 = set_class(button_6, 1, 'submit-button svelte-1qn0337', null, classes_5, { 'padded-button': submit_btn() !== true }); 1120 button_6.disabled = disabled(); 1121 }); 1122 1123 append($$anchor, button_6); 1124 }; 1125 1126 if_block(node_22, ($$render) => { 1127 if (submit_btn()) $$render(consequent_12); 1128 }); 1129 } 1130 1131 var node_24 = sibling(node_22, 2); 1132 1133 { 1134 var consequent_14 = ($$anchor) => { 1135 var button_7 = root_22(); 1136 let classes_6; 1137 1138 button_7.__click = handle_stop; 1139 1140 var node_25 = child(button_7); 1141 1142 { 1143 var consequent_13 = ($$anchor) => { 1144 Square($$anchor, { fill: "none", stroke_width: 2.5 }); 1145 }; 1146 1147 var alternate_5 = ($$anchor) => { 1148 var text_3 = text(); 1149 1150 template_effect(() => set_text(text_3, stop_btn())); 1151 append($$anchor, text_3); 1152 }; 1153 1154 if_block(node_25, ($$render) => { 1155 if (stop_btn() === true) $$render(consequent_13); else $$render(alternate_5, false); 1156 }); 1157 } 1158 1159 reset(button_7); 1160 template_effect(() => classes_6 = set_class(button_7, 1, 'stop-button svelte-1qn0337', null, classes_6, { 'padded-button': stop_btn() !== true })); 1161 append($$anchor, button_7); 1162 }; 1163 1164 if_block(node_24, ($$render) => { 1165 if (stop_btn()) $$render(consequent_14); 1166 }); 1167 } 1168 1169 reset(div_10); 1170 reset(div_6); 1171 reset(div_1); 1172 reset(div); 1173 bind_this(div, ($$value) => full_container = $$value, () => full_container); 1174 1175 template_effect(() => { 1176 classes = set_class(div, 1, 'full-container svelte-1qn0337', null, classes, { dragging: dragging() }); 1177 1178 classes_2 = set_class(div_6, 1, 'input-wrapper svelte-1qn0337', null, classes_2, { 1179 'has-files': (value()?.files?.length ?? 0) > 0 || get(uploading) 1180 }); 1181 1182 set_attribute(textarea, 'dir', rtl() ? "rtl" : "ltr"); 1183 set_attribute(textarea, 'placeholder', placeholder()); 1184 set_attribute(textarea, 'rows', lines()); 1185 textarea.disabled = disabled(); 1186 set_style(textarea, text_align() ? "text-align: " + text_align() : ""); 1187 set_attribute(textarea, 'autocapitalize', html_attributes()?.autocapitalize); 1188 set_attribute(textarea, 'autocorrect', html_attributes()?.autocorrect); 1189 set_attribute(textarea, 'spellcheck', html_attributes()?.spellcheck); 1190 set_attribute(textarea, 'autocomplete', html_attributes()?.autocomplete); 1191 set_attribute(textarea, 'tabindex', html_attributes()?.tabindex); 1192 set_attribute(textarea, 'enterkeyhint', html_attributes()?.enterkeyhint); 1193 set_attribute(textarea, 'lang', html_attributes()?.lang); 1194 classes_3 = set_class(textarea, 1, 'svelte-1qn0337', null, classes_3, { 'no-label': !show_label() }); 1195 textarea.dir = textarea.dir; 1196 }); 1197 1198 event('dragenter', div, handle_dragenter);
1199 event('dragleave', div, handle_dragleave); 1200 event('dragover', div, (e) => e.preventDefault()); 1201 event('drop', div, handle_drop); 1202 event('keypress', textarea, handle_keypress); 1203 event('blur', textarea, () => $$props.onblur?.()); 1204 event('select', textarea, handle_select); 1205 event('focus', textarea, () => $$props.onfocus?.()); 1206 event('scroll', textarea, handle_scroll); 1207 event('paste', textarea, handle_paste); 1208 append($$anchor, div); 1209 pop(); 1210} 1211 1212delegate(['click']); 1213 1214var root_1 = from_html(`<!> <!>`, 1); 1215 1216function Index($$anchor, $$props) { 1217 push($$props, true); 1218 1219 let upload_promise = state(null); 1220 1221 class MultimodalTextboxGradio extends Gradio { 1222 async get_data() { 1223 if (get(upload_promise)) { 1224 await get(upload_promise); 1225 await tick(); 1226 } 1227 1228 const data = await super.get_data(); 1229 1230 return data; 1231 } 1232 } 1233 1234 let props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 1235 const gradio = new MultimodalTextboxGradio(props); 1236 1237 gradio.props.value = gradio.props.value ?? { text: "", files: [] }; 1238 1239 let dragging = state(false); 1240 let active_source = state(null); 1241 let color_accent = "darkorange"; 1242 1243 const waveform_settings = { 1244 height: 50, 1245 barWidth: 2, 1246 barGap: 3, 1247 cursorWidth: 2, 1248 cursorColor: "#ddd5e9", 1249 autoplay: false, 1250 barRadius: 10, 1251 dragToSeek: true, 1252 normalize: true, 1253 minPxPerSec: 20, 1254 waveColor: "", 1255 progressColor: "", 1256 mediaControls: false, 1257 sampleRate: 44100 1258 }; 1259 1260 onMount(() => { 1261 color_accent = getComputedStyle(document?.documentElement).getPropertyValue("--color-accent"); 1262 set_trim_region_colour(); 1263 waveform_settings.waveColor = gradio.props?.waveform_options?.waveform_color || "#9ca3af"; 1264 waveform_settings.progressColor = gradio.props?.waveform_options?.waveform_progress_color || color_accent; 1265 waveform_settings.mediaControls = gradio.props?.waveform_options?.show_controls; 1266 waveform_settings.sampleRate = gradio.props?.waveform_options?.sample_rate || 44100; 1267 }); 1268 1269 const trim_region_settings = { 1270 color: gradio.props?.waveform_options?.trim_region_color}; 1271 1272 function set_trim_region_colour() { 1273 document.documentElement.style.setProperty("--trim-region-color", trim_region_settings.color || color_accent); 1274 } 1275 1276 // Create const references to the callbacks so that afterUpdate in child is not called on every prop change 1277 // in the DOM. See https://github.com/gradio-app/gradio/issues/11933 1278 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type 1279 const upload_fn = (...args) => gradio.shared.client.upload(...args); 1280 1281 const i18n = (s) => gradio.i18n(s); 1282 const stream_handler_fn = (...args) => gradio.shared.client.stream(...args); 1283 let sources_string = user_derived(() => gradio.props.sources.join(",")); 1284 let file_types_string = user_derived(() => (gradio.props.file_types || []).join(",") || null); 1285 1286 { 1287 let $0 = user_derived(() => [...gradio.shared.elem_classes || [], "multimodal-textbox"]); 1288 let $1 = user_derived(() => get(dragging) ? "focus" : "base"); 1289 1290 Block($$anchor, { 1291 get visible() { 1292 return gradio.shared.visible; 1293 }, 1294 1295 get elem_id() { 1296 return gradio.shared.elem_id; 1297 }, 1298 1299 get elem_classes() { 1300 return get($0); 1301 }, 1302 1303 get scale() { 1304 return gradio.shared.scale; 1305 }, 1306 1307 get min_width() { 1308 return gradio.shared.min_width; 1309 }, 1310 allow_overflow: false, 1311 padding: false, 1312 get border_mode() { 1313 return get($1); 1314 }, 1315 1316 get rtl() { 1317 return gradio.props.rtl; 1318 }, 1319 1320 children: ($$anchor, $$slotProps) => { 1321 var fragment_1 = root_1(); 1322 var node = first_child(fragment_1); 1323 1324 { 1325 var consequent = ($$anchor) => { 1326 Static($$anchor, spread_props( 1327 { 1328 get autoscroll() { 1329 return gradio.shared.autoscroll; 1330 }, 1331 1332 get i18n() { 1333 return gradio.i18n; 1334 } 1335 }, 1336 () => gradio.shared.loading_status, 1337 { 1338 on_clear_status: () => gradio.dispatch("clear_status", gradio.shared.loading_status) 1339 } 1340 )); 1341 }; 1342 1343 if_block(node, ($$render) => { 1344 if (gradio.shared.loading_status) $$render(consequent); 1345 }); 1346 } 1347
1348 var node_1 = sibling(node, 2); 1349 1350 { 1351 let $0 = user_derived(() => gradio.shared.label || "MultimodalTextbox"); 1352 let $1 = user_derived(() => !gradio.props.max_lines ? gradio.props.lines + 1 : gradio.props.max_lines); 1353 let $2 = user_derived(() => !gradio.shared.interactive); 1354 1355 MultimodalTextbox(node_1, { 1356 value_is_output: true, 1357 get file_types_string() { 1358 return get(file_types_string); 1359 }, 1360 1361 get root() { 1362 return gradio.shared.root; 1363 }, 1364 1365 get label() { 1366 return get($0); 1367 }, 1368 1369 get info() { 1370 return gradio.props.info; 1371 }, 1372 1373 get show_label() { 1374 return gradio.shared.show_label; 1375 }, 1376 1377 get lines() { 1378 return gradio.props.lines; 1379 }, 1380 1381 get rtl() { 1382 return gradio.props.rtl; 1383 }, 1384 1385 get text_align() { 1386 return gradio.props.text_align; 1387 }, 1388 1389 get waveform_settings() { 1390 return waveform_settings; 1391 }, 1392 i18n, 1393 get max_lines() { 1394 return get($1); 1395 }, 1396 1397 get placeholder() { 1398 return gradio.props.placeholder; 1399 }, 1400 1401 get submit_btn() { 1402 return gradio.props.submit_btn; 1403 }, 1404 1405 get stop_btn() { 1406 return gradio.props.stop_btn; 1407 }, 1408 1409 get autofocus() { 1410 return gradio.props.autofocus; 1411 }, 1412 1413 get autoscroll() { 1414 return gradio.shared.autoscroll; 1415 }, 1416 1417 get file_count() { 1418 return gradio.props.file_count; 1419 }, 1420 1421 get sources_string() { 1422 return get(sources_string); 1423 }, 1424 1425 get max_file_size() { 1426 return gradio.shared.max_file_size; 1427 }, 1428 1429 onchange: (e) => { 1430 gradio.props.value = e; 1431 gradio.dispatch("change", gradio.props.value); 1432 }, 1433 oninput: () => gradio.dispatch("input"), 1434 onsubmit: () => gradio.dispatch("submit"), 1435 onstop: () => gradio.dispatch("stop"), 1436 onblur: () => gradio.dispatch("blur"), 1437 onselect: (e) => gradio.dispatch("select", e), 1438 onfocus: () => gradio.dispatch("focus"), 1439 onerror: (detail) => { 1440 gradio.dispatch("error", detail); 1441 }, 1442 onstop_recording: () => gradio.dispatch("stop_recording"), 1443 onupload: (e) => gradio.dispatch("upload", e), 1444 onclear: () => gradio.dispatch("clear"), 1445 get disabled() { 1446 return get($2); 1447 }, 1448 upload: upload_fn, 1449 stream_handler: stream_handler_fn, 1450 get max_plain_text_length() { 1451 return gradio.props.max_plain_text_length; 1452 }, 1453 1454 get html_attributes() { 1455 return gradio.props.html_attributes; 1456 }, 1457 1458 get upload_promise() { 1459 return get(upload_promise); 1460 }, 1461 1462 set upload_promise($$value) { 1463 set(upload_promise, $$value, true); 1464 }, 1465 1466 get value() { 1467 return gradio.props.value; 1468 }, 1469 1470 set value($$value) { 1471 gradio.props.value = $$value; 1472 }, 1473 1474 get dragging() { 1475 return get(dragging); 1476 }, 1477 1478 set dragging($$value) { 1479 set(dragging, $$value, true); 1480 }, 1481 1482 get active_source() { 1483 return get(active_source); 1484 }, 1485 1486 set active_source($$value) { 1487 set(active_source, $$value, true); 1488 } 1489 }); 1490 } 1491 1492 append($$anchor, fragment_1); 1493 }, 1494 $$slots: { default: true } 1495 }); 1496 } 1497 1498 pop(); 1499} 1500 1501export { MultimodalTextbox as BaseMultimodalTextbox, Index as default }; 1502//# sourceMappingURL=Index-BQ1sKukp.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.