NERDDISCO commited on
Commit
ff8da98
β€’
1 Parent(s): d378496

feat: moved "secret" into own component

Browse files
src/components/base/secret.tsx ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconButton,
3
+ InputAdornment,
4
+ TextField,
5
+ TextFieldProps,
6
+ } from "@mui/material";
7
+ import { useState } from "react";
8
+ import { Visibility, VisibilityOff } from "@mui/icons-material";
9
+
10
+ export default function Secret(props: TextFieldProps) {
11
+ const { name = "secret", label = "Secret" } = props;
12
+ const [showSecret, setShowSecret] = useState(false);
13
+
14
+ const handleShowSecret = () => setShowSecret(!showSecret);
15
+
16
+ return (
17
+ <TextField
18
+ variant="filled"
19
+ label={label}
20
+ name={name}
21
+ type={showSecret ? "text" : "password"}
22
+ InputProps={{
23
+ endAdornment: (
24
+ <InputAdornment position="end">
25
+ <IconButton onClick={handleShowSecret}>
26
+ {showSecret ? <Visibility /> : <VisibilityOff />}
27
+ </IconButton>
28
+ </InputAdornment>
29
+ ),
30
+ }}
31
+ />
32
+ );
33
+ }
src/components/huggingface/inference/summarization.tsx CHANGED
@@ -3,8 +3,6 @@ import {
3
  Box,
4
  Button,
5
  CircularProgress,
6
- IconButton,
7
- InputAdornment,
8
  Paper,
9
  Slider,
10
  Stack,
@@ -13,11 +11,11 @@ import {
13
  } from "@mui/material";
14
  import { useEffect, useRef, useState } from "react";
15
  import { HfInference, SummarizationArgs } from "@huggingface/inference";
16
- import { Visibility, VisibilityOff } from "@mui/icons-material";
17
  import { InferenceProps } from "../huggingface";
18
  import Options from "@/components/base/options";
19
  import SliderWithLabel from "@/components/base/slider-with-label";
20
  import ExampleButton from "@/components/base/example-button";
 
21
 
22
  type SummarizationProps = InferenceProps & {
23
  /**
@@ -66,7 +64,6 @@ export default function Summarization(props: SummarizationProps) {
66
  const [inputText, setInputText] = useState<string>("");
67
  const [summary, setSummary] = useState<string>("");
68
  const [error, setError] = useState<string>("");
69
- const [showToken, setShowToken] = useState(false);
70
  const [loading, setLoading] = useState(false);
71
 
72
  const inference = useRef<HfInference | null>(null);
@@ -88,8 +85,6 @@ export default function Summarization(props: SummarizationProps) {
88
  call({ model, inputs: text, parameters: { max_length } });
89
  };
90
 
91
- const handleShowToken = () => setShowToken(!showToken);
92
-
93
  /**
94
  * Call the inference API using args
95
  */
@@ -161,21 +156,7 @@ export default function Summarization(props: SummarizationProps) {
161
  />
162
 
163
  <Options>
164
- <TextField
165
- variant="filled"
166
- label="HF Access Token"
167
- name="token"
168
- type={showToken ? "text" : "password"}
169
- InputProps={{
170
- endAdornment: (
171
- <InputAdornment position="end">
172
- <IconButton onClick={handleShowToken}>
173
- {showToken ? <Visibility /> : <VisibilityOff />}
174
- </IconButton>
175
- </InputAdornment>
176
- ),
177
- }}
178
- />
179
 
180
  <SliderWithLabel
181
  label="max_length"
 
3
  Box,
4
  Button,
5
  CircularProgress,
 
 
6
  Paper,
7
  Slider,
8
  Stack,
 
11
  } from "@mui/material";
12
  import { useEffect, useRef, useState } from "react";
13
  import { HfInference, SummarizationArgs } from "@huggingface/inference";
 
14
  import { InferenceProps } from "../huggingface";
15
  import Options from "@/components/base/options";
16
  import SliderWithLabel from "@/components/base/slider-with-label";
17
  import ExampleButton from "@/components/base/example-button";
18
+ import Secret from "@/components/base/secret";
19
 
20
  type SummarizationProps = InferenceProps & {
21
  /**
 
64
  const [inputText, setInputText] = useState<string>("");
65
  const [summary, setSummary] = useState<string>("");
66
  const [error, setError] = useState<string>("");
 
67
  const [loading, setLoading] = useState(false);
68
 
69
  const inference = useRef<HfInference | null>(null);
 
85
  call({ model, inputs: text, parameters: { max_length } });
86
  };
87
 
 
 
88
  /**
89
  * Call the inference API using args
90
  */
 
156
  />
157
 
158
  <Options>
159
+ <Secret name="token" label="HF Access Token" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
 
161
  <SliderWithLabel
162
  label="max_length"