Logo addition

app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { Camera, History, VideoOff, Settings, Video } from 'lucide-react';
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -17,6 +18,9 @@ import type { DetectionResult, DetectionConfig } from '@/lib/ml/types';
 type CameraStatus = 'loading' | 'active' | 'denied' | 'no_devices';
 
 export default function HomePage() {
+  const searchParams = useSearchParams();
+  const isDev = searchParams.get('dev') === 'true';
+  
   const videoRef = useRef<HTMLVideoElement>(null);
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [cameraStatus, setCameraStatus] = useState<CameraStatus>('loading');
@@ -371,13 +375,82 @@ export default function HomePage() {
           <>
             <video ref={videoRef} autoPlay playsInline muted onCanPlay={() => videoRef.current?.play()} className="h-full w-full object-cover" />
             
+            {/* Impuls Logo - Top Left */}
+            <div className="absolute top-3 left-6 z-10 pointer-events-none">
+              <img 
+                src="/Impuls Logo.png" 
+                alt="Impuls Logo" 
+                className="h-12 w-auto opacity-80"
+                style={{ filter: 'brightness(0) invert(1)' }}
+              />
+            </div>
 
-            {/* Detection Counters */}
+            {/* Simple Camera Frame Overlay - Like Reference Image */}
+            <div className="absolute inset-0 pointer-events-none">
+              {/* Simple Corner Frames */}
+              <div className="absolute inset-0">
+                {/* Top Left Corner */}
+                <div className="absolute w-8 h-8" style={{ top: '30%', left: '25%' }}>
+                  <div className="absolute top-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
+                  <div className="absolute top-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
+                </div>
+                
+                {/* Top Right Corner */}
+                <div className="absolute w-8 h-8" style={{ top: '30%', right: '25%' }}>
+                  <div className="absolute top-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
+                  <div className="absolute top-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
+                </div>
+                
+                {/* Bottom Left Corner */}
+                <div className="absolute w-8 h-8" style={{ bottom: '45%', left: '25%' }}>
+                  <div className="absolute bottom-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
+                  <div className="absolute bottom-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
+                </div>
+                
+                {/* Bottom Right Corner */}
+                <div className="absolute w-8 h-8" style={{ bottom: '45%', right: '25%' }}>
+                  <div className="absolute bottom-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
+                  <div className="absolute bottom-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
+                </div>
+              </div>
+              
+              {/* Center Rotating 3D Shoe Logo */}
+              <div className="absolute w-16 h-16" style={{ top: '42.5%', left: '50%', transform: 'translate(-50%, -50%)' }}>
+                {/* 3D Rotating Shoe Logo */}
+                <div className="relative w-full h-full" style={{ 
+                  transformStyle: 'preserve-3d',
+                  animation: 'rotate3D 6s infinite linear'
+                }}>
+                  {/* Shoe Logo Image */}
+                  <img 
+                    src="/zapatillas.png" 
+                    alt="Shoe Logo" 
+                    className="absolute inset-0 w-full h-full object-contain opacity-60"
+                    style={{ filter: 'brightness(0) invert(1)' }}
+                  />
+                </div>
+              </div>
+              
+              {/* 3D Animation Keyframes */}
+              <style jsx>{`
+                @keyframes rotate3D {
+                  0% { transform: rotateY(0deg) rotateX(0deg); }
+                  25% { transform: rotateY(90deg) rotateX(15deg); }
+                  50% { transform: rotateY(180deg) rotateX(0deg); }
+                  75% { transform: rotateY(270deg) rotateX(-15deg); }
+                  100% { transform: rotateY(360deg) rotateX(0deg); }
+                }
+              `}</style>
+            </div>
+
+            {/* Detection Counters - Only show in dev mode */}
+            {isDev && (
               <div className="absolute top-4 right-4 bg-black/60 backdrop-blur-sm rounded-lg px-3 py-2 text-white text-xs space-y-1">
                 <div className="text-green-400">👟 Shoes Found: {shoeDetectionCount}</div>
                 <div className="text-gray-400">🔄 Inference Runs: {metrics?.detectionCount || 0}</div>
                 <div className="text-blue-400">⚡ Avg Speed: {metrics?.inferenceTime ? `${metrics.inferenceTime.toFixed(0)}ms` : 'N/A'}</div>
               </div>
+            )}
             
             {/* Settings Panel */}
             <div className={`absolute left-0 top-0 bottom-0 w-80 bg-black/80 backdrop-blur-xl border-r border-white/20 transform transition-transform duration-500 ease-out z-40 ${
@@ -422,7 +495,8 @@ export default function HomePage() {
                 <div className="space-y-4 flex-1">
 
 
-                  {/* ML Detection Settings */}
+                  {/* ML Detection Settings - Only show in dev mode */}
+                  {isDev && (
                     <div className="bg-white/5 rounded-lg p-4 border border-white/10">
                       <div className="flex items-center gap-2 mb-3">
                         <Camera size={20} className="text-blue-400" />
@@ -468,7 +542,6 @@ export default function HomePage() {
                           </div>
                         )}
 
-
                         {/* Detection Confidence Indicator */}
                         {detectionEnabled && currentDetection && (
                           <div className="space-y-2 pt-2">
@@ -555,6 +628,7 @@ export default function HomePage() {
                         )}
                       </div>
                     </div>
+                  )}
 
 
                   {/* App Info */}

lib/ml/device-capabilities.ts

@@ -44,14 +44,14 @@ export function getRecommendedConfig(capabilities: DeviceCapabilities): typeof D
         ...baseConfig,
         modelVariant: 'standard',
         frameSkip: 6,
-        confidenceThreshold: 0.6,
+        confidenceThreshold: 0.8,
       };
     case 'mid':
       return {
         ...baseConfig,
         modelVariant: 'standard',
         frameSkip: 6,
-        confidenceThreshold: 0.5,
+        confidenceThreshold: 0.8,
       };
     case 'low':
     default:
@@ -59,7 +59,7 @@ export function getRecommendedConfig(capabilities: DeviceCapabilities): typeof D
         ...baseConfig,
         modelVariant: 'quantized',
         frameSkip: 6,
-        confidenceThreshold: 0.4,
+        confidenceThreshold: 0.8,
       };
   }
 }

lib/ml/model-config.ts

@@ -33,7 +33,7 @@ export const MODEL_VARIANTS: Record<'quantized' | 'standard' | 'full', ModelInfo
  */
 export const DEFAULT_CONFIG: DetectionConfig = {
   frameSkip: 6,
-  confidenceThreshold: 0.3, // Match the working implementation (30%)
+  confidenceThreshold: 0.8, // Default to 80% confidence
   modelVariant: 'standard',
   maxDetections: 5, // Match the working implementation (process up to 5 detections)
   inputSize: [300, 300], // Match the working implementation