import React from 'react' ; import Tabs from 'antd/es/tabs' ; import { Field , SelectedModelCard , Output , SelectExample , SelectedModelDescription , Share , Submit , TaskDescription , TaskTitle , } from '@allenai/tugboat/components' ; import { AppId } from '../../AppId' ; import { TaskDemo , Predict } from '../../components' ; import { config } from './config' ; import { Usage } from './Usage' ; import { Predictions } from './Predictions' ; import { Version , Input , Prediction } from './types' ; export const Main = ( ) => { return ( < TaskDemo ids = { config . modelIds } taskId = { config . taskId } > < TaskTitle /> < TaskDescription / > < SelectedModelDescription /> < Tabs > < Tabs . TabPane tab = "TaskDemo" key = "Demo" > < SelectExample displayProp = "context" placeholder = "Select a Context" / > < Predict < Input , Prediction > fields = { < > < Field . Context /> < Field . Question / > < Field . Reference /> < Field . Candidate / > < Submit > Run Model < /Submit> < />}> { ( { input , model , output } ) => ( < Output > < Output . Section title = "Model Output" extra = { < Share . ShareButton doc = { input } slug = { Share . makeSlug ( input . context ) } type = { Version } app = { AppId } / > } > < Predictions input = { input } model = { model } output = { output } / > < /Output.Section> < /Output>)} < /Predict> < /Tabs.TabPane> < Tabs . TabPane tab = "Model Card" key = "Card" > < SelectedModelCard /> < /Tabs.TabPane> < Tabs . TabPane tab = "Model Usage" key = "Usage" > < Usage /> < /Tabs.TabPane> < /Tabs> < /TaskDemo>); } ;