/**
 * NOTE: VQA is a complex task and is a bad example to fork from unless you need an Image input
 * control.
 */ import React , { useState , useContext } from 'react' ; import Tabs from 'antd/es/tabs' ; import { Field , Fields , SelectedModelCard , Output , SelectedModelDescription , SelectExample , Submit , TaskDescription , TaskTitle , UploadedImage , } from '@allenai/tugboat/components' ; import { Examples } from '@allenai/tugboat/context' ; import { TaskDemo , Predict } from '../../components' ; import { config } from './config' ; import { Usage } from './Usage' ; import { Predictions } from './Predictions' ; import { Input , Prediction } from './types' ; import baseballSrc from '../exampleImages/baseball_game.jpg' ; import busStopSrc from '../exampleImages/bus_stop.jpg' ; import kitchenSrc from '../exampleImages/kitchen.jpg' ; import livingRoomSrc from '../exampleImages/living_room.jpg' ; interface UploadImageProps { onChange : ( i : UploadedImage ) => void ; } const UploadImage = ( { onChange } ) => { const examples = useContext ( Examples ) ; return ( < Field . Image uploadAction = { `/api/${ config . modelIds [ 0 ] }/noop` } value = { examples . selectedExample ?. image } onChange = { onChange } / > ) ; } ; export const Main = ( ) => { const [ overrides , setOverrides ] = useState < Fields > ( ) ; const examples = [ { snippet : 'Baseball Game: "What game are they playing?"' , image : baseballSrc , question : 'What game are they playing?' , } , { snippet : 'Bus Stop: "What are the people waiting for?"' , image : busStopSrc , question : 'What are the people waiting for?' , } , { snippet : 'Kitchen: "What is in the bowls on the island?"' , image : kitchenSrc , question : 'What is in the bowls on the island?' , } , { snippet : 'Living Room: "What color is the pillow in the middle?"' , image : livingRoomSrc , question : 'What color is the pillow in the middle?' , } , ] ; return ( < TaskDemo ids = { config . modelIds } taskId = { config . taskId } examples = { examples } > < TaskTitle /> < TaskDescription / > < SelectedModelDescription /> < Tabs > < Tabs . TabPane tab = "Demo" key = "Demo" > < SelectExample displayProp = "snippet" placeholder = "Select an Example" / > < Predict < Input , Prediction > fields = { < > < UploadImage onChange = { ( image ) => setOverrides ( { image } ) } /> < Field . Question / > < Submit > Run Model < /Submit> < />} overrides={overrides}> { ( { input , model , output } ) => ( < Output > < Output . Section title = "Model Output" > < 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>); } ;