ENH: Add Language Settings to Theme

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,45 +7,52 @@ 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";
+import { LanguageContext } from "../theme";
 
 const navItems = [
   {
-    text: "Launch Model",
+    link: "launch_model",
     icon: <RocketLaunchOutlined />,
   },
   {
-    text: "Running Models",
+    link: "running_models",
     icon: <SmartToyOutlined />,
   },
   {
-    text: "Register Model",
+    link: "register_model",
     icon: <AddBoxOutlined />,
   },
   {
-    text: "Contact Us",
+    link: "contact_us",
     icon: <GitHub />,
   },
 ];
 
 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`
   );
 
   useEffect(() => {
@@ -62,7 +69,7 @@ const MenuSide = () => {
       const newScreenWidth = window.innerWidth;
       const newMaxDrawerWidth = Math.min(
         Math.max(newScreenWidth * 0.2, 287),
-        320,
+        320
       );
       setDrawerWidth(`${newMaxDrawerWidth}px`);
     };
@@ -118,31 +125,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 +170,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);

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

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
-import { ApiContext } from "../../components/apiContext";
+import { useMode, ApiContext } from "../../theme";
 import {
   Box,
   Checkbox,
@@ -11,7 +11,6 @@ import {
   RadioGroup,
   FormControl,
 } from "@mui/material";
-import { useMode } from "../../theme";
 import Title from "../../components/Title";
 
 const SUPPORTED_LANGUAGES_DICT = { en: "English", zh: "Chinese" };
@@ -22,7 +21,8 @@ const SUPPORTED_LANGUAGES = Object.keys(SUPPORTED_LANGUAGES_DICT);
 
 const RegisterModel = () => {
   const ERROR_COLOR = useMode();
-  const endPoint = useContext(ApiContext).endPoint;
+  const { endPoint } = useContext(ApiContext);
+
   const [errorMessage, setErrorMessage] = useState("");
   const [modelFormat, setModelFormat] = useState("pytorch");
   const [modelSize, setModelSize] = useState(7);
@@ -102,11 +102,11 @@ const RegisterModel = () => {
   // 1. Starts with an alphanumeric character (a letter or a digit).
   // 2. Followed by any number of alphanumeric characters, underscores (_), or hyphens (-).
   const errorModelName = !/^[A-Za-z0-9][A-Za-z0-9_-]*$/.test(
-    formData.model_name,
+    formData.model_name
   );
   const errorModelDescription =
     !/^[A-Za-z0-9\s!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]{0,500}$/.test(
-      formData.model_description,
+      formData.model_description
     );
   const errorContextLength = formData.context_length === 0;
   const errorLanguage =
@@ -137,10 +137,10 @@ const RegisterModel = () => {
     const normalizedPath = path.replace(/\\/g, "/");
     const baseDir = normalizedPath.substring(
       0,
-      normalizedPath.lastIndexOf("/"),
+      normalizedPath.lastIndexOf("/")
     );
     const filename = normalizedPath.substring(
-      normalizedPath.lastIndexOf("/") + 1,
+      normalizedPath.lastIndexOf("/") + 1
     );
     return { baseDir, filename };
   };
@@ -200,12 +200,12 @@ const RegisterModel = () => {
         throw new Error(
           `Server error: ${response.status} - ${
             errorData.detail || "Unknown error"
-          }`,
+          }`
         );
       }
 
       setErrorMessage(
-        "Model has been registered successfully! Navigate to launch model page to proceed.",
+        "Model has been registered successfully! Navigate to launch model page to proceed."
       );
     } catch (error) {
       console.error("There was a problem with the fetch operation:", error);
@@ -421,7 +421,7 @@ const RegisterModel = () => {
                 control={
                   <Checkbox
                     checked={formData.model_ability.includes(
-                      ability.toLowerCase(),
+                      ability.toLowerCase()
                     )}
                     onChange={() => toggleAbility(ability.toLowerCase())}
                     name={ability}