refactor(web-app): extract download handler in ModelDownloadAction

Author: github-roushan

web-app/src/containers/ModelDownloadAction.tsx

@@ -55,6 +55,101 @@ export const ModelDownloadAction = ({
     [navigate]
   )
 
+  const handleDownloadModel = useCallback(async () => {
+    const preflight = await serviceHub
+      .models()
+      .preflightArtifactAccess(variant.path, huggingfaceToken)
+
+    const repoPage = `https://huggingface.co/${model.model_name}`
+
+    if (!preflight.ok) {
+      if (preflight.reason === 'AUTH_REQUIRED') {
+        toast.error('Hugging Face token required', {
+          description:
+            'This model requires a Hugging Face access token. Add your token in Settings and retry.',
+          action: {
+            label: 'Open Settings',
+            onClick: () =>
+              navigate({
+                to: route.settings.general,
+                params: {},
+              }),
+          },
+        })
+        return
+      }
+
+      if (preflight.reason === 'LICENSE_NOT_ACCEPTED') {
+        toast.error('Accept model license on Hugging Face', {
+          description:
+            'You must accept the model’s license on its Hugging Face page before downloading.',
+          action: {
+            label: 'Open model page',
+            onClick: () => window.open(repoPage, '_blank'),
+          },
+        })
+        return
+      }
+
+      if (preflight.reason === 'RATE_LIMITED') {
+        toast.error('Rate limited by Hugging Face', {
+          description:
+            'You have been rate-limited. Adding a token can increase rate limits. Please try again later.',
+          action: {
+            label: 'Open Settings',
+            onClick: () =>
+              navigate({
+                to: route.settings.general,
+                params: {},
+              }),
+          },
+        })
+        return
+      }
+
+      if (preflight.reason === 'NOT_FOUND') {
+        toast.error('File not found', {
+          description:
+            'The requested artifact was not found in the repository. Try another quant or check the model page.',
+          action: {
+            label: 'Open model page',
+            onClick: () => window.open(repoPage, '_blank'),
+          },
+        })
+        return
+      }
+
+      toast.error('Model download error', {
+        description:
+          'We could not start the download. Check your network or try again later.',
+      })
+      return
+    }
+
+    addLocalDownloadingModel(variant.model_id)
+    serviceHub
+      .models()
+      .pullModelWithMetadata(
+        variant.model_id,
+        variant.path,
+        (
+          model.mmproj_models?.find(
+            (e) => e.model_id.toLowerCase() === 'mmproj-f16'
+          ) || model.mmproj_models?.[0]
+        )?.path,
+        huggingfaceToken
+      )
+  }, [
+    serviceHub,
+    variant.path,
+    variant.model_id,
+    huggingfaceToken,
+    model.model_name,
+    model.mmproj_models,
+    navigate,
+    addLocalDownloadingModel,
+  ])
+
   const isDownloading =
     localDownloadingModels.has(variant.model_id) ||
     downloadProcesses.some((e) => e.id === variant.model_id)
@@ -99,92 +194,7 @@ export const ModelDownloadAction = ({
     <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"
       title={t('hub:downloadModel')}
-      onClick={async () => {
-        const preflight = await serviceHub
-          .models()
-          .preflightArtifactAccess(variant.path, huggingfaceToken)
-
-        const repoPage = `https://huggingface.co/${model.model_name}`
-
-        if (!preflight.ok) {
-          if (preflight.reason === 'AUTH_REQUIRED') {
-            toast.error('Hugging Face token required', {
-              description:
-                'This model requires a Hugging Face access token. Add your token in Settings and retry.',
-              action: {
-                label: 'Open Settings',
-                onClick: () =>
-                  navigate({
-                    to: route.settings.general,
-                    params: {},
-                  }),
-              },
-            })
-            return
-          }
-
-          if (preflight.reason === 'LICENSE_NOT_ACCEPTED') {
-            toast.error('Accept model license on Hugging Face', {
-              description:
-                'You must accept the model’s license on its Hugging Face page before downloading.',
-              action: {
-                label: 'Open model page',
-                onClick: () => window.open(repoPage, '_blank'),
-              },
-            })
-            return
-          }
-
-          if (preflight.reason === 'RATE_LIMITED') {
-            toast.error('Rate limited by Hugging Face', {
-              description:
-                'You have been rate-limited. Adding a token can increase rate limits. Please try again later.',
-              action: {
-                label: 'Open Settings',
-                onClick: () =>
-                  navigate({
-                    to: route.settings.general,
-                    params: {},
-                  }),
-              },
-            })
-            return
-          }
-
-          if (preflight.reason === 'NOT_FOUND') {
-            toast.error('File not found', {
-              description:
-                'The requested artifact was not found in the repository. Try another quant or check the model page.',
-              action: {
-                label: 'Open model page',
-                onClick: () => window.open(repoPage, '_blank'),
-              },
-            })
-            return
-          }
-
-        
-          toast.error('Model download error', {
-            description:
-              'We could not start the download. Check your network or try again later.',
-          })
-          return
-        }
-
-        addLocalDownloadingModel(variant.model_id)
-        serviceHub
-          .models()
-          .pullModelWithMetadata(
-            variant.model_id,
-            variant.path,
-            (
-              model.mmproj_models?.find(
-                (e) => e.model_id.toLowerCase() === 'mmproj-f16'
-              ) || model.mmproj_models?.[0]
-            )?.path,
-            huggingfaceToken
-          )
-      }}
+      onClick={handleDownloadModel}
     >
       <IconDownload size={16} className="text-main-view-fg/80" />
     </div>