1  import { useState, useEffect } from "react";
 2  import { Grid, styled, Box } from "@mui/material";
 3  import useAuth from "app/hooks/useAuth";
 4  import EmbeddingEdit from "./components/EmbeddingEdit";
 5  import Breadcrumb from "app/components/Breadcrumb";
 6  import { useParams } from "react-router-dom";
 7  import { useTranslation } from "react-i18next";
 8  import api from "app/utils/api";
 9  
10  const Container = styled("div")(({ theme }) => ({
11    margin: 10,
12    [theme.breakpoints.down("sm")]: { margin: 16 },
13    "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } }
14  }));
15  
16  const ContentBox = styled("div")(({ theme }) => ({
17    margin: "30px",
18    [theme.breakpoints.down("sm")]: { margin: "16px" }
19  }));
20  
21  
22  export default function EmbeddingEditView() {
23    const { t } = useTranslation();
24    const { id } = useParams();
25    const [embedding, setEmbedding] = useState({});
26    const auth = useAuth();
27  
28  
29    const fetchLLM = (llm) => {
30      return api.get("/embeddings/" + llm, auth.user.token)
31        .then((d) => {
32          setEmbedding(d)
33          return d
34        }).catch(() => {});
35    }
36  
37    useEffect(() => {
38      fetchLLM(id);
39    }, [id]);
40  
41  
42    return (
43      <Container>
44        <Box className="breadcrumb">
45          <Breadcrumb routeSegments={[{ name: t("nav.embeddings"), path: "/embeddings"}, { name: t("common.edit") + " " + id, path: "/embedding/" + id + "/edit" }]} />
46        </Box>
47  
48        <ContentBox className="analytics">
49          <Grid container spacing={3}>
50            <Grid item lg={12} md={8} sm={12} xs={12}>
51              <EmbeddingEdit embedding={embedding} />
52            </Grid>
53          </Grid>
54        </ContentBox>
55      </Container>
56    );
57  }