Skip to content

Add Tooltip: Upload file format examples #559

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

Merged
merged 1 commit into from
Dec 8, 2022
Merged

Add Tooltip: Upload file format examples #559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
186 changes: 186 additions & 0 deletions frontend/src/components/SystemSubmitDrawer/CustomDatasetFileFormats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
export interface FileTypeToTaskExample {
[key: string]: TaskExample;
}

interface TaskExample {
[key: string]: string;
}

export const customDatasetExamplesMap: {
[key: string]: FileTypeToTaskExample;
} = {};
customDatasetExamplesMap["machine-translation"] = {
tsv: {
example: `This is a good movie 这是一部好电影
...`,
description: `"source" and "reference" separated by tab`,
},
json: {
example: `[
{"source": "This is a good movie", "reference": "这是一部好电影"},
...
]`,
description: `a list of dictionaries with two keys: "source" and "reference"`,
},
};

customDatasetExamplesMap["summarization"] = {
tsv: {
example: `This is a good movie 这是一部好电影
...`,
description: `"source" and "reference" separated by tab`,
},
json: {
example: `[
{"source": "This is a good movie", "reference": "这是一部好电影"},
...
]`,
description: `a list of dictionaries with two keys: "source" and "reference"`,
},
};

customDatasetExamplesMap["conditional-generation"] = {
tsv: {
example: `This is a good movie 这是一部好电影
...`,
description: `"source" and "reference" separated by tab`,
},
json: {
example: `[
{"source": "This is a good movie", "reference": "这是一部好电影"},
...
]`,
description: `a list of dictionaries with two keys: "source" and "reference"`,
},
};

customDatasetExamplesMap["text-classification"] = {
tsv: {
example: `I love this movie positive
The movie is too long negative
...`,
description: `"text" and "true_label" separated by tab`,
},
json: {
example: `[
{"text": "I love this movie", "true_label": "positive"},
{"text": "The movie is too long", "true_label": "negative"}
...
]`,
description: `a list of dictionaries with two keys: "text" and "true_label"`,
},
};

customDatasetExamplesMap["named-entity-recognition"] = {
conll: {
example: `Barack B-PER
Obama I-PER

I O
love O
America B-LOC`,
description: `"word" and "label" separated by tab. There should be an empty line between each sentence.`,
},
};

customDatasetExamplesMap["chunking"] = {
conll: {
example: `Manville B-NP
is B-VP
a B-NP
forest I-NP
products I-NP
concern I-NP
. O

Percival B-NP
declined B-VP
to I-VP
comment I-VP
. O`,
description: `"word" and "label" separated by tab. There should be an empty line between each sentence.`,
},
};

customDatasetExamplesMap["qa-extractive"] = {
json: {
example: `[
{"context": "Super Bowl 50 was an American footb",
"question": "Which NFL team represented the AFC at Super Bowl 50?",
"answers": {'text': ['Denver Broncos', 'Denver Broncos', 'Denver Broncos'], 'answer_start': [177, 177, 177]}},
...
]`,
description: `a list of dictionaries with three keys: "context", "question", and "answers"`,
},
};

customDatasetExamplesMap["qa-multiple-choice"] = {
json: {
example: `[
{'context': 'The girl had the flightiness of a sparrow',
'question': '',
'answers': {'text': 'The girl was very fickle.', 'option_index': 0},
'options': ['The girl was very fickle.', 'The girl was very stable.']},
...
]`,
description: `a list of dictionaries with four keys: "context" , "options", "question", and "answers"`,
},
};

customDatasetExamplesMap["qa-open-domain"] = {
json: {
example: `[
{'question': 'who got the first nobel prize in physics',
'answers': ['Wilhelm Conrad Röntgen']},
...
]`,
description: `a list of dictionaries with two keys: "question" and "answers"`,
},
};

customDatasetExamplesMap["aspect-based-sentiment-classification"] = {
tsv: {
example: `use It's fast, light, and simple to use. positive
Windows 8 Lastly, Windows 8 is annoying. negative`,
description: `"aspect", "sentence", and "polarity" separated by tab`,
},
};

customDatasetExamplesMap["aspect-based-sentiment-classification"] = {
tsv: {
example: `use It's fast, light, and simple to use. positive
Windows 8 Lastly, Windows 8 is annoying. negative`,
description: `"aspect", "sentence", and "polarity" separated by tab`,
},
};

customDatasetExamplesMap["text-pair-classification"] = {
tsv: {
example: `A man playing an electric guitar on stage. A man playing banjo on the floor. contradiction
A man playing an electric guitar on stage. A man is performing for cash. neutral
...`,
description: `"text1", "text2", and "true_label" separated by tab`,
},
json: {
example: `[
{"text1": "A man playing an electric guitar on stage.",
"text2": "A man playing banjo on the floor.",
"true_label": "contradiction"},
{"text1": "A man playing an electric guitar on stage.",
"text2": "A man is performing for cash.",
"true_label": "neutral"},
...
]`,
description: `a list of dictionaries with three keys: "text1", "text2" and "true_label"`,
},
};

customDatasetExamplesMap["kg-link-tail-prediction"] = {
json: {
example: `[
{"gold_head": "abc", "gold_predicate": "dummy relation", "gold_tail":"cde"},
...
]`,
description: `it's a list of dictionaries with three keys: "gold_head", "gold_predicate", and "gold_tail"`,
},
};
70 changes: 68 additions & 2 deletions frontend/src/components/SystemSubmitDrawer/FileSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import React, { useCallback, useEffect } from "react";
import { UploadChangeParam, UploadFile } from "antd/lib/upload/interface";
import { Space, Button, CheckboxOptionType, Radio, Upload, Input } from "antd";
import {
Space,
Button,
CheckboxOptionType,
Radio,
Upload,
Input,
Popover,
} from "antd";
import { PlusOutlined, UploadOutlined } from "@ant-design/icons";

import { CodeBlock, dracula } from "react-code-blocks";
import { customDatasetExamplesMap } from "./CustomDatasetFileFormats";
import { systemOutputExamplesMap } from "./SystemOutputFileFormats";
export interface DataFileValue {
fileList?: UploadFile[];
// A map from uploaded file uid to the system name
Expand All @@ -13,13 +23,53 @@ interface Props {
value?: DataFileValue;
onChange?: (value: DataFileValue) => void;
maxFileCount?: number;
taskName: string;
forCustomDataset?: boolean;
allowedFileTypes: string[];
}

/** Returns required format for system outputs based on selected task and file
type. Returns custom dataset format if `forCustomDataset` is set to true. */
function getFileFormat(
selectedTask: string,
fileType: string,
forCustomDataset = false
) {
const header = fileType + " file format";
const codeBlocklanguage = fileType === "json" ? "json" : "text";
const taskExamples = forCustomDataset
? customDatasetExamplesMap[selectedTask]
: systemOutputExamplesMap[selectedTask];
if (taskExamples === undefined) return; // task not found in xxxFileFormats.tsx

const example = taskExamples[fileType];
if (example === undefined) return; // fileType not found for task in xxxFileFormats.tsx

const exampleText = taskExamples[fileType].example;
if (exampleText === undefined) return;

const descriptionText = taskExamples[fileType].description;
return (
<>
{header}: {descriptionText}
<br />
<b>Example:</b>
<CodeBlock
language={codeBlocklanguage}
text={exampleText}
theme={dracula}
/>
</>
);
}

/** DataFileUpload that works with Form.Item */
export function DataFileUpload({
value,
onChange,
allowedFileTypes,
taskName,
forCustomDataset = false,
maxFileCount = 1,
}: Props) {
const fileList = value?.fileList;
Expand Down Expand Up @@ -91,6 +141,22 @@ export function DataFileUpload({
size="small"
options={FILE_TYPES.map((type) => ({
...type,
label: !allowedFileTypes.includes(type.value as string) ? (
<>{type.label}</>
) : (
<Popover
content={getFileFormat(
taskName,
type.value as string,
forCustomDataset
)}
overlayStyle={{
maxWidth: "600px",
}}
>
{type.label}
</Popover>
),
disabled: !allowedFileTypes.includes(type.value as string),
}))}
value={fileType}
Expand Down
Loading