feat: reorder model families

Author: Neet-Nestor

app/components/model-select.tsx

@@ -207,11 +207,6 @@ const ModelSelect: React.FC<ModelSearchProps> = ({
     return counts;
   };
 
-  const modelCounts = countModelsPerFamily(availableModels);
-  const sortedModelFamilies = Object.entries(modelFamilies).sort(
-    ([a], [b]) => (modelCounts[b] || 0) - (modelCounts[a] || 0),
-  );
-
   return (
     <div className="screen-model-container">
       <Modal title={Locale.ModelSelect.Title} onClose={onClose}>
@@ -222,20 +217,22 @@ const ModelSelect: React.FC<ModelSearchProps> = ({
             inputRef={searchInputRef}
           />
           <div className={style["model-family-filter"]}>
-            {sortedModelFamilies.map(([key, { name, icon: Icon }]) => (
-              <IconButton
-                key={key}
-                onClick={() => handleToggleFamilyFilter(key)}
-                bordered
-                text={name}
-                icon={
-                  <div className={style["icon"]}>
-                    {Icon ? <Icon /> : <Cpu />}
-                  </div>
-                }
-                className={`${style["model-family-button"]}${selectedFamilies.includes(key) ? " " + style["selected-model-family"] : ""}`}
-              />
-            ))}
+            {Object.entries(modelFamilies).map(
+              ([key, { name, icon: Icon }]) => (
+                <IconButton
+                  key={key}
+                  onClick={() => handleToggleFamilyFilter(key)}
+                  bordered
+                  text={name}
+                  icon={
+                    <div className={style["icon"]}>
+                      {Icon ? <Icon /> : <Cpu />}
+                    </div>
+                  }
+                  className={`${style["model-family-button"]}${selectedFamilies.includes(key) ? " " + style["selected-model-family"] : ""}`}
+                />
+              ),
+            )}
           </div>
         </div>
         <div className={style["model-list"]}>

app/utils/model.tsx

@@ -73,20 +73,20 @@ export interface ModelDetails {
 export const modelDetailsList: ModelDetails[] = [
   { family: ModelFamily.LLAMA, name: "Llama", icon: MetaIcon },
   { family: ModelFamily.DEEPSEEK, name: "DeepSeek", icon: DeepSeekIcon },
-  { family: ModelFamily.PHI, name: "Phi", icon: MicrosoftIcon },
-  { family: ModelFamily.MISTRAL, name: "Mistral", icon: MistralIcon },
-  { family: ModelFamily.GEMMA, name: "Gemma", icon: GoogleIcon },
   {
     family: ModelFamily.QWEN,
     name: "Qwen",
     icon: (...props) => <img src="./qwen.webp" alt="Qwen Logo" {...props} />,
   },
+  { family: ModelFamily.GEMMA, name: "Gemma", icon: GoogleIcon },
+  { family: ModelFamily.PHI, name: "Phi", icon: MicrosoftIcon },
+  { family: ModelFamily.MISTRAL, name: "Mistral", icon: MistralIcon },
   {
     family: ModelFamily.SMOL_LM,
     name: "SmolLM",
     icon: (...props) => <img src="./smollm.png" alt="SmolLM Logo" {...props} />,
   },
-  { family: ModelFamily.WIZARD_MATH, name: "Wizard Math", icon: WandSparkles },
   { family: ModelFamily.STABLE_LM, name: "StableLM", icon: StablelmIcon },
   { family: ModelFamily.REDPAJAMA, name: "RedPajama", icon: Shirt },
+  { family: ModelFamily.WIZARD_MATH, name: "Wizard Math", icon: WandSparkles },
 ];