From f7f1e3da74381a6da6484f8f6ae11206c23aaeed Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 23 Nov 2023 13:50:34 +0700
Subject: [PATCH] fix: app shows wrong performance tag, all say not enough ram
 on windows

---
 web/containers/ModalCancelDownload/index.tsx  |  2 -
 web/hooks/useGetPerformanceTag.ts             | 45 +++++++++----------
 .../ExploreModelItemHeader/index.tsx          | 27 ++++++++---
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/web/containers/ModalCancelDownload/index.tsx b/web/containers/ModalCancelDownload/index.tsx
index 3413d02c49..33476fda16 100644
--- a/web/containers/ModalCancelDownload/index.tsx
+++ b/web/containers/ModalCancelDownload/index.tsx
@@ -16,7 +16,6 @@ import {
 import { atom, useAtomValue } from 'jotai'
 
 import { useDownloadState } from '@/hooks/useDownloadState'
-import useGetPerformanceTag from '@/hooks/useGetPerformanceTag'
 
 import { formatDownloadPercentage } from '@/utils/converter'
 
@@ -30,7 +29,6 @@ export default function ModalCancelDownload({
   isFromList,
 }: Props) {
   const { modelDownloadStateAtom } = useDownloadState()
-  useGetPerformanceTag()
   const downloadAtom = useMemo(
     () => atom((get) => get(modelDownloadStateAtom)[suitableModel.name]),
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/web/hooks/useGetPerformanceTag.ts b/web/hooks/useGetPerformanceTag.ts
index 4c99347785..435f82c4c6 100644
--- a/web/hooks/useGetPerformanceTag.ts
+++ b/web/hooks/useGetPerformanceTag.ts
@@ -1,40 +1,37 @@
-import { useState } from 'react'
-
 import { ModelVersion } from '@janhq/core/lib/types'
-import { useAtomValue } from 'jotai'
 
 import { ModelPerformance, TagType } from '@/constants/tagType'
 
-import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
-
 // Recommendation:
 // `Recommended (green)`: "Max RAM required" is 80% of users max  RAM.
 // `Slow on your device (yellow)`: Max RAM required is 80-100% of users max RAM
 // `Not enough RAM (red)`: User RAM is below "Max RAM required"
 
 export default function useGetPerformanceTag() {
-  const [performanceTag, setPerformanceTag] = useState<TagType | undefined>()
-  const totalRam = useAtomValue(totalRamAtom)
-
-  const getPerformanceForModel = async (modelVersion: ModelVersion) => {
+  async function getPerformanceForModel(
+    modelVersion: ModelVersion,
+    totalRam: number
+  ): Promise<{ title: string; performanceTag: TagType }> {
     const requiredRam = modelVersion.maxRamRequired
-    setPerformanceTag(calculateRamPerformance(requiredRam, totalRam))
-  }
-
-  let title = ''
-  switch (performanceTag) {
-    case ModelPerformance.PerformancePositive:
-      title = 'Recommended'
-      break
-    case ModelPerformance.PerformanceNeutral:
-      title = 'Slow on your device'
-      break
-    case ModelPerformance.PerformanceNegative:
-      title = 'Not enough RAM'
-      break
+    const performanceTag = calculateRamPerformance(requiredRam, totalRam)
+
+    let title = ''
+
+    switch (performanceTag) {
+      case ModelPerformance.PerformancePositive:
+        title = 'Recommended'
+        break
+      case ModelPerformance.PerformanceNeutral:
+        title = 'Slow on your device'
+        break
+      case ModelPerformance.PerformanceNegative:
+        title = 'Not enough RAM'
+        break
+    }
+    return { title, performanceTag }
   }
 
-  return { performanceTag, title, getPerformanceForModel }
+  return { getPerformanceForModel }
 }
 
 const calculateRamPerformance = (
diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index fe3c9c3e95..31a9933ee7 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
 import { Badge, Button } from '@janhq/uikit'
@@ -20,6 +20,8 @@ import { useMainViewState } from '@/hooks/useMainViewState'
 
 import { toGigabytes } from '@/utils/converter'
 
+import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
+
 type Props = {
   suitableModel: ModelVersion
   exploreModel: ModelCatalog
@@ -32,8 +34,12 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   const { downloadModel } = useDownloadModel()
   const { downloadedModels } = useGetDownloadedModels()
   const { modelDownloadStateAtom, downloadStates } = useDownloadState()
-  const { performanceTag, title, getPerformanceForModel } =
-    useGetPerformanceTag()
+  const { getPerformanceForModel } = useGetPerformanceTag()
+  const [title, setTitle] = useState<string>('Recommended')
+  const totalRam = useAtomValue(totalRamAtom)
+  const [performanceTag, setPerformanceTag] = useState<TagType>(
+    ModelPerformance.PerformancePositive
+  )
   const downloadAtom = useMemo(
     () => atom((get) => get(modelDownloadStateAtom)[suitableModel.name]),
     [suitableModel.name]
@@ -41,9 +47,20 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   const downloadState = useAtomValue(downloadAtom)
   const { setMainViewState } = useMainViewState()
 
+  const calculatePerformance = useCallback(
+    (suitableModel: ModelVersion) => async () => {
+      const { title, performanceTag } = await getPerformanceForModel(
+        suitableModel,
+        totalRam
+      )
+      setPerformanceTag(performanceTag)
+      setTitle(title)
+    },
+    [totalRam]
+  )
+
   useEffect(() => {
-    getPerformanceForModel(suitableModel)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    calculatePerformance(suitableModel)
   }, [suitableModel])
 
   const onDownloadClick = useCallback(() => {