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.

src/components/CropStep.jsx

@@ -4,16 +4,13 @@ import {
   Box,
   Button,
   Grid,
-  Slider,
   Stack,
-  TextField,
   Typography,
 } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useNavigate } from 'react-router-dom';
 import { useAppStore } from '../store/useAppStore';
 
-const offsetFields = ['top', 'bottom', 'left', 'right'];
 const MIN_SELECTION = 5;
 const DEFAULT_SELECTION = { top: 10, left: 10, width: 80, height: 80 };
 
@@ -44,12 +41,6 @@ const CropStep = () => {
   const [selectedImageId, setSelectedImageId] = useState(
     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({
     width: cropConfig?.imageWidth || 0,
     height: cropConfig?.imageHeight || 0,
@@ -57,7 +48,6 @@ const CropStep = () => {
   const [selection, setSelection] = useState(
     cropConfig?.selection ? cropConfig.selection : DEFAULT_SELECTION,
   );
-  const [previewScale, setPreviewScale] = useState(1);
   const [saved, setSaved] = useState(false);
   const containerRef = useRef(null);
   const dragInfoRef = useRef(null);
@@ -92,12 +82,6 @@ const CropStep = () => {
       cropConfig?.imageWidth
     ) {
       setSelection(selectionFromConfig(cropConfig));
-      setOffsetValues({
-        top: cropConfig.top || 0,
-        bottom: cropConfig.bottom || 0,
-        left: cropConfig.left || 0,
-        right: cropConfig.right || 0,
-      });
       setSaved(true);
     } else {
       setSelection(DEFAULT_SELECTION);
@@ -215,13 +199,6 @@ const CropStep = () => {
     [stopDragging],
   );
 
-  const handleOffsetChange = (field) => (event) => {
-    const value = Number(event.target.value) || 0;
-    setOffsetValues((prev) => ({ ...prev, [field]: value }));
-    setSaved(false);
-    resetFromStep('crop');
-  };
-
   const currentCropArea = useMemo(() => {
     if (!imageSize.width || !imageSize.height) return null;
     return {
@@ -237,13 +214,13 @@ const CropStep = () => {
     const config = {
       x: 0,
       y: 0,
-      zoom: previewScale,
+      zoom: 1,
       width: currentCropArea.width,
       height: currentCropArea.height,
-      top: offsetValues.top,
-      bottom: offsetValues.bottom,
-      left: offsetValues.left,
-      right: offsetValues.right,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
       cropAreaX: currentCropArea.x,
       cropAreaY: currentCropArea.y,
       imageWidth: imageSize.width,
@@ -319,8 +296,6 @@ const CropStep = () => {
               width: '100%',
               maxWidth: 410,
               mx: 'auto',
-              transform: `scale(${previewScale})`,
-              transformOrigin: 'center top',
             }}
           >
             <img
@@ -373,34 +348,6 @@ const CropStep = () => {
         </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 && (
         <Stack direction="row" spacing={1} alignItems="center" color="success.main">
           <CheckCircleIcon color="success" />

src/components/OcrStep.jsx

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

src/main.jsx

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