feat: #5917 - model tool use capability should be auto detected

2025-08-15 16:30:25 +07:00 · 2025-08-15 16:30:25 +07:00 · bfe671d7b4
commit bfe671d7b4
parent 8f2f3ca352
10 changed files with 125 additions and 344 deletions
--- a/core/src/browser/extensions/engines/AIEngine.ts
+++ b/core/src/browser/extensions/engines/AIEngine.ts
@ -270,4 +270,10 @@ export abstract class AIEngine extends BaseExtension {
   * Optional method to get the underlying chat client
   */
  getChatClient?(sessionId: string): any
+
+  /**
+   * Check if a tool is supported by the model
+   * @param modelId 
+   */
+  abstract isToolSupported(modelId: string): Promise<boolean>
 }
--- a/core/src/types/api/index.ts
+++ b/core/src/types/api/index.ts
@ -58,6 +58,7 @@ export enum AppEvent {
  onAppUpdateDownloadUpdate = 'onAppUpdateDownloadUpdate',
  onAppUpdateDownloadError = 'onAppUpdateDownloadError',
  onAppUpdateDownloadSuccess = 'onAppUpdateDownloadSuccess',
+  onModelImported = 'onModelImported',

  onUserSubmitQuickAsk = 'onUserSubmitQuickAsk',
  onSelectedText = 'onSelectedText',
--- a/extensions/llamacpp-extension/src/index.ts
+++ b/extensions/llamacpp-extension/src/index.ts
@ -19,6 +19,7 @@ import {
  ImportOptions,
  chatCompletionRequest,
  events,
+  AppEvent,
 } from '@janhq/core'

 import { error, info, warn } from '@tauri-apps/plugin-log'
@ -32,6 +33,7 @@ import {
 import { invoke } from '@tauri-apps/api/core'
 import { getProxyConfig } from './util'
 import { basename } from '@tauri-apps/api/path'
+import { readGgufMetadata } from '@janhq/tauri-plugin-llamacpp-api'

 type LlamacppConfig = {
  version_backend: string
@ -1085,6 +1087,12 @@ export default class llamacpp_extension extends AIEngine {
      data: modelConfig,
      savePath: configPath,
    })
+    events.emit(AppEvent.onModelImported, {
+      modelId,
+      modelPath,
+      mmprojPath,
+      size_bytes,
+    })
  }

  override async abortImport(modelId: string): Promise<void> {
@ -1172,7 +1180,7 @@ export default class llamacpp_extension extends AIEngine {
    const [version, backend] = cfg.version_backend.split('/')
    if (!version || !backend) {
      throw new Error(
-        "Initial setup for the backend failed due to a network issue. Please restart the app!"
+        'Initial setup for the backend failed due to a network issue. Please restart the app!'
      )
    }

@ -1279,11 +1287,14 @@ export default class llamacpp_extension extends AIEngine {

    try {
      // TODO: add LIBRARY_PATH
-      const sInfo = await invoke<SessionInfo>('plugin:llamacpp|load_llama_model', {
-        backendPath,
-        libraryPath,
-        args,
-      })
+      const sInfo = await invoke<SessionInfo>(
+        'plugin:llamacpp|load_llama_model',
+        {
+          backendPath,
+          libraryPath,
+          args,
+        }
+      )
      return sInfo
    } catch (error) {
      logger.error('Error in load command:\n', error)
@ -1299,9 +1310,12 @@ export default class llamacpp_extension extends AIEngine {
    const pid = sInfo.pid
    try {
      // Pass the PID as the session_id
-      const result = await invoke<UnloadResult>('plugin:llamacpp|unload_llama_model', {
-        pid: pid,
-      })
+      const result = await invoke<UnloadResult>(
+        'plugin:llamacpp|unload_llama_model',
+        {
+          pid: pid,
+        }
+      )

      // If successful, remove from active sessions
      if (result.success) {
@ -1437,9 +1451,12 @@ export default class llamacpp_extension extends AIEngine {

  private async findSessionByModel(modelId: string): Promise<SessionInfo> {
    try {
-      let sInfo = await invoke<SessionInfo>('plugin:llamacpp|find_session_by_model', {
-        modelId,
-      })
+      let sInfo = await invoke<SessionInfo>(
+        'plugin:llamacpp|find_session_by_model',
+        {
+          modelId,
+        }
+      )
      return sInfo
    } catch (e) {
      logger.error(e)
@ -1516,7 +1533,9 @@ export default class llamacpp_extension extends AIEngine {

  override async getLoadedModels(): Promise<string[]> {
    try {
-      let models: string[] = await invoke<string[]>('plugin:llamacpp|get_loaded_models')
+      let models: string[] = await invoke<string[]>(
+        'plugin:llamacpp|get_loaded_models'
+      )
      return models
    } catch (e) {
      logger.error(e)
@ -1599,14 +1618,31 @@ export default class llamacpp_extension extends AIEngine {
    throw new Error('method not implemented yet')
  }

-  private async loadMetadata(path: string): Promise<GgufMetadata> {
-    try {
-      const data = await invoke<GgufMetadata>('plugin:llamacpp|read_gguf_metadata', {
-        path: path,
-      })
-      return data
-    } catch (err) {
-      throw err
-    }
+  /**
+   * Check if a tool is supported by the model
+   * Currently read from GGUF chat_template
+   * @param modelId
+   * @returns
+   */
+  async isToolSupported(modelId: string): Promise<boolean> {
+    const janDataFolderPath = await getJanDataFolderPath()
+    const modelConfigPath = await joinPath([
+      this.providerPath,
+      'models',
+      modelId,
+      'model.yml',
+    ])
+    const modelConfig = await invoke<ModelConfig>('read_yaml', {
+      path: modelConfigPath,
+    })
+    // model option is required
+    // NOTE: model_path and mmproj_path can be either relative to Jan's data folder or absolute path
+    const modelPath = await joinPath([
+      janDataFolderPath,
+      modelConfig.model_path,
+    ])
+    return (await readGgufMetadata(modelPath)).metadata?.[
+      'tokenizer.chat_template'
+    ]?.includes('tools')
  }
 }
--- a/web-app/src/containers/DownloadManegement.tsx
+++ b/web-app/src/containers/DownloadManegement.tsx
@ -6,10 +6,8 @@ import {
 import { Progress } from '@/components/ui/progress'
 import { useDownloadStore } from '@/hooks/useDownloadStore'
 import { useLeftPanel } from '@/hooks/useLeftPanel'
-import { useModelProvider } from '@/hooks/useModelProvider'
 import { useAppUpdater } from '@/hooks/useAppUpdater'
 import { abortDownload } from '@/services/models'
-import { getProviders } from '@/services/providers'
 import { DownloadEvent, DownloadState, events, AppEvent } from '@janhq/core'
 import { IconDownload, IconX } from '@tabler/icons-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@ -18,7 +16,6 @@ import { useTranslation } from '@/i18n/react-i18next-compat'

 export function DownloadManagement() {
  const { t } = useTranslation()
-  const { setProviders } = useModelProvider()
  const { open: isLeftPanelOpen } = useLeftPanel()
  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
  const {
@ -185,7 +182,6 @@ export function DownloadManagement() {
      console.debug('onFileDownloadSuccess', state)
      removeDownload(state.modelId)
      removeLocalDownloadingModel(state.modelId)
-      getProviders().then(setProviders)
      toast.success(t('common:toast.downloadComplete.title'), {
        id: 'download-complete',
        description: t('common:toast.downloadComplete.description', {
@ -193,7 +189,7 @@ export function DownloadManagement() {
        }),
      })
    },
-    [removeDownload, removeLocalDownloadingModel, setProviders, t]
+    [removeDownload, removeLocalDownloadingModel, t]
  )

  useEffect(() => {
--- a/web-app/src/containers/dialogs/EditModel.tsx
+++ b/web-app/src/containers/dialogs/EditModel.tsx
@ -1,253 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Switch } from '@/components/ui/switch'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { useModelProvider } from '@/hooks/useModelProvider'
-import {
-  IconPencil,
-  IconEye,
-  IconTool,
-  // IconWorld,
-  // IconAtom,
-  IconCodeCircle2,
-} from '@tabler/icons-react'
-import { useState, useEffect } from 'react'
-import { useTranslation } from '@/i18n/react-i18next-compat'
-
-// No need to define our own interface, we'll use the existing Model type
-type DialogEditModelProps = {
-  provider: ModelProvider
-  modelId?: string // Optional model ID to edit
-}
-
-export const DialogEditModel = ({
-  provider,
-  modelId,
-}: DialogEditModelProps) => {
-  const { t } = useTranslation()
-  const { updateProvider } = useModelProvider()
-  const [selectedModelId, setSelectedModelId] = useState<string>('')
-  const [capabilities, setCapabilities] = useState<Record<string, boolean>>({
-    completion: false,
-    vision: false,
-    tools: false,
-    reasoning: false,
-    embeddings: false,
-    web_search: false,
-  })
-
-  // Initialize with the provided model ID or the first model if available
-  useEffect(() => {
-    if (modelId) {
-      setSelectedModelId(modelId)
-    } else if (provider.models && provider.models.length > 0) {
-      setSelectedModelId(provider.models[0].id)
-    }
-  }, [provider, modelId])
-
-  // Get the currently selected model
-  const selectedModel = provider.models.find(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (m: any) => m.id === selectedModelId
-  )
-
-  // Initialize capabilities from selected model
-  useEffect(() => {
-    if (selectedModel) {
-      const modelCapabilities = selectedModel.capabilities || []
-      setCapabilities({
-        completion: modelCapabilities.includes('completion'),
-        vision: modelCapabilities.includes('vision'),
-        tools: modelCapabilities.includes('tools'),
-        embeddings: modelCapabilities.includes('embeddings'),
-        web_search: modelCapabilities.includes('web_search'),
-        reasoning: modelCapabilities.includes('reasoning'),
-      })
-    }
-  }, [selectedModel])
-
-  // Track if capabilities were updated by user action
-  const [capabilitiesUpdated, setCapabilitiesUpdated] = useState(false)
-
-  // Update model capabilities - only update local state
-  const handleCapabilityChange = (capability: string, enabled: boolean) => {
-    setCapabilities((prev) => ({
-      ...prev,
-      [capability]: enabled,
-    }))
-    // Mark that capabilities were updated by user action
-    setCapabilitiesUpdated(true)
-  }
-
-  // Use effect to update the provider when capabilities are explicitly changed by user
-  useEffect(() => {
-    // Only run if capabilities were updated by user action and we have a selected model
-    if (!capabilitiesUpdated || !selectedModel) return
-
-    // Reset the flag
-    setCapabilitiesUpdated(false)
-
-    // Create updated capabilities array from the state
-    const updatedCapabilities = Object.entries(capabilities)
-      .filter(([, isEnabled]) => isEnabled)
-      .map(([capName]) => capName)
-
-    // Find and update the model in the provider
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const updatedModels = provider.models.map((m: any) => {
-      if (m.id === selectedModelId) {
-        return {
-          ...m,
-          capabilities: updatedCapabilities,
-        }
-      }
-      return m
-    })
-
-    // Update the provider with the updated models
-    updateProvider(provider.provider, {
-      ...provider,
-      models: updatedModels,
-    })
-  }, [
-    capabilitiesUpdated,
-    capabilities,
-    provider,
-    selectedModel,
-    selectedModelId,
-    updateProvider,
-  ])
-
-  if (!selectedModel) {
-    return null
-  }
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out">
-          <IconPencil size={18} className="text-main-view-fg/50" />
-        </div>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="line-clamp-1" title={selectedModel.id}>
-            {t('providers:editModel.title', { modelId: selectedModel.id })}
-          </DialogTitle>
-          <DialogDescription>
-            {t('providers:editModel.description')}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-1">
-          <h3 className="text-sm font-medium mb-3">
-            {t('providers:editModel.capabilities')}
-          </h3>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <IconTool className="size-4 text-main-view-fg/70" />
-                <span className="text-sm">
-                  {t('providers:editModel.tools')}
-                </span>
-              </div>
-              <Switch
-                id="tools-capability"
-                checked={capabilities.tools}
-                onCheckedChange={(checked) =>
-                  handleCapabilityChange('tools', checked)
-                }
-              />
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <IconEye className="size-4 text-main-view-fg/70" />
-                <span className="text-sm">
-                  {t('providers:editModel.vision')}
-                </span>
-              </div>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Switch
-                    id="vision-capability"
-                    checked={capabilities.vision}
-                    disabled={true}
-                    onCheckedChange={(checked) =>
-                      handleCapabilityChange('vision', checked)
-                    }
-                  />
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t('providers:editModel.notAvailable')}
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <IconCodeCircle2 className="size-4 text-main-view-fg/70" />
-                <span className="text-sm">
-                  {t('providers:editModel.embeddings')}
-                </span>
-              </div>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Switch
-                    id="embedding-capability"
-                    disabled={true}
-                    checked={capabilities.embeddings}
-                    onCheckedChange={(checked) =>
-                      handleCapabilityChange('embeddings', checked)
-                    }
-                  />
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t('providers:editModel.notAvailable')}
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            {/* <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <IconWorld className="size-4 text-main-view-fg/70" />
-                <span className="text-sm">Web Search</span>
-              </div>
-              <Switch
-                id="web_search-capability"
-                checked={capabilities.web_search}
-                onCheckedChange={(checked) =>
-                  handleCapabilityChange('web_search', checked)
-                }
-              />
-            </div> */}
-
-            {/* <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <IconAtom className="size-4 text-main-view-fg/70" />
-                <span className="text-sm">{t('reasoning')}</span>
-              </div>
-              <Switch
-                id="reasoning-capability"
-                checked={capabilities.reasoning}
-                onCheckedChange={(checked) =>
-                  handleCapabilityChange('reasoning', checked)
-                }
-              />
-            </div> */}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
--- a/web-app/src/providers/DataProvider.tsx
+++ b/web-app/src/providers/DataProvider.tsx
@ -17,6 +17,7 @@ import {
 import { useNavigate } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useThreads } from '@/hooks/useThreads'
+import { AppEvent, events } from '@janhq/core'

 export function DataProvider() {
  const { setProviders } = useModelProvider()
@ -70,6 +71,13 @@ export function DataProvider() {
    }
  }, [checkForUpdate])

+  useEffect(() => {
+    events.on(AppEvent.onModelImported, () => {
+      getProviders().then(setProviders)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
  const handleDeepLink = (urls: string[] | null) => {
    if (!urls) return
    console.log('Received deeplink:', urls)
--- a/web-app/src/routes/settings/providers/$providerName.tsx
+++ b/web-app/src/routes/settings/providers/$providerName.tsx
@ -22,7 +22,6 @@ import { useTranslation } from '@/i18n/react-i18next-compat'
 import Capabilities from '@/containers/Capabilities'
 import { DynamicControllerSetting } from '@/containers/dynamicControllerSetting'
 import { RenderMarkdown } from '@/containers/RenderMarkdown'
-import { DialogEditModel } from '@/containers/dialogs/EditModel'
 import { DialogAddModel } from '@/containers/dialogs/AddModel'
 import { ModelSetting } from '@/containers/ModelSetting'
 import { DialogDeleteModel } from '@/containers/dialogs/DeleteModel'
@ -556,10 +555,6 @@ function ProviderDetail() {
                          }
                          actions={
                            <div className="flex items-center gap-0.5">
-                              <DialogEditModel
-                                provider={provider}
-                                modelId={model.id}
-                              />
                              {model.settings && (
                                <ModelSetting
                                  provider={provider}
--- a/web-app/src/services/models.ts
+++ b/web-app/src/services/models.ts
@ -313,3 +313,16 @@ export const startModel = async (
    throw error
  })
 }
+
+/**
+ * Check if model support tool use capability
+ * Returned by backend engine
+ * @param modelId 
+ * @returns 
+ */
+export const isToolSupported = async (modelId: string): Promise<boolean> => {
+  const engine = getEngine()
+  if (!engine) return false
+
+  return engine.isToolSupported(modelId)
+}
--- a/web-app/src/services/providers.ts
+++ b/web-app/src/services/providers.ts
@ -1,12 +1,9 @@
 import { models as providerModels } from 'token.js'
 import { predefinedProviders } from '@/consts/providers'
 import { EngineManager, SettingComponentProps } from '@janhq/core'
-import {
-  DefaultToolUseSupportedModels,
-  ModelCapabilities,
-} from '@/types/models'
+import { ModelCapabilities } from '@/types/models'
 import { modelSettings } from '@/lib/predefined'
-import { fetchModels } from './models'
+import { fetchModels, isToolSupported } from './models'
 import { ExtensionManager } from '@/lib/extension'
 import { fetch as fetchTauri } from '@tauri-apps/plugin-http'

@ -65,52 +62,41 @@ export const getProviders = async (): Promise<ModelProvider[]> => {
          controller_props: setting.controllerProps as unknown,
        }
      }) as ProviderSetting[],
-      models: models.map((model) => ({
-        id: model.id,
-        model: model.id,
-        name: model.name,
-        description: model.description,
-        capabilities:
-          'capabilities' in model
-            ? (model.capabilities as string[])
-            : [
-                ModelCapabilities.COMPLETION,
-                ...(Object.values(DefaultToolUseSupportedModels).some((v) =>
-                  model.id.toLowerCase().includes(v.toLowerCase())
-                )
-                  ? [ModelCapabilities.TOOLS]
-                  : []),
-              ],
-        provider: providerName,
-        settings: Object.values(modelSettings).reduce(
-          (acc, setting) => {
-            let value = setting.controller_props.value
-            if (setting.key === 'ctx_len') {
-              value = 8192 // Default context length for Llama.cpp models
-            }
-            // Set temperature to 0.6 for DefaultToolUseSupportedModels
-            if (
-              Object.values(DefaultToolUseSupportedModels).some((v) =>
-                model.id.toLowerCase().includes(v.toLowerCase())
-              )
-            ) {
-              if (setting.key === 'temperature') value = 0.7 // Default temperature for tool-supported models
-              if (setting.key === 'top_k') value = 20 // Default top_k for tool-supported models
-              if (setting.key === 'top_p') value = 0.8 // Default top_p for tool-supported models
-              if (setting.key === 'min_p') value = 0 // Default min_p for tool-supported models
-            }
-            acc[setting.key] = {
-              ...setting,
-              controller_props: {
-                ...setting.controller_props,
-                value: value,
-              },
-            }
-            return acc
-          },
-          {} as Record<string, ProviderSetting>
-        ),
-      })),
+      models: await Promise.all(
+        models.map(
+          async (model) =>
+            ({
+              id: model.id,
+              model: model.id,
+              name: model.name,
+              description: model.description,
+              capabilities:
+                'capabilities' in model
+                  ? (model.capabilities as string[])
+                  : (await isToolSupported(model.id))
+                    ? [ModelCapabilities.TOOLS]
+                    : [],
+              provider: providerName,
+              settings: Object.values(modelSettings).reduce(
+                (acc, setting) => {
+                  let value = setting.controller_props.value
+                  if (setting.key === 'ctx_len') {
+                    value = 8192 // Default context length for Llama.cpp models
+                  }
+                  acc[setting.key] = {
+                    ...setting,
+                    controller_props: {
+                      ...setting.controller_props,
+                      value: value,
+                    },
+                  }
+                  return acc
+                },
+                {} as Record<string, ProviderSetting>
+              ),
+            }) as Model
+        )
+      ),
    }
    runtimeProviders.push(provider)
  }
--- a/web-app/src/types/models.ts
+++ b/web-app/src/types/models.ts
@ -14,10 +14,3 @@ export enum ModelCapabilities {
  TEXT_TO_AUDIO = 'text_to_audio',
  AUDIO_TO_TEXT = 'audio_to_text',
 }
-
-// TODO: Remove this enum when we integrate llama.cpp extension
-export enum DefaultToolUseSupportedModels {
-  JanNano = 'jan-',
-  Qwen3 = 'qwen3',
-  Lucy = 'lucy',
-}