Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,739 Bytes
b2ecf7d 9d298eb b2ecf7d 9d298eb b2ecf7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<script lang="ts">
import type { ExampleRunOpts } from "../types.js";
import type { WidgetExample } from "@huggingface/tasks";
type TWidgetExample = $$Generic<WidgetExample>;
import { slide } from "svelte/transition";
import IconCaretDownV2 from "../../..//Icons/IconCaretDownV2.svelte";
export let classNames = "";
export let isLoading = false;
export let inputSamples: TWidgetExample[];
export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void;
let containerEl: HTMLElement;
let isOptionsVisible = false;
let title = "Examples";
$: {
// reset title on inputSamples change (i.e. input group change)
inputSamples;
title = "Examples";
}
function _applyInputSample(idx: number) {
hideOptions();
const sample = inputSamples[idx];
title = sample.example_title as string;
applyInputSample(sample);
}
function _previewInputSample(idx: number) {
const sample = inputSamples[idx];
applyInputSample(sample, { isPreview: true });
}
function toggleOptionsVisibility() {
isOptionsVisible = !isOptionsVisible;
}
function onClick(e: MouseEvent | TouchEvent) {
let targetElement = e.target;
do {
if (targetElement === containerEl) {
// This is a click inside. Do nothing, just return.
return;
}
targetElement = (targetElement as HTMLElement).parentElement;
} while (targetElement);
// This is a click outside
hideOptions();
}
function hideOptions() {
isOptionsVisible = false;
}
</script>
<svelte:window on:click={onClick} />
<div
class="relative mb-1.5 {classNames}
{isLoading && 'pointer-events-none opacity-50'}
{isOptionsVisible && 'z-10'}"
bind:this={containerEl}
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="inline-flex w-32 justify-between rounded-md border border-gray-100 px-4 py-1"
on:click={toggleOptionsVisibility}
>
<div class="truncate text-sm">{title}</div>
<IconCaretDownV2
classNames="-mr-1 ml-2 h-5 w-5 transition ease-in-out transform {isOptionsVisible && '-rotate-180'}"
/>
</div>
{#if isOptionsVisible}
<div
class="absolute right-0 mt-1 w-full origin-top-right rounded-md ring-1 ring-black ring-opacity-10"
transition:slide
>
<div class="rounded-md bg-white py-1" role="none">
{#each inputSamples as { example_title }, i}
<!-- svelte-ignore a11y-click-events-have-key-events a11y-mouse-events-have-key-events -->
<div
class="cursor-pointer truncate px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-200"
on:mouseover={() => _previewInputSample(i)}
on:click={() => _applyInputSample(i)}
>
{example_title}
</div>
{/each}
</div>
</div>
{/if}
</div>
|