Spaces:

Juanfa
/

anycoder-0b0eca81

Build error

App Files Files Community

Juanfa commited on Mar 15

Commit

5f81703

verified ·

1 Parent(s): 80cd2db

Upload pages/index.js with huggingface_hub

Browse files

Files changed (1) hide show

pages/index.js +156 -0

pages/index.js ADDED Viewed

	@@ -0,0 +1,156 @@

+import { useState, useEffect } from 'react';
+import Head from 'next/head';
+import Header from '../components/Header';
+import GaussianSplatViewer from '../components/GaussianSplatViewer';
+import WorldCard from '../components/WorldCard';
+import Controls from '../components/Controls';
+import MetadataPanel from '../components/MetadataPanel';
+import { Loader2, Grid3X3, List } from 'lucide-react';
+export default function Home() {
+  const [worlds, setWorlds] = useState([]);
+  const [selectedWorld, setSelectedWorld] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [viewMode, setViewMode] = useState('grid');
+  useEffect(() => {
+    fetchWorlds();
+  }, []);
+  const fetchWorlds = async () => {
+    try {
+      const response = await fetch('/api/worlds');
+      const data = await response.json();
+      setWorlds(data);
+      if (data.length > 0) {
+        setSelectedWorld(data[0]);
+      }
+    } catch (error) {
+      console.error('Failed to fetch worlds:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleReset = () => {
+    // Trigger camera reset through ref or state
+    window.dispatchEvent(new CustomEvent('reset-camera'));
+  };
+  const handleZoomIn = () => {
+    window.dispatchEvent(new CustomEvent('zoom-camera', { detail: 0.8 }));
+  };
+  const handleZoomOut = () => {
+    window.dispatchEvent(new CustomEvent('zoom-camera', { detail: 1.2 }));
+  };
+  const handleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 text-indigo-500 animate-spin mx-auto mb-4" />
+          <p className="text-slate-400">Loading worlds...</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <Head>
+        <title>Gaussian Splat Viewer | 360° Worlds</title>
+        <meta name="description" content="View 3D Gaussian Splatting captures from 360° cameras" />
+      </Head>
+      <Header />
+      <main className="pt-16 h-screen flex flex-col lg:flex-row overflow-hidden">
+        {/* Sidebar - World List */}
+        <aside className="w-full lg:w-80 bg-slate-900/50 border-r border-slate-800 flex flex-col">
+          <div className="p-4 border-b border-slate-800">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="font-semibold text-slate-200">Captured Worlds</h2>
+              <div className="flex gap-1">
+                <button
+                  onClick={() => setViewMode('grid')}
+                  className={`p-2 rounded ${viewMode === 'grid' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}
+                >
+                  <Grid3X3 className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setViewMode('list')}
+                  className={`p-2 rounded ${viewMode === 'list' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}
+                >
+                  <List className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            <p className="text-xs text-slate-500">
+              {worlds.length} worlds available • 360° Gaussian Splatting
+            </p>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4 space-y-3 scrollbar-hide">
+            {worlds.map((world) => (
+              <WorldCard
+                key={world.id}
+                world={world}
+                isSelected={selectedWorld?.id === world.id}
+                onClick={() => {
+                  setSelectedWorld(world);
+                  setLoading(true);
+                  setTimeout(() => setLoading(false), 800);
+              />
+            ))}
+          </div>
+          <div className="p-4 border-t border-slate-800">
+            <MetadataPanel worldData={selectedWorld} />
+          </div>
+        </aside>
+        {/* Main Viewer Area */}
+        <section className="flex-1 relative bg-slate-950">
+          <GaussianSplatViewer
+            worldData={selectedWorld}
+            isLoading={loading}
+          />
+          <Controls
+            onReset={handleReset}
+            onZoomIn={handleZoomIn}
+            onZoomOut={handleZoomOut}
+            onFullscreen={handleFullscreen}
+            worldData={selectedWorld}
+          />
+          {/* World Info Overlay */}
+          {selectedWorld && !loading && (
+            <div className="absolute top-4 left-4 glass-panel rounded-xl p-4 max-w-sm">
+              <h2 className="text-lg font-bold text-white mb-1">{selectedWorld.name}</h2>
+              <p className="text-sm text-slate-300 mb-2">{selectedWorld.location}</p>
+              <div className="flex items-center gap-2 text-xs text-slate-400">
+                <span className="px-2 py-1 bg-indigo-600/30 rounded text-indigo-300">
+                  {selectedWorld.pointCount?.toLocaleString()} points
+                </span>
+                <span className="px-2 py-1 bg-slate-700 rounded">
+                  {selectedWorld.cameraModel}
+                </span>
+              </div>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}