fix(JanHub): #1158 sort model list (#1257)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

web/screens/ExploreModels/ExploreModelList/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { Model } from '@janhq/core'
 
 import ExploreModelItem from '@/screens/ExploreModels/ExploreModelItem'
@@ -8,33 +7,45 @@ type Props = {
 }
 
 const ExploreModelList: React.FC<Props> = ({ models }) => {
-  const sortOrder: Record<string, number> = {
+  const takenModelIds: string[] = []
-    '7b': 1,
+  const featuredModels = models
-    '13b': 2,
+    .filter((m) => {
-    '34b': 3,
+      if (m.metadata.tags.includes('Featured')) {
-    '70b': 4,
+        takenModelIds.push(m.id)
-    '120b': 5,
+        return m
-    'tiny': 6,
+      }
-  }
+    })
-  const sortedModels = models?.sort((a, b) => {
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
-    const aIsFeatured = a.metadata.tags.includes('Featured')
+
-    const bIsFeatured = b.metadata.tags.includes('Featured')
+  const recommendedModels = models
-    const aIsRecommended = a.metadata.tags.includes('Recommended')
+    .filter((m) => {
-    const bIsRecommended = b.metadata.tags.includes('Recommended')
+      if (m.metadata.tags.includes('Recommended')) {
-    const aNumericTag =
+        takenModelIds.push(m.id)
-      a.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
+        return m
-    const bNumericTag =
+      }
-      b.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
+    })
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+
+  const openAiModels = models
+    .filter((m) => {
+      if (m.engine === 'openai') {
+        takenModelIds.push(m.id)
+        return m
+      }
+    })
+    .sort((m1: Model, m2: Model) => m1.name.localeCompare(m2.name))
+
+  const remainingModels = models
+    .filter((m) => !takenModelIds.includes(m.id))
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+
+  const sortedModels: Model[] = [
+    ...featuredModels,
+    ...recommendedModels,
+    ...openAiModels,
+    ...remainingModels,
+  ]
 
-    if (aIsFeatured !== bIsFeatured) return aIsFeatured ? -1 : 1
-    if (aNumericTag !== bNumericTag)
-      return (
-        sortOrder[aNumericTag.toLowerCase()] -
-        sortOrder[bNumericTag.toLowerCase()]
-      )
-    if (aIsRecommended !== bIsRecommended) return aIsRecommended ? -1 : 1
-    return a.metadata.size - b.metadata.size
-  })
   return (
     <div className="relative h-full w-full flex-shrink-0">
       {sortedModels?.map((model) => (

web/screens/ExploreModels/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { openExternalUrl } from '@janhq/core'
 import {
   Input,
   ScrollArea,
@@ -44,6 +45,10 @@ const ExploreModelsScreen = () => {
     }
   })
 
+  const onHowToImportModelClick = () => {
+    openExternalUrl('https://jan.ai/guides/using-models/import-manually/')
+  }
+
   if (loading) return <Loader description="loading ..." />
 
   return (
@@ -72,13 +77,12 @@ const ExploreModelsScreen = () => {
                   />
                 </div>
                 <div className="mt-2 text-center">
-                  <a
+                  <p
-                    href="https://jan.ai/guides/using-models/import-manually/"
+                    onClick={onHowToImportModelClick}
-                    target="_blank"
+                    className="cursor-pointer font-semibold text-white underline"
-                    className="font-semibold text-white underline"
                   >
                     How to manually import models
-                  </a>
+                  </p>
                 </div>
               </div>
             </div>