Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component, gradio-template-Gallery]
-title: gradio_videogallery V0.0.1
-colorFrom: green
-colorTo: pink
+title: gradio_videogallery V0.0.2
+colorFrom: yellow
+colorTo: indigo
 sdk: docker
 pinned: false
 license: apache-2.0

requirements.txt

@@ -1 +1 @@
-gradio_videogallery-0.0.1-py3-none-any.whl
+gradio_videogallery-0.0.2-py3-none-any.whl

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

@@ -1 +1 @@
-.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-xtz2g8{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}.padded.svelte-xtz2g8{padding:2px;background:var(--background-fill-primary);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-xtz2g8:hover{cursor:pointer;color:var(--color-accent)}.padded.svelte-xtz2g8:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-xtz2g8{padding:0 1px;font-size:10px}div.svelte-xtz2g8{padding:2px;display:flex;align-items:flex-end}.small.svelte-xtz2g8{width:14px;height:14px}.large.svelte-xtz2g8{width:22px;height:22px}.pending.svelte-xtz2g8{animation:svelte-xtz2g8-flash .5s infinite}@keyframes svelte-xtz2g8-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-1nba87b{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;box-shadow:var(--shadow-drop);padding:var(--spacing-xl) 0;color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-1nba87b{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl)}.source-selection.svelte-lde7lt{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;align-self:flex-end}.icon.svelte-lde7lt{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-lde7lt{color:var(--color-accent)}.icon.svelte-lde7lt:hover,.icon.svelte-lde7lt:focus{color:var(--color-accent)}button.svelte-a356bc{cursor:pointer;width:var(--size-full)}.hidden.svelte-a356bc{display:none;height:0;position:absolute}.center.svelte-a356bc{display:flex;justify-content:center}.flex.svelte-a356bc{display:flex;justify-content:center;align-items:center}input.svelte-a356bc{display:none}div.svelte-1wj0ocy{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-1wj0ocy{margin:var(--size-1)}.preview.svelte-1wl86it.svelte-1wl86it{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:column;z-index:var(--layer-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--background-fill-primary);height:var(--size-full)}.fixed-height.svelte-1wl86it.svelte-1wl86it{min-height:var(--size-80);max-height:55vh}@media (--screen-xl){.fixed-height.svelte-1wl86it.svelte-1wl86it{min-height:450px}}.detailed-video.svelte-1wl86it.svelte-1wl86it,.image-button.svelte-1wl86it.svelte-1wl86it{height:calc(100% - 60px);width:100%;display:flex}.preview.svelte-1wl86it img.svelte-1wl86it{width:var(--size-full);height:var(--size-full);object-fit:contain}.preview.svelte-1wl86it img.with-caption.svelte-1wl86it{height:var(--size-full)}.caption.svelte-1wl86it.svelte-1wl86it{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails.svelte-1wl86it.svelte-1wl86it{display:flex;position:absolute;bottom:0;justify-content:center;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item.svelte-1wl86it.svelte-1wl86it{--ring-color:transparent;position:relative;box-shadow:0 0 0 2px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item.svelte-1wl86it.svelte-1wl86it:hover{--ring-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected.svelte-1wl86it.svelte-1wl86it{--ring-color:var(--color-accent)}.thumbnail-small.svelte-1wl86it.svelte-1wl86it{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected.svelte-1wl86it.svelte-1wl86it{--ring-color:var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.thumbnail-small.svelte-1wl86it>img.svelte-1wl86it{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.grid-wrap.svelte-1wl86it.svelte-1wl86it{position:relative;padding:var(--size-2);height:var(--size-full);overflow-y:scroll}.grid-container.svelte-1wl86it.svelte-1wl86it{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.thumbnail-lg.svelte-1wl86it>img.svelte-1wl86it{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg.svelte-1wl86it:hover .caption-label.svelte-1wl86it{opacity:.5}.caption-label.svelte-1wl86it.svelte-1wl86it{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.icon-button.svelte-1wl86it.svelte-1wl86it{position:absolute;top:0;right:0;z-index:var(--layer-1)}.icon-buttons.svelte-1wl86it.svelte-1wl86it{display:flex;position:absolute;right:0}.icon-buttons.svelte-1wl86it a.svelte-1wl86it{margin:var(--size-1) 0}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-14miwb5.svelte-14miwb5{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-5);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-14miwb5.svelte-14miwb5{top:0;right:0;left:0}.wrap.default.svelte-14miwb5.svelte-14miwb5{top:0;right:0;bottom:0;left:0}.hide.svelte-14miwb5.svelte-14miwb5{opacity:0;pointer-events:none}.generating.svelte-14miwb5.svelte-14miwb5{animation:svelte-14miwb5-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-14miwb5.svelte-14miwb5{background:none}@keyframes svelte-14miwb5-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-14miwb5.svelte-14miwb5{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-14miwb5.svelte-14miwb5{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-14miwb5.svelte-14miwb5{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-14miwb5.svelte-14miwb5{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-14miwb5.svelte-14miwb5{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-14miwb5.svelte-14miwb5{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-14miwb5.svelte-14miwb5{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-14miwb5.svelte-14miwb5{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-14miwb5.svelte-14miwb5{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-14miwb5 .progress-text.svelte-14miwb5{background:var(--block-background-fill)}.border.svelte-14miwb5.svelte-14miwb5{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}
+.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-xtz2g8{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}.padded.svelte-xtz2g8{padding:2px;background:var(--background-fill-primary);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-xtz2g8:hover{cursor:pointer;color:var(--color-accent)}.padded.svelte-xtz2g8:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-xtz2g8{padding:0 1px;font-size:10px}div.svelte-xtz2g8{padding:2px;display:flex;align-items:flex-end}.small.svelte-xtz2g8{width:14px;height:14px}.large.svelte-xtz2g8{width:22px;height:22px}.pending.svelte-xtz2g8{animation:svelte-xtz2g8-flash .5s infinite}@keyframes svelte-xtz2g8-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-1nba87b{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;box-shadow:var(--shadow-drop);padding:var(--spacing-xl) 0;color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-1nba87b{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl)}.source-selection.svelte-lde7lt{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;align-self:flex-end}.icon.svelte-lde7lt{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-lde7lt{color:var(--color-accent)}.icon.svelte-lde7lt:hover,.icon.svelte-lde7lt:focus{color:var(--color-accent)}button.svelte-a356bc{cursor:pointer;width:var(--size-full)}.hidden.svelte-a356bc{display:none;height:0;position:absolute}.center.svelte-a356bc{display:flex;justify-content:center}.flex.svelte-a356bc{display:flex;justify-content:center;align-items:center}input.svelte-a356bc{display:none}div.svelte-1wj0ocy{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-1wj0ocy{margin:var(--size-1)}.preview.svelte-16l5kkn.svelte-16l5kkn{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:column;z-index:var(--layer-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--background-fill-primary);height:var(--size-full)}.fixed-height.svelte-16l5kkn.svelte-16l5kkn{min-height:var(--size-80);max-height:55vh}@media (--screen-xl){.fixed-height.svelte-16l5kkn.svelte-16l5kkn{min-height:450px}}.detailed-video.svelte-16l5kkn.svelte-16l5kkn,.image-button.svelte-16l5kkn.svelte-16l5kkn{height:calc(100% - 60px);width:100%;display:flex}.preview.svelte-16l5kkn img.svelte-16l5kkn{width:var(--size-full);height:var(--size-full);object-fit:contain}.preview.svelte-16l5kkn img.with-caption.svelte-16l5kkn{height:var(--size-full)}.caption.svelte-16l5kkn.svelte-16l5kkn{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails.svelte-16l5kkn.svelte-16l5kkn{display:flex;position:absolute;bottom:0;justify-content:center;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item.svelte-16l5kkn.svelte-16l5kkn{--ring-color:transparent;position:relative;box-shadow:0 0 0 2px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item.svelte-16l5kkn.svelte-16l5kkn:hover{--ring-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected.svelte-16l5kkn.svelte-16l5kkn{--ring-color:var(--color-accent)}.thumbnail-small.svelte-16l5kkn.svelte-16l5kkn{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected.svelte-16l5kkn.svelte-16l5kkn{--ring-color:var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.thumbnail-small.svelte-16l5kkn>img.svelte-16l5kkn{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-play.svelte-16l5kkn.svelte-16l5kkn{position:absolute;top:50%;left:50%;opacity:75%;transform:translate(-50%,-50%);z-index:var(--layer-1)}.grid-wrap.svelte-16l5kkn.svelte-16l5kkn{position:relative;padding:var(--size-2);height:var(--size-full);overflow-y:scroll}.grid-container.svelte-16l5kkn.svelte-16l5kkn{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.thumbnail-lg.svelte-16l5kkn>img.svelte-16l5kkn{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg.svelte-16l5kkn:hover .caption-label.svelte-16l5kkn{opacity:.5}.caption-label.svelte-16l5kkn.svelte-16l5kkn{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.icon-button.svelte-16l5kkn.svelte-16l5kkn{position:absolute;top:0;right:0;z-index:var(--layer-1)}.icon-buttons.svelte-16l5kkn.svelte-16l5kkn{display:flex;position:absolute;right:0}.icon-buttons.svelte-16l5kkn a.svelte-16l5kkn{margin:var(--size-1) 0}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-14miwb5.svelte-14miwb5{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-5);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-14miwb5.svelte-14miwb5{top:0;right:0;left:0}.wrap.default.svelte-14miwb5.svelte-14miwb5{top:0;right:0;bottom:0;left:0}.hide.svelte-14miwb5.svelte-14miwb5{opacity:0;pointer-events:none}.generating.svelte-14miwb5.svelte-14miwb5{animation:svelte-14miwb5-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-14miwb5.svelte-14miwb5{background:none}@keyframes svelte-14miwb5-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-14miwb5.svelte-14miwb5{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-14miwb5.svelte-14miwb5{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-14miwb5.svelte-14miwb5{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-14miwb5.svelte-14miwb5{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-14miwb5.svelte-14miwb5{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-14miwb5.svelte-14miwb5{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-14miwb5.svelte-14miwb5{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-14miwb5.svelte-14miwb5{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-14miwb5.svelte-14miwb5{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-14miwb5 .progress-text.svelte-14miwb5{background:var(--block-background-fill)}.border.svelte-14miwb5.svelte-14miwb5{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}

src/frontend/shared/Gallery.svelte

@@ -3,10 +3,10 @@
 	import { ModifyUpload } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 	import { dequal } from "dequal";
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import { tick } from "svelte";
 
-	import { Download, Image } from "@gradio/icons";
+	import { Download, Image, Play } from "@gradio/icons";
 	import { normalise_file, type FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import { IconButton } from "@gradio/atoms";
@@ -28,12 +28,39 @@
 	export let show_download_button = false;
 	export let i18n: I18nFormatter;
 	export let selected_index: number | null = null;
-
+	let thumbnailUrl = "";
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
 	}>();
 
+	onMount(() => {
+		const videoElement = document.createElement('video');
+		videoElement.style.position = 'absolute'; 
+		videoElement.style.left = '-9999px';
+		videoElement.src = value[0].image.url;
+		videoElement.crossOrigin = 'anonymous';
+		videoElement.muted = true;
+		videoElement.addEventListener('loadedmetadata', () => {
+			videoElement.currentTime = 0.1;
+		});
+		videoElement.addEventListener('seeked', () => {
+			createThumbnail(videoElement);
+		});
+		document.body.appendChild(videoElement);
+		videoElement.load();
+	});
+
+	function createThumbnail(videoElement) {
+		const canvas = document.createElement('canvas');
+		canvas.width = videoElement.videoWidth;
+		canvas.height = videoElement.videoHeight;
+		const ctx = canvas.getContext('2d');
+		ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+		thumbnailUrl = canvas.toDataURL('image/jpeg');
+		document.body.removeChild(videoElement);
+	}
+
 	// tracks whether the value of the gallery was reset
 	let was_reset = true;
 
@@ -256,12 +283,17 @@
 						aria-label={"Thumbnail " + (i + 1) + " of " + _value.length}
 					>
 						<img
-							src={media.image.url}
+							src={thumbnailUrl}
 							title={media.caption || null}
 							data-testid={"thumbnail " + (i + 1)}
 							alt=""
 							loading="lazy"
 						/>
+						{#if media.image.mime_type === "video/mp4"}
+							<div class="thumbnail-play" >
+								<Play />
+							</div>
+						{/if}
 					</button>
 				{/each}
 			</div>
@@ -442,7 +474,16 @@
 		width: var(--size-full);
 		height: var(--size-full);
 		overflow: hidden;
-		object-fit: var(--object-fit);
+		object-fit: cover;
+	}
+
+	.thumbnail-play {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		opacity: 75%;
+		transform: translate(-50%, -50%);
+		z-index: var(--layer-1);
 	}
 
 	.grid-wrap {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_videogallery"
-version = "0.0.1"
+version = "0.0.2"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"
@@ -43,7 +43,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_videogallery/templates", "*.pyi", "backend/gradio_videogallery/templates"]
+artifacts = ["/backend/gradio_videogallery/templates", "*.pyi", "backend/gradio_videogallery/templates", "backend/gradio_videogallery/templates", "backend/gradio_videogallery/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_videogallery"]