add section, title, yaml tags and examples

.eslintcache

@@ -1 +1 @@
-[{"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js":"1","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js":"2","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js":"3","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js":"4","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/InputField.js":"5"},{"size":500,"mtime":1607266233636,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1607349763851,"results":"8","hashOfConfig":"7"},{"size":9989,"mtime":1607357430038,"results":"9","hashOfConfig":"7"},{"size":12558,"mtime":1607338863269,"results":"10","hashOfConfig":"7"},{"size":612,"mtime":1607350022304,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"d40mw9",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21","usedDeprecatedRules":"14"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js",[],["24","25"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js",[],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js",["26","27"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js",["28"],"const NAME = 'Instructions'\n\nexport default {\n    name: NAME,\n    instructions: {\n          homepage: {\n            paragraph: [\n              \"Add homepage URL here if available (unless it's a GitHub repository)\"\n            ],\n          },\n          repository: {\n            paragraph: [\n              \"If the dataset is hosted on github or has a github homepage, add URL here\"\n            ],\n          }, \n          paper: {\n            paragraph: [\n              \"If the dataset was introduced by a paper or there was a paper written describing the dataset, add URL here (landing page for Arxiv paper preferred)\"\n            ],\n          }, \n          leaderboard: {\n            paragraph: [\n              \"If the dataset supports an active leaderboard, add link here\"\n            ],\n          },  \n          contact: {\n            paragraph: [\n              \"If known, name and email of at least one person the reader can contact for questions about the dataset.\"\n            ],\n          },    \n          datasetSummary: {\n            paragraph: [\n              \"Briefly summarize the dataset, its intended use and the supported tasks. Give an overview of how and why the dataset was created. The summary should explicitly mention the languages present in the dataset (possibly in broad terms, e.g. translations between several pairs of European languages), and describe the domain, topic, or genre covered.\"\n            ],\n          },\n          supportedTasks: {\n            paragraph: [\n              \"For each of the tasks tagged for this dataset, give a brief description of the tag, metrics, and suggested models (with a link to their HuggingFace implementation if available). Give a similar description of tasks that were not covered by the structured tag set (repace the `task-category-tag` with an appropriate `other:other-task-name`).\",\n              \"- `task-category-tag`: The dataset can be used to train a model for [TASK NAME], which consists in [TASK DESCRIPTION]. Success on this task is typically measured by achieving a *high/low* [metric name](https://huggingface.co/metrics/metric_name). The ([model name](https://huggingface.co/model_name) or [model class](https://huggingface.co/transformers/model_doc/model_class.html)) model currently achieves the following score. *[IF A LEADERBOARD IS AVAILABLE]:* This task has an active leaderboard which can be found at [leaderboard url]() and ranks models based on [metric name](https://huggingface.co/metrics/metric_name) while also reporting [other metric name](https://huggingface.co/metrics/other_metric_name).\"\n            ]\n          },\n          languages: {\n            paragraph: [\n              \"Provide a brief overview of the languages represented in the dataset. Describe relevant details about specifics of the language such as whether it is social media text, African American English,...\",\n              \"When relevant, please provide [BCP-47 codes](https://tools.ietf.org/html/bcp47), which consist of a [primary language subtag](https://tools.ietf.org/html/bcp47#section-2.2.1), with a [script subtag](https://tools.ietf.org/html/bcp47#section-2.2.3) and/or [region subtag](https://tools.ietf.org/html/bcp47#section-2.2.4) if available.\"\n            ]\n          },\n          dataInstances: {\n            paragraph: [\n              \"Provide an JSON-formatted example and brief description of a typical instance in the dataset. If available, provide a link to further examples.\",\n              `\n              {\n                'example_field': ...,\n                ...\n              }\n              `,\n              \"Provide any additional information that is not covered in the other sections about the data here. In particular describe any relationships between data points and if these relationships are made explicit.\",\n            ]\n          },\n          dataFields: {\n            paragraph: [\n              \"List and describe the fields present in the dataset. Mention their data type, and whether they are used as input or output in any of the tasks the dataset currently supports. If the data has span indices, describe their attributes, such as whether they are at the character level or word level, whether they are contiguous or not, etc. If the datasets contains example IDs, state whether they have an inherent meaning, such as a mapping to other datasets or pointing to relationships between data points.\",\n              \"- `example_field`: description of `example_field`\"\n            ]\n          },\n          dataSplits: {\n            paragraph: [\n              \"Describe and name the splits in the dataset if there are more than one.\",\n              \"Describe any criteria for splitting the data, if used. If their are differences between the splits (e.g. if the training annotations are machine-generated and the dev and test ones are created by humans, or if different numbers of annotators contributed to each example), describe them here.\",\n              \"Provide the sizes of each split. As appropriate, provide any descriptive statistics for the features, such as average length.  For example:\",\n              `|                            | Tain   | Valid | Test |\n              | -----                      | ------ | ----- | ---- |\n              | Input Sentences            |        |       |      |\n              | Average Sentence Length    |        |       |      |`\n            ]\n          },\n          curationRationale: {\n            paragraph: [\n              \"What need motivated the creation of this dataset? What are some of the reasons underlying the major choices involved in putting it together?\",\n            ]\n          },\n          dataCollection: {\n            paragraph: [\n              \"Describe the data collection process. Describe any criteria for data selection or filtering. List any key words or search terms used. If possible, include runtime information for the collection process.\",\n              \"If data was collected from other pre-existing datasets, link to source here and to their [Hugging Face version](https://huggingface.co/datasets/dataset_name).\",\n              \"If the data was modified or normalized after being collected (e.g. if the data is word-tokenized), describe the process and the tools used.\"\n            ]\n          },\n          sourceLanguage: {\n            paragraph: [\n              \"State whether the data was produced by humans or machine generated. Describe the people or systems who originally created the data.\",\n              \"If available, include self-reported demographic or identity information for the source data creators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.\",\n              \"Describe the conditions under which the data was created (for example, if the producers were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.\",\n              \"Describe other people represented or mentioned in the data. Where possible, link to references for the information.\"\n            ]\n          },\n          annotations: {\n            paragraph: [\n              \"If the dataset contains annotations which are not part of the initial data collection, describe them in the following paragraphs.\"\n            ]\n          },\n          annotationProcess: {\n            paragraph: [\n              \"If applicable, describe the annotation process and any tools used, or state otherwise. Describe the amount of data annotated, if not all. Describe or reference annotation guidelines provided to the annotators. If available, provide interannotator statistics. Describe any annotation validation processes.\"\n            ]\n          },\n          annotators: {\n            paragraph: [\n              \"If annotations were collected for the source data (such as class labels or syntactic parses), state whether the annotations were produced by humans or machine generated.\",\n              \"Describe the people or systems who originally created the annotations and their selection criteria if applicable.\",\n              \"If available, include self-reported demographic or identity information for the annotators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.\",\n              \"Describe the conditions under which the data was annotated (for example, if the annotators were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.\"\n            ]\n          },\n          personalInformation: {\n            paragraph: [\n              \"State whether the dataset uses identity categories and, if so, how the information is used. Describe where this information comes from (i.e. self-reporting, collecting from profiles, inferring, etc.). See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender. State whether the data is linked to individuals and whether those individuals can be identified in the dataset, either directly or indirectly (i.e., in combination with other data).\",\n              \"State whether the dataset contains other data that might be considered sensitive (e.g., data that reveals racial or ethnic origins, sexual orientations, religious beliefs, political opinions or union memberships, or locations; financial or health data; biometric or genetic data; forms of government identification, such as social security numbers; criminal history).\",\n              \"If efforts were made to anonymize the data, describe the anonymization process.\"\n            ]\n          },\n          socialImpact: {\n            paragraph: [\n              \"Please discuss some of the ways you believe the use of this dataset will impact society.\",\n              \"The statement should include both positive outlooks, such as outlining how technologies developed through its use may improve people's lives, and discuss the accompanying risks. These risks may range from making important decisions more opaque to people who are affected by the technology, to reinforcing existing harmful biases (whose specifics should be discussed in the next section), among other considerations.\",\n              \"Please also mention in this section if the proposed dataset contains a *low-resource* or under-represented language.\"\n            ]\n          },\n          biasesDiscussion: {\n            paragraph: [\n              \"Provide descriptions of specific biases that are likely to be reflected in the data, and state whether any steps were taken to reduce their impact.\",\n              \"For Wikipedia text, see for example [Dinan et al 2020 on biases in Wikipedia (esp. Table 1)](https://arxiv.org/abs/2005.00614), or [Blodgett et al 2020](https://www.aclweb.org/anthology/2020.acl-main.485/) for a more general discussion of the topic.\",\n              \"If analyses have been run quantifying these biases, please add brief summaries and links to the studies here.\"\n            ]\n          },\n          limitations: {\n            paragraph: [\n              \"If studies of the datasets have outlined other limitations of the dataset, such as annotation artifacts, please outline and cite them here.\"\n            ]\n          },\n          datasetCurators: {\n            paragraph: [\n              \"List the people involved in collecting the dataset and their affiliation(s). If funding information is known, include it here.\"\n            ]\n          },\n          licensingInformation: {\n            paragraph: [\n              \"Provide the license and link to the license webpage if available.\"\n            ]\n          },\n          citationInformation: {\n            paragraph: [\n              \"Provide the [BibTex](http://www.bibtex.org/)-formatted reference for the dataset. For example:\",\n              `\n              @article{article_id,\n                author    = {Author List},\n                title     = {Dataset Paper Title},\n                journal   = {Publication Venue},\n                year      = {2525}\n              }\n              `,\n              \"If the dataset has a [DOI](https://www.doi.org/), please provide it here.\"\n            ]\n          },\n    }\n}","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/InputField.js",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","severity":1,"message":"34","line":207,"column":71,"nodeType":"35","endLine":207,"endColumn":86},{"ruleId":"33","severity":1,"message":"34","line":217,"column":99,"nodeType":"35","endLine":217,"endColumn":114},{"ruleId":"36","severity":1,"message":"37","line":3,"column":1,"nodeType":"38","endLine":166,"endColumn":2},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXAttribute","import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration","no-global-assign","no-unsafe-negation"]
+[{"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js":"1","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js":"2","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js":"3","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js":"4","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/InputField.js":"5","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Section.js":"6"},{"size":500,"mtime":1607266233636,"results":"7","hashOfConfig":"8"},{"size":362,"mtime":1607349763851,"results":"9","hashOfConfig":"8"},{"size":15989,"mtime":1607366079905,"results":"10","hashOfConfig":"8"},{"size":25546,"mtime":1607362560939,"results":"11","hashOfConfig":"8"},{"size":666,"mtime":1607366243409,"results":"12","hashOfConfig":"8"},{"size":645,"mtime":1607365967634,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"d40mw9",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"16"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js",[],["28","29"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js",[],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js",["30","31","32"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js",["33","34","35"],"const NAME = 'Instructions'\n\nexport default {\n    name: NAME,\n    instructions: {\n          homepage: {\n            paragraph: [\n              \"Add homepage URL here if available (unless it's a GitHub repository)\"\n            ],\n            example: [\n              \"https://facebookresearch.github.io/ELI5/explore.html\"\n            ]\n          },\n          repository: {\n            paragraph: [\n              \"If the dataset is hosted on github or has a github homepage, add URL here\"\n            ],\n            example: [\n              \"https://github.com/facebookresearch/ELI5\"\n            ]\n          }, \n          paper: {\n            paragraph: [\n              \"If the dataset was introduced by a paper or there was a paper written describing the dataset, add URL here (landing page for Arxiv paper preferred)\"\n            ],\n            example: [\n              \"https://arxiv.org/abs/1907.09190\"\n            ]\n          }, \n          leaderboard: {\n            paragraph: [\n              \"If the dataset supports an active leaderboard, add link here\"\n            ],\n            example: [\n              \"\"\n            ]\n          },  \n          contact: {\n            paragraph: [\n              \"If known, name and email of at least one person the reader can contact for questions about the dataset.\"\n            ],\n            example: [\n              \"yacine@huggingface.co\"\n            ]\n          },    \n          datasetSummary: {\n            paragraph: [\n              \"Briefly summarize the dataset, its intended use and the supported tasks. Give an overview of how and why the dataset was created. The summary should explicitly mention the languages present in the dataset (possibly in broad terms, e.g. translations between several pairs of European languages), and describe the domain, topic, or genre covered.\"\n            ],\n            example: [\n              \"The ELI5 dataset is an English-language dataset of questions and answers gathered from three subreddits were users ask factual questions requiring paragraph-length or longer answers. The dataset was created to support the task of open-domain long form abstractive question answering, and covers questions about general topics in its r/explainlikeimfive subset, science in it r/askscience subset, and History in its r/AskHistorians subset.\"\n            ]\n          },\n          supportedTasks: {\n            paragraph: [\n              \"For each of the tasks tagged for this dataset, give a brief description of the tag, metrics, and suggested models (with a link to their HuggingFace implementation if available). Give a similar description of tasks that were not covered by the structured tag set (repace the `task-category-tag` with an appropriate `other:other-task-name`).\",\n              \"- `task-category-tag`: The dataset can be used to train a model for [TASK NAME], which consists in [TASK DESCRIPTION]. Success on this task is typically measured by achieving a *high/low* [metric name](https://huggingface.co/metrics/metric_name). The ([model name](https://huggingface.co/model_name) or [model class](https://huggingface.co/transformers/model_doc/model_class.html)) model currently achieves the following score. *[IF A LEADERBOARD IS AVAILABLE]:* This task has an active leaderboard which can be found at [leaderboard url]() and ranks models based on [metric name](https://huggingface.co/metrics/metric_name) while also reporting [other metric name](https://huggingface.co/metrics/other_metric_name).\"\n            ],\n            example: [\n              \"abstractive-qa, open-domain-qa: The dataset can be used to train a model for Open Domain Long Form Question Answering. An LFQA model is presented with a non-factoid and asked to retrieve relevant information from a knowledge source (such as Wikipedia), then use it to generate a multi-sentence answer. The model performance is measured by how high its ROUGE score to the reference is. A BART-based model with a dense retriever trained to draw information from Wikipedia passages achieves a ROUGE-L of 0.149.\"\n            ]\n          },\n          languages: {\n            paragraph: [\n              \"Provide a brief overview of the languages represented in the dataset. Describe relevant details about specifics of the language such as whether it is social media text, African American English,...\",\n              \"When relevant, please provide [BCP-47 codes](https://tools.ietf.org/html/bcp47), which consist of a [primary language subtag](https://tools.ietf.org/html/bcp47#section-2.2.1), with a [script subtag](https://tools.ietf.org/html/bcp47#section-2.2.3) and/or [region subtag](https://tools.ietf.org/html/bcp47#section-2.2.4) if available.\"\n            ],\n            example: [\n              \"The text in the dataset is in English, as spoken by Reddit users on the r/explainlikeimfive, r/askscience, and r/AskHistorians subreddits. The associated BCP-47 code is en.\"\n            ]\n          },\n          dataInstances: {\n            paragraph: [\n              \"Provide an JSON-formatted example and brief description of a typical instance in the dataset. If available, provide a link to further examples.\",\n              `\n              {\n                'example_field': ...,\n                ...\n              }\n              `,\n              \"Provide any additional information that is not covered in the other sections about the data here. In particular describe any relationships between data points and if these relationships are made explicit.\",\n            ],\n            example: [\n              \"A typical data point comprises a question, with a title containing the main question and a selftext which sometimes elaborates on it, and a list of answers from the forum sorted by the number of upvotes they obtained. Additionally, the URLs in each of the text fields have been extracted to respective lists and replaced by generic tokens in the text.\",\n              \"An example from the ELI5 test set looks as follows:\",\n              `{'q_id': '8houtx',`,\n              `title': 'Why does water heated to room temperature feel colder than the air around it?,`,\n              `selftext': '',`,\n              `document': '',`,\n              `subreddit': 'explainlikeimfive',`,\n              `answers': {'a_id': ['dylcnfk', 'dylcj49'],`,\n               `text': [\"Water transfers heat more efficiently than air. When something feels cold it's because heat is being transferred from your skin to whatever you're touching. Since water absorbs the heat more readily than air, it feels colder.\",\n                \"Air isn't as good at transferring heat compared to something like water or steel (sit on a room temperature steel bench vs. a room temperature wooden bench, and the steel one will feel more cold).\\n\\nWhen you feel cold, what you're feeling is heat being transferred out of you.  If there is no breeze, you feel a certain way.  If there's a breeze, you will get colder faster (because the moving air is pulling the heat away from you), and if you get into water, its quite good at pulling heat from you.   Get out of the water and have a breeze blow on you while you're wet, all of the water starts evaporating, pulling even more heat from you.\"],`,\n               `score': [5, 2]},`,\n              `title_urls': {'url': []},`,\n              `selftext_urls': {'url': []},`,\n              `answers_urls': {'url': []}}{'q_id': '8houtx',`,\n              `title': 'Why does water heated to room temperature feel colder than the air around it?',`,\n              `selftext': '',`,\n              `document': '',`,\n              `subreddit': 'explainlikeimfive',`,\n              `answers': {'a_id': ['dylcnfk', 'dylcj49'],`,\n               `text': [\"Water transfers heat more efficiently than air. When something feels cold it's because heat is being transferred from your skin to whatever you're touching. Since water absorbs the heat more readily than air, it feels colder.\",\n                \"Air isn't as good at transferring heat compared to something like water or steel (sit on a room temperature steel bench vs. a room temperature wooden bench, and the steel one will feel more cold).\\n\\nWhen you feel cold, what you're feeling is heat being transferred out of you.  If there is no breeze, you feel a certain way.  If there's a breeze, you will get colder faster (because the moving air is pulling the heat away from you), and if you get into water, its quite good at pulling heat from you.   Get out of the water and have a breeze blow on you while you're wet, all of the water starts evaporating, pulling even more heat from you.\"]`,\n               `score': [5, 2]},`,\n              `title_urls': {'url': []},`,\n              `selftext_urls': {'url': []},`,\n              `answers_urls': {'url': []}},`\n            ]\n          },\n          dataFields: {\n            paragraph: [\n              \"List and describe the fields present in the dataset. Mention their data type, and whether they are used as input or output in any of the tasks the dataset currently supports. If the data has span indices, describe their attributes, such as whether they are at the character level or word level, whether they are contiguous or not, etc. If the datasets contains example IDs, state whether they have an inherent meaning, such as a mapping to other datasets or pointing to relationships between data points.\",\n              \"- `example_field`: description of `example_field`\"\n            ], \n            example: [\n              `q_id: a string question identifier for each example, corresponding to its ID in the Pushshift.io Reddit submission dumps.`,\n              `subreddit: One of explainlikeimfive, askscience, or AskHistorians, indicating which subreddit the question came from`,\n              `title: title of the question, with URLs extracted and replaced by URL_n tokens`,\n              `title_urls: list of the extracted URLs, the nth element of the list was replaced by URL_n`,\n              `selftext: either an empty string or an elaboration of the question`,\n              `selftext_urls: similar to title_urls but for self_text`,\n              `answers: a list of answers, each answer has:`,\n              `a_id: a string answer identifier for each answer, corresponding to its ID in the Pushshift.io Reddit comments dumps.`,\n              `text: the answer text with the URLs normalized`,\n              `score: the number of upvotes the answer had received when the dumps were created`,\n              `answers_urls: a list of the extracted URLs. All answers use the same list, the numbering of the normalization token continues across answer texts`,\n            ]\n          },\n          dataSplits: {\n            paragraph: [\n              \"Describe and name the splits in the dataset if there are more than one.\",\n              \"Describe any criteria for splitting the data, if used. If their are differences between the splits (e.g. if the training annotations are machine-generated and the dev and test ones are created by humans, or if different numbers of annotators contributed to each example), describe them here.\",\n              \"Provide the sizes of each split. As appropriate, provide any descriptive statistics for the features, such as average length.  For example:\",\n              `\tTain\tValid\tTest\n              Input Sentences \t\n              Average Sentence Length`,\n            ],\n            example: [\n              \"The data is split into a training, validation and test set for each of the three subreddits. In order to avoid having duplicate questions in across sets, the title field of each of the questions were ranked by their tf-idf match to their nearest neighbor and the ones with the smallest value were used in the test and validation sets. The final split sizes are as follow:\",\n              `\tTain\tValid\tTest\n              r/explainlikeimfive examples\t272634\t9812\t24512\n              r/askscience examples\t131778\t2281\t4462\n              r/AskHistorians examples\t98525\t4901\t9764`\n            ]\n          },\n          curationRationale: {\n            paragraph: [\n              \"What need motivated the creation of this dataset? What are some of the reasons underlying the major choices involved in putting it together?\",\n            ],\n            example: [\n              \"ELI5 was built to provide a testbed for machines to learn how to answer more complex questions, which requires them to find and combine information in a coherent manner. The dataset was built by gathering questions that were asked by community members of three subreddits, including r/explainlikeimfive, along with the answers that were provided by other users. The rules of the subreddit make this data particularly well suited to training a model for abstractive question answering: the questions need to seek an objective explanation about well established facts, and the answers provided need to be understandable to a layperson without any particular knowledge domain.\"\n            ]\n          },\n          dataCollection: {\n            paragraph: [\n              \"Describe the data collection process. Describe any criteria for data selection or filtering. List any key words or search terms used. If possible, include runtime information for the collection process.\",\n              \"If data was collected from other pre-existing datasets, link to source here and to their [Hugging Face version](https://huggingface.co/datasets/dataset_name).\",\n              \"If the data was modified or normalized after being collected (e.g. if the data is word-tokenized), describe the process and the tools used.\"\n            ],\n            example:[\n              \"The data was obtained by filtering submissions and comments from the subreddits of interest from the XML dumps of the Reddit forum hosted on Pushshift.io.\",\n              \"In order to further improve the quality of the selected examples, only questions with a score of at least 2 and at least one answer with a score of at least 2 were selected for the dataset. The dataset questions and answers span a period form August 2012 to August 2019.\"\n            ]\n          },\n          sourceLanguage: {\n            paragraph: [\n              \"State whether the data was produced by humans or machine generated. Describe the people or systems who originally created the data.\",\n              \"If available, include self-reported demographic or identity information for the source data creators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.\",\n              \"Describe the conditions under which the data was created (for example, if the producers were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.\",\n              \"Describe other people represented or mentioned in the data. Where possible, link to references for the information.\"\n            ],\n            example: [\n            \"The language producers are users of the r/explainlikeimfive, r/askscience, and r/AskHistorians subreddits between 2012 and 2019. No further demographic information was available from the data source.\"\n            ]\n          },\n          annotations: {\n            paragraph: [\n              \"If the dataset contains annotations which are not part of the initial data collection, describe them in the following paragraphs.\"\n            ],\n            example: [\n              \"The dataset does not contain any additional annotations.\"\n            ]\n          },\n          annotationProcess: {\n            paragraph: [\n              \"If applicable, describe the annotation process and any tools used, or state otherwise. Describe the amount of data annotated, if not all. Describe or reference annotation guidelines provided to the annotators. If available, provide interannotator statistics. Describe any annotation validation processes.\"\n            ],\n            example: [\n              \"[N/A]\"\n            ]\n          },\n          annotators: {\n            paragraph: [\n              \"If annotations were collected for the source data (such as class labels or syntactic parses), state whether the annotations were produced by humans or machine generated.\",\n              \"Describe the people or systems who originally created the annotations and their selection criteria if applicable.\",\n              \"If available, include self-reported demographic or identity information for the annotators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.\",\n              \"Describe the conditions under which the data was annotated (for example, if the annotators were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.\"\n            ],\n            example: [\n              \"[N/A]\"\n            ]\n          },\n          personalInformation: {\n            paragraph: [\n              \"State whether the dataset uses identity categories and, if so, how the information is used. Describe where this information comes from (i.e. self-reporting, collecting from profiles, inferring, etc.). See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender. State whether the data is linked to individuals and whether those individuals can be identified in the dataset, either directly or indirectly (i.e., in combination with other data).\",\n              \"State whether the dataset contains other data that might be considered sensitive (e.g., data that reveals racial or ethnic origins, sexual orientations, religious beliefs, political opinions or union memberships, or locations; financial or health data; biometric or genetic data; forms of government identification, such as social security numbers; criminal history).\",\n              \"If efforts were made to anonymize the data, describe the anonymization process.\"\n            ],\n            example: [\n              \"The authors removed the speaker IDs from the Pushshift.io dumps but did not otherwise anonymize the data. Some of the questions and answers are about contemporary public figures or individuals who appeared in the news.\"\n            ]\n          },\n          socialImpact: {\n            paragraph: [\n              \"Please discuss some of the ways you believe the use of this dataset will impact society.\",\n              \"The statement should include both positive outlooks, such as outlining how technologies developed through its use may improve people's lives, and discuss the accompanying risks. These risks may range from making important decisions more opaque to people who are affected by the technology, to reinforcing existing harmful biases (whose specifics should be discussed in the next section), among other considerations.\",\n              \"Please also mention in this section if the proposed dataset contains a *low-resource* or under-represented language.\"\n            ],\n            example: [\n              \"The purpose of this dataset is to help develop better question answering systems.\",\n              \"A system that succeeds at the supported task would be able to provide a coherent answer to even complex questions requiring a multi-step explanation, which is beyond the ability of even the larger existing models. The task is also thought as a test-bed for retrieval model which can show the users which source text was used in generating the answer and allow them to confirm the information provided to them.\",\n              \"It should be noted however that the provided answers were written by Reddit users, an information which may be lost if models trained on it are deployed in down-stream applications and presented to users without context. The specific biases this may introduce are discussed in the next section.\",\n            ]\n          },\n          biasesDiscussion: {\n            paragraph: [\n              \"Provide descriptions of specific biases that are likely to be reflected in the data, and state whether any steps were taken to reduce their impact.\",\n              \"For Wikipedia text, see for example [Dinan et al 2020 on biases in Wikipedia (esp. Table 1)](https://arxiv.org/abs/2005.00614), or [Blodgett et al 2020](https://www.aclweb.org/anthology/2020.acl-main.485/) for a more general discussion of the topic.\",\n              \"If analyses have been run quantifying these biases, please add brief summaries and links to the studies here.\"\n            ],\n            example: [\n              \"While Reddit hosts a number of thriving communities with high quality discussions, it is also widely known to have corners where sexism, hate, and harassment are significant issues. See for example the recent post from Reddit founder u/spez outlining some of the ways he thinks the website's historical policies have been responsible for this problem, Adrienne Massanari's 2015 article on GamerGate and follow-up works, or a 2019 Wired article on misogyny on Reddit.\",\n              \"While there has been some recent work in the NLP community on de-biasing models (e.g. Black is to Criminal as Caucasian is to Police: Detecting and Removing Multiclass Bias in Word Embeddings for word embeddings trained specifically on Reddit data), this problem is far from solved, and the likelihood that a trained model might learn the biases present in the data remains a significant concern.\",\n              `We still note some encouraging signs for all of these communities: r/explainlikeimfive and r/askscience have similar structures and purposes, and r/askscience was found in 2015 to show medium supportiveness and very low toxicity when compared to other subreddits (see a hackerfall post, thecut.com write-up and supporting data). Meanwhile, the r/AskHistorians rules mention that the admins will not tolerate \"racism, sexism, or any other forms of bigotry\". However, further analysis of whether and to what extent these rules reduce toxicity is still needed.`,\n              \"We also note that given the audience of the Reddit website which is more broadly used in the US and Europe, the answers will likely present a Western perspectives, which is particularly important to note when dealing with historical topics.\"\n            ]\n          },\n          limitations: {\n            paragraph: [\n              \"If studies of the datasets have outlined other limitations of the dataset, such as annotation artifacts, please outline and cite them here.\"\n            ],\n            example: [\n              \"The answers provided in the dataset are represent the opinion of Reddit users. While these communities strive to be helpful, they should not be considered to represent a ground truth.\"\n            ]\n          },\n          datasetCurators: {\n            paragraph: [\n              \"List the people involved in collecting the dataset and their affiliation(s). If funding information is known, include it here.\"\n            ],\n            example: [\n              \"The dataset was initially created by Angela Fan, Ethan Perez, Yacine Jernite, Jason Weston, Michael Auli, and David Grangier, during work done at Facebook AI Research (FAIR).\"\n            ]\n          },\n          licensingInformation: {\n            paragraph: [\n              \"Provide the license and link to the license webpage if available.\"\n            ],\n            example: [\n              \"The licensing status of the dataset hinges on the legal status of the Pushshift.io data which is unclear.\"\n            ]\n          },\n          citationInformation: {\n            paragraph: [\n              \"Provide the [BibTex](http://www.bibtex.org/)-formatted reference for the dataset. For example:\",\n              `\n              @article{article_id,\n                author    = {Author List},\n                title     = {Dataset Paper Title},\n                journal   = {Publication Venue},\n                year      = {2525}\n              }\n              `,\n              \"If the dataset has a [DOI](https://www.doi.org/), please provide it here.\"\n            ],\n            example: [\n              `@inproceedings{eli5_lfqa`,\n                `author    = {Angela Fan and\n                             Yacine Jernite and\n                             Ethan Perez and\n                             David Grangier and\n                             Jason Weston and\n                             Michael Auli}`,\n                `editor    = {Anna Korhonen and\n                             David R. Traum and\n                             Llu{\\'{\\i}}s M{\\`{a}}rquez}`,\n                `title     = {{ELI5:} Long Form Question Answering}`,\n                `booktitle = {Proceedings of the 57th Conference of the Association for Computational\n                             Linguistics, {ACL} 2019, Florence, Italy, July 28- August 2, 2019,\n                             Volume 1: Long Papers}`,\n                `pages     = {3558--3567}`,\n                `publisher = {Association for Computational Linguistics}`,\n                `year      = {2019}`,\n                `url       = {https://doi.org/10.18653/v1/p19-1346}`,\n                `doi       = {10.18653/v1/p19-1346}\n              }`\n            ]\n          },\n    }\n}","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/InputField.js",[],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Section.js",[],{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":338,"column":71,"nodeType":"42","endLine":338,"endColumn":86},{"ruleId":"40","severity":1,"message":"41","line":350,"column":71,"nodeType":"42","endLine":350,"endColumn":86},{"ruleId":"40","severity":1,"message":"41","line":359,"column":103,"nodeType":"42","endLine":359,"endColumn":118},{"ruleId":"43","severity":1,"message":"44","line":3,"column":1,"nodeType":"45","endLine":300,"endColumn":2},{"ruleId":"46","severity":1,"message":"47","line":286,"column":34,"nodeType":"48","messageId":"49","endLine":286,"endColumn":35,"suggestions":"50"},{"ruleId":"46","severity":1,"message":"51","line":286,"column":37,"nodeType":"48","messageId":"49","endLine":286,"endColumn":38,"suggestions":"52"},"no-native-reassign",["53"],"no-negated-in-lhs",["54"],"react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXAttribute","import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration","no-useless-escape","Unnecessary escape character: \\'.","TemplateElement","unnecessaryEscape",["55","56"],"Unnecessary escape character: \\i.",["57","58"],"no-global-assign","no-unsafe-negation",{"messageId":"59","fix":"60","desc":"61"},{"messageId":"62","fix":"63","desc":"64"},{"messageId":"59","fix":"65","desc":"61"},{"messageId":"62","fix":"66","desc":"64"},"removeEscape",{"range":"67","text":"68"},"Remove the `\\`. This maintains the current functionality.","escapeBackslash",{"range":"69","text":"70"},"Replace the `\\` with `\\\\` to include the actual backslash character.",{"range":"71","text":"68"},{"range":"72","text":"70"},[24868,24869],"",[24868,24868],"\\",[24871,24872],[24871,24871]]

package-lock.json

@@ -14815,6 +14815,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
       "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
     },
+    "react-icons": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
+      "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -2,6 +2,7 @@
   "name": "datasetcard",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
     "@craco/craco": "^5.9.0",
     "@testing-library/jest-dom": "^5.11.6",
@@ -12,6 +13,7 @@
     "postcss": "^7.0.35",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.1.0",
     "react-markdown": "^5.0.3",
     "react-scripts": "4.0.1",
     "save-file": "^2.3.1",

src/App.js

@@ -1,13 +1,22 @@
 import React, { useState } from 'react';
 import InputField from "./InputField"
+import Section from "./Section"
 import Instructions from './Instructions'
 import ReactMarkdown from "react-markdown";
 import {save} from 'save-file'
 
+
 function App() {
 
   const [fieldFocussed, setFieldFocussed] = useState()
   const [card, setCard] = useState({})
+  const [tagsSection, setTagsSection] = useState(false)
+  const [urlsSection, setUrlsSection] = useState(false)
+  const [datasetDescriptionSection, setDatasetDescriptionSection] = useState(false)
+  const [datasetStructureSection, setDatasetStructureSection] = useState(false)
+  const [datasetCreationSection, setDatasetCreationSection] = useState(false)
+  const [considerationsSection, setConsiderationsSection] = useState(false)
+  const [additionalInformationSection, setAdditionalInformationSection] = useState(false)
 
   async function handleClick(e){
     setFieldFocussed(e.target.id)
@@ -17,9 +26,81 @@ function App() {
     setCard({...card, [e.target.id]:e.currentTarget.value})
   }
 
+  async function handleTagsSection(){
+    setAdditionalInformationSection(false)
+    setConsiderationsSection(false)
+    setDatasetCreationSection(false)
+    setDatasetStructureSection(false)
+    setDatasetDescriptionSection(false)
+    setUrlsSection(false)
+    setTagsSection(!tagsSection)
+  }
+
+  async function handleUrlsSection(){
+    setAdditionalInformationSection(false)
+    setConsiderationsSection(false)
+    setDatasetCreationSection(false)
+    setDatasetStructureSection(false)
+    setDatasetDescriptionSection(false)
+    setTagsSection(false)
+    setUrlsSection(!urlsSection)
+  }
+
+  async function handleDatasetDescriptionSection(){
+    setAdditionalInformationSection(false)
+    setConsiderationsSection(false)
+    setDatasetCreationSection(false)
+    setDatasetStructureSection(false)
+    setTagsSection(false)
+    setUrlsSection(false)
+    setDatasetDescriptionSection(!datasetDescriptionSection)
+  }
+
+  async function handleDatasetStructureSection(){
+    setAdditionalInformationSection(false)
+    setConsiderationsSection(false)
+    setDatasetCreationSection(false)
+    setDatasetDescriptionSection(false)
+    setTagsSection(false)
+    setUrlsSection(false)
+    setDatasetStructureSection(!datasetStructureSection)
+  }
+
+  async function handleDatasetCreationSection(){
+    setAdditionalInformationSection(false)
+    setConsiderationsSection(false)
+    setDatasetDescriptionSection(false)
+    setTagsSection(false)
+    setUrlsSection(false)
+    setDatasetStructureSection(false)
+    setDatasetCreationSection(!datasetCreationSection)
+  }
+
+  async function handleConsiderationsSection(){
+    setAdditionalInformationSection(false)
+    setDatasetDescriptionSection(false)
+    setTagsSection(false)
+    setUrlsSection(false)
+    setDatasetStructureSection(false)
+    setDatasetCreationSection(false)
+    setConsiderationsSection(!considerationsSection)
+  }
+
+  async function handleAdditionalInformationSection(){
+    setDatasetDescriptionSection(false)
+    setTagsSection(false)
+    setUrlsSection(false)
+    setDatasetStructureSection(false)
+    setDatasetCreationSection(false)
+    setConsiderationsSection(false)
+    setAdditionalInformationSection(!additionalInformationSection)
+  }
+
   async function exportFile(card){ 
     var textTest = `
-    # Dataset Card for [Dataset Name]
+    ${card.yamlTags}
+
+    # Dataset Card for ${card.datasetName}
     
     ## Table of Contents
     - [Dataset Description](#dataset-description)
@@ -147,7 +228,7 @@ function App() {
           <div className="max-h-screen flex overflow-hidden bg-white">
             <div className="max-w-7xl mb-32 mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
               <div className="text-center">
-                <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">New Dataset Card</p>
+                <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">New Dataset Card for <input onChange={(e) => handleChange(e)}  id="datasetName" placeholder="dataset name" maxLength="200" className="ml-4 py-4 text-4xl text-gray-600 w-80 border border-solid border-gray-200 border-none h-10 rounded-md shadow" /></p>
                 <p className="max-w-xl mt-5 mx-auto text-lg text-gray-500">Fill in the form below</p>
               </div>
               <div className="flex justify-end">
@@ -159,29 +240,78 @@ function App() {
                 <div className="max-w-7xl px-4 divide-y-2 divide-gray-200 sm:px-6 lg:px-8">
                   <div className="">
                     <dl className="space-y-8 divide-y p-6 divide-gray-200">
+                      
+                      <Section title={"YAML Tags"} section={tagsSection} handleSection={handleTagsSection} />
+                      
+                      {tagsSection &&
+                      <InputField title={"YAML tags"} id={"yamlTags"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      }
+
+                      <Section title={"Urls"} section={urlsSection} handleSection={handleUrlsSection} />
+
+                      {urlsSection && 
+                      <>
                       <InputField title={"Homepage"} id={"homepage"} rows={1} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Repository"} id={"repository"} rows={1} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Paper"} id={"paper"} rows={1} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Leaderboard"} id={"leaderboard"} rows={1} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Point of Contact"} id={"contact"} rows={1} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+
+                      <Section title={"Dataset Description"} section={datasetDescriptionSection} handleSection={handleDatasetDescriptionSection} />
+                      
+                      {datasetDescriptionSection &&
+                      <>
                       <InputField title={"Dataset Summary"} id={"datasetSummary"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Supported Tasks and Leaderboards"} id={"supportedTasks"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Languages"} id={"languages"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+
+                      <Section title={"Dataset Structure"} section={datasetStructureSection} handleSection={handleDatasetStructureSection} />
+
+                      {datasetStructureSection && 
+                      <>
                       <InputField title={"Data Instances"} id={"dataInstances"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Data Fields"} id={"dataFields"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Data Splits"} id={"dataSplits"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+
+                      <Section title={"Dataset Creation"} section={datasetCreationSection} handleSection={handleDatasetCreationSection} />
+
+                      {datasetCreationSection &&
+                      <>
                       <InputField title={"Curation Rationale"} id={"curationRationale"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Initial Data Collection and Normalization"} id={"dataCollection"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Who are the source language producers?"} id={"sourceLanguage"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Annotation Process"} id={"annotationProcess"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Who are the annotators?"} id={"annotators"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Personal and Sensitive Information"} id={"personalInformation"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+                      
+                      <Section title={"Considerations for Using the Data"} section={considerationsSection} handleSection={handleConsiderationsSection} />
+
+                      {considerationsSection &&
+                      <>
                       <InputField title={"Social Impact of Dataset"} id={"socialImpact"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Discussion of Biases"} id={"biasesDiscussion"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Other Known Limitations"} id={"limitations"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+
+                      <Section title={"Additional InformationSection"} section={additionalInformationSection} handleSection={handleAdditionalInformationSection} />
+                      
+                      {additionalInformationSection &&
+                      <>
                       <InputField title={"Dataset Curators"} id={"datasetCurators"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Licensing Information"} id={"licensingInformation"} rows={4} handleClick={handleClick} handleChange={handleChange} />
                       <InputField title={"Citation Information"} id={"citationInformation"} rows={4} handleClick={handleClick} handleChange={handleChange} />
+                      </>
+                      }
+                      
                     </dl>
                   </div>
                 </div>
@@ -191,16 +321,17 @@ function App() {
         </div>
         <div className="col-span-4">
         <div className="h-screen flex overflow-hidden bg-gray-100">
-          <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto w-full overflow-y-auto py-16 px-4 sm:py-24">
             <div className="text-center">
-              <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">Instructions</p>
+              <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">Information</p>
               {!fieldFocussed &&
-              <p className="max-w-xl mt-5 mx-auto text-lg text-gray-500">Click on a field to see instructions</p>
+              <p className="max-w-xl mt-5 mx-auto text-lg text-gray-500">Click on a field to see instructions/example</p>
               }
             </div>
-            <div className="max-w-7xl mx-auto py-12 px-4 divide-y-2 divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
+            <div className="max-w-7xl text-left mx-auto py-12 px-4 divide-y-2 divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
                 <div className="mt-6">
                   <dl className="space-y-8 divide-gray-200 text-gray-600 text-left">
+                  <p className="mt-1 text-xl font-extrabold text-gray-700 sm:tracking-tight">Instructions</p>
                   {Instructions.instructions[fieldFocussed] && Instructions.instructions[fieldFocussed].paragraph.map((para) => (
                     <div key={para}>
                       <ReactMarkdown source={para}
@@ -210,7 +341,18 @@ function App() {
                   ))}
                   </dl>
                 </div>
-                
+                <div className="mt-12">
+                  <dl className="space-y-8 divide-gray-200 text-gray-600 text-left">
+                  <p className="mt-1 text-xl font-extrabold text-gray-700 sm:tracking-tight">Example</p>
+                  {Instructions.instructions[fieldFocussed] && Instructions.instructions[fieldFocussed].example.map((ex) => (
+                    <div key={ex}>
+                      <ReactMarkdown source={ex}
+                      renderers={{link: props => <a href={props.href} target="_blank">{props.children}</a>}}
+                      />                    
+                    </div>
+                  ))}
+                  </dl>
+                </div>   
             </div>
             <div className="absolute bottom-0 text-xs left-0 ml-4 text-gray-500">
               developed by
@@ -222,6 +364,12 @@ function App() {
         </div>
         </div>
       </div>  
+      <style>{`
+      .borders {
+        border-bottom: solid 1px;
+        border-color: #e2e8f0;
+        }
+      `}</style>
     </div>
   );
 }

src/InputField.js

@@ -3,13 +3,15 @@ import React from 'react';
 export default function InputField({ title, id, rows, handleClick, handleChange }) {
 
   return (
+    <div className="w-full">
     <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
-      <dt className="text-base font-medium text-gray-700 md:col-span-3">
+      <dt className="text-base font-medium max-w-40 text-gray-700 md:col-span-4">
         {title}
       </dt>
-      <dd className="mt-2 md:mt-0 md:col-span-9">
+      <dd className="mt-2 md:mt-0 md:col-span-8 mr-6">
         <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id={id} name={id} rows={rows} className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
       </dd>
     </div>
+    </div>
   );
 }

src/Instructions.js

@@ -7,42 +7,66 @@ export default {
             paragraph: [
               "Add homepage URL here if available (unless it's a GitHub repository)"
             ],
+            example: [
+              "https://facebookresearch.github.io/ELI5/explore.html"
+            ]
           },
           repository: {
             paragraph: [
               "If the dataset is hosted on github or has a github homepage, add URL here"
             ],
+            example: [
+              "https://github.com/facebookresearch/ELI5"
+            ]
           }, 
           paper: {
             paragraph: [
               "If the dataset was introduced by a paper or there was a paper written describing the dataset, add URL here (landing page for Arxiv paper preferred)"
             ],
+            example: [
+              "https://arxiv.org/abs/1907.09190"
+            ]
           }, 
           leaderboard: {
             paragraph: [
               "If the dataset supports an active leaderboard, add link here"
             ],
+            example: [
+              ""
+            ]
           },  
           contact: {
             paragraph: [
               "If known, name and email of at least one person the reader can contact for questions about the dataset."
             ],
+            example: [
+              "yacine@huggingface.co"
+            ]
           },    
           datasetSummary: {
             paragraph: [
               "Briefly summarize the dataset, its intended use and the supported tasks. Give an overview of how and why the dataset was created. The summary should explicitly mention the languages present in the dataset (possibly in broad terms, e.g. translations between several pairs of European languages), and describe the domain, topic, or genre covered."
             ],
+            example: [
+              "The ELI5 dataset is an English-language dataset of questions and answers gathered from three subreddits were users ask factual questions requiring paragraph-length or longer answers. The dataset was created to support the task of open-domain long form abstractive question answering, and covers questions about general topics in its r/explainlikeimfive subset, science in it r/askscience subset, and History in its r/AskHistorians subset."
+            ]
           },
           supportedTasks: {
             paragraph: [
               "For each of the tasks tagged for this dataset, give a brief description of the tag, metrics, and suggested models (with a link to their HuggingFace implementation if available). Give a similar description of tasks that were not covered by the structured tag set (repace the `task-category-tag` with an appropriate `other:other-task-name`).",
               "- `task-category-tag`: The dataset can be used to train a model for [TASK NAME], which consists in [TASK DESCRIPTION]. Success on this task is typically measured by achieving a *high/low* [metric name](https://huggingface.co/metrics/metric_name). The ([model name](https://huggingface.co/model_name) or [model class](https://huggingface.co/transformers/model_doc/model_class.html)) model currently achieves the following score. *[IF A LEADERBOARD IS AVAILABLE]:* This task has an active leaderboard which can be found at [leaderboard url]() and ranks models based on [metric name](https://huggingface.co/metrics/metric_name) while also reporting [other metric name](https://huggingface.co/metrics/other_metric_name)."
+            ],
+            example: [
+              "abstractive-qa, open-domain-qa: The dataset can be used to train a model for Open Domain Long Form Question Answering. An LFQA model is presented with a non-factoid and asked to retrieve relevant information from a knowledge source (such as Wikipedia), then use it to generate a multi-sentence answer. The model performance is measured by how high its ROUGE score to the reference is. A BART-based model with a dense retriever trained to draw information from Wikipedia passages achieves a ROUGE-L of 0.149."
             ]
           },
           languages: {
             paragraph: [
               "Provide a brief overview of the languages represented in the dataset. Describe relevant details about specifics of the language such as whether it is social media text, African American English,...",
               "When relevant, please provide [BCP-47 codes](https://tools.ietf.org/html/bcp47), which consist of a [primary language subtag](https://tools.ietf.org/html/bcp47#section-2.2.1), with a [script subtag](https://tools.ietf.org/html/bcp47#section-2.2.3) and/or [region subtag](https://tools.ietf.org/html/bcp47#section-2.2.4) if available."
+            ],
+            example: [
+              "The text in the dataset is in English, as spoken by Reddit users on the r/explainlikeimfive, r/askscience, and r/AskHistorians subreddits. The associated BCP-47 code is en."
             ]
           },
           dataInstances: {
@@ -55,12 +79,52 @@ export default {
               }
               `,
               "Provide any additional information that is not covered in the other sections about the data here. In particular describe any relationships between data points and if these relationships are made explicit.",
+            ],
+            example: [
+              "A typical data point comprises a question, with a title containing the main question and a selftext which sometimes elaborates on it, and a list of answers from the forum sorted by the number of upvotes they obtained. Additionally, the URLs in each of the text fields have been extracted to respective lists and replaced by generic tokens in the text.",
+              "An example from the ELI5 test set looks as follows:",
+              `{'q_id': '8houtx',`,
+              `title': 'Why does water heated to room temperature feel colder than the air around it?,`,
+              `selftext': '',`,
+              `document': '',`,
+              `subreddit': 'explainlikeimfive',`,
+              `answers': {'a_id': ['dylcnfk', 'dylcj49'],`,
+               `text': ["Water transfers heat more efficiently than air. When something feels cold it's because heat is being transferred from your skin to whatever you're touching. Since water absorbs the heat more readily than air, it feels colder.",
+                "Air isn't as good at transferring heat compared to something like water or steel (sit on a room temperature steel bench vs. a room temperature wooden bench, and the steel one will feel more cold).\n\nWhen you feel cold, what you're feeling is heat being transferred out of you.  If there is no breeze, you feel a certain way.  If there's a breeze, you will get colder faster (because the moving air is pulling the heat away from you), and if you get into water, its quite good at pulling heat from you.   Get out of the water and have a breeze blow on you while you're wet, all of the water starts evaporating, pulling even more heat from you."],`,
+               `score': [5, 2]},`,
+              `title_urls': {'url': []},`,
+              `selftext_urls': {'url': []},`,
+              `answers_urls': {'url': []}}{'q_id': '8houtx',`,
+              `title': 'Why does water heated to room temperature feel colder than the air around it?',`,
+              `selftext': '',`,
+              `document': '',`,
+              `subreddit': 'explainlikeimfive',`,
+              `answers': {'a_id': ['dylcnfk', 'dylcj49'],`,
+               `text': ["Water transfers heat more efficiently than air. When something feels cold it's because heat is being transferred from your skin to whatever you're touching. Since water absorbs the heat more readily than air, it feels colder.",
+                "Air isn't as good at transferring heat compared to something like water or steel (sit on a room temperature steel bench vs. a room temperature wooden bench, and the steel one will feel more cold).\n\nWhen you feel cold, what you're feeling is heat being transferred out of you.  If there is no breeze, you feel a certain way.  If there's a breeze, you will get colder faster (because the moving air is pulling the heat away from you), and if you get into water, its quite good at pulling heat from you.   Get out of the water and have a breeze blow on you while you're wet, all of the water starts evaporating, pulling even more heat from you."]`,
+               `score': [5, 2]},`,
+              `title_urls': {'url': []},`,
+              `selftext_urls': {'url': []},`,
+              `answers_urls': {'url': []}},`
             ]
           },
           dataFields: {
             paragraph: [
               "List and describe the fields present in the dataset. Mention their data type, and whether they are used as input or output in any of the tasks the dataset currently supports. If the data has span indices, describe their attributes, such as whether they are at the character level or word level, whether they are contiguous or not, etc. If the datasets contains example IDs, state whether they have an inherent meaning, such as a mapping to other datasets or pointing to relationships between data points.",
               "- `example_field`: description of `example_field`"
+            ], 
+            example: [
+              `q_id: a string question identifier for each example, corresponding to its ID in the Pushshift.io Reddit submission dumps.`,
+              `subreddit: One of explainlikeimfive, askscience, or AskHistorians, indicating which subreddit the question came from`,
+              `title: title of the question, with URLs extracted and replaced by URL_n tokens`,
+              `title_urls: list of the extracted URLs, the nth element of the list was replaced by URL_n`,
+              `selftext: either an empty string or an elaboration of the question`,
+              `selftext_urls: similar to title_urls but for self_text`,
+              `answers: a list of answers, each answer has:`,
+              `a_id: a string answer identifier for each answer, corresponding to its ID in the Pushshift.io Reddit comments dumps.`,
+              `text: the answer text with the URLs normalized`,
+              `score: the number of upvotes the answer had received when the dumps were created`,
+              `answers_urls: a list of the extracted URLs. All answers use the same list, the numbering of the normalization token continues across answer texts`,
             ]
           },
           dataSplits: {
@@ -68,15 +132,24 @@ export default {
               "Describe and name the splits in the dataset if there are more than one.",
               "Describe any criteria for splitting the data, if used. If their are differences between the splits (e.g. if the training annotations are machine-generated and the dev and test ones are created by humans, or if different numbers of annotators contributed to each example), describe them here.",
               "Provide the sizes of each split. As appropriate, provide any descriptive statistics for the features, such as average length.  For example:",
-              `|                            | Tain   | Valid | Test |
-              | -----                      | ------ | ----- | ---- |
-              | Input Sentences            |        |       |      |
-              | Average Sentence Length    |        |       |      |`
+              `	Tain	Valid	Test
+              Input Sentences 	
+              Average Sentence Length`,
+            ],
+            example: [
+              "The data is split into a training, validation and test set for each of the three subreddits. In order to avoid having duplicate questions in across sets, the title field of each of the questions were ranked by their tf-idf match to their nearest neighbor and the ones with the smallest value were used in the test and validation sets. The final split sizes are as follow:",
+              `	Tain	Valid	Test
+              r/explainlikeimfive examples	272634	9812	24512
+              r/askscience examples	131778	2281	4462
+              r/AskHistorians examples	98525	4901	9764`
             ]
           },
           curationRationale: {
             paragraph: [
               "What need motivated the creation of this dataset? What are some of the reasons underlying the major choices involved in putting it together?",
+            ],
+            example: [
+              "ELI5 was built to provide a testbed for machines to learn how to answer more complex questions, which requires them to find and combine information in a coherent manner. The dataset was built by gathering questions that were asked by community members of three subreddits, including r/explainlikeimfive, along with the answers that were provided by other users. The rules of the subreddit make this data particularly well suited to training a model for abstractive question answering: the questions need to seek an objective explanation about well established facts, and the answers provided need to be understandable to a layperson without any particular knowledge domain."
             ]
           },
           dataCollection: {
@@ -84,6 +157,10 @@ export default {
               "Describe the data collection process. Describe any criteria for data selection or filtering. List any key words or search terms used. If possible, include runtime information for the collection process.",
               "If data was collected from other pre-existing datasets, link to source here and to their [Hugging Face version](https://huggingface.co/datasets/dataset_name).",
               "If the data was modified or normalized after being collected (e.g. if the data is word-tokenized), describe the process and the tools used."
+            ],
+            example:[
+              "The data was obtained by filtering submissions and comments from the subreddits of interest from the XML dumps of the Reddit forum hosted on Pushshift.io.",
+              "In order to further improve the quality of the selected examples, only questions with a score of at least 2 and at least one answer with a score of at least 2 were selected for the dataset. The dataset questions and answers span a period form August 2012 to August 2019."
             ]
           },
           sourceLanguage: {
@@ -92,16 +169,25 @@ export default {
               "If available, include self-reported demographic or identity information for the source data creators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.",
               "Describe the conditions under which the data was created (for example, if the producers were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.",
               "Describe other people represented or mentioned in the data. Where possible, link to references for the information."
+            ],
+            example: [
+            "The language producers are users of the r/explainlikeimfive, r/askscience, and r/AskHistorians subreddits between 2012 and 2019. No further demographic information was available from the data source."
             ]
           },
           annotations: {
             paragraph: [
               "If the dataset contains annotations which are not part of the initial data collection, describe them in the following paragraphs."
+            ],
+            example: [
+              "The dataset does not contain any additional annotations."
             ]
           },
           annotationProcess: {
             paragraph: [
               "If applicable, describe the annotation process and any tools used, or state otherwise. Describe the amount of data annotated, if not all. Describe or reference annotation guidelines provided to the annotators. If available, provide interannotator statistics. Describe any annotation validation processes."
+            ],
+            example: [
+              "[N/A]"
             ]
           },
           annotators: {
@@ -110,6 +196,9 @@ export default {
               "Describe the people or systems who originally created the annotations and their selection criteria if applicable.",
               "If available, include self-reported demographic or identity information for the annotators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.",
               "Describe the conditions under which the data was annotated (for example, if the annotators were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here."
+            ],
+            example: [
+              "[N/A]"
             ]
           },
           personalInformation: {
@@ -117,6 +206,9 @@ export default {
               "State whether the dataset uses identity categories and, if so, how the information is used. Describe where this information comes from (i.e. self-reporting, collecting from profiles, inferring, etc.). See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender. State whether the data is linked to individuals and whether those individuals can be identified in the dataset, either directly or indirectly (i.e., in combination with other data).",
               "State whether the dataset contains other data that might be considered sensitive (e.g., data that reveals racial or ethnic origins, sexual orientations, religious beliefs, political opinions or union memberships, or locations; financial or health data; biometric or genetic data; forms of government identification, such as social security numbers; criminal history).",
               "If efforts were made to anonymize the data, describe the anonymization process."
+            ],
+            example: [
+              "The authors removed the speaker IDs from the Pushshift.io dumps but did not otherwise anonymize the data. Some of the questions and answers are about contemporary public figures or individuals who appeared in the news."
             ]
           },
           socialImpact: {
@@ -124,6 +216,11 @@ export default {
               "Please discuss some of the ways you believe the use of this dataset will impact society.",
               "The statement should include both positive outlooks, such as outlining how technologies developed through its use may improve people's lives, and discuss the accompanying risks. These risks may range from making important decisions more opaque to people who are affected by the technology, to reinforcing existing harmful biases (whose specifics should be discussed in the next section), among other considerations.",
               "Please also mention in this section if the proposed dataset contains a *low-resource* or under-represented language."
+            ],
+            example: [
+              "The purpose of this dataset is to help develop better question answering systems.",
+              "A system that succeeds at the supported task would be able to provide a coherent answer to even complex questions requiring a multi-step explanation, which is beyond the ability of even the larger existing models. The task is also thought as a test-bed for retrieval model which can show the users which source text was used in generating the answer and allow them to confirm the information provided to them.",
+              "It should be noted however that the provided answers were written by Reddit users, an information which may be lost if models trained on it are deployed in down-stream applications and presented to users without context. The specific biases this may introduce are discussed in the next section.",
             ]
           },
           biasesDiscussion: {
@@ -131,21 +228,36 @@ export default {
               "Provide descriptions of specific biases that are likely to be reflected in the data, and state whether any steps were taken to reduce their impact.",
               "For Wikipedia text, see for example [Dinan et al 2020 on biases in Wikipedia (esp. Table 1)](https://arxiv.org/abs/2005.00614), or [Blodgett et al 2020](https://www.aclweb.org/anthology/2020.acl-main.485/) for a more general discussion of the topic.",
               "If analyses have been run quantifying these biases, please add brief summaries and links to the studies here."
+            ],
+            example: [
+              "While Reddit hosts a number of thriving communities with high quality discussions, it is also widely known to have corners where sexism, hate, and harassment are significant issues. See for example the recent post from Reddit founder u/spez outlining some of the ways he thinks the website's historical policies have been responsible for this problem, Adrienne Massanari's 2015 article on GamerGate and follow-up works, or a 2019 Wired article on misogyny on Reddit.",
+              "While there has been some recent work in the NLP community on de-biasing models (e.g. Black is to Criminal as Caucasian is to Police: Detecting and Removing Multiclass Bias in Word Embeddings for word embeddings trained specifically on Reddit data), this problem is far from solved, and the likelihood that a trained model might learn the biases present in the data remains a significant concern.",
+              `We still note some encouraging signs for all of these communities: r/explainlikeimfive and r/askscience have similar structures and purposes, and r/askscience was found in 2015 to show medium supportiveness and very low toxicity when compared to other subreddits (see a hackerfall post, thecut.com write-up and supporting data). Meanwhile, the r/AskHistorians rules mention that the admins will not tolerate "racism, sexism, or any other forms of bigotry". However, further analysis of whether and to what extent these rules reduce toxicity is still needed.`,
+              "We also note that given the audience of the Reddit website which is more broadly used in the US and Europe, the answers will likely present a Western perspectives, which is particularly important to note when dealing with historical topics."
             ]
           },
           limitations: {
             paragraph: [
               "If studies of the datasets have outlined other limitations of the dataset, such as annotation artifacts, please outline and cite them here."
+            ],
+            example: [
+              "The answers provided in the dataset are represent the opinion of Reddit users. While these communities strive to be helpful, they should not be considered to represent a ground truth."
             ]
           },
           datasetCurators: {
             paragraph: [
               "List the people involved in collecting the dataset and their affiliation(s). If funding information is known, include it here."
+            ],
+            example: [
+              "The dataset was initially created by Angela Fan, Ethan Perez, Yacine Jernite, Jason Weston, Michael Auli, and David Grangier, during work done at Facebook AI Research (FAIR)."
             ]
           },
           licensingInformation: {
             paragraph: [
               "Provide the license and link to the license webpage if available."
+            ],
+            example: [
+              "The licensing status of the dataset hinges on the legal status of the Pushshift.io data which is unclear."
             ]
           },
           citationInformation: {
@@ -160,6 +272,28 @@ export default {
               }
               `,
               "If the dataset has a [DOI](https://www.doi.org/), please provide it here."
+            ],
+            example: [
+              `@inproceedings{eli5_lfqa`,
+                `author    = {Angela Fan and
+                             Yacine Jernite and
+                             Ethan Perez and
+                             David Grangier and
+                             Jason Weston and
+                             Michael Auli}`,
+                `editor    = {Anna Korhonen and
+                             David R. Traum and
+                             Llu{\'{\i}}s M{\`{a}}rquez}`,
+                `title     = {{ELI5:} Long Form Question Answering}`,
+                `booktitle = {Proceedings of the 57th Conference of the Association for Computational
+                             Linguistics, {ACL} 2019, Florence, Italy, July 28- August 2, 2019,
+                             Volume 1: Long Papers}`,
+                `pages     = {3558--3567}`,
+                `publisher = {Association for Computational Linguistics}`,
+                `year      = {2019}`,
+                `url       = {https://doi.org/10.18653/v1/p19-1346}`,
+                `doi       = {10.18653/v1/p19-1346}
+              }`
             ]
           },
     }

src/Section.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {BsChevronDown, BsChevronUp} from 'react-icons/bs'
+
+export default function Section({ title, section, handleSection }) {
+
+  return (
+    <>
+    <div className="mt-1">
+    <div onClick={() => handleSection()} className="cursor-pointer grid grid-cols-12 gap-16 pt-6 borders text-gray-600">
+    <div className="col-span-11"> {title} </div>
+    {section ?
+    <BsChevronUp className="col-span-1 ml-2" />
+    :
+    <BsChevronDown className="col-span-1 ml-2" />
+    }
+    </div>
+    </div>
+    <style>{`
+    .borders {
+      border-bottom: solid 1px;
+      border-color: #e2e8f0;
+      }
+    `}</style>
+    </>
+  );
+}