CropStep bileşeninden gereksiz offset alanlarını ve önizleme ölçeğini kaldırarak kodu sadeleştirildi; OcrStep bileşenine geliştirme modunu kontrol eden bir değişken eklendi ve loglama işlemleri güncellendi; tema renkleri güncellendi.

This commit is contained in:
2025-11-11 00:04:43 +03:00
parent 3934202e23
commit 3a82bf9ea6
3 changed files with 14 additions and 64 deletions

View File

@@ -4,16 +4,13 @@ import {
Box, Box,
Button, Button,
Grid, Grid,
Slider,
Stack, Stack,
TextField,
Typography, Typography,
} from '@mui/material'; } from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useAppStore } from '../store/useAppStore'; import { useAppStore } from '../store/useAppStore';
const offsetFields = ['top', 'bottom', 'left', 'right'];
const MIN_SELECTION = 5; const MIN_SELECTION = 5;
const DEFAULT_SELECTION = { top: 10, left: 10, width: 80, height: 80 }; const DEFAULT_SELECTION = { top: 10, left: 10, width: 80, height: 80 };
@@ -44,12 +41,6 @@ const CropStep = () => {
const [selectedImageId, setSelectedImageId] = useState( const [selectedImageId, setSelectedImageId] = useState(
cropConfig?.referenceImageId || uploadedImages[0]?.id || null, cropConfig?.referenceImageId || uploadedImages[0]?.id || null,
); );
const [offsetValues, setOffsetValues] = useState({
top: cropConfig?.top || 0,
bottom: cropConfig?.bottom || 0,
left: cropConfig?.left || 0,
right: cropConfig?.right || 0,
});
const [imageSize, setImageSize] = useState({ const [imageSize, setImageSize] = useState({
width: cropConfig?.imageWidth || 0, width: cropConfig?.imageWidth || 0,
height: cropConfig?.imageHeight || 0, height: cropConfig?.imageHeight || 0,
@@ -57,7 +48,6 @@ const CropStep = () => {
const [selection, setSelection] = useState( const [selection, setSelection] = useState(
cropConfig?.selection ? cropConfig.selection : DEFAULT_SELECTION, cropConfig?.selection ? cropConfig.selection : DEFAULT_SELECTION,
); );
const [previewScale, setPreviewScale] = useState(1);
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const containerRef = useRef(null); const containerRef = useRef(null);
const dragInfoRef = useRef(null); const dragInfoRef = useRef(null);
@@ -92,12 +82,6 @@ const CropStep = () => {
cropConfig?.imageWidth cropConfig?.imageWidth
) { ) {
setSelection(selectionFromConfig(cropConfig)); setSelection(selectionFromConfig(cropConfig));
setOffsetValues({
top: cropConfig.top || 0,
bottom: cropConfig.bottom || 0,
left: cropConfig.left || 0,
right: cropConfig.right || 0,
});
setSaved(true); setSaved(true);
} else { } else {
setSelection(DEFAULT_SELECTION); setSelection(DEFAULT_SELECTION);
@@ -215,13 +199,6 @@ const CropStep = () => {
[stopDragging], [stopDragging],
); );
const handleOffsetChange = (field) => (event) => {
const value = Number(event.target.value) || 0;
setOffsetValues((prev) => ({ ...prev, [field]: value }));
setSaved(false);
resetFromStep('crop');
};
const currentCropArea = useMemo(() => { const currentCropArea = useMemo(() => {
if (!imageSize.width || !imageSize.height) return null; if (!imageSize.width || !imageSize.height) return null;
return { return {
@@ -237,13 +214,13 @@ const CropStep = () => {
const config = { const config = {
x: 0, x: 0,
y: 0, y: 0,
zoom: previewScale, zoom: 1,
width: currentCropArea.width, width: currentCropArea.width,
height: currentCropArea.height, height: currentCropArea.height,
top: offsetValues.top, top: 0,
bottom: offsetValues.bottom, bottom: 0,
left: offsetValues.left, left: 0,
right: offsetValues.right, right: 0,
cropAreaX: currentCropArea.x, cropAreaX: currentCropArea.x,
cropAreaY: currentCropArea.y, cropAreaY: currentCropArea.y,
imageWidth: imageSize.width, imageWidth: imageSize.width,
@@ -319,8 +296,6 @@ const CropStep = () => {
width: '100%', width: '100%',
maxWidth: 410, maxWidth: 410,
mx: 'auto', mx: 'auto',
transform: `scale(${previewScale})`,
transformOrigin: 'center top',
}} }}
> >
<img <img
@@ -373,34 +348,6 @@ const CropStep = () => {
</Box> </Box>
)} )}
<Box>
<Typography gutterBottom>Önizleme yakınlaştırması</Typography>
<Slider
min={1}
max={2}
step={0.05}
value={previewScale}
onChange={(_, value) => {
const newValue = Array.isArray(value) ? value[0] : value;
setPreviewScale(newValue);
}}
/>
</Box>
<Grid container spacing={2}>
{offsetFields.map((field) => (
<Grid key={field} item xs={6} md={3}>
<TextField
label={field.toUpperCase()}
type="number"
fullWidth
value={offsetValues[field]}
onChange={handleOffsetChange(field)}
/>
</Grid>
))}
</Grid>
{saved && ( {saved && (
<Stack direction="row" spacing={1} alignItems="center" color="success.main"> <Stack direction="row" spacing={1} alignItems="center" color="success.main">
<CheckCircleIcon color="success" /> <CheckCircleIcon color="success" />

View File

@@ -14,6 +14,7 @@ import { correctTurkishCharacters } from '../utils/ocrUtils';
const OcrStep = () => { const OcrStep = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const isDev = import.meta.env.DEV;
const croppedImages = useAppStore((state) => state.croppedImages); const croppedImages = useAppStore((state) => state.croppedImages);
const ocrText = useAppStore((state) => state.ocrText); const ocrText = useAppStore((state) => state.ocrText);
const setOcrText = useAppStore((state) => state.setOcrText); const setOcrText = useAppStore((state) => state.setOcrText);
@@ -60,7 +61,7 @@ const OcrStep = () => {
workerPath: paths.workerPath, workerPath: paths.workerPath,
corePath: paths.corePath, corePath: paths.corePath,
langPath: paths.langPath, langPath: paths.langPath,
logger: m => console.log('Tesseract:', m), // Debug için log logger: isDev ? (m) => console.log('Tesseract:', m) : undefined,
}, },
); );
@@ -75,7 +76,9 @@ const OcrStep = () => {
return; return;
} }
// Dil ve worker zaten createWorker sırasında yüklendi // Dil ve worker zaten createWorker sırasında yüklendi
if (isDev) {
console.log('Tesseract worker başarıyla oluşturuldu'); console.log('Tesseract worker başarıyla oluşturuldu');
}
workerRef.current = worker; workerRef.current = worker;
setWorkerReady(true); setWorkerReady(true);
} catch (error) { } catch (error) {
@@ -104,7 +107,7 @@ const OcrStep = () => {
setWorkerReady(false); setWorkerReady(false);
} }
}; };
}, [assetBase, orderedImages.length, setError]); }, [assetBase, isDev, orderedImages.length, setError]);
useEffect(() => { useEffect(() => {
setStatus('idle'); setStatus('idle');

View File

@@ -29,7 +29,7 @@ const theme = createTheme({
secondary: '#666057', secondary: '#666057',
}, },
success: { success: {
main: '#80A19F', main: '#88aaa8ff',
contrastText: '#30281B', contrastText: '#30281B',
}, },
}, },
@@ -40,7 +40,7 @@ const theme = createTheme({
MuiBox: { MuiBox: {
styleOverrides: { styleOverrides: {
root: { root: {
color: '#80A19F', color: '#EDEFF2',
}, },
}, },
}, },
@@ -69,7 +69,7 @@ const theme = createTheme({
MuiAlert: { MuiAlert: {
styleOverrides: { styleOverrides: {
root: { root: {
backgroundColor: '#80A19F', backgroundColor: '#EDEFF2',
color: '#30281B', color: '#30281B',
borderRadius: 16, borderRadius: 16,
}, },