'use client';
import React, { useState, useEffect } from 'react';
import Tesseract from '[Link]';
import styles from '@/app/detection-system/captured/[Link]';
import axios from 'axios';
import Link from 'next/link'; // <-- Added for routing
import { useRouter } from 'next/navigation';
const base_url = [Link].NEXT_PUBLIC_URL;
function CapturedImages() {
const [images, setImages] = useState([]);
const [selectedIndex, setSelectedIndex] = useState(0);
const [brightness, setBrightness] = useState(100);
const [contrast, setContrast] = useState(100);
const [filteredImage, setFilteredImage] = useState('');
const [message, setMessage] = useState('');
const [extractedTexts, setExtractedTexts] = useState([]); // State for OCR
results
useEffect(() => {
const storedImages = [Link]([Link]('capturedImages')) || [];
setImages(storedImages);
if ([Link] > 0) {
setFilteredImage(storedImages[0]);
}
}, []);
const applyFilters = (src) => {
const canvas = [Link]('canvas');
const context = [Link]('2d');
const img = new Image();
[Link] = src;
[Link] = () => {
[Link] = [Link];
[Link] = [Link];
[Link] = `brightness(${brightness}%) contrast(${contrast}%)`;
[Link](img, 0, 0, [Link], [Link]);
setFilteredImage([Link]('image/png'));
};
};
const handleBrightnessChange = (e) => {
setBrightness([Link]);
if ([Link] > 0) {
applyFilters(images[selectedIndex]);
}
};
const handleContrastChange = (e) => {
setContrast([Link]);
if ([Link] > 0) {
applyFilters(images[selectedIndex]);
}
};
const handleSaveImage = async () => {
const imageToSave = images[selectedIndex];
try {
const response = await [Link](`${base_url}records`, {
number: 'Your Number Plate Text Here',
imageUrl: imageToSave,
});
[Link]('Image saved:', [Link]);
setMessage('Image saved successfully!');
} catch (error) {
[Link]('Error saving image:', error);
setMessage('Error saving image.');
}
};
const handleDeleteImage = () => {
const updatedImages = [Link]((_, index) => index !== selectedIndex);
setImages(updatedImages);
setSelectedIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));
[Link]('capturedImages', [Link](updatedImages));
if ([Link] > 0) {
applyFilters(updatedImages[[Link](0, selectedIndex - 1)]);
} else {
setFilteredImage('');
}
};
const handleCheckOCR = async () => {
const result = await [Link](images[selectedIndex], 'eng+urd', {
tessedit_char_whitelist:
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-'۔,
});
const extractedText = [Link]();
[Link]('Extracted text:', extractedText);
if (extractedText) {
setExtractedTexts((prevTexts) => [...prevTexts, extractedText]);
}
};
const nextImage = () => {
setSelectedIndex((prevIndex) => (prevIndex + 1) % [Link]);
applyFilters(images[(selectedIndex + 1) % [Link]]);
};
const prevImage = () => {
setSelectedIndex((prevIndex) => (prevIndex - 1 + [Link]) %
[Link]);
applyFilters(images[(selectedIndex - 1 + [Link]) % [Link]]);
};
useEffect(() => {
if ([Link] > 0) {
applyFilters(images[selectedIndex]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [images, selectedIndex]);
return (
<div className={[Link]}>
<h1>Captured Images</h1>
<div className={[Link]}>
{[Link] > 0 && (
<>
<button onClick={prevImage} className={`${[Link]} $
{[Link]}`}>
❮
</button>
<img src={filteredImage} alt="Selected"
className={[Link]} />
<button onClick={nextImage} className={`${[Link]} $
{[Link]}`}>
❯
</button>
</>
)}
</div>
{[Link] > 0 && (
<div className={[Link]}>
<label>Brightness:</label>
<input
type="range"
min="0"
max="200"
value={brightness}
onChange={handleBrightnessChange}
/>
<label>Contrast:</label>
<input
type="range"
min="0"
max="200"
value={contrast}
onChange={handleContrastChange}
/>
</div>
)}
<div className={[Link]}>
<button onClick={handleSaveImage}>Save Image</button>
<button onClick={handleDeleteImage}>Delete Image</button>
{/*
Instead of a normal button for Try OCR,
we add a <Link> to your fileUpload page
carrying the selected image as query param.
*/}
<Link
href={{
pathname: '/file-upload', // <-- Adjust this to wherever your
fileUpload route is
query: { imageName: images[selectedIndex] },
}}
>
<button>Try OCR</button>
</Link>
</div>
{message && <p>{message}</p>}
{/* OCR Results Table */}
{[Link] > 0 && (
<div className={[Link]}>
<h2>Extracted Number Plates</h2>
<table className={[Link]}>
<thead>
<tr>
<th>Number Plate Text</th>
</tr>
</thead>
<tbody>
{[Link]((text, index) => (
<tr key={index}>
<td>{text}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
}
export default CapturedImages;
