fix: add worker token do not update

src/pages/llmodels/components/api-access-info.tsx

@@ -17,10 +17,11 @@ import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { modelCategoriesMap } from '../config';
 import { ListItem } from '../config/types';
+import useGenericProxy from '../hooks/use-generic-proxy';
 
 const GPUSTACK_API = GPUSTACK_API_BASE_URL;
 
@@ -75,7 +76,7 @@ const Tips = styled.div`
     gap: 8px;
   }
   dd {
-    margin-bottom: 16px;
+    margin-bottom: 0;
   }
 `;
 
@@ -98,21 +99,22 @@ interface ApiAccessInfoProps {
 const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
   const intl = useIntl();
   const navigate = useNavigate();
+  const { GenericProxyCommandCode, openProxyModal } = useGenericProxy();
 
-  const getModelCategory = useMemoizedFn((categories: string[]) => {
+  const getProxyEndPoint = useMemoizedFn((categories: string[]) => {
     for (const [category, config] of Object.entries(API_MAP)) {
       if (categories.includes(category)) {
         return `${MODEL_PROXY}${config.api}`;
       }
     }
-    return `${MODEL_PROXY}${CHAT_API}`;
+    return `${window.location.origin}${MODEL_PROXY}/<YOUR_API_PATH>`;
   });
 
   const endPoint = useMemo(() => {
     if (!data.generic_proxy) {
       return `${window.location.origin}/${GPUSTACK_API}`;
     }
-    return getModelCategory(data.categories || []);
+    return getProxyEndPoint(data.categories || []);
   }, [data]);
 
   const isRanker = useMemo(() => {
@@ -123,6 +125,12 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
     onClose();
   };
 
+  useEffect(() => {
+    if (open && data.generic_proxy) {
+      openProxyModal(data);
+    }
+  }, [open, data, openProxyModal]);
+
   return (
     <ScrollerModal
       open={open}
@@ -130,7 +138,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
         top: '20%'
       }}
       title={intl.formatMessage({ id: 'models.table.button.apiAccessInfo' })}
-      width={550}
+      width={600}
       destroyOnHidden
       closable={true}
       maskClosable={false}
@@ -156,12 +164,17 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           ></dd>
         </dl>
       </Tips>
+      {data.generic_proxy && (
+        <div style={{ paddingLeft: 20, marginBottom: 12 }}>
+          {GenericProxyCommandCode}
+        </div>
+      )}
       <ApiAccessInfoWrapper>
         <span className="label">
           {intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
         </span>
         <span className="value">
-          <AutoTooltip ghost maxWidth={data.generic_proxy ? 300 : 180}>
+          <AutoTooltip ghost maxWidth={data.generic_proxy ? 400 : 180}>
             {endPoint}
           </AutoTooltip>
           {!data.generic_proxy && (

src/pages/llmodels/forms/kv-cache.tsx

@@ -106,7 +106,7 @@ const KVCacheForm = () => {
               )}
               min={0}
               step={1}
-              precision={1}
+              precision={0}
             />
           </Form.Item>
           <Form.Item<FormData> name={['extended_kv_cache', 'chunk_size']}>

src/pages/llmodels/hooks/use-generic-proxy.tsx

@@ -0,0 +1,149 @@
+import CommandViewer from '@/pages/_components/command-viewer';
+import {
+  AUDIO_SPEECH_TO_TEXT_API,
+  AUDIO_TEXT_TO_SPEECH_API,
+  CHAT_API,
+  CREAT_IMAGE_API,
+  EMBEDDING_API,
+  MODEL_PROXY,
+  RERANKER_API
+} from '@/pages/playground/apis';
+import {
+  generateSpeechToTextCurlCode,
+  generateTextToSpeechCurlCode
+} from '@/pages/playground/view-code/audio';
+import { generateEmbeddingCurlCode } from '@/pages/playground/view-code/embedding';
+import { generateImageCurlCode } from '@/pages/playground/view-code/image';
+import { generateLLmCurlCode } from '@/pages/playground/view-code/llm';
+import { generateRerankCurlCode } from '@/pages/playground/view-code/rerank';
+import { useMemoizedFn } from 'ahooks';
+import { useState } from 'react';
+import { modelCategoriesMap } from '../config';
+
+const API_MAP: Record<
+  string,
+  { api: string; parameters: any; generateCurlCode: (args: any) => string }
+> = {
+  [modelCategoriesMap.embedding]: {
+    api: EMBEDDING_API,
+    parameters: {
+      query: 'What are the benefits of regular exercise?',
+      documents: [
+        'Regular physical activity helps improve cardiovascular health and mental well-being.',
+        'Eating too much sugar can lead to health issues.',
+        'Exercise is often done in gyms or outdoors.'
+      ]
+    },
+    generateCurlCode: generateEmbeddingCurlCode
+  },
+  [modelCategoriesMap.llm]: {
+    api: CHAT_API,
+    parameters: {
+      messages: [
+        {
+          role: 'user',
+          content: 'Hello, introduce yourself'
+        }
+      ]
+    },
+    generateCurlCode: generateLLmCurlCode
+  },
+  [modelCategoriesMap.image]: {
+    api: CREAT_IMAGE_API,
+    parameters: {},
+    generateCurlCode: generateImageCurlCode
+  },
+  [modelCategoriesMap.text_to_speech]: {
+    api: AUDIO_TEXT_TO_SPEECH_API,
+    parameters: {
+      response_format: 'mp3',
+      input: ''
+    },
+    generateCurlCode: generateTextToSpeechCurlCode
+  },
+  [modelCategoriesMap.speech_to_text]: {
+    api: AUDIO_SPEECH_TO_TEXT_API,
+    parameters: {},
+    generateCurlCode: generateSpeechToTextCurlCode
+  },
+  [modelCategoriesMap.reranker]: {
+    api: RERANKER_API,
+    parameters: {
+      messages: [
+        {
+          role: 'user',
+          content: 'Hello, introduce yourself'
+        }
+      ]
+    },
+    generateCurlCode: generateRerankCurlCode
+  }
+};
+
+const langOptions = [{ label: 'Curl', value: 'bash' }];
+
+const useGenericProxy = () => {
+  const [modalStatus, setModalStatus] = useState<{
+    codeValue: string;
+  }>({ codeValue: '' });
+
+  const getModelCategory = (categories: string[]) => {
+    for (const [category, config] of Object.entries(API_MAP)) {
+      if (categories.includes(category)) {
+        return {
+          category,
+          api: `${MODEL_PROXY}${config.api}`,
+          parameters: config.parameters,
+          generateCurlCode: config.generateCurlCode
+        };
+      }
+    }
+    return {
+      category: modelCategoriesMap.llm,
+      api: CHAT_API,
+      parameters: {
+        messages: [
+          {
+            role: 'user',
+            content: 'Hello, introduce yourself'
+          }
+        ]
+      },
+      generateCurlCode: generateLLmCurlCode
+    };
+  };
+
+  const openProxyModal = useMemoizedFn((data?: any) => {
+    const { api, generateCurlCode, parameters } = getModelCategory(
+      data?.categories || []
+    );
+
+    setModalStatus({
+      codeValue: generateCurlCode({
+        api,
+        modelProxy: true,
+        parameters: {
+          model: data?.name || ''
+        }
+      })
+    });
+  });
+
+  const GenericProxyCommandCode = (
+    <CommandViewer
+      code={modalStatus.codeValue}
+      copyText={modalStatus.codeValue}
+      options={langOptions}
+      defaultValue={'bash'}
+      height={200}
+    ></CommandViewer>
+  );
+
+  return {
+    GenericProxyCommandCode,
+    openProxyModal,
+    setModalStatus
+  };
+};
+
+export default useGenericProxy;