From 46aa9d3a29d93d402573c08112e5939a369c0094 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 28 Aug 2024 13:57:50 +0700
Subject: [PATCH 1/3] fix: responsive modal import model gguf

---
 .../ModelDownloadList/index.tsx               |  2 +-
 .../ModelDownloadRow/index.tsx                | 30 ++++++++++++-------
 .../ModelSegmentInfo/index.tsx                |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
index e6285565f..e59ee3416 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
@@ -29,7 +29,7 @@ const ModelDownloadList = () => {
   return (
     <div className="flex h-[500px] flex-1 flex-col">
       <h1 className="mb-3 font-semibold">Available Versions</h1>
-      <ScrollArea className="w-full lg:flex-1">
+      <ScrollArea className="h-full w-full lg:flex-1">
         {ggufModels.map((model, index) => {
           if (!model.downloadUrl) return null
           return (
diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
index 98914c94e..951a11d59 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
@@ -10,6 +10,8 @@ import { Badge, Button, Progress } from '@janhq/joi'
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { twMerge } from 'tailwind-merge'
+
 import { MainViewState } from '@/constants/screens'
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
@@ -114,16 +116,24 @@ const ModelDownloadRow: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex flex-col gap-4 space-x-1 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between lg:w-[550px]">
-      <div className="flex">
-        {quantization && (
-          <Badge variant="soft" className="mr-1">
-            {quantization}
-          </Badge>
-        )}
-        <h1 className="mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]">
-          {fileName}
-        </h1>
+    <div className="flex flex-col gap-4 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between xl:w-full">
+      <div className="flex justify-between">
+        <div className="flex">
+          {quantization && (
+            <Badge variant="soft" className="mr-1">
+              {quantization}
+            </Badge>
+          )}
+          <h1
+            className={twMerge(
+              'mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]',
+              quantization && 'max-w-[25ch]'
+            )}
+            title={fileName}
+          >
+            {fileName}
+          </h1>
+        </div>
         <Badge theme="secondary" className="hidden md:flex">
           {toGibibytes(fileSize)}
         </Badge>
diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
index ba17e9b57..10f4515c8 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
@@ -33,7 +33,7 @@ const ModelSegmentInfo = () => {
   if (!importingHuggingFaceRepoData) return null
 
   return (
-    <div className="flex w-full flex-col space-y-4">
+    <div className="flex w-full flex-col space-y-4 lg:w-1/3">
       <HeaderInfo title={'Model ID'}>
         <h1 className="font-medium text-zinc-500 dark:text-gray-300">
           {modelName}

From 31ae14c1f1aa7069ac822f801237d90518f19553 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 28 Aug 2024 17:04:47 +0700
Subject: [PATCH 2/3] chore: fix responsive and add tensorrt_llm nitro to model
 utils

---
 .../HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx     | 2 +-
 web/utils/modelEngine.ts                                       | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
index e59ee3416..a1d153d10 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
@@ -29,7 +29,7 @@ const ModelDownloadList = () => {
   return (
     <div className="flex h-[500px] flex-1 flex-col">
       <h1 className="mb-3 font-semibold">Available Versions</h1>
-      <ScrollArea className="h-full w-full lg:flex-1">
+      <ScrollArea className="w-full lg:h-full lg:flex-1">
         {ggufModels.map((model, index) => {
           if (!model.downloadUrl) return null
           return (
diff --git a/web/utils/modelEngine.ts b/web/utils/modelEngine.ts
index a12e9bb0e..3d132c5d5 100644
--- a/web/utils/modelEngine.ts
+++ b/web/utils/modelEngine.ts
@@ -4,6 +4,7 @@ export const getLogoEngine = (engine: InferenceEngine) => {
   switch (engine) {
     case InferenceEngine.anthropic:
       return 'images/ModelProvider/anthropic.svg'
+    case InferenceEngine.nitro_tensorrt_llm:
     case InferenceEngine.nitro:
       return 'images/ModelProvider/nitro.svg'
     case InferenceEngine.cortex_llamacpp:
@@ -43,6 +44,8 @@ export const getTitleByEngine = (engine: InferenceEngine) => {
   switch (engine) {
     case InferenceEngine.nitro:
       return 'Llama.cpp (Nitro)'
+    case InferenceEngine.nitro_tensorrt_llm:
+      return 'TensorRT-LLM (Nitro)'
     case InferenceEngine.cortex_llamacpp:
       return 'Llama.cpp (Cortex)'
     case InferenceEngine.cortex_onnx:

From e41f816fc8122c69458c5f4c291ae6de012addec Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 28 Aug 2024 17:24:57 +0700
Subject: [PATCH 3/3] chore: fix system monitor gpu list

---
 .../BottomPanel/SystemMonitor/index.tsx       | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
index 7fb20b0a4..4fd902075 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -159,35 +159,40 @@ const SystemMonitor = () => {
 
               {gpus.length > 0 && (
                 <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4 last:border-none">
-                  {gpus.map((gpu, index) => (
-                    <div key={index} className="mt-4 flex flex-col gap-x-2">
-                      <div className="flex w-full items-start justify-between">
-                        <span className="line-clamp-1 w-1/2 font-bold">
-                          {gpu.name}
-                        </span>
-                        <div className="flex gap-x-2">
-                          <div className="">
-                            <span>
-                              {gpu.memoryTotal - gpu.memoryFree}/
-                              {gpu.memoryTotal}
-                            </span>
-                            <span> MB</span>
+                  {gpus.map((gpu, index) => {
+                    const gpuUtilization = Math.round(
+                      (gpu.memoryFree / Math.max(gpu.memoryTotal, 1)) * 100
+                    )
+                    return (
+                      <div key={index} className="mt-4 flex flex-col gap-x-2">
+                        <div className="flex w-full items-start justify-between">
+                          <span className="line-clamp-1 w-1/2 font-bold">
+                            {gpu.name}
+                          </span>
+                          <div className="flex gap-x-2">
+                            <div className="">
+                              <span>
+                                {gpu.memoryTotal - gpu.memoryFree}/
+                                {gpu.memoryTotal}
+                              </span>
+                              <span> MB</span>
+                            </div>
                           </div>
                         </div>
-                      </div>
 
-                      <div className="flex items-center gap-x-4">
-                        <Progress
-                          value={gpu.utilization}
-                          className="w-full"
-                          size="small"
-                        />
-                        <span className="flex-shrink-0 ">
-                          {gpu.utilization}%
-                        </span>
+                        <div className="flex items-center gap-x-4">
+                          <Progress
+                            value={gpuUtilization}
+                            className="w-full"
+                            size="small"
+                          />
+                          <span className="flex-shrink-0 ">
+                            {gpuUtilization}%
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    )
+                  })}
                 </div>
               )}
             </div>