changed logic in ocr

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

@@ -703,30 +703,37 @@ function cameraCapture() {
 
 {{-- .. --}}
 
-<div x-data="cameraCapture()" x-init="init()" wire:ignore class="space-y-2 relative">
+<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
     <!-- Video feed -->
-    <video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
+    <video
+        x-ref="video"
+        autoplay
+        playsinline
+        class="border rounded w-80 h-auto"
+        style="display:block;"
+    ></video>
 
-    <!-- Overlay for highlighting text -->
+    <!-- Overlay canvas for OCR highlight -->
-    <div x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></div>
+    <canvas
+        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 frames -->
+    <!-- Hidden canvas for capturing snapshot -->
     <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="primary" @click="capturePhoto">Capture</x-filament::button>
+        <x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
-        <x-filament::button color="success" @click="verifyText">Verify OCR</x-filament::button>
+        <x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
     </div>
 
     <input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
-    <input type="hidden" x-ref="serialInput" name="serialNumbers">
 </div>
 
-<!-- Libraries -->
+<!-- Scripts -->
-<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/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() {
@@ -734,30 +741,30 @@ function cameraCapture() {
         stream: null,
         currentFacingMode: 'user',
         textDetectionInterval: null,
-        textModel: null,
+        capturedPhoto: null, // store captured image
-        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;
 
+                const video = this.$refs.video;
                 this.stream = await navigator.mediaDevices.getUserMedia({
                     video: { facingMode: this.currentFacingMode }
                 });
-                video.srcObject = this.stream;
 
+                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: " + (err.message || err));
+                alert("Camera error:\n" + (err.message || err));
             }
         },
 
@@ -766,82 +773,86 @@ function cameraCapture() {
             await this.initCamera();
         },
 
-        async initTextModel() {
+        async capturePhoto() {
-            this.textModel = await window.textDetection.createDetector('medium');
-        },
-
-        async initTesseract() {
-            this.tesseractWorker = Tesseract.createWorker({
-                logger: m => console.log(m)
-            });
-            await this.tesseractWorker.load();
-            await this.tesseractWorker.loadLanguage('eng');
-            await this.tesseractWorker.initialize('eng');
-        },
-
-        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;
+            const canvas = this.$refs.canvas;
-            overlay.innerHTML = '';
+            const ctx = canvas.getContext('2d');
 
-            if (!video.videoWidth || !this.textModel) {
+            canvas.width = video.videoWidth;
-                this.textDetectionRunning = false;
+            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() {
+            if (!this.capturedPhoto) {
+                alert("Please capture a photo first!");
                 return;
             }
 
             try {
-                // Detect text regions (bounding boxes)
+                const img = new Image();
-                const predictions = await this.textModel.estimateText(video);
+                img.src = this.capturedPhoto;
 
-                predictions.forEach(pred => {
+                img.onload = async () => {
-                    const [x, y, w, h] = pred.boundingBox;
+                    const canvas = document.createElement('canvas');
-                    const div = document.createElement('div');
+                    canvas.width = img.width;
-                    div.style.position = 'absolute';
+                    canvas.height = img.height;
-                    div.style.left = `${x}px`;
+                    const ctx = canvas.getContext('2d');
-                    div.style.top = `${y}px`;
+                    ctx.drawImage(img, 0, 0);
-                    div.style.width = `${w}px`;
+
-                    div.style.height = `${h}px`;
+                    const result = await Tesseract.recognize(canvas, 'eng', {
-                    div.style.backgroundColor = 'rgba(0,255,0,0.3)';
+                        logger: m => console.log(m)
-                    div.style.pointerEvents = 'none';
+                    });
-                    overlay.appendChild(div);
+
+                    const detectedText = result.data.text.trim();
+                    alert("Detected Text:\n" + (detectedText || "[No text detected]"));
+                }
+            } catch (err) {
+                console.error("OCR verify error:", err);
+                alert("OCR verify failed:\n" + (err.message || err));
+            }
+        },
+
+        async detectText() {
+            const video = this.$refs.video;
+            const overlay = this.$refs.overlay;
+            const ctx = overlay.getContext('2d');
+
+            if (!video.videoWidth) return;
+
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = video.videoWidth;
+            tempCanvas.height = video.videoHeight;
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(video, 0, 0);
+
+            try {
+                const result = await Tesseract.recognize(tempCanvas, 'eng');
+                const words = result.data.words;
+
+                ctx.clearRect(0, 0, overlay.width, overlay.height);
+                ctx.strokeStyle = 'lime';
+                ctx.lineWidth = 2;
+
+                words.forEach(w => {
+                    if (!w.bbox || w.confidence < 50) return;
+                    const { x0, y0, x1, y1 } = w.bbox;
+                    ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
                 });
             } catch (err) {
-                console.error("Text detection error:", err);
+                console.error("Live OCR error:", err);
-            } finally {
-                this.textDetectionRunning = false;
             }
         },
 
-        async capturePhoto() {
+        startDetection() {
-            const video = this.$refs.video;
+            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
-            const canvas = this.$refs.canvas;
+            this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
-            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);
         }
     }
 }
@@ -853,4 +864,3 @@ function cameraCapture() {
 
 
 
-