[UX] Include base URL and authentication token in the code snippets #…

…1995 (#2006)
dstackai · Nov 15, 2024 · 5b9ab03 · 5b9ab03
1 parent dfd9b50
commit 5b9ab03
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 38 deletions.
diff --git a/frontend/src/libs/run.ts b/frontend/src/libs/run.ts
@@ -26,10 +26,8 @@ export const getStatusIconType = (status: IRun['status']): StatusIndicatorProps[
 };
 
 export const getExtendedModelFromRun = (run: IRun): IModelExtended | null => {
-    // if (!run?.service?.model) return null;
-
     return {
-        ...(run.service?.model ?? { name: 'test', base_url: 'https://test.test', type: 'test' }),
+        ...(run.service?.model ?? {}),
         project_name: run.project_name,
         run_name: run?.run_spec.run_name ?? 'No run name',
         user: run.user,

diff --git a/frontend/src/pages/Models/Details/helpers.ts b/frontend/src/pages/Models/Details/helpers.ts
@@ -1,8 +1,13 @@
+import { getModelGateway } from '../helpers';
+
 import { IModelExtended } from '../List/types';
 
-export const getPythonModelCode = (model?: IModelExtended | null) => {
+export const getPythonModelCode = ({ model, token }: { model?: IModelExtended | null; token?: string }) => {
     return `from openai import OpenAI
-client = OpenAI()
+client = OpenAI(
+    api_key="${token}"
+    base_url="${getModelGateway(model?.base_url ?? '')}"
+)
 
 response = client.chat.completions.create(
   model="${model?.name ?? ''}",
@@ -15,10 +20,10 @@ response = client.chat.completions.create(
 )`;
 };
 
-export const getCurlModelCode = (model?: IModelExtended | null) => {
-    return `curl https://api.openai.com/v1/chat/completions \\
+export const getCurlModelCode = ({ model, token }: { model?: IModelExtended | null; token?: string }) => {
+    return `curl ${getModelGateway(model?.base_url ?? '')} \\
   -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer $OPENAI_API_KEY" \\
+  -H "Authorization: Bearer ${token}" \\
   -d '{
   "model": "${model?.name ?? ''}",
   "messages": [],

diff --git a/frontend/src/pages/Models/Details/index.tsx b/frontend/src/pages/Models/Details/index.tsx
@@ -20,9 +20,8 @@ import {
     Loader,
     Modal,
     NavigateLink,
-    SelectCSD,
-    SelectCSDProps,
     SpaceBetween,
+    Tabs,
 } from 'components';
 
 import { useAppSelector, useBreadcrumbs, useNotifications } from 'hooks';
@@ -49,17 +48,17 @@ const MESSAGE_ROLE_MAP: Record<Role, string> = {
     assistant: 'Assistant',
 };
 
-const VIEW_CODE_TYPE_OPTIONS = [
-    { label: 'Python', value: 'python' },
-    { label: 'Curl', value: 'curl' },
-];
+enum CodeTab {
+    Python = 'python',
+    Curl = 'curl',
+}
 
 export const ModelDetails: React.FC = () => {
     const { t } = useTranslation();
     const token = useAppSelector(selectAuthToken);
     const [messages, setMessages] = useState<Message[]>([]);
     const [viewCodeVisible, setViewCodeVisible] = useState<boolean>(false);
-    const [selectedCode, setSelectedCode] = useState<SelectCSDProps.Option>(VIEW_CODE_TYPE_OPTIONS[0]);
+    const [codeTab, setCodeTab] = useState<CodeTab>(CodeTab.Python);
     const [loading, setLoading] = useState<boolean>(false);
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
@@ -282,15 +281,15 @@ export const ModelDetails: React.FC = () => {
         }
     };
 
-    const pythonCode = getPythonModelCode(modelData);
+    const pythonCode = getPythonModelCode({ model: modelData, token });
 
-    const curlCode = getCurlModelCode(modelData);
+    const curlCode = getCurlModelCode({ model: modelData, token });
 
     const onCopyCode = () => {
-        switch (selectedCode.value) {
-            case VIEW_CODE_TYPE_OPTIONS[0].value:
+        switch (codeTab) {
+            case CodeTab.Python:
                 return copyToClipboard(pythonCode);
-            case VIEW_CODE_TYPE_OPTIONS[1].value:
+            case CodeTab.Curl:
                 return copyToClipboard(curlCode);
         }
     };
@@ -413,21 +412,27 @@ export const ModelDetails: React.FC = () => {
                             <Box>{t('models.details.view_code_description')}</Box>
 
                             <div className={css.viewCodeControls}>
-                                <SelectCSD
-                                    options={VIEW_CODE_TYPE_OPTIONS}
-                                    selectedOption={selectedCode}
-                                    expandToViewport={true}
-                                    onChange={(event) => {
-                                        setSelectedCode(event.detail.selectedOption);
-                                    }}
-                                />
+                                <div className={css.copyButton}>
+                                    <Button iconName="copy" onClick={onCopyCode}></Button>
+                                </div>
 
-                                <Button iconName="copy" onClick={onCopyCode}></Button>
+                                <Tabs
+                                    onChange={({ detail }) => setCodeTab(detail.activeTabId as CodeTab)}
+                                    activeTabId={codeTab}
+                                    tabs={[
+                                        {
+                                            label: 'Python',
+                                            id: CodeTab.Python,
+                                            content: <Code>{pythonCode}</Code>,
+                                        },
+                                        {
+                                            label: 'Curl',
+                                            id: CodeTab.Curl,
+                                            content: <Code>{curlCode}</Code>,
+                                        },
+                                    ]}
+                                />
                             </div>
-
-                            {selectedCode.value === VIEW_CODE_TYPE_OPTIONS[0].value && <Code>{pythonCode}</Code>}
-
-                            {selectedCode.value === VIEW_CODE_TYPE_OPTIONS[1].value && <Code>{curlCode}</Code>}
                         </SpaceBetween>
                     </Modal>
                 </>

diff --git a/frontend/src/pages/Models/Details/styles.module.scss b/frontend/src/pages/Models/Details/styles.module.scss
@@ -78,8 +78,14 @@
 }
 
 .viewCodeControls {
+    position: relative;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px
+    flex-direction: column;
+    gap: 20px;
+
+    .copyButton {
+        position: absolute;
+        right: 20px;
+        top: 80px;
+    }
 }
diff --git a/frontend/src/pages/Models/List/types.ts b/frontend/src/pages/Models/List/types.ts
@@ -1,4 +1,4 @@
-export interface IModelExtended extends IModel {
+export interface IModelExtended extends Partial<IModel> {
     run_name: string;
     project_name: string;
     submitted_at: string;

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