fix: pathname file install BE

web-app/src/routes/settings/providers/$providerName.tsx

@@ -1,117 +1,117 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Card, CardItem } from '@/containers/Card'
 import HeaderPage from '@/containers/HeaderPage'
 import SettingsMenu from '@/containers/SettingsMenu'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { cn, getProviderTitle } from '@/lib/utils'
 import {
   createFileRoute,
   Link,
   useParams,
   useSearch,
 } from '@tanstack/react-router'
 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 { ImportVisionModelDialog } from '@/containers/dialogs/ImportVisionModelDialog'
 import { ModelSetting } from '@/containers/ModelSetting'
 import { DialogDeleteModel } from '@/containers/dialogs/DeleteModel'
 import { FavoriteModelAction } from '@/containers/FavoriteModelAction'
 import Joyride, { CallBackProps, STATUS } from 'react-joyride'
 import { CustomTooltipJoyRide } from '@/containers/CustomeTooltipJoyRide'
 import { route } from '@/constants/routes'
 import DeleteProvider from '@/containers/dialogs/DeleteProvider'
 import { useServiceHub } from '@/hooks/useServiceHub'
 import { localStorageKey } from '@/constants/localStorage'
 import { Button } from '@/components/ui/button'
 import {
   IconFolderPlus,
   IconLoader,
   IconRefresh,
   IconUpload,
 } from '@tabler/icons-react'
 import { toast } from 'sonner'
 import { useCallback, useEffect, useState } from 'react'
 import { predefinedProviders } from '@/consts/providers'
 import { useModelLoad } from '@/hooks/useModelLoad'
 import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
 import { PlatformFeatures } from '@/lib/platform/const'
 import { PlatformFeature } from '@/lib/platform/types'
 import { useBackendUpdater } from '@/hooks/useBackendUpdater'
 
 // as route.threadsDetail
 export const Route = createFileRoute('/settings/providers/$providerName')({
   component: ProviderDetail,
   validateSearch: (search: Record<string, unknown>): { step?: string } => {
     // validate and parse the search params into a typed state
     return {
       step: String(search?.step),
     }
   },
 })
 
 function ProviderDetail() {
   const { t } = useTranslation()
   const serviceHub = useServiceHub()
   const { setModelLoadError } = useModelLoad()
   const steps = [
     {
       target: '.first-step-setup-remote-provider',
       title: t('providers:joyride.chooseProviderTitle'),
       disableBeacon: true,
       content: t('providers:joyride.chooseProviderContent'),
     },
     {
       target: '.second-step-setup-remote-provider',
       title: t('providers:joyride.getApiKeyTitle'),
       disableBeacon: true,
       content: t('providers:joyride.getApiKeyContent'),
     },
     {
       target: '.third-step-setup-remote-provider',
       title: t('providers:joyride.insertApiKeyTitle'),
       disableBeacon: true,
       content: t('providers:joyride.insertApiKeyContent'),
     },
   ]
   const { step } = useSearch({ from: Route.id })
   const [activeModels, setActiveModels] = useState<string[]>([])
   const [loadingModels, setLoadingModels] = useState<string[]>([])
   const [refreshingModels, setRefreshingModels] = useState(false)
   const [isCheckingBackendUpdate, setIsCheckingBackendUpdate] = useState(false)
   const [isInstallingBackend, setIsInstallingBackend] = useState(false)
   const { checkForUpdate: checkForBackendUpdate, installBackend } =
     useBackendUpdater()
   const { providerName } = useParams({ from: Route.id })
   const { getProviderByName, setProviders, updateProvider } = useModelProvider()
   const provider = getProviderByName(providerName)
   const isSetup = step === 'setup_remote_provider'
 
   // Check if llamacpp provider needs backend configuration
   const needsBackendConfig =
     provider?.provider === 'llamacpp' &&
     provider.settings?.some(
       (setting) =>
         setting.key === 'version_backend' &&
         (setting.controller_props.value === 'none' ||
           setting.controller_props.value === '' ||
           !setting.controller_props.value)
     )
 
   const handleModelImportSuccess = async (importedModelName?: string) => {
     // Refresh the provider to update the models list
     await serviceHub.providers().getProviders().then(setProviders)
 
     // If a model was imported and it might have vision capabilities, check and update
     if (importedModelName && providerName === 'llamacpp') {
       try {
         const mmprojExists = await serviceHub
           .models()
           .checkMmprojExists(importedModelName)
         if (mmprojExists) {
           // Get the updated provider after refresh
           const { getProviderByName, updateProvider: updateProviderState } =
             useModelProvider.getState()
@@ -357,12 +357,9 @@
 
       if (selectedFile && typeof selectedFile === 'string') {
         // Process the file path: replace spaces with dashes and convert to lowercase
-        const processedFilePath = selectedFile
-          .replace(/\s+/g, '-')
-          .toLowerCase()
 
         // Install the backend using the llamacpp extension
-        await installBackend(processedFilePath)
+        await installBackend(selectedFile)
 
         // Extract filename from the selected file path and replace spaces with dashes
         const fileName = (