chore: update model ranking (#874)

* fix/models-sorting-order

* fix: cover height should be fixed

web/screens/ExploreModels/ExploreModelItemHeader/index.tsx

@@ -102,8 +102,12 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
       onClick={onClick}
     >
       {model.metadata.cover && (
-        <div className="relative h-full w-full">
+        <div className="relative h-full w-full ">
-          <img src={model.metadata.cover} alt={`Cover - ${model.id}`} />
+          <img
+            src={model.metadata.cover}
+            className="h-[250px] w-full object-cover"
+            alt={`Cover - ${model.id}`}
+          />
         </div>
       )}
       <div className="flex items-center justify-between p-4">

web/screens/ExploreModels/ExploreModelList/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { Model } from '@janhq/core'
 
 import ExploreModelItem from '@/screens/ExploreModels/ExploreModelItem'
@@ -7,14 +8,38 @@ type Props = {
 }
 
 const ExploreModelList: React.FC<Props> = ({ models }) => {
+  const sortOrder: Record<string, number> = {
+    '7b': 1,
+    '13b': 2,
+    '34b': 3,
+    '70b': 4,
+    '120b': 5,
+    'tiny': 6,
+  }
+  const sortedModels = models?.sort((a, b) => {
+    const aIsFeatured = a.metadata.tags.includes('Featured')
+    const bIsFeatured = b.metadata.tags.includes('Featured')
+    const aIsRecommended = a.metadata.tags.includes('Recommended')
+    const bIsRecommended = b.metadata.tags.includes('Recommended')
+    const aNumericTag =
+      a.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
+    const bNumericTag =
+      b.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
+
+    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">
-      {models
+      {sortedModels?.map((model) => (
-        ?.sort((a) => {
+        <ExploreModelItem key={model.id} model={model} />
-          if (a.metadata.tags.includes('Recommended')) return -1
+      ))}
-          return 0
-        })
-        ?.map((model) => <ExploreModelItem key={model.id} model={model} />)}
     </div>
   )
 }

web/screens/ExploreModels/index.tsx

@@ -44,7 +44,10 @@ const ExploreModelsScreen = () => {
         downloadedModels.some((y) => y.id === x.id)
       )
     } else if (sortSelected === 'Recommended') {
-      return x.metadata.tags.includes('Recommended')
+      return (
+        x.metadata.tags.includes('Featured') ||
+        x.metadata.tags.includes('Recommended')
+      )
     } else {
       return x.name.toLowerCase().includes(searchValue.toLowerCase())
     }