Added support for multiple models - moved Version and model to main menu

harmonydata · May 28, 2024 · 55f6a45 · 55f6a45
1 parent a0497ff
commit 55f6a45
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 34 deletions.
diff --git a/.env b/.env
@@ -3,4 +3,5 @@ REACT_APP_API_EXAMPLES=$REACT_APP_API_URL/text/examples
 REACT_APP_API_PARSE=$REACT_APP_API_URL/text/parse
 REACT_APP_API_MATCH=$REACT_APP_API_URL/text/match
 REACT_APP_API_VERSION=$REACT_APP_API_URL/info/version
+REACT_APP_API_MODELS=$REACT_APP_API_URL/info/list-models
 REACT_APP_ABSOLUTE_URL_PREFIX=https://harmonydata.github.io
diff --git a/.env.development b/.env.development
@@ -3,4 +3,5 @@ REACT_APP_API_EXAMPLES=$REACT_APP_API_URL/text/examples
 REACT_APP_API_PARSE=$REACT_APP_API_URL/text/parse
 REACT_APP_API_MATCH=$REACT_APP_API_URL/text/match
 REACT_APP_API_VERSION=$REACT_APP_API_URL/info/version
+REACT_APP_API_MODELS=$REACT_APP_API_URL/info/list-models
 REACT_APP_ABSOLUTE_URL_PREFIX=https://harmonydata.github.io
diff --git a/package.json b/package.json
@@ -14,11 +14,11 @@
     "mui-nested-menu": "^3.2.1",
     "nth-check": ">=2.1.1",
     "pdfjs-dist": "^4.0.269",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-card-flip": "^1.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-cookie-consent": "^8.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.3.10",
     "react-ga4": "^2.1.0",
     "react-pdf": "^7.6.0",

diff --git a/src/components/AppBar.js b/src/components/AppBar.js
@@ -11,6 +11,10 @@ import {
   Menu,
   Container,
   Divider,
+  FormControl,
+  InputLabel,
+  OutlinedInput,
+  ListItemText,
 } from "@mui/material";
 import { Logout, JoinInner } from "@mui/icons-material/";
 import { useAuth } from "../contexts/AuthContext";
@@ -28,6 +32,7 @@ const SettingsIcons = {
 function HarmonyAppBar() {
   const [anchorUser, setAnchorUser] = React.useState(null);
   const [apiVersion, setApiVersion] = React.useState(null);
+  const [allModels, setAllModels] = React.useState();
   const [error, setError] = React.useState(null);
   const {
     currentUser,
@@ -36,7 +41,7 @@ function HarmonyAppBar() {
     signInWithGitHub,
     signInWithTwitter,
   } = useAuth();
-  const { getVersion } = useData();
+  const { getVersion, getModels, currentModel, setCurrentModel } = useData();
 
   React.useEffect(() => {
     getVersion()
@@ -46,6 +51,24 @@ function HarmonyAppBar() {
       .catch((e) => setError("ERROR: API unreachable"));
   }, [getVersion]);
 
+  React.useEffect(() => {
+    getModels()
+      .then((models) => {
+        setAllModels(models);
+      })
+      .catch((e) => setError("ERROR: API unreachable"));
+  }, [getModels]);
+
+  const handleModelSelect = (event) => {
+    const model = event.target.value;
+    if (
+      model.framework !== currentModel.framework ||
+      model.model !== currentModel.model
+    ) {
+      setCurrentModel(model);
+    }
+  };
+
   const handleOpenUserMenu = (event) => {
     setAnchorUser(event.currentTarget);
   };
@@ -80,15 +103,27 @@ function HarmonyAppBar() {
     >
       <Container sx={{ maxWidth: "100%!important" }}>
         <Toolbar disableGutters>
-          <Box sx={{ flexGrow: 1, textAlign: "right", paddingRight: 2 }}>
-            {apiVersion && (
-              <Typography>Harmony API version: {apiVersion}</Typography>
-            )}
-            {error && (
-              <Typography sx={{ color: "red", fontWeight: 900 }}>
-                {error}
-              </Typography>
-            )}
+          <Box
+            sx={{
+              flexGrow: 1,
+
+              textAlign: "right",
+              paddingRight: 2,
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyItems: "flex-end",
+              }}
+            >
+              {error && (
+                <Typography sx={{ color: "red", fontWeight: 900 }}>
+                  {error}
+                </Typography>
+              )}
+            </Box>
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>
@@ -105,7 +140,7 @@ function HarmonyAppBar() {
               </Avatar>
             </Tooltip>
             <Menu
-              sx={{ mt: "45px" }}
+              sx={{ mt: "45px", maxWidth: "50%" }}
               id="menu-appbar"
               anchorEl={anchorUser}
               anchorOrigin={{
@@ -134,6 +169,41 @@ function HarmonyAppBar() {
                   <MenuItem value={"PT"}>Portuguese</MenuItem>
                 </Select>
               </MenuItem>
+              <MenuItem key="model">
+                <FormControl sx={{ margin: "auto" }}>
+                  <InputLabel id="models">Model</InputLabel>
+                  <Select
+                    size="small"
+                    labelId="models"
+                    id="modelcombo"
+                    value={currentModel}
+                    onChange={handleModelSelect}
+                    input={
+                      <OutlinedInput
+                        sx={{ overflow: "hidden" }}
+                        label="Model"
+                      />
+                    }
+                    renderValue={(selected) =>
+                      selected.framework + " (" + selected.model + ")"
+                    }
+                  >
+                    {allModels &&
+                      allModels.map(
+                        (model) =>
+                          model.available && (
+                            <MenuItem key={model.model} value={model}>
+                              <ListItemText
+                                primary={
+                                  model.framework + " (" + model.model + ")"
+                                }
+                              />
+                            </MenuItem>
+                          )
+                      )}
+                  </Select>
+                </FormControl>
+              </MenuItem>
               <Divider />
 
               {settings.map((setting) => (
@@ -189,6 +259,12 @@ function HarmonyAppBar() {
                   </Typography>
                 </MenuItem>
               )}
+              <Divider />
+              {apiVersion && (
+                <Typography sx={{ mx: 1 }}>
+                  Harmony API version: {apiVersion}
+                </Typography>
+              )}
             </Menu>
           </Box>
         </Toolbar>

diff --git a/src/components/ThemeToggle.js b/src/components/ThemeToggle.js
@@ -1,39 +1,36 @@
-import React from 'react';
-import { IconButton, Box } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import Brightness4Icon from '@mui/icons-material/Brightness4';
-import Brightness7Icon from '@mui/icons-material/Brightness7';
-import { ColorModeContext } from "../contexts/ColorModeContext"
+import React from "react";
+import { IconButton, Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { ColorModeContext } from "../contexts/ColorModeContext";
 
 export default function ThemeToggle() {
   const theme = useTheme();
   const colorMode = React.useContext(ColorModeContext);
 
   return (
     <Box
+      onClick={colorMode.toggleColorMode}
       sx={{
-        display: 'flex',
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        bgcolor: 'background.default',
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "background.default",
         color: theme.palette.text.primary,
         borderRadius: 1,
         p: 0,
       }}
     >
       {theme.palette.mode} mode
-      <IconButton
-        sx={{ ml: 1 }}
-        onClick={colorMode.toggleColorMode}
-        color="inherit"
-      >
-        {theme.palette.mode === 'dark' ? (
+      <IconButton sx={{ ml: 1 }} color="inherit">
+        {theme.palette.mode === "dark" ? (
           <Brightness7Icon />
         ) : (
           <Brightness4Icon />
         )}
       </IconButton>
     </Box>
   );
-}
+}
diff --git a/src/contexts/DataContext.js b/src/contexts/DataContext.js
@@ -22,7 +22,10 @@ export const useData = () => {
 
 export function DataProvider({ children }) {
   const { currentUser } = useAuth();
-
+  const [currentModel, setCurrentModel] = React.useState({
+    framework: "azure_openai",
+    model: "fds-text-embedding-ada-002",
+  });
   const retryablePostData = ({ url = "", data = {}, timeout = 8000 }) => {
     return new Promise(async (resolve, reject) => {
       var retries = 3;
@@ -94,7 +97,7 @@ export function DataProvider({ children }) {
   const match = (instruments) => {
     return retryablePostData({
       url: process.env.REACT_APP_API_MATCH,
-      data: { instruments: instruments },
+      data: { instruments: instruments, parameters: currentModel },
       timeout: 30000,
     });
   };
@@ -107,9 +110,15 @@ export function DataProvider({ children }) {
   const getVersion = () => {
     return retryableGetData({
       url: process.env.REACT_APP_API_VERSION,
-      timeout: 500,
+      timeout: 800,
     }).then((data) => data.harmony_version || "unknown");
   };
+  const getModels = () => {
+    return retryableGetData({
+      url: process.env.REACT_APP_API_MODELS,
+      timeout: 800,
+    });
+  };
 
   const getPublicHarmonisations = async (docID) => {
     if (docID) {
@@ -200,6 +209,7 @@ export function DataProvider({ children }) {
     delete m.q2.instrument;
     delete m.q1.nearest_match_from_mhc_auto;
     delete m.q2.nearest_match_from_mhc_auto;
+    m.model_used = currentModel;
     m.created = serverTimestamp();
 
     return addDoc(collection(db, "mismatches"), m);
@@ -237,6 +247,9 @@ export function DataProvider({ children }) {
         parse,
         match,
         getVersion,
+        getModels,
+        currentModel,
+        setCurrentModel,
         storeHarmonisation,
         getMyHarmonisations,
         getPublicHarmonisations,