import * as React from "react" ; import axios from "axios" ; import { styles } from "./OpenExampleClassifierDialog.css" ; import { Dialog , DialogActions , DialogContent , DialogTitle , IconButton , List , Typography } from "@material-ui/core" ; import CloseIcon from "@material-ui/icons/Close" ; import { makeStyles } from "@material-ui/styles" ; import { useTranslation } from "react-i18next" ; var test ; import { OpenExampleClassifierListItem } from "../OpenExampleClassifierListItem" ; import { Category , Image } from "@piximi/types" ; const useStyles = makeStyles ( styles ) ; type OpenExampleClassifierDialogProps = { openClassifier : ( categories : Category [ ] , images : Image [ ] , name : string ) => void ; open : boolean ; onClose : ( ) => void ; closeMenu : ( ) => void ; } ; export const OpenExampleClassifierDialog = ( props ) => { const classes = useStyles ( { } ) ; const { t : translation } = useTranslation ( ) ; const { openClassifier , open , onClose , closeMenu } = props ; const openExampleClassifier = ( name ) => { closeMenu ( ) ; return axios . get ( "https://storage.piximi.app/examples/" + name + ".piximi" ) . then ( ( result ) => { openClassifier ( result . data . categories , result . data . images , name ) ; } ) . catch ( function ( error ) { alert ( error ) ; } ) ; } ; const closeMenueAndDialog = ( ) => { onClose ( ) ; closeMenu ( ) ; } ; return ( < Dialog fullWidth maxWidth = "sm" open = { open } > < DialogTitle disableTypography className = { classes . dialogTitle } > < Typography variant = "h6" > { translation ( "Open example classifier" ) } < /Typography> < IconButton aria - label = "Close" className = { classes . closeButton } onClick = { closeMenueAndDialog } > < CloseIcon /> < /IconButton> < /DialogTitle> < DialogContent classes = { { root : classes . dialogContent } } > < List > < OpenExampleClassifierListItem src = "https://storage.piximi.app/examples/MNIST.png" primary = "MNIST" secondary = "" onClick = { ( ) => { onClose ( ) ; openExampleClassifier ( "mnist" ) ; } } /> < /List> < /DialogContent> < DialogActions / > < /Dialog>); } ;