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