improve AiTube algorithm

src/app/interface/like-button/generic.tsx

@@ -56,7 +56,7 @@ export function GenericLikeButton({
         <div>{
           isLikedByUser ? <RiThumbUpFill /> :  <RiThumbUpLine />
         }</div>
-        <div>{numberOfLikes}</div>
+        <div>{Math.max(0, numberOfLikes)}</div>
       </div>
       <div className={cn(
         `flex flex-row items-center justify-center`,
@@ -74,7 +74,7 @@ export function GenericLikeButton({
         <div>{
           isDislikedByUser ? <RiThumbDownFill /> :  <RiThumbDownLine />
         }</div>
-        <div>{numberOfDislikes}</div>
+        <div>{Math.max(0, numberOfDislikes0}</div>
       </div>
     </div>
   )

src/app/interface/like-button/index.tsx

@@ -41,31 +41,42 @@ export function LikeButton({
   if (!huggingfaceApiKey) { return null }
 
   const handleLike = huggingfaceApiKey ? () => {
-    // we use premeptive update
+    // we use optimistic updates
+    const previousRating = { ...rating }
     setRating({
       ...rating,
       isLikedByUser: true,
       isDislikedByUser: false,
-      numberOfLikes: rating.numberOfLikes + 1,
-      numberOfDislikes: rating.numberOfDislikes - 1,
+      numberOfLikes:  Math.abs(Math.max(0, rating.numberOfLikes + 1)),
+      numberOfDislikes:  Math.abs(Math.max(0, rating.numberOfDislikes - 1)),
     })
     startTransition(async () => {
-      const freshRating = await rateVideo(video.id, true, huggingfaceApiKey)
-      setRating(freshRating)
+      try {
+        const freshRating = await rateVideo(video.id, true, huggingfaceApiKey)
+        // setRating(freshRating)
+      } catch (err) {
+        setRating(previousRating)
+      }
     })
   } : undefined
 
   const handleDislike = huggingfaceApiKey ? () => {
+    // we use optimistic updates
+    const previousRating = { ...rating }
     setRating({
       ...rating,
       isLikedByUser: false,
       isDislikedByUser: true,
-      numberOfLikes: rating.numberOfLikes - 1,
-      numberOfDislikes: rating.numberOfDislikes + 1,
+      numberOfLikes: Math.abs(Math.max(0, rating.numberOfLikes - 1)),
+      numberOfDislikes: Math.abs(Math.max(0, rating.numberOfDislikes + 1)),
     })
     startTransition(async () => {
-      const freshRating = await rateVideo(video.id, false, huggingfaceApiKey)
-      setRating(freshRating)
+      try {
+        const freshRating = await rateVideo(video.id, false, huggingfaceApiKey)
+        // setRating(freshRating)
+      } catch (err) {
+        setRating(previousRating)
+      }
     })
   } : undefined
 

src/app/interface/top-header/index.tsx

@@ -116,7 +116,7 @@ export function TopHeader() {
         </div>
       </div>
       {
-      isNormalSize ? 
+      isNormalSize && view !== "public_music_videos"  ? 
       <div className={cn(
         `hidden sm:flex flex-row space-x-3`,
         `text-[13px] font-semibold`,

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

@@ -36,6 +36,7 @@ export function TrackCard({
   const [shouldLoadMedia, setShouldLoadMedia] = useState(false)
 
   const isTable = layout === "table"
+  const isMicro = layout === "micro"
   const isCompact = layout === "vertical"
 
   const handlePointerEnter = () => {
@@ -77,12 +78,14 @@ export function TrackCard({
     <div
       className={cn(
         `w-full flex`,
-        isTable ? `flex-row h-14 space-x-2 px-2 py-2 rounded-lg` :
+        isTable ? `flex-row h-16 space-x-4 px-2 py-2 rounded-lg` :
         isCompact ? `flex-row h-24 py-1 space-x-2` :
         `flex-col space-y-3`,
         `bg-line-900`,
         `cursor-pointer`,
-        index % 2 ? "bg-neutral-800/40" : "",
+        (isTable || isMicro) ? (
+          (index % 2) ? "bg-neutral-800/40 hover:bg-neutral-800/70" : "hover:bg-neutral-800/70"
+        ) : "",
         className,
       )}
       onPointerEnter={handlePointerEnter}
@@ -94,7 +97,8 @@ export function TrackCard({
           className={cn(
             `flex items-center justify-center`,
             `rounded overflow-hidden`,
-            isTable ? ` flex-col` :
+            isTable ? `flex-col` :
+            isMicro ? `flex-col` :
             isCompact ? ` flex-col w-42 h-42` :
             ` flex-col aspect-square`
           )}
@@ -172,6 +176,10 @@ export function TrackCard({
         {/* TEXT BLOCK */}
         <div className={cn(
           `flex flex-row`,
+
+
+          isTable ? `w-full` :
+
           isCompact ? `w-40 lg:w-44 xl:w-51` : `space-x-4`,
         )}>
           {
@@ -192,13 +200,15 @@ export function TrackCard({
               roundShape
             />}
           <div className={cn(
-            `flex flex-col`,
-            isTable ? `justify-center` :
-            isCompact ?  `` : `flex-grow`
+            `flex`,
+            isMicro ? ` flex-col justify-center` :
+            isTable ? `w-full flex-col md:flex-row justify-center md:justify-start items-start md:items-center` :
+            isCompact ?  `flex-col` : `flex-col flex-grow`
           )}>
             <h3 className={cn(
               `text-zinc-100 mb-0 line-clamp-2`,
-              isTable ? `font-normal text-2xs md:text-xs lg:text-sm mb-0.5` : 
+              isMicro ? `font-normal text-2xs md:text-xs lg:text-sm mb-0.5` : 
+              isTable ? `w-[30%] font-normal text-xs md:text-sm lg:text-base mb-0.5` : 
               isCompact ? `font-medium text-2xs md:text-xs lg:text-sm mb-1.5` :
               `font-medium text-base`
             )}>{media.label}</h3>
@@ -222,6 +232,14 @@ export function TrackCard({
             <div className="font-semibold scale-125">·</div>
             <div>{formatTimeAgo(media.updatedAt)}</div>
             </div>}
+
+            {/*
+            {isTable ? <div className={cn(
+              `hidden md:flex flex-row flex-grow`,
+              `text-zinc-100 mb-0 line-clamp-2`,
+              `w-[30%] font-normal text-xs md:text-sm lg:text-base mb-0.5` 
+            )}>{media.duration}</div> : null}
+            */}
           </div>
         </div>
       </div>

src/app/server/actions/ai-tube-hf/extendVideosWithStats.ts

@@ -1,14 +1,24 @@
 "use server"
 
 import { VideoInfo } from "@/types"
-import { getNumberOfViewsForVideos } from "../stats"
+
+import { getStatsForVideos } from "../stats"
 
 export async function extendVideosWithStats(videos: VideoInfo[]): Promise<VideoInfo[]> {
   
-  const stats = await getNumberOfViewsForVideos(videos.map(v => v.id))
+  const allStats = await getStatsForVideos(videos.map(v => v.id))
 
   return videos.map(v => {
-    v.numberOfViews = stats[v.id] || 0
+    const stats = allStats[v.id] || {
+      numberOfViews: 0,
+      numberOfLikes: 0,
+      numberOfDislikes: 0
+    }
+
+    v.numberOfViews = stats.numberOfViews
+    v.numberOfLikes = stats.numberOfLikes
+    v.numberOfDislikes = stats.numberOfDislikes
+
     return v
   })
 }

src/app/server/actions/ai-tube-hf/getVideo.ts

@@ -3,7 +3,7 @@
 import { VideoInfo } from "@/types"
 
 import { getVideoIndex } from "./getVideoIndex"
-import { getNumberOfViewsForVideo } from "../stats"
+import { getStatsForVideos } from "../stats"
 
 export async function getVideo({
   videoId,
@@ -26,7 +26,17 @@ export async function getVideo({
       throw new Error(`cannot get the video, nothing found for id "${id}"`)
     }
 
-    video.numberOfViews = await getNumberOfViewsForVideo(video.id)
+    const allStats = await getStatsForVideos([video.id])
+    
+    const stats = allStats[video.id] || {
+      numberOfViews: 0,
+      numberOfLikes: 0,
+      numberOfDislikes: 0,
+    }
+
+    video.numberOfViews = stats.numberOfViews
+    video.numberOfLikes = stats.numberOfLikes
+    video.numberOfDislikes = stats.numberOfDislikes
 
     return video
   } catch (err) {

src/app/server/actions/ai-tube-hf/getVideos.ts

@@ -4,6 +4,8 @@ import { VideoInfo } from "@/types"
 
 import { getVideoIndex } from "./getVideoIndex"
 import { extendVideosWithStats } from "./extendVideosWithStats"
+import { isHighQuality } from "../utils/isHighQuality"
+import { isAntisocial } from "../utils/isAntisocial"
 
 const HARD_LIMIT = 100
 
@@ -41,13 +43,16 @@ export async function getVideos({
       renewCache: true
     })
 
-
     let allPotentiallyValidVideos = Object.values(published)
     
     if (ignoreVideoIds.length) {
       allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
     }
 
+    if (ignoreVideoIds.length) {
+      allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
+    }
+
     if (sortBy === "date") {
       allPotentiallyValidVideos.sort(((a, b) => b.updatedAt.localeCompare(a.updatedAt)))
     } else {
@@ -92,16 +97,22 @@ export async function getVideos({
         ]
       }
     }
-    
 
+    const sanitizedVideos = videosMatchingFilters.filter(v => !isAntisocial(v))
+        
     // we enforce the max limit of HARD_LIMIT (eg. 100)
-    const cappedVideos = videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
-
-
-    // finally, we ask Redis for the freshest stats
-    const videosWithStats = await extendVideosWithStats(cappedVideos)
-
-    return videosWithStats
+    const limitedNumberOfVideos = sanitizedVideos.slice(0, Math.min(HARD_LIMIT, maxVideos))
+
+    // we ask Redis for the freshest stats
+    const videosWithStats = await extendVideosWithStats(limitedNumberOfVideos)
+
+    const highQuality = videosWithStats.filter(v => isHighQuality(v))
+    const lowQuality = videosWithStats.filter(v => !isHighQuality(v))
+ 
+    return [
+      ...highQuality,
+      ...lowQuality
+    ]
   } catch (err) {
     if (neverThrow) {
       console.error("failed to get videos:", err)

src/app/server/actions/stats.ts

@@ -13,29 +13,38 @@ const redis = new Redis({
   token: redisToken
 })
 
-export async function getNumberOfViewsForVideos(videoIds: string[]): Promise<Record<string, number>> {
+export async function getStatsForVideos(videoIds: string[]): Promise<Record<string, { numberOfViews: number; numberOfLikes: number; numberOfDislikes: number}>> {
   if (!Array.isArray(videoIds)) {
     return {}
   }
 
   try {
     
-    const stats: Record<string, number> = {}
+    const stats: Record<string, { numberOfViews: number; numberOfLikes: number; numberOfDislikes: number; }> = {}
 
-    const ids: string[] = []
+    const listOfRedisIDs: string[] = []
 
     for (const videoId of videoIds) {
-      ids.push(`videos:${videoId}:stats:views`)
-      stats[videoId] = 0
+      listOfRedisIDs.push(`videos:${videoId}:stats:views`)
+      listOfRedisIDs.push(`videos:${videoId}:stats:likes`)
+      listOfRedisIDs.push(`videos:${videoId}:stats:dislikes`)
+      stats[videoId] = {
+        numberOfViews: 0,
+        numberOfLikes: 0,
+        numberOfDislikes: 0,
+      }
     }
 
-    const values = await redis.mget<number[]>(...ids)
+    const listOfRedisValues = await redis.mget<number[]>(...listOfRedisIDs)
 
-    values.forEach((nbViews, i) => {
-      const redisId = `${ids[i] || ""}`
-      const videoId = redisId.replace(":stats:views", "").replace("videos:", "")
-      stats[videoId] = nbViews || 0
-    })
+    let v = 0
+    for (let i = 0; i < listOfRedisValues.length; i += 3) {
+      stats[videoIds[v++]] = {
+        numberOfViews: listOfRedisValues[i] || 0,
+        numberOfLikes: listOfRedisValues[i + 1] || 0,
+        numberOfDislikes: listOfRedisValues[i + 2] || 0
+      }
+    }
 
     return stats
   } catch (err) {
@@ -43,22 +52,11 @@ export async function getNumberOfViewsForVideos(videoIds: string[]): Promise<Rec
   }
 }
 
-export async function getNumberOfViewsForVideo(videoId: string): Promise<number> {
-  try {
-    const key = `videos:${videoId}:stats`
-
-    const result = await redis.get<number>(key) || 0
-
-    return result
-  } catch (err) {
-    return 0
-  }
-}
-
-
 export async function watchVideo(videoId: string): Promise<number> {
   if (developerMode) {
-    return getNumberOfViewsForVideo(videoId)
+    const stats = await getStatsForVideos([videoId])
+
+    return stats[videoId].numberOfViews
   }
 
   try {

src/app/server/actions/utils/isAntisocial.ts

@@ -0,0 +1,23 @@
+import { VideoInfo } from "@/types"
+
+const winners = new Set(`${process.env.WINNERS || ""}`.toLowerCase().split(",").map(x => x.trim()).filter(x => x))
+
+export function isAntisocial(video: VideoInfo): boolean {
+
+  // some people are reported by the community for their anti-social behavior
+  // this include:
+  // - harassing
+  //
+  // - annoying or not letting people in peace on social networks
+  // (keep trying to reach with multiple user accounts etc)
+  //
+  // - stealing other people content (prompt, identity, images etc)
+  //
+  // -- creating multiple/duplicate accounts in order to foil and get around AiTube bans
+  //
+  // - generating nonsense content (eg. sentences not finished, one letter titles)
+  //
+  // - duplicate many videos with little to no changes
+  // (TV series are of course an exception to this rule - as long as this is original content obviously)
+  return winners.has(video.channel.datasetUser.toLowerCase())
+}

src/app/server/actions/utils/isHighQuality.ts

@@ -0,0 +1,22 @@
+import { VideoInfo } from "@/types"
+
+export function isHighQuality(video: VideoInfo) {
+  const numberOfViews = Math.abs(Math.max(0, video.numberOfViews))
+  const numberOfLikes = Math.abs(Math.max(0, video.numberOfLikes))
+  const numberOfDislikes = Math.abs(Math.max(0, video.numberOfDislikes))
+  
+
+  // rock star videos will quickly reach high ratings
+  const isVeryPopular = numberOfViews > 100000 || numberOfLikes > 100000
+
+  if (isVeryPopular) { return true }
+
+  const rating = numberOfLikes - numberOfDislikes
+
+  // while the number of dislike should be enough, some content is so bad that
+  // people don't even take the time to watch and dislike it
+  // so we might add other roules
+  const isAppreciatedByPeople = rating > 0
+
+  return isAppreciatedByPeople
+}

src/types.ts

@@ -650,6 +650,7 @@ export type MediaDisplayLayout =
   | "horizontal" // will be used for a "Netflix" horizontal sliding mode
   | "vertical" // used in the right recommendation panel
   | "table" // used when shown in a table mode
+  | "micro"
 
 export type VideoRating = {
   isLikedByUser: boolean