add translation

xinference/web/ui/src/App.js

@@ -1,7 +1,6 @@
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { HashRouter, Route, Routes } from "react-router-dom";
-import { ApiContextProvider } from "./components/apiContext";
-import { useMode } from "./theme";
+import { useMode, ApiContextProvider, LanguageContextProvider } from "./theme";
 import Layout from "./scenes/_layout";
 
 import RunningModels from "./scenes/running_models";
@@ -14,16 +13,18 @@ function App() {
  <div className="app">
  <HashRouter>
  <ThemeProvider theme={theme}>
- <ApiContextProvider>
- <CssBaseline />
- <Routes>
- <Route element={<Layout />}>
- <Route path="/" element={<LaunchModel />} />
- <Route path="/running_models" element={<RunningModels />} />
- <Route path="/register_model" element={<RegisterModel />} />
- </Route>
- </Routes>
- </ApiContextProvider>
+ <LanguageContextProvider>
+ <ApiContextProvider>
+ <CssBaseline />
+ <Routes>
+ <Route element={<Layout />}>
+ <Route path="/" element={<LaunchModel />} />
+ <Route path="/running_models" element={<RunningModels />} />
+ <Route path="/register_model" element={<RegisterModel />} />
+ </Route>
+ </Routes>
+ </ApiContextProvider>
+ </LanguageContextProvider>
  </ThemeProvider>
  </HashRouter>
  </div>

xinference/web/ui/src/components/MenuSide.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import {
  Box,
  Drawer,
@@ -7,47 +7,56 @@ import {
  ListItemButton,
  ListItemIcon,
  ListItemText,
+ Select,
+ MenuItem,
  Typography,
  useTheme,
 } from "@mui/material";
 import {
  ChevronRightOutlined,
  RocketLaunchOutlined,
  SmartToyOutlined,
+ TranslateOutlined,
  AddBoxOutlined,
  GitHub,
 } from "@mui/icons-material";
 import icon from "../media/icon.webp";
 import { useLocation, useNavigate } from "react-router-dom";
-
-const navItems = [
- {
- text: "Launch Model",
- icon: <RocketLaunchOutlined />,
- },
- {
- text: "Running Models",
- icon: <SmartToyOutlined />,
- },
- {
- text: "Register Model",
- icon: <AddBoxOutlined />,
- },
- {
- text: "Contact Us",
- icon: <GitHub />,
- },
-];
+import { LanguageContext } from "../theme";
 
 const MenuSide = () => {
  const theme = useTheme();
+ const { translation, translation_dict, language, setLanguage } =
+ useContext(LanguageContext);
+
  const { pathname } = useLocation();
  const [active, setActive] = useState("");
  const navigate = useNavigate();
  const [drawerWidth, setDrawerWidth] = useState(
- `${Math.min(Math.max(window.innerWidth * 0.2, 287), 320)}px`,
+ `${Math.min(Math.max(window.innerWidth * 0.2, 287), 320)}px`
  );
 
+ const navItems = [
+ {
+ link: "launch_model",
+ icon: <RocketLaunchOutlined />,
+ },
+ {
+ link: "running_models",
+ icon: <SmartToyOutlined />,
+ },
+ {
+ link: "register_model",
+ icon: <AddBoxOutlined />,
+ },
+ {
+ link: "contact_us",
+ icon: <GitHub />,
+ },
+ ];
+
+ console.log(translation);
+
  useEffect(() => {
  setActive(pathname.substring(1));
  }, [pathname]);
@@ -62,7 +71,7 @@ const MenuSide = () => {
  const newScreenWidth = window.innerWidth;
  const newMaxDrawerWidth = Math.min(
  Math.max(newScreenWidth * 0.2, 287),
- 320,
+ 320
  );
  setDrawerWidth(`${newMaxDrawerWidth}px`);
  };
@@ -118,31 +127,32 @@ const MenuSide = () => {
  </Box>
  </Box>
 
+ {/* Pages or Screens */}
  <Box>
  <Box width="100%">
  <Box m="1.5rem 2rem 2rem 3rem"></Box>
  <List>
- {navItems.map(({ text, icon }) => {
+ {navItems.map(({ link, icon }) => {
  if (!icon) {
  return (
- <Typography key={text} sx={{ m: "2.25rem 0 1rem 3rem" }}>
- {text}
+ <Typography
+ key={translation.page_title[link]}
+ sx={{ m: "2.25rem 0 1rem 3rem" }}
+ >
+ {translation.page_title[link]}
  </Typography>
  );
  }
 
- const link = text.toLowerCase().replace(" ", "_");
- console.log(link);
-
  return (
- <ListItem key={text}>
+ <ListItem key={translation.page_title[link]}>
  <ListItemButton
  onClick={() => {
  if (link === "contact_us") {
  window.open(
  "https://github.com/xorbitsai/inference",
  "_blank",
- "noreferrer",
+ "noreferrer"
  );
  } else if (link === "launch_model") {
  navigate(`/`);
@@ -162,12 +172,55 @@ const MenuSide = () => {
  >
  {icon}
  </ListItemIcon>
- <ListItemText primary={text} />
+ <ListItemText primary={translation.page_title[link]} />
  <ChevronRightOutlined sx={{ ml: "auto" }} />
  </ListItemButton>
  </ListItem>
  );
  })}
+
+ {/* Translation */}
+ <ListItem key="translation">
+ <ListItemButton
+ onClick={() => {}}
+ disableRipple={true}
+ sx={{
+ "&:hover": {
+ backgroundColor: "transparent",
+ },
+ }}
+ >
+ <ListItemIcon
+ sx={{
+ ml: "2rem",
+ mr: "-0.4rem",
+ }}
+ >
+ <TranslateOutlined />
+ </ListItemIcon>
+ <Select
+ value={language}
+ onChange={(event) => setLanguage(event.target.value)}
+ variant="outlined"
+ displayEmpty
+ sx={{
+ "& .MuiOutlinedInput-input": {
+ padding: "10px 0px 10px 14px",
+ height: "fit-content",
+ },
+ "& .MuiOutlinedInput-root": {
+ marginLeft: "-14px",
+ },
+ }}
+ >
+ {Object.keys(translation_dict).map((lang) => (
+ <MenuItem key={lang} value={lang}>
+ {lang}
+ </MenuItem>
+ ))}
+ </Select>
+ </ListItemButton>
+ </ListItem>
  </List>
  </Box>
  </Box>

xinference/web/ui/src/components/Title.js

@@ -1,6 +1,9 @@
+import { useContext } from "react";
 import { Typography, Box } from "@mui/material";
+import { LanguageContext } from "../theme";
 
 const Title = ({ title, subtitle }) => {
+ const { translation } = useContext(LanguageContext);
  return (
  <Box mb="30px">
  <Typography
@@ -9,7 +12,7 @@ const Title = ({ title, subtitle }) => {
  fontWeight="bold"
  sx={{ m: "0 0 5px 0" }}
  >
- {title}
+ {translation.page_title[title.toLowerCase().replace(" ", "_")]}
  </Typography>
  <Typography variant="h5" color="#3d3d3d">
  {subtitle}

xinference/web/ui/src/scenes/launch_model/index.js

@@ -2,15 +2,13 @@ import React, { useContext, useState, useEffect } from "react";
 import ModelCard from "./modelCard";
 import Title from "../../components/Title";
 import { Box, TextField, FormControl } from "@mui/material";
-import { ApiContext } from "../../components/apiContext";
+import { ApiContext } from "../../theme";
 
 const LaunchModel = () => {
- let endPoint = useContext(ApiContext).endPoint;
- const [registrationData, setRegistrationData] = useState([]);
- const { isCallingApi, setIsCallingApi } = useContext(ApiContext);
- const { isUpdatingModel } = useContext(ApiContext);
+ const { endPoint, isCallingApi, setIsCallingApi, isUpdatingModel } =
+ useContext(ApiContext);
 
- // States used for filtering
+ const [registrationData, setRegistrationData] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
 
  const handleChange = (event) => {
@@ -53,14 +51,14 @@ const LaunchModel = () => {
  `${endPoint}/v1/model_registrations/LLM/${registration.model_name}`,
  {
  method: "GET",
- },
+ }
  );
 
  return {
  ...(await desc.json()),
  is_builtin: registration.is_builtin,
  };
- }),
+ })
  );
 
  setRegistrationData(newRegistrationData);

xinference/web/ui/src/scenes/launch_model/modelCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react";
 import { v1 as uuidv1 } from "uuid";
-import { ApiContext } from "../../components/apiContext";
+import { ApiContext } from "../../theme";
 import { FormControl, InputLabel, Select, MenuItem, Box } from "@mui/material";
 import { CircularProgress } from "@mui/material";
 import {
@@ -15,10 +15,11 @@ const CARD_HEIGHT = 350;
 const CARD_WIDTH = 270;
 
 const ModelCard = ({ url, modelData }) => {
+ const { isCallingApi, setIsCallingApi, isUpdatingModel } =
+ useContext(ApiContext);
+
  const [hover, setHover] = useState(false);
  const [selected, setSelected] = useState(false);
- const { isCallingApi, setIsCallingApi } = useContext(ApiContext);
- const { isUpdatingModel } = useContext(ApiContext);
 
  // Model parameter selections
  const [modelFormat, setModelFormat] = useState("");
@@ -47,7 +48,7 @@ const ModelCard = ({ url, modelData }) => {
  ...new Set(
  modelFamily
  .filter((spec) => spec.model_format === modelFormat)
- .map((spec) => spec.model_size_in_billions),
+ .map((spec) => spec.model_size_in_billions)
  ),
  ];
  setSizeOptions(sizes);
@@ -63,9 +64,9 @@ const ModelCard = ({ url, modelData }) => {
  .filter(
  (spec) =>
  spec.model_format === modelFormat &&
- spec.model_size_in_billions === parseFloat(modelSize),
+ spec.model_size_in_billions === parseFloat(modelSize)
  )
- .flatMap((spec) => spec.quantizations),
+ .flatMap((spec) => spec.quantizations)
  ),
  ];
  setQuantizationOptions(quants);