Plug model list into model select menu

trustgraph-ai · Oct 11, 2024 · 91c1841 · 91c1841
1 parent 8447cc8
commit 91c1841
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 47 deletions.
diff --git a/src/simple-editor/ModelDeployment.tsx b/src/simple-editor/ModelDeployment.tsx
@@ -6,11 +6,14 @@ import {
 } from '@mui/material';
 
 interface ModelDeploymentProps {
-  value: string;
-  onChange: (value: string) => void;
+    value : string;
+    onChange: (value: string) => void;
 }
 
-const ModelDeployment: React.FC<ModelDeploymentProps> = ({ value, onChange }) => {
+const ModelDeployment: React.FC<ModelDeploymentProps> = ({
+    value, onChange
+}) => {
+
   return (
 
         <FormControl fullWidth>

diff --git a/src/simple-editor/ModelParameters.tsx b/src/simple-editor/ModelParameters.tsx
@@ -1,52 +1,120 @@
 import React from 'react';
-import { TextField, Slider } from '@mui/material';
+import {
+    FormControl, InputLabel, Select, MenuItem, TextField, Slider
+} from '@mui/material';
+
+import modelsRaw from './models.json';
+const models = modelsRaw as { [ix : string ] : string[] };
 
 interface ModelParametersProps {
-  modelName: string;
-  temperature: number;
-  maxOutputTokens: number;
-  onModelNameChange: (value: string) => void;
-  onTemperatureChange: (value: number) => void;
-  onMaxOutputTokensChange: (value: number) => void;
+    modelName: string;
+    temperature: number;
+    maxOutputTokens: number;
+    onModelNameChange: (value: string) => void;
+    onTemperatureChange: (value: number) => void;
+    onMaxOutputTokensChange: (value: number) => void;
+    modelDeployment : string;
 }
 
 const ModelParameters: React.FC<ModelParametersProps> = ({
-  modelName,
-  temperature,
-  maxOutputTokens,
-  onModelNameChange,
-  onTemperatureChange,
-  onMaxOutputTokensChange,
+    modelName,
+    temperature,
+    modelDeployment,
+    maxOutputTokens,
+    onModelNameChange,
+    onTemperatureChange,
+    onMaxOutputTokensChange,
 }) => {
-  return (
-    <div>
-      <TextField
-        fullWidth
-        label="Model Name"
-        value={modelName}
-        onChange={(e) => onModelNameChange(e.target.value)}
-        margin="normal"
-      />
-      <div>
-        <p>Temperature: {temperature}</p>
-        <Slider
-          value={temperature}
-          onChange={(_, value) => onTemperatureChange(value as number)}
-          min={0}
-          max={1}
-          step={0.1}
-        />
-      </div>
-      <TextField
-        fullWidth
-        label="Max Output Tokens"
-        type="number"
-        value={maxOutputTokens}
-        onChange={(e) => onMaxOutputTokensChange(parseInt(e.target.value))}
-        margin="normal"
-      />
-    </div>
-  );
+
+    const availModels = models[modelDeployment];
+
+    const ModelList : React.FC<{
+        modelName : string;
+        availModels : string[];
+        onModelNameChange : (value: string) => void;
+    }> = ({ modelName, availModels, onModelNameChange}) => {
+
+        const readOnly = (availModels.length == 0);
+
+        if (availModels.length == 0) {
+            return (
+                <FormControl fullWidth disabled>
+
+                    <InputLabel id="model-name-label">Model</InputLabel>
+
+                    <Select
+                        labelId="model-name-label"
+                        id="model-name-select"
+                        value="n/a"
+                        label="Model deployment"
+                    >
+                        <MenuItem key="n/a" value="n/a">n/a</MenuItem>
+                    </Select>
+                </FormControl>
+            );
+
+        }
+
+        return (
+            <FormControl fullWidth>
+
+                <InputLabel id="model-name-label">Model</InputLabel>
+
+                <Select
+                    labelId="model-name-label"
+                    id="model-name-select"
+                    value={modelName}
+                    label="Model deployment"
+                    onChange={(e) => onModelNameChange(e.target.value)}
+                    inputProps={{ readOnly: readOnly }}
+                >
+                    {
+                        availModels.map(
+                            (v) => (
+                                <MenuItem key={v}
+                                    value={v}>
+                                    {v}
+                                </MenuItem>
+                            ))
+                    }
+                </Select>
+
+            </FormControl>
+
+        );
+    }
+
+    return (
+        <div>
+
+            <ModelList modelName={modelName} availModels={availModels}
+                onModelNameChange={onModelNameChange}
+            />
+
+            <div>
+                <p>Temperature: {temperature}</p>
+                <Slider
+                    value={temperature}
+                    onChange={
+                        (_, value) => onTemperatureChange(value as number)
+                    }
+                    min={0}
+                    max={1}
+                    step={0.1}
+                />
+            </div>
+            <TextField
+                fullWidth
+                label="Max Output Tokens"
+                type="number"
+                value={maxOutputTokens}
+                onChange={
+                    (e) => onMaxOutputTokensChange(parseInt(e.target.value))
+                }
+                margin="normal"
+            />
+        </div>
+    );
 };
 
 export default ModelParameters;

diff --git a/src/simple-editor/ParamsForm.tsx b/src/simple-editor/ParamsForm.tsx
@@ -12,6 +12,9 @@ import ModelParameters from './ModelParameters';
 import { useModelParamsStore } from './state/ModelParams';
 import { useDeploymentStore } from './state/Deployment';
 
+import modelsRaw from './models.json';
+const models = modelsRaw as { [ix : string ] : string[] };
+
 interface ParamsFormProps {
 }
 
@@ -79,6 +82,20 @@ const ParamsForm: React.FC<ParamsFormProps> = ({
     const setMaxOutputTokens
         = useModelParamsStore((state) => state.setMaxOutputTokens);
 
+    useModelParamsStore.subscribe(
+        (n, o) => {
+
+            if (n.modelDeployment == o.modelDeployment) return;
+
+            if (n.modelName in models[n.modelDeployment]) return;
+
+            if (models[n.modelDeployment].length == 0)
+                setModelName("");
+            else
+                setModelName(models[n.modelDeployment][0]);
+
+        }
+    );
 
     return (
 
@@ -119,6 +136,7 @@ const ParamsForm: React.FC<ParamsFormProps> = ({
                     onModelNameChange={setModelName}
                     onTemperatureChange={setTemperature}
                     onMaxOutputTokensChange={setMaxOutputTokens}
+                    modelDeployment={modelDeployment}
                   />
                 </Box>
 

diff --git a/src/simple-editor/models.json b/src/simple-editor/models.json
@@ -1,5 +1,5 @@
 {
-    "anthropic": [
+    "claude": [
         "claude-3-5-sonnet-20240620",
         "claude-3-opus-20240229",
         "claude-3-sonnet-20240229",
@@ -94,5 +94,9 @@
         "gemini-flash-experimental",
         "gemini-pro-experimental",
         "gemini-experimental"
+    ],
+    "llamafile": [
+    ],
+    "azure": [
     ]
-}
+}