Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,057 Bytes
b2ecf7d 86c4ad7 b2ecf7d 9d298eb b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 b2ecf7d 86c4ad7 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 |
<script lang="ts">
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 IconLightning from "../../..//Icons/IconLightning.svelte";
import PipelineTag from "../../../PipelineTag/PipelineTag.svelte";
import WidgetExamples from "../WidgetExamples/WidgetExamples.svelte";
type TWidgetExample = $$Generic<WidgetExample>;
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[] = [];
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 justify-between text-sm text-gray-500">
{#if pipeline && task}
<a
class={TASKS_DATA[task] ? "hover:underline" : undefined}
href={TASKS_DATA[task] ? `/tasks/${task}` : undefined}
target="_blank"
title={TASKS_DATA[task] ? `Learn more about ${task}` : undefined}
>
<PipelineTag classNames="mr-2 mb-1.5" {pipeline} />
</a>
{/if}
{#if validExamples.length && applyWidgetExample}
<WidgetExamples {validExamples} {isLoading} {applyWidgetExample} {callApiOnMount} {exampleQueryParams} />
{/if}
</div>
|