changed logic in ocr

resources/views/fields/camera-capture.blade.php

@@ -703,37 +703,30 @@ function cameraCapture() {
 
 {{-- .. --}}
 
-<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
+<div x-data="cameraCapture()" x-init="init()" wire:ignore class="space-y-2 relative">
     <!-- Video feed -->
-    <video
+    <video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
-        x-ref="video"
-        autoplay
-        playsinline
-        class="border rounded w-80 h-auto"
-        style="display:block;"
-    ></video>
 
-    <!-- Overlay canvas for OCR highlight -->
+    <!-- Overlay for highlighting text -->
-    <canvas
+    <div x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></div>
-        x-ref="overlay"
-        class="border rounded w-80 h-auto"
-        style="position:absolute; top:0; left:0; pointer-events:none;"
-    ></canvas>
 
-    <!-- Hidden canvas for capturing snapshot -->
+    <!-- Hidden canvas for capturing frames -->
     <canvas x-ref="canvas" class="hidden"></canvas>
 
     <div class="flex space-x-4 mt-2">
         <x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
-        <x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
+        <x-filament::button color="primary" @click="capturePhoto">Capture</x-filament::button>
-        <x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
+        <x-filament::button color="success" @click="verifyText">Verify OCR</x-filament::button>
     </div>
 
     <input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
+    <input type="hidden" x-ref="serialInput" name="serialNumbers">
 </div>
 
-<!-- Scripts -->
+<!-- Libraries -->
-<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/dist/tesseract.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.9.0/dist/tf.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/text-detection@0.1.0/dist/text-detection.min.js"></script>
 
 <script>
 function cameraCapture() {
@@ -741,30 +734,30 @@ function cameraCapture() {
         stream: null,
         currentFacingMode: 'user',
         textDetectionInterval: null,
-        capturedPhoto: null, // store captured image
+        textModel: null,
+        tesseractWorker: null,
+        textDetectionRunning: false,
+        init: async function() {
+            await this.initCamera();
+            await this.initTextModel();
+            await this.initTesseract();
+            this.startDetection();
+        },
 
         async initCamera() {
             try {
                 if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-
                 const video = this.$refs.video;
+
                 this.stream = await navigator.mediaDevices.getUserMedia({
                     video: { facingMode: this.currentFacingMode }
                 });
-
                 video.srcObject = this.stream;
+
                 await new Promise(resolve => video.onloadedmetadata = resolve);
-                video.play();
-
-                // Overlay size matches video
-                const overlay = this.$refs.overlay;
-                overlay.width = video.videoWidth;
-                overlay.height = video.videoHeight;
-
-                this.startDetection();
             } catch (err) {
                 console.error("Camera error:", err);
-                alert("Camera error:\n" + (err.message || err));
+                alert("Camera error: " + (err.message || err));
             }
         },
 
@@ -773,111 +766,82 @@ function cameraCapture() {
             await this.initCamera();
         },
 
-        async capturePhoto() {
+        async initTextModel() {
-            const video = this.$refs.video;
+            this.textModel = await window.textDetection.createDetector('medium');
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
-
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            ctx.drawImage(video, 0, 0);
-
-            const snapshotData = canvas.toDataURL('image/png');
-            this.$refs.hiddenInput.value = snapshotData;
-            this.capturedPhoto = snapshotData; // store for verification
-
-            alert("Photo captured!");
         },
 
-        async verifyPhoto() {
+        async initTesseract() {
-            if (!this.capturedPhoto) {
+            this.tesseractWorker = Tesseract.createWorker({
-                alert("Please capture a photo first!");
-                return;
-            }
-
-            try {
-                const img = new Image();
-                img.src = this.capturedPhoto;
-
-                img.onload = async () => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(img, 0, 0);
-
-                    const result = await Tesseract.recognize(canvas, 'eng', {
                 logger: m => console.log(m)
             });
-
+            await this.tesseractWorker.load();
-                    const detectedText = result.data.text.trim();
+            await this.tesseractWorker.loadLanguage('eng');
-                    alert("Detected Text:\n" + (detectedText || "[No text detected]"));
+            await this.tesseractWorker.initialize('eng');
-                }
-            } catch (err) {
-                console.error("OCR verify error:", err);
-                alert("OCR verify failed:\n" + (err.message || err));
-            }
         },
 
-        async detectText() {
+        startDetection() {
+            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+            this.textDetectionInterval = setInterval(() => this.detectTextTF(), 500);
+        },
+
+        async detectTextTF() {
             if (this.textDetectionRunning) return;
             this.textDetectionRunning = true;
 
             const video = this.$refs.video;
             const overlay = this.$refs.overlay;
+            overlay.innerHTML = '';
 
-            if (!video.videoWidth) {
+            if (!video.videoWidth || !this.textModel) {
                 this.textDetectionRunning = false;
                 return;
             }
 
-            // Clear old highlights
-            overlay.innerHTML = '';
-
-            // Use small canvas for faster detection
-            const tempCanvas = document.createElement('canvas');
-            const scale = 0.5;
-            tempCanvas.width = video.videoWidth * scale;
-            tempCanvas.height = video.videoHeight * scale;
-            tempCanvas.getContext('2d').drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
-
             try {
-                const result = await this.worker.recognize(tempCanvas);
+                // Detect text regions (bounding boxes)
-                const words = result.data.words;
+                const predictions = await this.textModel.estimateText(video);
-
-                words.forEach(w => {
-                    if (!w.bbox || w.confidence < 50) return;
-
-                    // Scale back to full video
-                    const scaleX = 1 / scale;
-                    const scaleY = 1 / scale;
 
+                predictions.forEach(pred => {
+                    const [x, y, w, h] = pred.boundingBox;
                     const div = document.createElement('div');
-                    div.textContent = w.text;
                     div.style.position = 'absolute';
-                    div.style.left = `${w.bbox.x0 * scaleX}px`;
+                    div.style.left = `${x}px`;
-                    div.style.top = `${w.bbox.y0 * scaleY}px`;
+                    div.style.top = `${y}px`;
-                    div.style.width = `${(w.bbox.x1 - w.bbox.x0) * scaleX}px`;
+                    div.style.width = `${w}px`;
-                    div.style.height = `${(w.bbox.y1 - w.bbox.y0) * scaleY}px`;
+                    div.style.height = `${h}px`;
                     div.style.backgroundColor = 'rgba(0,255,0,0.3)';
-                    div.style.color = 'black';
+                    div.style.pointerEvents = 'none';
-                    div.style.fontSize = `${12 * scaleX}px`;
-                    div.style.pointerEvents = 'auto';
-                    div.style.userSelect = 'text';
-                    div.style.overflow = 'hidden';
                     overlay.appendChild(div);
                 });
-
             } catch (err) {
-                console.error("OCR error:", err);
+                console.error("Text detection error:", err);
             } finally {
                 this.textDetectionRunning = false;
             }
         },
 
-        startDetection() {
+        async capturePhoto() {
-            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+            const video = this.$refs.video;
-            this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
+            const canvas = this.$refs.canvas;
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            canvas.getContext('2d').drawImage(video, 0, 0);
+
+            const dataURL = canvas.toDataURL('image/png');
+            this.$refs.hiddenInput.value = dataURL;
+            alert("Photo captured!");
+        },
+
+        async verifyText() {
+            const canvas = this.$refs.canvas;
+            if (!canvas.width || !canvas.height) {
+                alert("Please capture an image first!");
+                return;
+            }
+
+            const result = await this.tesseractWorker.recognize(canvas);
+            const text = result.data.text.trim();
+            alert("Detected Text:\n" + text);
         }
     }
 }
@@ -889,3 +853,4 @@ function cameraCapture() {
 
 
 
+