Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,657 Bytes
94753b6 3f534ed 86c4ad7 b2ecf7d 9d298eb 3f534ed 9d298eb b2ecf7d 86c4ad7 3f534ed b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 3f534ed 86c4ad7 3f534ed 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 02f87b5 b2ecf7d 3f534ed b2ecf7d efa0b5c b2ecf7d efa0b5c 3f534ed 03b3b42 3f534ed 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 100 101 102 103 104 105 106 107 |
<script lang="ts" generics="TWidgetExample extends WidgetExample">
import { fade } from "svelte/transition";
import { updateWidgetState } from "../../stores.js";
import { TASKS_DATA } from "@huggingface/tasks";
import type { WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
import type { WidgetProps, ExampleRunOpts } from "../types.js";
import { getPipelineTask } from "../../../../utils/ViewUtils.js";
import IconInfo from "../../..//Icons/IconInfo.svelte";
import IconRefresh from "../../..//Icons/IconRefresh.svelte";
import IconLightning from "../../..//Icons/IconLightning.svelte";
import PipelineTag from "../../../PipelineTag/PipelineTag.svelte";
import WidgetExamples from "../WidgetExamples/WidgetExamples.svelte";
import { createEventDispatcher } from "svelte";
export let model: WidgetProps["model"];
export let noTitle = false;
export let title: string | null = null;
export let isLoading = false;
export let isDisabled = false;
export let applyWidgetExample: ((sample: TWidgetExample, opts?: ExampleRunOpts) => void) | undefined = undefined;
export let validateExample: ((sample: WidgetExample) => sample is TWidgetExample) | undefined = undefined;
export let callApiOnMount: WidgetProps["callApiOnMount"] = false;
export let exampleQueryParams: WidgetExampleAttribute[] = [];
export let showReset = false;
const dispatch = createEventDispatcher<{ reset: void }>();
const pipeline = model?.pipeline_tag;
$: task = pipeline ? getPipelineTask(pipeline) : undefined;
$: validExamples = getValidExamples(isDisabled);
function getValidExamples(isDisabled: boolean): TWidgetExample[] {
const examples = (model?.widgetData ?? []).filter(
(sample): sample is TWidgetExample =>
(validateExample?.(sample) ?? false) && (!isDisabled || sample.output !== undefined)
);
// if there are no examples with outputs AND model.inference !== InferenceDisplayability.Yes
// then widget will show InferenceDisplayability error to the user without showing anything else
if (isDisabled && !examples.length) {
updateWidgetState(model.id, "noInference", true);
}
return examples;
}
</script>
<div class="mb-2 flex items-center font-semibold">
{#if !noTitle}
{#if title}
<div class="flex items-center text-lg">
{title}
</div>
{:else}
<div class="flex items-center text-lg">
{#if !isDisabled}
<IconLightning classNames="-ml-1 mr-1 text-yellow-500" />
Inference API
{:else}
Inference Examples
{/if}
</div>
<a target="_blank" href="https://huggingface.co/docs/hub/models-widgets#example-outputs">
<IconInfo classNames="ml-1.5 text-sm text-gray-400 hover:text-black" />
</a>
{/if}
{/if}
</div>
<div class="mb-0.5 flex w-full max-w-full flex-wrap items-center text-sm text-gray-500">
{#if pipeline && task}
<div class="flex gap-4 items-center mb-1.5">
<a
href={TASKS_DATA[task] ? `/tasks/${task}` : undefined}
target="_blank"
title={TASKS_DATA[task] ? `Learn more about ${task}` : undefined}
>
<PipelineTag {pipeline} classNames={TASKS_DATA[task] ? "hover:underline" : ""} />
</a>
</div>
{/if}
<div class="flex gap-2 ml-auto">
{#if showReset && !isDisabled}
<button
class="flex items-center mb-1.5 text-gray-400"
type="button"
on:click|preventDefault={() => dispatch("reset")}
transition:fade
>
<IconRefresh />
</button>
{/if}
{#if validExamples.length && applyWidgetExample}
<WidgetExamples
classNames="flex gap-x-1 peer:"
{validExamples}
{isLoading}
{applyWidgetExample}
{callApiOnMount}
{exampleQueryParams}
/>
{/if}
</div>
</div>
|