Create useHandDetection.js

hooks/useHandDetection.js

@@ -0,0 +1,253 @@
+import { useState, useEffect, useRef } from 'react';
+import * as tf from '@tensorflow/tfjs';
+import * as cocossd from '@tensorflow-models/coco-ssd';
+
+const useCardDetection = (videoRef, canvasRef, isMobile) => {
+  const [model, setModel] = useState(null);
+  const [cardDetected, setCardDetected] = useState(false);
+  const [detectedCards, setDetectedCards] = useState([]);
+  const [cardCount, setCardCount] = useState(0);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+  
+  const requestRef = useRef(null);
+  const lastDetectionTimeRef = useRef(0);
+  const isComponentMounted = useRef(true);
+  
+  // Initialize the object detection model
+  useEffect(() => {
+    isComponentMounted.current = true;
+    
+    const loadModel = async () => {
+      try {
+        // Load COCO-SSD model as a base
+        // In production, you'd want to use a custom card detection model
+        const loadedModel = await cocossd.load({
+          base: 'lite_mobilenet_v2',
+          modelUrl: undefined // Use default model
+        });
+        
+        if (!isComponentMounted.current) return;
+        
+        setModel(loadedModel);
+        console.log("Card detection model loaded successfully");
+        
+        // Set first load to false after initialization
+        setTimeout(() => {
+          if (isComponentMounted.current) {
+            setIsFirstLoad(false);
+          }
+        }, 3000);
+      } catch (error) {
+        console.error("Error loading detection model:", error);
+      }
+    };
+
+    loadModel();
+
+    return () => {
+      isComponentMounted.current = false;
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+        requestRef.current = null;
+      }
+    };
+  }, []);
+
+  // Process video frames and detect cards
+  useEffect(() => {
+    if (!model || !videoRef.current || !canvasRef.current) return;
+
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    const detectCards = async (now) => {
+      if (!isComponentMounted.current) return;
+      
+      if (video.readyState < 2) {
+        requestRef.current = requestAnimationFrame(detectCards);
+        return;
+      }
+
+      // Only run detection every 200ms for performance
+      if (now - lastDetectionTimeRef.current > 200) {
+        lastDetectionTimeRef.current = now;
+        
+        try {
+          // Detect objects in the video frame
+          const predictions = await model.detect(video);
+          
+          // Clear the canvas
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          
+          // Draw the video frame
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          
+          // Filter for card-like objects
+          // In a real implementation, you'd have a model trained specifically for cards
+          const cardPredictions = predictions.filter(prediction => {
+            // This is a placeholder - in reality, you'd detect actual playing cards
+            // For demo purposes, we'll look for rectangular objects
+            const aspectRatio = prediction.bbox[2] / prediction.bbox[3];
+            return aspectRatio > 0.5 && aspectRatio < 0.8 && 
+                   prediction.score > 0.5;
+          });
+          
+          // Draw bounding boxes for detected cards
+          ctx.strokeStyle = '#00FF00';
+          ctx.lineWidth = 3;
+          ctx.font = '18px Arial';
+          ctx.fillStyle = '#00FF00';
+          
+          const cards = [];
+          
+          cardPredictions.forEach((prediction, index) => {
+            const [x, y, width, height] = prediction.bbox;
+            
+            // Draw bounding box
+            ctx.strokeRect(x, y, width, height);
+            
+            // Draw label
+            const label = `Card ${index + 1} (${Math.round(prediction.score * 100)}%)`;
+            ctx.fillText(label, x, y > 20 ? y - 5 : y + height + 20);
+            
+            // Store card information
+            cards.push({
+              id: index,
+              bbox: prediction.bbox,
+              confidence: prediction.score,
+              center: {
+                x: x + width / 2,
+                y: y + height / 2
+              }
+            });
+          });
+          
+          // Update state
+          setCardDetected(cards.length > 0);
+          setDetectedCards(cards);
+          setCardCount(cards.length);
+          
+        } catch (error) {
+          console.error("Detection error:", error);
+        }
+      }
+      
+      requestRef.current = requestAnimationFrame(detectCards);
+    };
+
+    requestRef.current = requestAnimationFrame(detectCards);
+
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+        requestRef.current = null;
+      }
+    };
+  }, [model, videoRef, canvasRef]);
+
+  // Custom card classification function (placeholder)
+  const classifyCard = async (imageData) => {
+    // In a real implementation, this would:
+    // 1. Extract the card region from the image
+    // 2. Run it through a card classification model
+    // 3. Return the suit and rank
+    return {
+      suit: 'unknown',
+      rank: 'unknown',
+      confidence: 0
+    };
+  };
+
+  // Function to analyze card patterns
+  const analyzeCardPattern = (cards) => {
+    // Analyze spatial arrangement of cards
+    if (cards.length === 0) return null;
+    
+    // Sort cards by x position (left to right)
+    const sortedCards = [...cards].sort((a, b) => a.center.x - b.center.x);
+    
+    // Calculate spread and alignment
+    const spread = cards.length > 1 ? 
+      sortedCards[sortedCards.length - 1].center.x - sortedCards[0].center.x : 0;
+    
+    const avgY = cards.reduce((sum, card) => sum + card.center.y, 0) / cards.length;
+    const alignment = cards.every(card => Math.abs(card.center.y - avgY) < 50) ? 'horizontal' : 'scattered';
+    
+    return {
+      count: cards.length,
+      spread,
+      alignment,
+      sortedCards
+    };
+  };
+
+  return {
+    cardDetected,
+    detectedCards,
+    cardCount,
+    isFirstLoad,
+    isComponentMounted,
+    classifyCard,
+    analyzeCardPattern,
+    cardPattern: analyzeCardPattern(detectedCards)
+  };
+};
+
+export default useCardDetection;
+
+// Utility functions for card detection
+export const drawCardBoundingBox = (ctx, card, color = '#00FF00') => {
+  const [x, y, width, height] = card.bbox;
+  
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.strokeRect(x, y, width, height);
+  
+  // Draw corner markers
+  const cornerLength = 20;
+  ctx.lineWidth = 3;
+  
+  // Top-left corner
+  ctx.beginPath();
+  ctx.moveTo(x, y + cornerLength);
+  ctx.lineTo(x, y);
+  ctx.lineTo(x + cornerLength, y);
+  ctx.stroke();
+  
+  // Top-right corner
+  ctx.beginPath();
+  ctx.moveTo(x + width - cornerLength, y);
+  ctx.lineTo(x + width, y);
+  ctx.lineTo(x + width, y + cornerLength);
+  ctx.stroke();
+  
+  // Bottom-left corner
+  ctx.beginPath();
+  ctx.moveTo(x, y + height - cornerLength);
+  ctx.lineTo(x, y + height);
+  ctx.lineTo(x + cornerLength, y + height);
+  ctx.stroke();
+  
+  // Bottom-right corner
+  ctx.beginPath();
+  ctx.moveTo(x + width - cornerLength, y + height);
+  ctx.lineTo(x + width, y + height);
+  ctx.lineTo(x + width, y + height - cornerLength);
+  ctx.stroke();
+};
+
+// Card suit and rank detection utilities
+export const CARD_SUITS = ['hearts', 'diamonds', 'clubs', 'spades'];
+export const CARD_RANKS = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
+
+// Placeholder for custom card model predictions
+export const predictCardValue = async (model, imageData) => {
+  // This would use a trained model to predict card suit and rank
+  // For now, return a placeholder
+  return {
+    suit: CARD_SUITS[Math.floor(Math.random() * 4)],
+    rank: CARD_RANKS[Math.floor(Math.random() * 13)],
+    confidence: Math.random()
+  };
+};