🍿

.env

@@ -0,0 +1,9 @@
+
+ADMIN_HUGGING_FACE_API_TOKEN=""
+ADMIN_HUGGING_FACE_USERNAME=""
+
+# ----------- CENSORSHIP -------
+ENABLE_CENSORSHIP=
+FINGERPRINT_KEY=
+MODERATION_KEY=
+

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/sandbox/

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

Dockerfile

@@ -0,0 +1,65 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,13 @@
+---
+title: AI Tube
+emoji: 🍿
+colorFrom: red
+colorTo: red
+sdk: docker
+pinned: true
+app_port: 3000
+---
+
+# 🍿 AI Tube
+
+(To be continued)

TODO.md

@@ -0,0 +1,6 @@
+
+Allow browsing some loras
+
+Funny use cases to try:
+- Hugging Face
+- Zelda 64 (will be a bit more tricky since it uses some custom Replicate stuff)

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "ai-tube",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/inference": "^2.6.4",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@react-spring/web": "^9.7.3",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@types/uuid": "^9.0.2",
+    "autoprefixer": "10.4.14",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "cookies-next": "^2.1.2",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
+    "hash-wasm": "^4.11.0",
+    "lucide-react": "^0.260.0",
+    "next": "^14.0.3",
+    "pick": "^0.0.1",
+    "postcss": "8.4.26",
+    "pythonia": "^1.0.4",
+    "qs": "^6.11.2",
+    "react": "18.2.0",
+    "react-circular-progressbar": "^2.1.0",
+    "react-dom": "18.2.0",
+    "react-icons": "^4.12.0",
+    "react-smooth-scroll-hook": "^1.3.4",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "replicate": "^0.17.0",
+    "sbd": "^1.0.19",
+    "sentence-splitter": "^4.3.0",
+    "sharp": "^0.32.5",
+    "styled-components": "^6.0.7",
+    "tailwind-merge": "^1.13.2",
+    "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "^1.0.6",
+    "temp-dir": "^3.0.0",
+    "ts-node": "^10.9.1",
+    "type-fest": "^4.8.2",
+    "typescript": "5.1.6",
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.0",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/proper-lockfile": "^4.1.2",
+    "@types/qs": "^6.9.7",
+    "@types/react-virtualized": "^9.21.22",
+    "@types/sbd": "^1.0.3",
+    "daisyui": "^3.7.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "pollo",
+	"icons": [
+		{
+			"src": "\/favicon-36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": 0.75
+		},
+		{
+			"src": "\/favicon-48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": 1
+		},
+		{
+			"src": "\/favicon-72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": 1.5
+		},
+		{
+			"src": "\/favicon-96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": 2
+		},
+		{
+			"src": "\/favicon-144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": 3
+		},
+		{
+			"src": "\/favicon-192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": 4
+		}
+	]
+}

src/app/globals.css

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+
+/* this is the trick to bypass the style={{}} attribute when printing */
+@media print {
+  .comic-page[style] { width: 100vw !important; }
+}
+
+
+.render-to-image .comic-panel {
+  height: auto !important;
+  /* max-width: fit-content !important; */
+}

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

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils"
+import { ChannelInfo } from "@/types"
+
+export function ChannelCard({
+  channel,
+  className = "",
+}: {
+  channel: ChannelInfo
+  className?: string
+ }) {
+
+  return (
+  <div
+    className={cn(
+      `flex flex-col`,
+      `w-[300px] h-[400px]`,
+      `bg-line-900`,
+      className,
+    )}>
+      <div
+        className={cn(
+          `rounded-lg overflow-hidden`
+        )}
+      >
+        <img src="" />
+      </div>
+      <div className={cn(
+
+      )}>
+        <h3>{channel.label}</h3>
+      </div>
+    </div>
+  )
+}

src/app/interface/channel-list/index.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+import { ChannelInfo } from "@/types"
+
+import { ChannelCard } from "../channel-card"
+
+export function ChannelList({
+  channels,
+  layout = "flex",
+  className = "",
+}: {
+  channels: ChannelInfo[]
+
+  /**
+   * Layout mode
+   * 
+   * This isn't necessarily based on screen size, it can also be:
+   * - based on the device type (eg. a smart TV)
+   * - a design choice for a particular page
+   */
+  layout?: "grid" | "flex"
+
+  className?: string
+}) {
+  
+  return (
+    <div
+      className={cn(
+        layout === "grid"
+          ? `grid grid-cols-4 gap-4`
+          : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
+        className,
+      )}
+    >
+    {channels.map((channel) => (
+      <ChannelCard
+        key={channel.id}
+        channel={channel}
+        className=""
+      />
+    ))}
+    </div>
+  )
+}

src/app/interface/fonts/index.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { Grandstander, Klee_One } from 'next/font/google'
+
+// If loading a variable font, you don't need to specify the font weight
+export const headingFont = Grandstander({ subsets: ['latin'] })
+export const paragraphFont = Klee_One({ subsets: ['latin'], weight: "600" })

src/app/interface/left-menu/index.tsx

@@ -0,0 +1,45 @@
+import { GrChannel } from "react-icons/gr"
+import { MdVideoLibrary } from "react-icons/md"
+import { RiHome8Line } from "react-icons/ri"
+
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+import { MenuItem } from "./menu-item"
+
+export function LeftMenu() {
+  const view = useStore(s => s.view)
+  const setView = useStore(s => s.setView)
+  return (
+    <div className={cn(
+      `flex flex-col items-center`,
+      `justify-items-stretch`,
+      `w-24 px-1 pt-4`,
+     // `bg-orange-500`,
+    )}>
+      <MenuItem
+        icon={<RiHome8Line className="h-6 w-6" />}
+        selected={view === "home"}
+        onClick={() => setView("home")}
+        >
+        Home
+      </MenuItem>
+      <MenuItem
+        icon={<GrChannel className="h-5 w-5" />}
+        selected={view === "channels_public"}
+        onClick={() => setView("channels_public")}
+        >
+        Channels
+      </MenuItem>
+      <MenuItem
+        icon={<MdVideoLibrary className="h-6 w-6" />}
+        selected={
+          view === "channels_admin" ||
+          view === "channel_admin"
+        }
+        onClick={() => setView("channels_admin")}
+        >
+        My Content
+      </MenuItem>
+    </div>
+    )
+}

src/app/interface/left-menu/menu-item/index.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function MenuItem({
+  icon = null,
+  children = null,
+  selected = false,
+  onClick = undefined,
+  className = "",
+}: {
+  icon?: ReactNode
+  children?: ReactNode
+  selected?: boolean
+  onClick?: () => void
+  className?: string
+}) {
+
+  return (
+    <div className={cn(
+      `flex flex-col`,
+      `items-center justify-center justify-items-stretch`,
+      // `bg-green-500`,
+      `cursor-pointer`,
+      `w-full h-21`,
+      `p-1`,
+      `group`
+    )}
+      onClick={() => {
+      if (onClick && !selected) {
+        onClick()
+      }
+      }}
+    >
+      <div
+        className={cn(
+        `flex flex-col`,
+        `items-center justify-center`,
+        `w-full h-full`,
+        `space-y-1.5`,
+        `rounded-xl`,
+        `text-xs`,
+        `transition-all duration-300 ease-in-out`,
+        // `bg-yellow-500`,
+  
+        selected
+          ? `bg-neutral-100/10`
+          : `group-hover:bg-neutral-100/10 bg-neutral-100/0`,
+     
+
+        className,
+      )}
+      >
+      {icon}
+      <div className="text-center">
+        {children}
+      </div>
+    </div>
+  </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { VideoCategory, videoCategoriesWithLabels } from "@/app/state/categories"
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+
+export function TopMenu() {
+  const displayMode = useStore(s => s.displayMode)
+  const setDisplayMode = useStore(s => s.setDisplayMode)
+  const currentChannel = useStore(s => s.currentChannel)
+  const setCurrentChannel = useStore(s => s.setCurrentChannel)
+  const currentCategory = useStore(s => s.currentCategory)
+  const setCurrentCategory = useStore(s => s.setCurrentCategory)
+  const currentVideos = useStore(s => s.currentVideos)
+  const currentVideo = useStore(s => s.currentVideo)
+  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+
+  return (
+    <div className={cn(
+      `flex flex-col`,
+      `overflow-hidden`,
+      `w-full h-28`,
+    )}>
+      <div className={cn(
+        `flex flex-row justify-between`,
+        `w-full`
+      )}>
+        <div className={cn(
+          `flex flex-col items-center justify-center`,
+          `px-4 py-2 w-32`,
+        )}>
+          <div className="flex flex-row items-center">
+            <span className="text-3xl mr-1">🍿 </span>
+            <span className="text-xl font-semibold">HugTube</span>
+          </div>
+        </div>
+        <div className={cn(
+           `flex flex-col items-center justify-center`,
+           `px-4 py-2 w-max-64`,
+        )}>
+          Search bar goes here
+        </div>
+        <div className={cn()}>
+          &nbsp; {/* unused for now */}
+        </div>
+      </div>
+      <div className={cn(
+        `flex flex-row space-x-3`,
+        `text-[13px] font-semibold`,
+      )}>
+        {Object.entries(videoCategoriesWithLabels)
+          .map(([ key, label ]) => (
+          <div
+            key={key}
+            className={cn(
+              `flex flex-col items-center justify-center`,
+              `rounded-lg px-3 py-1 h-8`,
+              `cursor-pointer`,
+              `transition-all duration-300 ease-in-out`,
+              currentCategory === key
+                ? `bg-neutral-100 text-neutral-800`
+                : `bg-neutral-800 text-neutral-50/90 hover:bg-neutral-700 hover:text-neutral-50/90`,
+              // `text-clip`
+            )}
+            onClick={() => {
+              setCurrentCategory(key as VideoCategory)
+            }}
+          >
+            <span className={cn(
+              `text-center`
+            )}>{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils"
+import { FullVideoInfo } from "@/types"
+
+export function VideoCard({
+  video,
+  className = "",
+}: {
+  video: FullVideoInfo
+  className?: string
+ }) {
+
+  return (
+  <div
+    className={cn(
+      `flex flex-col`,
+      `w-[300px] h-[400px]`,
+      `bg-line-900`,
+      className,
+    )}>
+      <div
+        className={cn(
+          `rounded-lg overflow-hidden`
+        )}
+      >
+        <img src="" />
+      </div>
+      <div className={cn(
+
+      )}>
+        <h3>{video.label}</h3>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+import { FullVideoInfo } from "@/types"
+
+import { VideoCard } from "../video-card"
+
+export function VideoList({
+  videos,
+  layout = "flex",
+  className = "",
+}: {
+  videos: FullVideoInfo[]
+
+  /**
+   * Layout mode
+   * 
+   * This isn't necessarily based on screen size, it can also be:
+   * - based on the device type (eg. a smart TV)
+   * - a design choice for a particular page
+   */
+  layout?: "grid" | "flex"
+
+  className?: string
+}) {
+  
+  return (
+    <div
+      className={cn(
+        layout === "grid"
+          ? `grid grid-cols-4 gap-4`
+          : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
+        className,
+      )}
+    >
+    {videos.map((video) => (
+      <VideoCard
+        key={video.id}
+        video={video}
+        className=""
+      />
+    ))}
+    </div>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+import { cn } from '@/lib/utils'
+
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '🍿 AI Tube',
+  description: '🍿 AI Tube',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={cn(
+        `h-full w-full overflow-auto`,
+        inter.className
+        )}>
+        {children}
+      </body>
+    </html>
+  )
+}

src/app/main.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { TopMenu } from "./interface/top-menu"
+import { LeftMenu } from "./interface/left-menu"
+import { useStore } from "./state/useStore"
+import { HomeView } from "./views/home-view"
+import { ChannelsPublicView } from "./views/channels-public-view"
+import { ChannelsAdminView } from "./views/channels-admin-view"
+import { ChannelPublicView } from "./views/channel-public-view"
+import { ChannelAdminView } from "./views/channel-admin-view"
+import { VideoPublicView } from "./views/video-public-view"
+
+export function Main() {
+  const view = useStore(s => s.view)
+
+  return (
+    <div className={cn(
+      `flex flex-row h-screen w-screen inset-0 overflow-hidden`,
+    )}>
+      <LeftMenu />
+      <div className={cn(
+        `flex flex-col`,
+        `w-[calc(100vh-56px)]`
+      )}>
+        <TopMenu />
+        {view === "home" && <HomeView />}
+        {view === "channels_admin" && <ChannelsAdminView />}
+        {view === "channels_public" && <ChannelsPublicView />}
+        {view === "channel_public" && <ChannelPublicView />}
+        {view === "channel_admin" && <ChannelAdminView />}
+        {view === "video_public" && <VideoPublicView />}
+      </div>
+    </div>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Head from "next/head"
+import Script from "next/script"
+
+import { cn } from "@/lib/utils"
+
+import { Main } from "./main"
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
+
+export default function Page() {
+  const [isLoaded, setLoaded] = useState(false)
+  useEffect(() => { setLoaded(true) }, [])
+  return (
+    <>
+      <Head>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
+      </Head>
+      <main className={cn(
+        `light text-neutral-100`,
+        // `bg-gradient-to-r from-green-500 to-yellow-400`,
+        `bg-gradient-to-r from-neutral-950 to-neutral-950`,
+        )}>
+        {isLoaded && <Main />}
+        {/*
+        TODO: use a new tracker
+        This is the kind of project on which we want custom analytics!
+        <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-NJ2ZZFBX" />
+        <Script id="google-analytics">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+    
+            gtag('config', 'GTM-NJ2ZZFBX');
+          `}
+        </Script>
+        */}
+      </main>
+    </>
+  )
+}