File size: 2,735 Bytes
5786921
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {
  Alert,
  Button,
  IconButton,
  InputAdornment,
  Paper,
  Stack,
  TextField,
} from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { HfInference } from "@huggingface/inference";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { InferenceProps } from "../huggingface";

export default function Summarization(props: InferenceProps) {
  const { model } = props;

  const [token, setToken] = useState<string>("");
  const [summary, setSummary] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [showToken, setShowToken] = useState(false);

  const inference = useRef<HfInference | null>(null);

  useEffect(() => {
    inference.current = new HfInference(token);
  }, [token]);

  const handleSubmit = (event: any) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);

    setToken(data.get("token") as string);

    const text = data.get("text") as string;

    call(text);
  };

  const handleShowToken = () => setShowToken(!showToken);

  const call = async (inputs: string) => {
    try {
      const response = await inference.current?.summarization({
        model,
        inputs,
        parameters: {
          max_length: 100,
        },
      });

      setSummary(response?.summary_text as string);
      setError("");
    } catch (error) {
      if (error instanceof Error) {
        setError(error.message);
      } else {
        setError("An unknown error occurred");
      }
    }
  };

  return (
    <>
      <Paper component="form" onSubmit={handleSubmit} sx={{ padding: "1em" }}>
        <Stack spacing={2}>
          <TextField
            variant="filled"
            label="HF Token"
            name="token"
            type={showToken ? "text" : "password"}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={handleShowToken}>
                    {showToken ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
          <TextField
            variant="filled"
            label="Text to summarize"
            multiline
            required
            minRows={4}
            name="text"
          />
          <Button type="submit" variant="contained">
            Run
          </Button>

          {error && <Alert severity="error">{error}</Alert>}

          <TextField
            variant="outlined"
            label="Summary"
            multiline
            minRows={2}
            name="text"
            value={summary}
          />
        </Stack>
      </Paper>
    </>
  );
}