chore(weave): load model default properly

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/llmMaxTokens.ts

@@ -121,3 +121,68 @@ export const LLM_MAX_TOKENS = {
 };
 
 export type LLMMaxTokensKey = keyof typeof LLM_MAX_TOKENS;
+
+export const LLM_MAX_TOKENS_KEYS: LLMMaxTokensKey[] = Object.keys(
+  LLM_MAX_TOKENS
+) as LLMMaxTokensKey[];
+
+// Helper function to calculate string similarity using Levenshtein distance
+const getLevenshteinDistance = (str1: string, str2: string): number => {
+  const track = Array(str2.length + 1)
+    .fill(null)
+    .map(() => Array(str1.length + 1).fill(null));
+
+  for (let i = 0; i <= str1.length; i++) {
+    track[0][i] = i;
+  }
+  for (let j = 0; j <= str2.length; j++) {
+    track[j][0] = j;
+  }
+
+  for (let j = 1; j <= str2.length; j++) {
+    for (let i = 1; i <= str1.length; i++) {
+      const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      track[j][i] = Math.min(
+        track[j][i - 1] + 1, // deletion
+        track[j - 1][i] + 1, // insertion
+        track[j - 1][i - 1] + indicator // substitution
+      );
+    }
+  }
+  return track[str2.length][str1.length];
+};
+
+// Main function to find most similar LLM name
+export const findMostSimilarLLMName = (
+  input: string,
+  llmList: LLMMaxTokensKey[]
+): string => {
+  const normalizedInput = input.toLowerCase().trim();
+
+  // If exact match exists, return it
+  if (llmList.includes(normalizedInput as LLMMaxTokensKey)) {
+    return normalizedInput;
+  }
+
+  let closestMatch = llmList[0];
+  let smallestDistance = Infinity;
+
+  llmList.forEach(llmName => {
+    const distance = getLevenshteinDistance(
+      normalizedInput,
+      llmName.toLowerCase()
+    );
+
+    if (distance < smallestDistance) {
+      smallestDistance = distance;
+      closestMatch = llmName;
+    }
+
+    if (llmName.includes(normalizedInput)) {
+      closestMatch = llmName;
+      smallestDistance = 0;
+    }
+  });
+
+  return closestMatch;
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/usePlaygroundState.ts

@@ -1,6 +1,11 @@
+import {toast} from '@wandb/weave/common/components/elements/Toast';
 import {SetStateAction, useCallback, useState} from 'react';
 
-import {LLMMaxTokensKey} from './llmMaxTokens';
+import {
+  findMostSimilarLLMName,
+  LLM_MAX_TOKENS_KEYS,
+  LLMMaxTokensKey,
+} from './llmMaxTokens';
 import {
   OptionalTraceCallSchema,
   PlaygroundResponseFormats,
@@ -34,7 +39,7 @@ const DEFAULT_PLAYGROUND_STATE = {
   presencePenalty: 0,
   //   nTimes: 1,
   maxTokensLimit: 16384,
-  model: 'gpt-4o-mini' as LLMMaxTokensKey,
+  model: 'gpt-4o-mini-2024-07-18' as LLMMaxTokensKey,
 };
 
 export const usePlaygroundState = () => {
@@ -106,6 +111,20 @@ export const usePlaygroundState = () => {
         if (inputs.presence_penalty) {
           newState.presencePenalty = parseFloat(inputs.presence_penalty);
         }
+        if (inputs.model) {
+          if (LLM_MAX_TOKENS_KEYS.includes(inputs.model as LLMMaxTokensKey)) {
+            newState.model = inputs.model as LLMMaxTokensKey;
+          } else {
+            const closestModel = findMostSimilarLLMName(
+              inputs.model,
+              LLM_MAX_TOKENS_KEYS
+            );
+            toast(
+              `We currently don't support ${inputs.model}, in the playground. We will default to ${closestModel}`
+            );
+            newState.model = closestModel as LLMMaxTokensKey;
+          }
+        }
         return [newState];
       });
     },