Add model description

common/models-list.ts

@@ -2,26 +2,34 @@ export const MODELS = {
   "upscayl-standard-4x": {
     id: "upscayl-standard-4x",
     name: "Upscayl Standard",
+    description: "Suitable for most images.",
   },
   "upscayl-lite-4x": {
     id: "upscayl-lite-4x",
     name: "Upscayl Lite",
+    description:
+      "Suitable for most images. High-speed upscaling with minimal quality loss.",
   },
   "remacri-4x": {
     id: "remacri-4x",
     name: "Remacri (Non-Commercial)",
+    description:
+      "For natural images. Added sharpness and detail. No commercial use.",
   },
   "ultramix-balanced-4x": {
     id: "ultramix-balanced-4x",
     name: "Ultramix (Non-Commercial)",
+    description: "For natural images with a balance of sharpness and detail.",
   },
   "ultrasharp-4x": {
     id: "ultrasharp-4x",
     name: "Ultrasharp (Non-Commercial)",
+    description: "For natural images with a focus on sharpness.",
   },
   "digital-art-4x": {
     id: "digital-art-4x",
     name: "Digital Art",
+    description: "For digital art and illustrations.",
   },
 };
 

renderer/components/sidebar/upscayl-tab/select-model-dialog.tsx

@@ -49,17 +49,20 @@ const SelectModelDialog = () => {
             <DialogTitle>{t("APP.MODEL_SELECTION.DESCRIPTION")}</DialogTitle>
           </DialogHeader>
           <ScrollArea className="max-h-[600px] pr-4">
-            <div className="grid gap-4">
+            <div className="flex flex-col gap-4">
               {Object.entries(MODELS).map((modelData) => {
                 const modelId = modelData[0] as ModelId;
                 const model = modelData[1];
                 return (
                   <button
                     key={modelId}
-                    className="btn h-auto w-full flex-col items-start p-4"
+                    className="btn !h-auto !w-full !flex-col !items-start !p-4"
                     onClick={() => handleModelSelect(modelId)}
                   >
-                    <div className="mb-2 font-semibold">{model.name}</div>
+                    <div className="font-semibold">{model.name}</div>
+                    <div className="mb-2 text-left font-normal leading-normal text-primary-foreground/50">
+                      {model.description}
+                    </div>
                     <div className="relative h-52 w-full overflow-hidden rounded-md">
                       <div className="flex h-full w-full">
                         <img