Upload components/MetadataPanel.jsx with huggingface_hub

components/MetadataPanel.jsx

@@ -0,0 +1,59 @@
+import { 
+  Camera, 
+  Aperture, 
+  Clock, 
+  Hash, 
+  Box,
+  Layers
+} from 'lucide-react';
+
+export default function MetadataPanel({ worldData }) {
+  if (!worldData) return null;
+
+  const stats = [
+    { icon: Box, label: 'Points', value: worldData.pointCount?.toLocaleString() || '50,000' },
+    { icon: Layers, label: 'Resolution', value: worldData.resolution || '8K' },
+    { icon: Aperture, label: 'Aperture', value: worldData.aperture || 'f/2.8' },
+    { icon: Clock, label: 'Shutter', value: worldData.shutterSpeed || '1/60s' },
+    { icon: Hash, label: 'ISO', value: worldData.iso || '400' },
+  ];
+
+  return (
+    <div className="glass-panel rounded-xl p-4 space-y-4">
+      <div className="flex items-center gap-2 mb-4">
+        <Camera className="w-5 h-5 text-indigo-400" />
+        <h3 className="font-semibold text-slate-200">Capture Metadata</h3>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-3">
+        {stats.map((stat) => (
+          <div key={stat.label} className="bg-slate-800/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 text-slate-400 text-xs mb-1">
+              <stat.icon className="w-3 h-3" />
+              <span>{stat.label}</span>
+            </div>
+            <p className="text-slate-200 font-mono text-sm">{stat.value}</p>
+          </div>
+        ))}
+      </div>
+      
+      <div className="pt-4 border-t border-slate-700">
+        <h4 className="text-sm font-medium text-slate-300 mb-2">360° Capture Info</h4>
+        <div className="space-y-2 text-xs text-slate-400">
+          <div className="flex justify-between">
+            <span>Stitching Software</span>
+            <span className="text-slate-300">{worldData.software || 'Insta360 Studio'}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Projection</span>
+            <span className="text-slate-300">Equirectangular</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Format</span>
+            <span className="text-slate-300">.ply Gaussian Splat</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}