Merge pull request #4796 from janhq/fix/hub-desc-render

fix: hub model list desc render

web/screens/Hub/ModelList/ModelItem/index.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import { ModelSource } from '@janhq/core'
 
 import { DownloadIcon, FileJson } from 'lucide-react'
+import rehypeRaw from 'rehype-raw'
 
 import ModelLabel from '@/containers/ModelLabel'
 
@@ -36,6 +37,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>

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