1  import { useState, useEffect } from "react";
 2  import { styled, Box } from "@mui/material";
 3  import useAuth from "app/hooks/useAuth";
 4  import EmbeddingInfo from "./components/EmbeddingInfo";
 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  export default function EmbeddingViewInfo() {
22    const { t } = useTranslation();
23    const { id } = useParams();
24    const [projects, setProjects] = useState([]);
25    const [embedding, setEmbedding] = useState({});
26    const [info, setInfo] = useState({ "version": "", "embeddings": [], "llms": [], "loaders": [] });
27    const auth = useAuth();
28  
29    const fetchLLM = (llmName) => {
30      return api.get("/embeddings/" + llmName, auth.user.token)
31        .then((d) => {
32          setEmbedding(d)
33          return d
34        }).catch(() => {});
35    }
36  
37    const fetchProjects = () => {
38      return api.get("/projects", auth.user.token)
39        .then((d) => {
40          setProjects(d.projects)
41        }).catch(() => {});
42    }
43  
44    const fetchInfo = () => {
45      return api.get("/info", auth.user.token)
46        .then((d) => setInfo(d))
47        .catch(() => {});
48    }
49  
50    useEffect(() => {
51      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + ' - Project - ' + id;
52      fetchLLM(id);
53    }, [id]);
54  
55    useEffect(() => {
56      fetchProjects();
57      fetchInfo();
58    }, []);
59  
60    return (
61      <Container>
62        <Box className="breadcrumb">
63          <Breadcrumb routeSegments={[{ name: t("nav.embeddings"), path: "/embeddings" }, { name: id, path: "/embedding/" + id }]} />
64        </Box>
65  
66        <ContentBox className="analytics">
67          <EmbeddingInfo embedding={embedding} projects={projects} info={info} />
68        </ContentBox>
69      </Container>
70    );
71  }