make sure user-generated content is not confused with HF content

declarations.d.ts

@@ -1 +1,2 @@
-declare module 'markdown-yaml-metadata-parser';
+declare module 'markdown-yaml-metadata-parser';
+declare module 'react-string-avatar';

package-lock.json

@@ -52,6 +52,7 @@
         "react-dom": "18.2.0",
         "react-icons": "^4.12.0",
         "react-smooth-scroll-hook": "^1.3.4",
+        "react-string-avatar": "^1.2.2",
         "react-tuby": "^0.1.24",
         "react-virtualized-auto-sizer": "^1.0.20",
         "replicate": "^0.17.0",
@@ -5665,6 +5666,15 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-string-avatar": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-string-avatar/-/react-string-avatar-1.2.2.tgz",
+      "integrity": "sha512-M2cBIVxZvyGiK0J+YAVqSLgTbhD/EEhAyAzw8AH2OzxO06CjLjuj8GNwf9yRWaY73aQj2RU90eXrhYYSu540Eg==",
+      "peerDependencies": {
+        "react": "^16.4.2",
+        "react-dom": "^16.4.2"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

package.json

@@ -53,6 +53,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
     "react-smooth-scroll-hook": "^1.3.4",
+    "react-string-avatar": "^1.2.2",
     "react-tuby": "^0.1.24",
     "react-virtualized-auto-sizer": "^1.0.20",
     "replicate": "^0.17.0",

src/app/interface/default-avatar/index.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import RSA from "react-string-avatar"
+
+export type DefaultAvatarProps = {
+  username?: string
+  initials?: string
+  bgColor?: string
+  textColor?: string
+  roundShape?: boolean
+  cornerRadius?: number
+  pictureFormat?: string
+  pictureResolution?: number
+  width?: number
+  pixelated?: boolean
+  wrapper?: boolean
+  wrapperStyle?: Record<string, any>
+}
+
+export type DefaultAvatarComponent = (props: DefaultAvatarProps) => JSX.Element
+
+const ReactStringAvatar = RSA as DefaultAvatarComponent
+
+
+export default function DefaultAvatar({
+  username,
+  initials: customInitials,
+  ...props
+}: DefaultAvatarProps): JSX.Element {
+
+  const usernameInitials = `${username || ""}`
+    .trim()
+    .replaceAll("_", " ")
+    .replaceAll("-", " ")
+    .replace(/([a-z])([A-Z])/g, '$1 $2') // split the camel case
+    .split(" ") // split words
+    .map(u => u.trim()[0]) // take first char
+    .slice(0, 2) // keep first 2 chars
+    .join("")
+    .toUpperCase()
+
+  return (
+    <ReactStringAvatar
+      initials={customInitials || usernameInitials}
+      {...props}
+    />
+  )
+}

src/app/interface/video-card/index.tsx

@@ -1,13 +1,19 @@
+"use client"
+
 import { useRef, useState } from "react"
+import dynamic from "next/dynamic"
+import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
-import Link from "next/link"
 
-const defaultChannelThumbnail = "/huggingface-avatar.jpeg"
+const DefaultAvatar = dynamic(() => import("../default-avatar"), {
+  loading: () => null,
+})
+ 
 
 export function VideoCard({
   video,
@@ -47,8 +53,8 @@ export function VideoCard({
 
   const handleBadChannelThumbnail = () => {
     try {
-      if (channelThumbnail !== defaultChannelThumbnail) {
-        setChannelThumbnail(defaultChannelThumbnail)
+      if (channelThumbnail) {
+        setChannelThumbnail("")
       }
     } catch (err) {
       
@@ -113,14 +119,23 @@ export function VideoCard({
           `flex flex-row`,
           isCompact ? `w-51` : `space-x-4`,
         )}>
-          {isCompact ? null : <div className="flex flex-col">
+          {
+          isCompact ? null
+          : channelThumbnail ? <div className="flex flex-col">
             <div className="flex w-9 rounded-full overflow-hidden">
               <img
                 src={channelThumbnail}
                 onError={handleBadChannelThumbnail}
               />
             </div>
-          </div>}
+          </div>
+          : <DefaultAvatar
+            username={video.channel.datasetUser}
+            bgColor="#fde047"
+            textColor="#1c1917"
+            width={36}
+            roundShape
+          />}
           <div className={cn(
             `flex flex-col`,
             isCompact ?  `` : `flex-grow`