Merge pull request #119 from buddypia/feature/latest-models

Update to Support New OpenAI and Anthropic Models, Data Formulator can also dynamically check models available from each endpoint to help user select models (very useful if data formulator is used in a deployment where the user may not know which models are available to them from server spec).

Author: Chenglong-MS

api-keys.env.template

@@ -1,19 +1,19 @@
 # OpenAI Configuration
 OPENAI_ENABLED=true
 OPENAI_API_KEY=#your-openai-api-key
-OPENAI_MODELS=gpt-4o,gpt-4o-mini # comma separated list of models
+OPENAI_MODELS=gpt-4.5-preview,o3-mini,gpt-4o-mini,o1,o1-mini # comma separated list of models
 
 # Azure OpenAI Configuration
 AZURE_ENABLED=true
 AZURE_API_KEY=#your-azure-openai-api-key
 AZURE_API_BASE=https://your-azure-openai-endpoint.openai.azure.com/
 AZURE_API_VERSION=2024-02-15-preview
-AZURE_MODELS=gpt-4o
+AZURE_MODELS=o3-mini,gpt-4o
 
 # Anthropic Configuration
 ANTHROPIC_ENABLED=true
 ANTHROPIC_API_KEY=#your-anthropic-api-key
-ANTHROPIC_MODELS=claude-3-5-sonnet-20241022,claude-3-5-haiku-20241022
+ANTHROPIC_MODELS=claude-3-7-sonnet-latest,claude-3-5-haiku-latest
 
 # Ollama Configuration
 OLLAMA_ENABLED=true

py-src/data_formulator/agents/client_utils.py

@@ -16,9 +16,11 @@ def __init__(self, endpoint, model, api_key=None,  api_base=None, api_version=No
         # other params, including temperature, max_completion_tokens, api_base, api_version
         self.params = {
             "temperature": 0.7,
-            "max_completion_tokens": 1200,
         }
 
+        if not (model == "o3-mini" or model == "o1"):
+            self.params["max_completion_tokens"] = 1200
+
         if api_key is not None and api_key != "":
             self.params["api_key"] = api_key
         if api_base is not None and api_base != "":
@@ -67,12 +69,16 @@ def get_completion(self, messages):
                 timeout=120
             )
 
-            return client.chat.completions.create(
-                model=self.model,
-                messages=messages,
-                temperature=self.params["temperature"],
-                max_tokens=self.params["max_completion_tokens"],
-            )
+            completion_params = {
+                "model": self.model,
+                "messages": messages,
+            }
+            
+            if not (self.model == "o3-mini" or self.model == "o1"):
+                completion_params["temperature"] = self.params["temperature"]
+                completion_params["max_tokens"] = self.params["max_completion_tokens"]
+                
+            return client.chat.completions.create(**completion_params)
         else:
             return litellm.completion(
                 model=self.model,

src/views/ModelSelectionDialog.tsx

@@ -81,6 +81,14 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
     const [modelDialogOpen, setModelDialogOpen] = useState<boolean>(false);
     const [showKeys, setShowKeys] = useState<boolean>(false);
     const [tempSelectedModelId, setTempSelectedModeId] = useState<string | undefined >(selectedModelId);
+    const [providerModelOptions, setProviderModelOptions] = useState<{[key: string]: string[]}>({
+        'openai': [],
+        'azure': [],
+        'anthropic': [],
+        'gemini': [],
+        'ollama': []
+    });
+    const [isLoadingModelOptions, setIsLoadingModelOptions] = useState<boolean>(false);
     const [appConfig, setAppConfig] = useState<AppConfig>({ SHOW_KEYS_ENABLED: true });
 
     // Fetch app configuration
@@ -108,23 +116,60 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
     const [newApiBase, setNewApiBase] = useState<string | undefined>(undefined);
     const [newApiVersion, setNewApiVersion] = useState<string | undefined>(undefined);
 
+    // Fetch available models from the API
+    useEffect(() => {
+        const fetchModelOptions = async () => {
+            setIsLoadingModelOptions(true);
+            try {
+                const response = await fetch(getUrls().CHECK_AVAILABLE_MODELS);
+                const data = await response.json();
+                
+                // Group models by provider
+                const modelsByProvider: {[key: string]: string[]} = {
+                    'openai': [],
+                    'azure': [],
+                    'anthropic': [],
+                    'gemini': [],
+                    'ollama': []
+                };
+                
+                data.forEach((modelConfig: any) => {
+                    const provider = modelConfig.endpoint;
+                    const model = modelConfig.model;
+                    
+                    if (provider && model && !modelsByProvider[provider].includes(model)) {
+                        modelsByProvider[provider].push(model);
+                    }
+                });
+                
+                setProviderModelOptions(modelsByProvider);
+            } catch (error) {
+                console.error("Failed to fetch model options:", error);
+            } finally {
+                setIsLoadingModelOptions(false);
+            }
+        };
+        
+        fetchModelOptions();
+    }, []);
+
     useEffect(() => {
         if (newEndpoint == 'ollama') {
             if (!newApiBase) {
                 setNewApiBase('http://localhost:11434');
             }
         }
         if (newEndpoint == "openai") {
-            if (!newModel) {
-                setNewModel('gpt-4o');
+            if (!newModel && providerModelOptions.openai.length > 0) {
+                setNewModel(providerModelOptions.openai[0]);
             }
         }
         if (newEndpoint == "anthropic") {
-            if (!newModel) {
-                setNewModel('claude-3-5-sonnet-20241022');
+            if (!newModel && providerModelOptions.anthropic.length > 0) {
+                setNewModel(providerModelOptions.anthropic[0]);
             }
         }
-    }, [newEndpoint]);
+    }, [newEndpoint, providerModelOptions]);
 
     let modelExists = models.some(m => 
         m.endpoint == newEndpoint && m.model == newModel && m.api_base == newApiBase 
@@ -168,8 +213,8 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 value={newEndpoint}
                 onChange={(event: any, newValue: string | null) => {
                     setNewEndpoint(newValue || "");
-                    if (newModel == "" && newValue == "openai") {
-                        setNewModel("gpt-4o");
+                    if (newModel == "" && newValue == "openai" && providerModelOptions.openai.length > 0) {
+                        setNewModel(providerModelOptions.openai[0]);
                     }
                     if (!newApiVersion && newValue == "azure") {
                         setNewApiVersion("2024-02-15");
@@ -220,7 +265,8 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 freeSolo
                 onChange={(event: any, newValue: string | null) => { setNewModel(newValue || ""); }}
                 value={newModel}
-                options={['gpt-4o-mini', 'gpt-4o', 'claude-3-5-sonnet-20241022']}
+                options={newEndpoint && providerModelOptions[newEndpoint] ? providerModelOptions[newEndpoint] : []}
+                loading={isLoadingModelOptions}
                 renderOption={(props, option) => {
                     return <Typography {...props} onClick={()=>{ setNewModel(option); }} sx={{fontSize: "small"}}>{option}</Typography>
                 }}
@@ -229,7 +275,16 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                         error={newEndpoint != "" && !newModel}
                         {...params}
                         placeholder="model name"
-                        InputProps={{ ...params.InputProps, style: { fontSize: "0.875rem" } }}
+                        InputProps={{ 
+                            ...params.InputProps, 
+                            style: { fontSize: "0.875rem" },
+                            endAdornment: (
+                                <>
+                                    {isLoadingModelOptions ? <CircularProgress color="inherit" size={20} /> : null}
+                                    {params.InputProps.endAdornment}
+                                </>
+                            ),
+                        }}
                         inputProps={{
                             ...params.inputProps,
                             'aria-label': 'Select or enter a model',
@@ -244,7 +299,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 PaperComponent={({ children }) => (
                     <Paper>
                         <Typography sx={{ p: 1, color: 'gray', fontStyle: 'italic', fontSize: 'small' }}>
-                            examples
+                            {isLoadingModelOptions ? 'Loading models...' : 'examples'}
                         </Typography>
                         {children}
                     </Paper>