update ui for tags

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

web/app/_components/ExploreModelItem/index.tsx

@@ -6,9 +6,18 @@ import ExploreModelItemHeader from "../ExploreModelItemHeader";
 import ModelVersionList from "../ModelVersionList";
 import { Fragment, forwardRef, useEffect, useState } from "react";
 import SimpleTag from "../SimpleTag";
+import {
+  MiscellanousTag,
+  NumOfBit,
+  QuantMethodTag,
+  RamRequired,
+  UsecaseTag,
+  VersionTag,
+} from "@/_components/SimpleTag/TagType";
 import { displayDate } from "@/_utils/datetime";
 import { Product } from "@/_models/Product";
 import useGetMostSuitableModelVersion from "@/_hooks/useGetMostSuitableModelVersion";
+import { toGigabytes } from "@/_utils/converter";
 
 type Props = {
   model: Product;
@@ -29,6 +38,8 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
     return null;
   }
 
+  const { quantMethod, bits, maxRamRequired, usecase } = suitableModel;
+
   return (
     <div
       ref={ref}
@@ -42,28 +53,6 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
         <div className="flex justify-between">
           <div className="flex-1 flex flex-col gap-8">
             <div className="flex flex-col gap-1">
-              <div className="text-sm font-medium text-gray-500">
-                Model Format
-              </div>
-              <div className="px-2.5 py-0.5 bg-gray-100 text-xs text-gray-800 w-fit">
-                GGUF
-              </div>
-            </div>
-            <div className="flex flex-col">
-              <div className="text-sm font-medium text-gray-500">
-                Hardware Compatibility
-              </div>
-              <div className="flex gap-2">
-                {/* <SimpleTag
-                  clickable={false}
-                  title={TagType.Compatible}
-                  type={TagType.Compatible}
-                /> */}
-              </div>
-            </div>
-          </div>
-          <div className="flex-1 flex flex-col gap-8">
-            <div>
               <div className="text-sm font-medium text-gray-500">
                 Release Date
               </div>
@@ -72,14 +61,49 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
               </div>
             </div>
             <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium text-gray-500">
+              <div className="text-sm font-medium text-gray-500">Version</div>
-                Expected Performance
+              <div className="flex gap-2">
-              </div>
+                <SimpleTag
-              {/* <SimpleTag
+                  title={model.version}
-                title={TagType.Medium}
+                  type={VersionTag.Version}
-                type={TagType.Medium}
                   clickable={false}
-              /> */}
+                />
+                <SimpleTag
+                  title={quantMethod}
+                  type={QuantMethodTag.Default}
+                  clickable={false}
+                />
+                <SimpleTag
+                  title={`${bits} Bits`}
+                  type={NumOfBit.Default}
+                  clickable={false}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 flex flex-col gap-8">
+            <div>
+              <div className="text-sm font-medium text-gray-500">Author</div>
+              <div className="text-sm font-normal text-gray-900">
+                {model.author}
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="text-sm font-medium text-gray-500">
+                Compatibility
+              </div>
+              <div className="flex gap-2">
+                <SimpleTag
+                  title={usecase}
+                  type={UsecaseTag.UsecaseDefault}
+                  clickable={false}
+                />
+                <SimpleTag
+                  title={`${toGigabytes(maxRamRequired)} RAM required`}
+                  type={RamRequired.RamDefault}
+                  clickable={false}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -89,12 +113,16 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
             {model.longDescription}
           </span>
         </div>
-        <div className="flex flex-col mt-5">
+        <div className="flex flex-col mt-5 gap-2">
           <span className="text-sm font-medium text-gray-500">Tags</span>
           <div className="flex flex-wrap gap-2">
             {model.tags.map((tag) => (
-              // @ts-ignore
+              <SimpleTag
-              <SimpleTag key={tag} title={tag} type={tag} clickable={false} />
+                key={tag}
+                title={tag}
+                type={MiscellanousTag.MiscellanousDefault}
+                clickable={false}
+              />
             ))}
           </div>
         </div>

web/app/_components/ModelVersionItem/index.tsx

@@ -8,7 +8,7 @@ import { atom, useAtomValue } from "jotai";
 import { ModelVersion } from "@/_models/ModelVersion";
 import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
 import SimpleTag from "../SimpleTag";
-import { ModelPerformance } from "../SimpleTag/TagType";
+import { RamRequired, UsecaseTag } from "../SimpleTag/TagType";
 
 type Props = {
   model: Product;
@@ -53,20 +53,29 @@ const ModelVersionItem: React.FC<Props> = ({
     downloadButton = <div>Downloaded</div>;
   }
 
+  const { maxRamRequired, usecase } = modelVersion;
+
   return (
     <div className="flex justify-between items-center gap-4 pl-3 pt-3 pr-4 pb-3 border-t border-gray-200 first:border-t-0">
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2">
         <Image src={"/icons/app_icon.svg"} width={14} height={20} alt="" />
-        <span className="font-sm text-gray-900">{modelVersion.name}</span>
+        <span className="font-sm text-gray-900 flex-1">
+          {modelVersion.name}
+        </span>
       </div>
       <div className="flex items-center gap-4">
-        {isRecommended && (
+        <div className="flex gap-2 justify-end">
           <SimpleTag
-            title={"Recommended"}
+            title={usecase}
-            type={ModelPerformance.PerformancePositive}
+            type={UsecaseTag.UsecaseDefault}
             clickable={false}
           />
-        )}
+          <SimpleTag
+            title={`${toGigabytes(maxRamRequired)} RAM required`}
+            type={RamRequired.RamDefault}
+            clickable={false}
+          />
+        </div>
         <div className="px-2.5 py-0.5 bg-gray-200 text-xs font-medium rounded">
           {toGigabytes(modelVersion.size)}
         </div>

web/app/_components/SimpleTag/TagStyleMapper.ts

@@ -13,4 +13,9 @@ export const tagStyleMapper: Record<TagType, string> = {
     "bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10",
   FreeStyle: "bg-gray-100 text-gray-800",
   ExpectPerformanceMedium: "bg-yellow-100 text-yellow-800",
+  Version: "bg-red-100 text-yellow-800",
+  Default: "bg-blue-100 text-blue-800",
+  RamDefault: "bg-green-50 text-green-700",
+  UsecaseDefault: "bg-orange-100 text-yellow-800",
+  MiscellanousDefault: "bg-blue-100 text-blue-800",
 };

web/app/_components/SimpleTag/TagType.ts

@@ -24,9 +24,39 @@ export enum FreestyleTag {
   FreeStyle = "FreeStyle",
 }
 
+export enum VersionTag {
+  Version = "Version",
+}
+
+export enum QuantMethodTag {
+  Default = "Default",
+}
+
+export enum NumOfBit {
+  Default = "Default",
+}
+
+export enum RamRequired {
+  RamDefault = "RamDefault",
+}
+
+export enum UsecaseTag {
+  UsecaseDefault = "UsecaseDefault",
+}
+
+export enum MiscellanousTag {
+  MiscellanousDefault = "MiscellanousDefault",
+}
+
 export type TagType =
   | ModelPerformance
   | HardwareCompatibility
   | ExpectedPerformance
   | ModelFormat
-  | FreestyleTag;
+  | FreestyleTag
+  | VersionTag
+  | QuantMethodTag
+  | NumOfBit
+  | RamRequired
+  | UsecaseTag
+  | MiscellanousTag;

web/app/_components/SimpleTag/index.tsx

@@ -15,10 +15,11 @@ const SimpleTag: React.FC<Props> = ({
   title,
   type,
 }) => {
+  if (!title || title.length === 0) return null;
   if (!clickable) {
     return (
       <div
-        className={`px-2.5 py-0.5 rounded text-xs font-medium ${tagStyleMapper[type]}`}
+        className={`px-2.5 py-0.5 rounded text-xs font-medium items-center line-clamp-1 max-w-[40%] ${tagStyleMapper[type]}`}
       >
         {title}
       </div>
@@ -28,7 +29,7 @@ const SimpleTag: React.FC<Props> = ({
   return (
     <button
       onClick={onClick}
-      className={`px-2.5 py-0.5 rounded text-xs font-medium ${tagStyleMapper[type]}`}
+      className={`px-2.5 py-0.5 rounded text-xs font-medium items-center line-clamp-1 max-w-[40%] ${tagStyleMapper[type]}`}
     >
       {title} x
     </button>