Delete hooks/useHandDetection.js

hooks/useHandDetection.js

@@ -1,253 +0,0 @@
-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()
-  };
-};