chore: generic_prox ux

src/pages/llmodels/components/table-list.tsx

@@ -58,6 +58,7 @@ import {
   SourceType
 } from '../config/types';
 import useFormInitialValues from '../hooks/use-form-initial-values';
+import useGenericProxy from '../hooks/use-generic-proxy';
 import useModelsColumns from '../hooks/use-models-columns';
 import AccessControlModal from './access-control-modal';
 import APIAccessInfoModal from './api-access-info';
@@ -195,6 +196,8 @@ const Models: React.FC<ModelsProps> = ({
   });
   const modalRef = useRef<any>(null);
 
+  const { GenericProxyModal, openProxyModal } = useGenericProxy();
+
   useEffect(() => {
     if (deleteIds?.length) {
       rowSelection.removeSelectedKey(deleteIds);
@@ -456,6 +459,10 @@ const Models: React.FC<ModelsProps> = ({
         handleViewAPIInfo(row);
       }
 
+      if (val === 'proxy') {
+        openProxyModal(row);
+      }
+
       if (val === 'stop') {
         modalRef.current?.show({
           content: 'models.instances',
@@ -789,6 +796,7 @@ const Models: React.FC<ModelsProps> = ({
         currentData={openAccessControlModal.currentData}
         action={openAccessControlModal.action}
       ></AccessControlModal>
+      {GenericProxyModal}
     </>
   );
 };

src/pages/llmodels/config/button-actions.ts

@@ -50,11 +50,11 @@ export const ActionList: ActionItem[] = [
     key: 'chat',
     icon: icons.ExperimentOutlined
   },
-  // {
-  //   label: 'models.form.generic_proxy.button',
-  //   key: 'proxy',
-  //   icon: icons.CaptivePortal
-  // },
+  {
+    label: 'models.form.generic_proxy.button',
+    key: 'proxy',
+    icon: icons.CaptivePortal
+  },
   {
     label: 'models.table.button.apiAccessInfo',
     key: 'api',
@@ -197,6 +197,7 @@ export const modelFileActions = [
 
 export const categoryToPathMap: Record<string, string> = {
   [modelCategoriesMap.llm]: '/playground/chat',
+  [modelCategoriesMap.image]: '/playground/text-to-image',
   [modelCategoriesMap.text_to_speech]: '/playground/speech?type=tts',
   [modelCategoriesMap.speech_to_text]: '/playground/speech?type=stt',
   [modelCategoriesMap.reranker]: '/playground/rerank',

src/pages/llmodels/config/index.ts

@@ -287,6 +287,7 @@ export const modelCategoriesMap = {
 
 export const categoryOptions = [
   { label: 'LLM', value: modelCategoriesMap.llm },
+  { label: 'Image', value: modelCategoriesMap.image },
   { label: 'Embedding', value: modelCategoriesMap.embedding },
   { label: 'Reranker', value: modelCategoriesMap.reranker },
   { label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },

src/pages/llmodels/forms/advance-config.tsx

@@ -133,7 +133,7 @@ const AdvanceConfig = () => {
           })}
         ></CheckboxField>
       </Form.Item>
-      {/* <Form.Item<FormData>
+      <Form.Item<FormData>
         name="generic_proxy"
         valuePropName="checked"
         style={{ marginBottom: 8 }}
@@ -146,7 +146,7 @@ const AdvanceConfig = () => {
             id: 'models.form.generic_proxy'
           })}
         ></CheckboxField>
-      </Form.Item> */}
+      </Form.Item>
     </>
   );
 };

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

@@ -1,15 +1,62 @@
 import ScrollerModal from '@/components/scroller-modal';
 import CommandViewer from '@/pages/_components/command-viewer';
-import { GPUSTACK_API, OPENAI_COMPATIBLE } from '@/pages/playground/apis';
+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 { formatCurlArgs } from '@/pages/playground/view-code/utils';
 import { useIntl } from '@umijs/max';
 import { useState } from 'react';
+import { modelCategoriesMap } from '../config';
+
+const API_MAP: Record<
+  string,
+  { api: string; generateCurlCode: (args: any) => string }
+> = {
+  [modelCategoriesMap.embedding]: {
+    api: EMBEDDING_API,
+    generateCurlCode: generateEmbeddingCurlCode
+  },
+  [modelCategoriesMap.llm]: {
+    api: CHAT_API,
+    generateCurlCode: generateLLmCurlCode
+  },
+  [modelCategoriesMap.image]: {
+    api: CREAT_IMAGE_API,
+    generateCurlCode: generateImageCurlCode
+  },
+  [modelCategoriesMap.text_to_speech]: {
+    api: AUDIO_TEXT_TO_SPEECH_API,
+    generateCurlCode: generateTextToSpeechCurlCode
+  },
+  [modelCategoriesMap.speech_to_text]: {
+    api: AUDIO_SPEECH_TO_TEXT_API,
+    generateCurlCode: generateSpeechToTextCurlCode
+  },
+  [modelCategoriesMap.reranker]: {
+    api: RERANKER_API,
+    generateCurlCode: generateRerankCurlCode
+  }
+};
 
 const langOptions = [{ label: 'Curl', value: 'bash' }];
 
 const generateCode = ({ api: url, parameters }: Record<string, any>) => {
   const host = window.location.origin;
-  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
+  const api = '/model/proxy/v1/';
 
   // ========================= Curl =========================
   const curlCode = `
@@ -17,6 +64,8 @@ curl ${host}${api} \\
 -H "Content-Type: application/json" \\
 -H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
 ${formatCurlArgs(parameters, false)}`.trim();
+
+  return curlCode;
 };
 
 const useGenericProxy = () => {
@@ -33,38 +82,67 @@ const useGenericProxy = () => {
     });
   };
 
+  const getModelCategory = (categories: string[]) => {
+    for (const [category, config] of Object.entries(API_MAP)) {
+      if (categories.includes(category)) {
+        return {
+          category,
+          api: `${MODEL_PROXY}${config.api}`,
+          generateCurlCode: config.generateCurlCode
+        };
+      }
+    }
+    return {
+      category: modelCategoriesMap.llm,
+      api: CHAT_API,
+      generateCurlCode: generateLLmCurlCode
+    };
+  };
+
   const openProxyModal = (data?: any) => {
+    const { api, generateCurlCode } = getModelCategory(data?.categories || []);
+
     setModalStatus({
       open: true,
-      codeValue: data?.generic_proxy_command || ''
+      codeValue: generateCurlCode({
+        api,
+        modelProxy: true,
+        parameters: {
+          model: data?.name || ''
+        }
+      })
     });
   };
 
-  const GenericProxyModal = () => {
-    return (
-      <ScrollerModal
-        title={intl.formatMessage({
-          id: 'models.form.generic_title.button'
-        })}
-        open={modalStatus.open}
-        centered={true}
-        onCancel={onCancel}
-        destroyOnHidden={true}
-        closeIcon={true}
-        maskClosable={false}
-        keyboard={false}
-        width={700}
-        footer={false}
-      >
-        <CommandViewer
-          code={modalStatus.codeValue}
-          copyText={modalStatus.codeValue}
-          options={langOptions}
-          defaultValue={'bash'}
-        ></CommandViewer>
-      </ScrollerModal>
-    );
-  };
+  const GenericProxyModal = (
+    <ScrollerModal
+      title={intl.formatMessage({
+        id: 'models.form.generic_proxy.button'
+      })}
+      open={modalStatus.open}
+      centered={true}
+      onCancel={onCancel}
+      destroyOnHidden={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={700}
+      footer={false}
+    >
+      <div
+        style={{ marginBottom: 8 }}
+        dangerouslySetInnerHTML={{
+          __html: intl.formatMessage({ id: 'models.table.genericProxy' })
+        }}
+      ></div>
+      <CommandViewer
+        code={modalStatus.codeValue}
+        copyText={modalStatus.codeValue}
+        options={langOptions}
+        defaultValue={'bash'}
+      ></CommandViewer>
+    </ScrollerModal>
+  );
 
   return {
     GenericProxyModal,