From ba736d264b51dc6907299b92afa2f44cef549109 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 11 Mar 2025 15:13:23 +0700
Subject: [PATCH] fix: render desc hub model list

---
 web/screens/Hub/ModelList/ModelItem/index.tsx |  3 +++
 web/utils/modelSource.ts                      | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/screens/Hub/ModelList/ModelItem/index.tsx b/web/screens/Hub/ModelList/ModelItem/index.tsx
index e782e6f70..ed4284412 100644
--- a/web/screens/Hub/ModelList/ModelItem/index.tsx
+++ b/web/screens/Hub/ModelList/ModelItem/index.tsx
@@ -4,6 +4,8 @@ import Image from 'next/image'
 
 import { ModelSource } from '@janhq/core'
 
+import rehypeRaw from 'rehype-raw'
+
 import { DownloadIcon, FileJson } from 'lucide-react'
 
 import ModelLabel from '@/containers/ModelLabel'
@@ -36,6 +38,7 @@ const ModelItem: React.FC<Props> = ({ model, onSelectedModel }) => {
             <Markdown
               className="md-short-desc line-clamp-3 max-w-full overflow-hidden font-light text-[hsla(var(--text-secondary))]"
               components={markdownComponents}
+              rehypePlugins={[rehypeRaw]}
             >
               {extractDescription(model.metadata?.description) || '-'}
             </Markdown>
diff --git a/web/utils/modelSource.ts b/web/utils/modelSource.ts
index 159178136..2f4676298 100644
--- a/web/utils/modelSource.ts
+++ b/web/utils/modelSource.ts
@@ -7,12 +7,19 @@ export const extractDescription = (text?: string) => {
   const normalizedText = removeYamlFrontMatter(text)
   const overviewPattern = /(?:##\s*Overview\s*\n)([\s\S]*?)(?=\n\s*##|$)/
   const matches = normalizedText?.match(overviewPattern)
-  if (matches && matches[1]) {
-    return matches[1].trim()
-  }
-  return normalizedText?.slice(0, 500).trim()
-}
+  let extractedText =
+    matches && matches[1]
+      ? matches[1].trim()
+      : normalizedText?.slice(0, 500).trim()
 
+  // Remove image markdown syntax ![alt text](image-url)
+  extractedText = extractedText?.replace(/!\[.*?\]\(.*?\)/g, '')
+
+  // Remove <img> HTML tags
+  extractedText = extractedText?.replace(/<img[^>]*>/g, '')
+
+  return extractedText
+}
 /**
  * Remove YAML (HF metadata) front matter from content
  * @param content