Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Widgets] Refactor examples running #1023

Merged
merged 27 commits into from
Oct 30, 2023
Merged

[Widgets] Refactor examples running #1023

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
667710d
Rm `previewInputSample` by reusing `applyInputSample`
mishig25 Oct 13, 2023
85aac2e
Rm unneeded `getDemoInputs` function
mishig25 Oct 13, 2023
c56c64f
better naming
mishig25 Oct 16, 2023
aa2396e
format
mishig25 Oct 16, 2023
d2374e4
correct typing
mishig25 Oct 16, 2023
d5325f9
add missing await
mishig25 Oct 16, 2023
2730c9c
Update js/src/lib/components/InferenceWidget/shared/helpers.ts
mishig25 Oct 16, 2023
3ba2298
format
mishig25 Oct 16, 2023
7858186
use `opts` syntax
mishig25 Oct 16, 2023
fd40b25
run onMount widget example inside WidgetWrapper
mishig25 Oct 26, 2023
756223d
all widgets run onMount example inside WidgetWrapper
mishig25 Oct 27, 2023
580c830
Rm `previewInputSample` by reusing `applyInputSample`
mishig25 Oct 13, 2023
f89936c
Rm unneeded `getDemoInputs` function
mishig25 Oct 13, 2023
0654367
better naming
mishig25 Oct 16, 2023
94249c4
format
mishig25 Oct 16, 2023
353f172
correct typing
mishig25 Oct 16, 2023
23a2fe0
add missing await
mishig25 Oct 16, 2023
c36fcdc
Update js/src/lib/components/InferenceWidget/shared/helpers.ts
mishig25 Oct 16, 2023
06420aa
format
mishig25 Oct 16, 2023
44eb4f1
use `opts` syntax
mishig25 Oct 16, 2023
ada2b70
run onMount widget example inside WidgetWrapper
mishig25 Oct 26, 2023
37f2ccd
all widgets run onMount example inside WidgetWrapper
mishig25 Oct 27, 2023
8446c3e
Merge branch 'rebase' into refactor_examples_running
mishig25 Oct 27, 2023
7ebca52
fix logic
mishig25 Oct 30, 2023
c89086b
stronger typing
mishig25 Oct 30, 2023
4d03786
format
mishig25 Oct 30, 2023
9ea310a
more refactor
mishig25 Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> =
WidgetExampleZeroShotTextInput<TOutput>;

export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
structuredData: TableData;
structured_data: TableData;
}

export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
Expand Down
24 changes: 6 additions & 18 deletions js/src/lib/components/InferenceWidget/shared/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,18 @@ import { randomItem, parseJSON } from "../../../utils/ViewUtils";
import type { WidgetExample } from "./WidgetExample";
import type { ModelLoadInfo, TableData } from "./types";

const VALID_QUERY_PARAMS = [
// string vals
"text",
"context",
"question",
"query",
"candidateLabels",
// table vals
"multiClass",
"table",
// boolean vals
"structuredData",
];
export type QueryParam = typeof VALID_QUERY_PARAMS[number];
type KeysOfUnion<T> = T extends any ? keyof T : never;
export type QueryParam = KeysOfUnion<WidgetExample>;
type QueryParamVal = string | null | boolean | (string | number)[][];
export function getQueryParamVal(key: QueryParam): QueryParamVal {
const searchParams = new URL(window.location.href).searchParams;
const value = searchParams.get(key);
if (["text", "context", "question", "query", "candidateLabels"].includes(key)) {
if (["text", "context", "question", "query", "candidate_labels"].includes(key)) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will not work on existing URLs of ZeroShotClassification widget with URL query candidateLabels rather than candidate_labels. However, ZeroShotClassification widgets are not used widely. Therefore, I think this breaking change is fine

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think i agree for candidate_labels (it's used in the spec for widget examples) but for structuredData it's used that way in the spec no?

https://huggingface.co/docs/hub/models-widgets-examples#structured-data-classification

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wdyt #1064?
I can either merge #1064 or revert the changes back to using strucutredData. I will let you decide

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see my comment there

return value;
} else if (["table", "structuredData"].includes(key)) {
} else if (["table", "structured_data"].includes(key)) {
Copy link
Collaborator Author

@mishig25 mishig25 Oct 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as the comment above but for structuredData vs structured_data

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/huggingface/hub-docs/pull/1023/files/c89086b0ebea8a6968c7bc621134982270dbdbe6#r1376287272

const table = convertDataToTable((parseJSON(value) as TableData) ?? {});
return table;
} else if (key === "multiClass") {
} else if (key === "multi_class") {
return value === "true";
}
return value;
Expand All @@ -43,7 +31,7 @@ export function getWidgetExample<TWidgetExample extends WidgetExample>(
}

// Update current url search params, keeping existing keys intact.
export function updateUrl(obj: Record<QueryParam, string | undefined>): void {
export function updateUrl(obj: Partial<Record<QueryParam, string | undefined>>): void {
if (!window) {
return;
}
Expand Down
4 changes: 2 additions & 2 deletions ...components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
}

if (shouldUpdateUrl && !isOnLoadCall) {
updateUrl({ context: trimmedContext, question: trimmedQuestion });
updateUrl({ context: trimmedContext, text: trimmedQuestion });
}

const requestBody = {
Expand Down Expand Up @@ -136,7 +136,7 @@
{noTitle}
{outputJson}
{validateExample}
exampleQueryParams={["context", "question"]}
exampleQueryParams={["context", "text"]}
>
<svelte:fragment slot="top">
<form class="space-y-2">
Expand Down
4 changes: 2 additions & 2 deletions .../InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@

if (shouldUpdateUrl && !isOnLoadCall) {
updateUrl({
query: trimmedQuery,
text: trimmedQuery,
table: JSON.stringify(convertTableToData(table)),
});
}
Expand Down Expand Up @@ -161,7 +161,7 @@
{noTitle}
{outputJson}
validateExample={isTextAndTableInput}
exampleQueryParams={["query", "table"]}
exampleQueryParams={["text", "table"]}
>
<svelte:fragment slot="top">
<form>
Expand Down
8 changes: 4 additions & 4 deletions js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
export let includeCredentials: WidgetProps["includeCredentials"];

const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInput<WidgetExampleOutputLabels> | undefined;
const columns: string[] = Object.keys(widgetData?.structuredData ?? {});
const columns: string[] = Object.keys(widgetData?.structured_data ?? {});

let computeTime = "";
let error: string = "";
Expand Down Expand Up @@ -89,7 +89,7 @@

if (shouldUpdateUrl && !isOnLoadCall) {
updateUrl({
data: JSON.stringify(tableWithoutOutput),
structured_data: JSON.stringify(tableWithoutOutput),
});
}

Expand Down Expand Up @@ -164,7 +164,7 @@
}

function applyInputSample(sample: WidgetExampleStructuredDataInput, opts: ExampleRunOpts = {}) {
table = convertDataToTable(sample.structuredData);
table = convertDataToTable(sample.structured_data);
if (opts.isPreview) {
return;
}
Expand All @@ -185,7 +185,7 @@
{noTitle}
{outputJson}
validateExample={isStructuredDataInput}
exampleQueryParams={["structuredData"]}
exampleQueryParams={["structured_data"]}
>
<svelte:fragment slot="top">
<form>
Expand Down
6 changes: 3 additions & 3 deletions .../InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@

if (shouldUpdateUrl && !isOnLoadCall) {
updateUrl({
candidateLabels: trimmedCandidateLabels,
multiClass: multiClass ? "true" : "false",
candidate_labels: trimmedCandidateLabels,
multi_class: multiClass ? "true" : "false",
text: trimmedText,
});
}
Expand Down Expand Up @@ -145,7 +145,7 @@
{noTitle}
{outputJson}
validateExample={isZeroShotTextInput}
exampleQueryParams={["candidateLabels", "multiClass", "text"]}
exampleQueryParams={["candidate_labels", "multi_class", "text"]}
>
<svelte:fragment slot="top">
<form class="flex flex-col space-y-2">
Expand Down
2 changes: 1 addition & 1 deletion js/src/routes/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@
pipeline_tag: "tabular-classification",
widgetData: [
{
structuredData: {
structured_data: {
fixed_acidity: [7.4, 7.8, 10.3],
volatile_acidity: [0.7, 0.88, 0.32],
citric_acid: [0.0, 0.0, 0.45],
Expand Down
Loading