[UI]: Support in-server model proxy (#1966)

* [UI]: Support in-server model proxy #1954 * [UI]: Focus model chat input after receiving a message #1956
dstackai · Nov 5, 2024 · a450413 · a450413
1 parent e2c4899
commit a450413
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 6 deletions.
diff --git a/frontend/src/libs/index.ts b/frontend/src/libs/index.ts
@@ -98,3 +98,11 @@ export const base64ToArrayBuffer = (base64: string) => {
     }
     return bytes;
 };
+
+export const isValidUrl = (urlString: string) => {
+    try {
+        return Boolean(new URL(urlString));
+    } catch (e) {
+        return false;
+    }
+};
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -388,6 +388,7 @@
 
   "models": {
     "model_name": "Name",
+    "url": "URL",
     "gateway": "Gateway",
     "type": "Type",
     "run": "Run",

diff --git a/frontend/src/pages/Models/Details/index.tsx b/frontend/src/pages/Models/Details/index.tsx
@@ -34,6 +34,7 @@ import { useGetRunQuery } from 'services/run';
 import { selectAuthToken } from 'App/slice';
 import { runIsStopped } from 'pages/Runs/utils';
 
+import { getModelGateway } from '../helpers';
 import { getCurlModelCode, getPythonModelCode } from './helpers';
 
 import { IModelExtended } from '../List/types';
@@ -122,7 +123,7 @@ export const ModelDetails: React.FC = () => {
         }
 
         openai.current = new OpenAI({
-            baseURL: modelData.base_url,
+            baseURL: getModelGateway(modelData.base_url),
             apiKey: token,
             dangerouslyAllowBrowser: true,
         });
@@ -209,10 +210,13 @@ export const ModelDetails: React.FC = () => {
         }
 
         setLoading(false);
+
+        setTimeout(() => {
+            textAreaRef.current?.querySelector('textarea')?.focus();
+        }, 10);
     };
 
     const clearChat = () => {
-        console.log('clearChat');
         setValue('message', '');
         setValue('instructions', '');
 
@@ -292,8 +296,6 @@ export const ModelDetails: React.FC = () => {
         }
     };
 
-    console.log({ modelData, runData });
-
     return (
         <ContentLayout
             header={

diff --git a/frontend/src/pages/Models/List/hooks.tsx b/frontend/src/pages/Models/List/hooks.tsx
@@ -9,6 +9,8 @@ import { DATE_TIME_FORMAT } from 'consts';
 import { ROUTES } from 'routes';
 import { useGetProjectsQuery } from 'services/project';
 
+import { getModelGateway } from '../helpers';
+
 import { IModelExtended } from './types';
 
 export const useColumnsDefinitions = () => {
@@ -33,8 +35,8 @@ export const useColumnsDefinitions = () => {
         },
         {
             id: 'gateway',
-            header: `${t('models.gateway')}`,
-            cell: (item) => item.base_url,
+            header: `${t('models.url')}`,
+            cell: (item) => getModelGateway(item.base_url),
         },
         {
             id: 'run',

diff --git a/frontend/src/pages/Models/helpers.ts b/frontend/src/pages/Models/helpers.ts
@@ -0,0 +1,9 @@
+import { isValidUrl } from 'libs';
+
+export const getModelGateway = (baseUrl: IModel['base_url']) => {
+    if (isValidUrl(baseUrl)) {
+        return baseUrl;
+    }
+
+    return document.location.origin + baseUrl;
+};