- AI Tube is a sandbox platform launched in Nov 2023 to experiment with autonomous creation of long videos. The videos are generated from single text prompts by humans and by AI robots.
+ AiTube is a sandbox platform launched in Nov 2023 to experiment with autonomous creation of long videos. The videos are generated from single text prompts by humans and by AI robots.
To my knowledge, is the first platform to operate this way. As a research sandbox, it features other experiments such as being the first platform to autonomously generate VR videos using AI (open this example with a WebXR-compatible device eg. an iPhone).
diff --git a/src/app/interface/collection-card/index.tsx b/src/app/interface/collection-card/index.tsx
index 864e760e3555d2533506c4a78e82bce5e7282129..f3dfd536a67214df6e14ed5cf55347ebdaef359c 100644
--- a/src/app/interface/collection-card/index.tsx
+++ b/src/app/interface/collection-card/index.tsx
@@ -112,6 +112,7 @@ export function CollectionCard({
`flex flex-col items-center justify-center text-center`,
`bg-neutral-900 rounded`,
`text-2xs font-semibold px-[3px] py-[1px]`,
+ isFinite(duration) && !isNaN(duration) && duration > 0 ? 'opacity-100' : 'opacity-0'
)}
>{formatDuration(duration)}
diff --git a/src/app/interface/equirectangular-video-player/index.tsx b/src/app/interface/equirectangular-video-player/index.tsx
index 4451abb45366a1d5e18a1c733322959cebd2f058..256f689f1c9eea750e0d8def6e46242d93dae35c 100644
--- a/src/app/interface/equirectangular-video-player/index.tsx
+++ b/src/app/interface/equirectangular-video-player/index.tsx
@@ -3,7 +3,7 @@
import AutoSizer from "react-virtualized-auto-sizer"
import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { MediaInfo } from "@/types/general"
import { VideoSphereViewer } from "./viewer"
@@ -11,7 +11,7 @@ export function EquirectangularVideoPlayer({
video,
className = "",
}: {
- video?: VideoInfo
+ video?: MediaInfo
className?: string
}) {
diff --git a/src/app/interface/equirectangular-video-player/viewer.tsx b/src/app/interface/equirectangular-video-player/viewer.tsx
index 015940c2adc95309ef1477813c2a6654eb1a8fdb..8783f4004af6992e723258bd970252e1d5d88f63 100644
--- a/src/app/interface/equirectangular-video-player/viewer.tsx
+++ b/src/app/interface/equirectangular-video-player/viewer.tsx
@@ -1,14 +1,21 @@
"use client"
-import { useEffect, useRef, useState } from "react"
-import AutoSizer from "react-virtualized-auto-sizer"
-import { PanoramaPosition, PluginConstructor, Point, Position, SphericalPosition, Viewer } from "@photo-sphere-viewer/core"
-import { EquirectangularVideoAdapter, LensflarePlugin, ReactPhotoSphereViewer, ResolutionPlugin, SettingsPlugin, VideoPlugin } from "react-photo-sphere-viewer"
+import { useEffect, useRef } from "react"
+import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
-import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types/general"
+import { Viewer } from "@photo-sphere-viewer/core"
+
+import { EquirectangularVideoAdapter } from "@photo-sphere-viewer/equirectangular-video-adapter"
+
+import { SettingsPlugin } from "@photo-sphere-viewer/settings-plugin"
+import { ResolutionPlugin } from "@photo-sphere-viewer/resolution-plugin"
+import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
-type PhotoSpherePlugin = (PluginConstructor | [PluginConstructor, any])
+import "@photo-sphere-viewer/settings-plugin/index.css"
+import "@photo-sphere-viewer/video-plugin/index.css"
+
+import { cn } from "@/lib/utils"
+import { MediaInfo } from "@/types/general"
export function VideoSphereViewer({
video,
@@ -17,7 +24,7 @@ export function VideoSphereViewer({
height,
muted = false,
}: {
- video: VideoInfo
+ video: MediaInfo
className?: string
width: number
height: number
@@ -64,15 +71,16 @@ export function VideoSphereViewer({
// plugins={[[LensflarePlugin, { lensflares: [] }]]}
adapter={[EquirectangularVideoAdapter, { muted }]}
+
navbar="video"
src=""
plugins={[
+ [SettingsPlugin, {}],
[VideoPlugin, {
muted,
// progressbar: true,
bigbutton: false
}],
- // SettingsPlugin,
[ResolutionPlugin, {
defaultResolution: 'HD',
resolutions: [
diff --git a/src/app/interface/gsplat/index.tsx b/src/app/interface/gsplat/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a78e0b0daf111d39f6fbeb770ede73d81c5f6859
--- /dev/null
+++ b/src/app/interface/gsplat/index.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from "react"
+import * as SPLAT from "gsplat"
+
+type GsplatStatus =
+ | "idle"
+ | "loading"
+ | "loaded"
+ | "failed"
+
+export function Gsplat({
+ url,
+ width,
+ height,
+ className = "" }: {
+ url: string
+ width?: number
+ height?: number
+ className?: string
+}) {
+ const canvasRef = useRef