alas/web/components/TextInput.tsx

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({
        basePath: 'http://localhost:8000'
    });

    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>
        </>
    )
}