Pyhton server integration

app/page.tsx

@@ -7,13 +7,12 @@ import { Camera, History, VideoOff, Settings, Video } from 'lucide-react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Slider } from '@/components/ui/slider';
 import { Switch } from '@/components/ui/switch';
-import { SHOE_DATABASE, type Shoe } from '@/lib/shoe-database';
-import { detectShoe } from '@/lib/ml-classification';
+import { type Shoe } from '@/lib/shoe-database';
 import { addToHistory, getHistory } from '@/lib/history-storage';
 import ShoeResultsPopup from '@/components/shoe-results-popup';
 import HistorySidebar from '@/components/history-sidebar';
 import { useDetection } from '@/lib/ml/use-detection';
-import type { DetectionResult, DetectionConfig } from '@/lib/ml/types';
+import type { DetectionResult } from '@/lib/ml/types';
 
 type CameraStatus = 'loading' | 'active' | 'denied' | 'no_devices';
 
@@ -31,6 +30,7 @@ export default function HomePage() {
   const [isPopupOpen, setPopupOpen] = useState(false);
   const [isHistoryOpen, setHistoryOpen] = useState(false);
   const [history, setHistory] = useState<Shoe[]>([]);
+  const [detectedSKU, setDetectedSKU] = useState<string | null>(null);
   const [isSettingsPanelOpen, setSettingsPanelOpen] = useState(false);
 
   // ML Detection state
@@ -40,8 +40,31 @@ export default function HomePage() {
   const [lastSoundTime, setLastSoundTime] = useState(0);
 
 
+  // Initialize ML detection system first
+  const {
+    isLoading: isMLLoading,
+    metrics,
+    error: mlError,
+    initialize: initializeML,
+    startContinuous,
+    stopContinuous,
+    triggerDetection,
+    updateConfig,
+    config,
+    detectionEngine,
+    setDetectionCallback
+  } = useDetection({
+    modelVariant: 'standard', // Start with standard model
+    enableContinuous: true,
+    enableTrigger: true,
+    onDetection: undefined, // Will be set after handleDetection is defined
+    onError: (error) => {
+      console.error('ML Detection Error:', error);
+    }
+  });
+
   // Clean detection callback - no canvas drawing needed
-  const handleDetection = useCallback((detection: DetectionResult | null) => {
+  const handleDetection = useCallback(async (detection: DetectionResult | null) => {
     const callbackId = Math.random().toString(36).substr(2, 9);
     console.log(`🔍 Detection callback received [${callbackId}]:`, detection);
     setCurrentDetection(detection);
@@ -54,6 +77,37 @@ export default function HomePage() {
     // Auto-trigger popup when shoe is detected with high confidence
     if (detection && detection.confidence > 0.7) {
       console.log(`🎯 HIGH CONFIDENCE SHOE DETECTED! [${callbackId}] Opening popup...`, detection);
+      
+      // Call SKU identification API
+      if (videoRef.current && detectionEngine) {
+        try {
+          console.log(`🔍 [${callbackId}] Calling SKU identification...`);
+          const sku = await detectionEngine.identifyProductSKU(videoRef.current);
+          console.log(`📦 [${callbackId}] SKU result:`, sku);
+          setDetectedSKU(sku);
+          
+          if (sku) {
+            // Create shoe object with SKU for history
+            const shoeWithSKU: Shoe = {
+              id: Date.now().toString(),
+              name: `Producto ${sku}`,
+              brand: 'Identificado por IA',
+              price: 'Precio por consultar',
+              image: '/placeholder.jpg',
+              confidence: detection.confidence,
+              sku: sku,
+              timestamp: new Date().toISOString()
+            };
+            
+            const updatedHistory = addToHistory(shoeWithSKU);
+            setHistory(updatedHistory);
+          }
+        } catch (error) {
+          console.error(`❌ [${callbackId}] SKU identification failed:`, error);
+          setDetectedSKU(null);
+        }
+      }
+      
       setPopupOpen(true);
       
       // Play detection sound with debouncing (max once per 2 seconds)
@@ -93,28 +147,14 @@ export default function HomePage() {
         }
       });
     }
-  }, []);
+  }, [detectionEngine]);
 
-  // Initialize ML detection system
-  const {
-    isLoading: isMLLoading,
-    metrics,
-    error: mlError,
-    initialize: initializeML,
-    startContinuous,
-    stopContinuous,
-    triggerDetection,
-    updateConfig,
-    config
-  } = useDetection({
-    modelVariant: 'standard', // Start with standard model
-    enableContinuous: true,
-    enableTrigger: true,
-    onDetection: handleDetection,
-    onError: (error) => {
-      console.error('ML Detection Error:', error);
+  // Set the detection callback after handleDetection is defined
+  useEffect(() => {
+    if (setDetectionCallback && handleDetection) {
+      setDetectionCallback(handleDetection);
     }
-  });
+  }, [handleDetection, setDetectionCallback]);
 
   // Effect to clean up the stream when component unmounts or stream changes
   useEffect(() => {
@@ -237,38 +277,55 @@ export default function HomePage() {
   const handleScan = async () => {
     if (detectionEnabled && triggerDetection) {
       try {
-        console.log('Triggering ML detection...');
+        console.log('🎯 Triggering ML detection...');
         const mlResult = await triggerDetection();
         
         if (mlResult) {
-          // Use the existing detected shoe but with real ML confidence
-          const detected = detectShoe(SHOE_DATABASE);
-          if (detected) {
-            const updatedHistory = addToHistory(detected);
-            setHistory(updatedHistory);
+          console.log('✅ Shoe detected by ML, calling SKU identification...');
+          
+          // Call SKU identification with the detected shoe
+          if (videoRef.current && detectionEngine) {
+            try {
+              const sku = await detectionEngine.identifyProductSKU(videoRef.current);
+              console.log('📦 Manual scan SKU result:', sku);
+              setDetectedSKU(sku);
+              
+              if (sku) {
+                // Create shoe object with SKU for history
+                const shoeWithSKU: Shoe = {
+                  id: Date.now().toString(),
+                  name: `Producto ${sku}`,
+                  brand: 'Identificado por IA',
+                  price: 'Precio por consultar',
+                  image: '/placeholder.jpg',
+                  confidence: mlResult.confidence,
+                  sku: sku,
+                  timestamp: new Date().toISOString()
+                };
+                
+                const updatedHistory = addToHistory(shoeWithSKU);
+                setHistory(updatedHistory);
+              }
+              
+              setPopupOpen(true);
+            } catch (skuError) {
+              console.error('❌ SKU identification failed:', skuError);
+              // Still show popup even if SKU fails
+              setDetectedSKU(null);
+              setPopupOpen(true);
+            }
+          } else {
+            console.warn('⚠️ Video or detection engine not available for SKU call');
             setPopupOpen(true);
           }
         } else {
-          console.log('No shoe detected by ML');
+          console.log('❌ No shoe detected by ML');
         }
       } catch (error) {
-        console.error('ML detection failed, using fallback:', error);
-        // Fallback to original random detection
-        const detected = detectShoe(SHOE_DATABASE);
-        if (detected) {
-          const updatedHistory = addToHistory(detected);
-          setHistory(updatedHistory);
-          setPopupOpen(true);
-        }
+        console.error('❌ ML detection failed:', error);
       }
     } else {
-      // Fallback to original random detection when ML is disabled
-      const detected = detectShoe(SHOE_DATABASE);
-      if (detected) {
-        const updatedHistory = addToHistory(detected);
-        setHistory(updatedHistory);
-        setPopupOpen(true);
-      }
+      console.log('⚠️ ML detection is disabled');
     }
   };
 
@@ -790,7 +847,7 @@ export default function HomePage() {
   return (
     <main className="relative h-screen w-screen bg-black overflow-hidden">
       {renderContent()}
-      <ShoeResultsPopup isOpen={isPopupOpen} onOpenChange={setPopupOpen} />
+      <ShoeResultsPopup isOpen={isPopupOpen} onOpenChange={setPopupOpen} detectedSKU={detectedSKU} />
       <HistorySidebar isOpen={isHistoryOpen} onOpenChange={setHistoryOpen} history={history} onItemClick={handleHistoryItemClick} />
     </main>
   );