2022-07-03 15:29:11 +00:00
|
|
|
import { Configuration, DefaultApi, RobertaEmotionResponse, RobertaHateResponse, RobertaIronyResponse, RobertaOffensiveResponse, RobertaSentimentResponse } from "../service/openapi";
|
|
|
|
import {Button, Card, Col, Container, Form, FormControl, FormGroup, Row, Table} from "react-bootstrap";
|
|
|
|
import styles from "../styles/TextInput.module.scss";
|
|
|
|
import {createRef, FormEvent, forwardRef, useCallback, useEffect, useState} from "react";
|
|
|
|
import _ from "lodash";
|
|
|
|
|
|
|
|
|
|
|
|
let debounce = _.debounce(async (fn) => await fn(), 400)
|
|
|
|
|
|
|
|
export default function TextInput(props) {
|
|
|
|
const [text, setText] = useState("");
|
|
|
|
const [emotions, setEmotions] = useState<RobertaEmotionResponse|undefined>(undefined);
|
|
|
|
const [hate, setHate] = useState<RobertaHateResponse|undefined>(undefined);
|
|
|
|
const [irony, setIrony] = useState<RobertaIronyResponse|undefined>(undefined);
|
|
|
|
const [offensive, setOffensive] = useState<RobertaOffensiveResponse|undefined>(undefined);
|
|
|
|
const [sentiment, setSentiment] = useState<RobertaSentimentResponse|undefined>(undefined);
|
|
|
|
|
|
|
|
useEffect(() => { debounce(async () => {
|
|
|
|
props.textFn(text);
|
|
|
|
await evaluateInput();
|
|
|
|
}) }, [text])
|
|
|
|
|
|
|
|
const configuration = new Configuration({
|
2022-07-03 17:29:29 +00:00
|
|
|
basePath: 'https://api.alas.friedl.net'
|
2022-07-03 15:29:11 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const api = new DefaultApi(configuration);
|
|
|
|
|
|
|
|
let evaluateInput = async () => {
|
|
|
|
if(!text) {
|
|
|
|
setEmotions(undefined);
|
|
|
|
setHate(undefined);
|
|
|
|
setIrony(undefined);
|
|
|
|
setOffensive(undefined);
|
|
|
|
setSentiment(undefined);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
try{
|
|
|
|
const [emotions, hate, irony, offensive, sentiment] = await Promise.all([
|
|
|
|
api.getEmotionsRobertaEmotionGet({text: text}),
|
|
|
|
api.getHateRobertaHateGet({ text: text }),
|
|
|
|
api.getIronyRobertaIronyGet({ text: text }),
|
|
|
|
api.getOffensiveRobertaOffensiveGet({ text: text }),
|
|
|
|
api.getSentimentRobertaSentimentGet({ text: text })
|
|
|
|
])
|
|
|
|
|
|
|
|
setEmotions(emotions);
|
|
|
|
setHate(hate);
|
|
|
|
setIrony(irony);
|
|
|
|
setOffensive(offensive);
|
|
|
|
setSentiment(sentiment);
|
|
|
|
|
|
|
|
} catch(error) {
|
|
|
|
console.error(error)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Container fluid={true} className={"bg-primary pb-5"}>
|
|
|
|
<Container className={"pb-5 pt-2"}>
|
|
|
|
<Row xs={1} xl={2} className={"justify-content-center"}>
|
|
|
|
<Col>
|
|
|
|
<h1 className={`text-light`}>ALAS</h1>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Container>
|
|
|
|
</Container>
|
|
|
|
<Container>
|
|
|
|
<Row xs={1} xl={2} className={`pb-5 justify-content-center`}>
|
|
|
|
<Form className={styles.inputForm}>
|
|
|
|
<FormGroup controlId="formText">
|
|
|
|
<FormControl value={text}
|
|
|
|
placeholder={"Start typing..."}
|
|
|
|
onChange={(e) => setText(e.target.value)}
|
|
|
|
className={styles.textBox} as="textarea" />
|
|
|
|
</FormGroup>
|
|
|
|
</Form>
|
|
|
|
</Row>
|
|
|
|
<Row className={"justify-content-center mb-3"}>
|
|
|
|
<h4 style={{width: "auto"}}>Analysis</h4>
|
|
|
|
</Row>
|
|
|
|
<Row className={"justify-content-center gap-3"}>
|
|
|
|
<Col className={"flex-grow-0"}>
|
|
|
|
<Card style={{width: '18rem', height: '100%'}}>
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Title className={"border-bottom border-2"}>
|
|
|
|
Emotion
|
|
|
|
</Card.Title>
|
|
|
|
<Table size="sm" borderless={true}>
|
|
|
|
<tbody>
|
|
|
|
<tr className={"mt-2"}>
|
|
|
|
<td>Joy</td>
|
|
|
|
<td>{emotions?.joy.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Sadness</td>
|
|
|
|
<td>{emotions?.sadness.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Anger</td>
|
|
|
|
<td>{emotions?.anger.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Optimism</td>
|
|
|
|
<td>{emotions?.optimism.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col className={"flex-grow-0"}>
|
|
|
|
<Card style={{width: '18rem', height: '100%'}}>
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Title className={"border-bottom border-2"}>
|
|
|
|
Temper
|
|
|
|
</Card.Title>
|
|
|
|
<Table size="sm" borderless={true}>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>Hate</td>
|
|
|
|
<td>{hate?.hate.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Irony</td>
|
|
|
|
<td>{irony?.irony.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Offense</td>
|
|
|
|
<td>{offensive?.offensive.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col className={"flex-grow-0"}>
|
|
|
|
<Card style={{width: '18rem', height: '100%'}}>
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Title className={"border-bottom border-2"}>
|
|
|
|
Sentiment
|
|
|
|
</Card.Title>
|
|
|
|
<Table size="sm" borderless={true}>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>Negative</td>
|
|
|
|
<td>{sentiment?.negative.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Neutral</td>
|
|
|
|
<td>{sentiment?.neutral.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Positive</td>
|
|
|
|
<td>{sentiment?.positive.toFixed(3)}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Container>
|
|
|
|
</>
|
|
|
|
)
|
2022-07-03 17:29:29 +00:00
|
|
|
}
|