Refactor model naming to use a readable format

Royal-lobster · Apr 14, 2024 · 92d53bd · 92d53bd
1 parent f826854
commit 92d53bd
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 24 deletions.
diff --git a/src/components/Settings/Sections/ChatSettings.tsx b/src/components/Settings/Sections/ChatSettings.tsx
@@ -93,12 +93,12 @@ const ChatSettings = () => {
       </FieldWrapper>
 
       {/* =========================
-             Modal Setting
+             Model Setting
       ===========================*/}
 
       <FieldWrapper
         title="Show Local Models"
-        description="Show local models in the modal selection via ollama (https://ollama.com/) which allows you to use open source models that run on your machine."
+        description="Show local models in the model selection via ollama (https://ollama.com/) which allows you to use open source models that run on your machine."
         row={true}
       >
         <Switch.Root
@@ -130,27 +130,27 @@ const ChatSettings = () => {
       )}
 
       <FieldWrapper
-        title="Modal"
+        title="Model"
         description="Choose between OpenAI Chat Modals. For more information, visit https://platform.openai.com/docs/models/overview"
         row={true}
       >
         <select
-          value={chatSettings.modal}
+          value={chatSettings.model}
           className="input cdx-w-44"
           onChange={(e) => {
             setSettings({
               ...settings,
               chat: {
                 ...chatSettings,
-                modal: e.target.value as AvailableModels,
+                model: e.target.value as AvailableModels,
               },
             })
           }}
         >
-          {availableModels.map(([modal, value]) => (
-            <option key={modal} value={value}>
+          {availableModels.map(([model, value]) => (
+            <option key={model} value={value}>
               {capitalizeText(
-                modal
+                model
                   .toLowerCase()
                   .replace('gpt', 'GPT')
                   .replace('3_5', '3.5')

diff --git a/src/components/Sidebar/chat/ChangeChatModel.tsx b/src/components/Sidebar/chat/ChangeChatModel.tsx
@@ -1,7 +1,7 @@
 import { BsRobot } from 'react-icons/bs'
 import type { AvailableModels } from '../../../config/settings'
 import { useChatModels } from '../../../hooks/useChatModels'
-import { capitalizeText } from '../../../lib/capitalizeText'
+import { getReadableModelName } from '../../../lib/getReadableModelName'
 
 const ChangeChatModel = () => {
   const { availableModels, activeChatModel, setActiveChatModel } =
@@ -16,15 +16,9 @@ const ChangeChatModel = () => {
           setActiveChatModel(e.target.value as AvailableModels)
         }}
       >
-        {availableModels.map(([modal, value]) => (
-          <option key={modal} value={value}>
-            {capitalizeText(
-              modal
-                .toLowerCase()
-                .replace('gpt', 'GPT')
-                .replace('3_5', '3.5')
-                .replaceAll('_', ' '),
-            )}
+        {availableModels.map(([model, value]) => (
+          <option key={model} value={value}>
+            {getReadableModelName(model)}
           </option>
         ))}
       </select>

diff --git a/src/components/Sidebar/chat/index.tsx b/src/components/Sidebar/chat/index.tsx
@@ -19,7 +19,7 @@ const Chat = ({ settings }: ChatProps) => {
     removeMessagePair,
     error,
   } = useChatCompletion({
-    model: settings.chat.modal,
+    model: settings.chat.model,
     apiKey: settings.chat.openAIKey!,
     mode: settings.chat.mode,
     systemPrompt: SYSTEM_PROMPT,
@@ -57,7 +57,7 @@ const Chat = ({ settings }: ChatProps) => {
         clearMessages={clearMessages}
         cancelRequest={cancelRequest}
         isWebpageContextOn={settings.general.webpageContext}
-        isVisionModel={settings.chat.modal === AvailableModels.GPT_4_VISION}
+        isVisionModel={settings.chat.model === AvailableModels.GPT_4_VISION}
       />
     </>
   )

diff --git a/src/config/settings/index.ts b/src/config/settings/index.ts
@@ -28,7 +28,7 @@ export type Settings = {
   }
   chat: {
     openAIKey: string | null
-    modal: AvailableModels
+    model: AvailableModels
     mode: Mode
     showLocalModels: boolean
   }
@@ -46,7 +46,7 @@ export const defaultSettings: Settings = {
   },
   chat: {
     openAIKey: null,
-    modal: AvailableModels.GPT_4_VISION,
+    model: AvailableModels.GPT_4_VISION,
     mode: Mode.BALANCED,
     showLocalModels: false,
   },

diff --git a/src/hooks/useChatModels.ts b/src/hooks/useChatModels.ts
@@ -7,7 +7,7 @@ export const useChatModels = () => {
   const [settings, setSettings] = useSettings()
   const [dynamicModels, setDynamicModels] = useState<string[]>([])
   const chatSettings = settings.chat
-  const activeChatModel = chatSettings.modal
+  const activeChatModel = chatSettings.model
 
   const fetchLocalModels = useCallback(async () => {
     if (chatSettings.showLocalModels) {
@@ -38,7 +38,7 @@ export const useChatModels = () => {
       ...settings,
       chat: {
         ...chatSettings,
-        modal: model,
+        model: model,
       },
     })
   }

diff --git a/src/lib/getReadableModelName.ts b/src/lib/getReadableModelName.ts
@@ -0,0 +1,11 @@
+import { capitalizeText } from './capitalizeText'
+
+export const getReadableModelName = (model: string) => {
+  return capitalizeText(
+    model
+      .toLowerCase()
+      .replace('gpt', 'GPT')
+      .replace(/(\d+)_(\d+)/, '$1.$2')
+      .replace(/[_:]/g, ' '),
+  )
+}