Türkçe çeviri özelliği eklendi (GLM 4.6 ile çeviri yapılıyor)

src/components/OcrStep.jsx

@@ -11,6 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import Tesseract from 'tesseract.js';
 import { useAppStore } from '../store/useAppStore';
 import { correctTurkishCharacters } from '../utils/ocrUtils';
+import { translateChunkToTurkish } from '../utils/translationUtils';
 
 const OcrStep = () => {
   const navigate = useNavigate();
@@ -19,7 +20,17 @@ const OcrStep = () => {
   const ocrText = useAppStore((state) => state.ocrText);
   const setOcrText = useAppStore((state) => state.setOcrText);
   const setError = useAppStore((state) => state.setError);
+  const translatedText = useAppStore((state) => state.translatedText);
+  const translationStatus = useAppStore((state) => state.translationStatus);
+  const translationError = useAppStore((state) => state.translationError);
+  const translationProgress = useAppStore((state) => state.translationProgress);
+  const setTranslatedText = useAppStore((state) => state.setTranslatedText);
+  const setTranslationStatus = useAppStore((state) => state.setTranslationStatus);
+  const setTranslationError = useAppStore((state) => state.setTranslationError);
+  const setTranslationProgress = useAppStore((state) => state.setTranslationProgress);
+  const clearTranslation = useAppStore((state) => state.clearTranslation);
   const [status, setStatus] = useState('idle');
+  const [translationTrigger, setTranslationTrigger] = useState(0);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [previewText, setPreviewText] = useState('');
   const total = croppedImages.length;
@@ -36,6 +47,7 @@ const OcrStep = () => {
   const workerRef = useRef(null);
   const [workerReady, setWorkerReady] = useState(false);
   const previewRef = useRef(null);
+  const translationPreviewRef = useRef(null);
 
   const orderedImages = useMemo(
     () => [...croppedImages].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
@@ -120,13 +132,19 @@ const OcrStep = () => {
     setCurrentIndex(0);
     setPreviewText('');
     setOcrText('');
-  }, [orderedImages, setOcrText]);
+    clearTranslation();
+  }, [clearTranslation, orderedImages, setOcrText]);
 
   useEffect(() => {
     if (previewRef.current) {
       previewRef.current.scrollTop = previewRef.current.scrollHeight;
     }
   }, [previewText]);
+  useEffect(() => {
+    if (translationPreviewRef.current) {
+      translationPreviewRef.current.scrollTop = translationPreviewRef.current.scrollHeight;
+    }
+  }, [translatedText]);
 
   useEffect(() => {
     if (!total || status === 'done' || !workerReady) return;
@@ -171,6 +189,59 @@ const OcrStep = () => {
     };
   }, [orderedImages, setError, setOcrText, status, total, workerReady]);
 
+  useEffect(() => {
+    if (status !== 'done') return;
+    if (!ocrText?.trim()) return;
+    if (translationStatus === 'running' || translationStatus === 'done') return;
+
+    let cancelled = false;
+    const sections = segmentOcrText(ocrText);
+    if (!sections.length) return;
+
+    const runTranslation = async () => {
+      setTranslationStatus('running');
+      setTranslationError(null);
+      setTranslationProgress(0);
+      setTranslatedText('');
+      try {
+        const translatedChunks = [];
+        for (let index = 0; index < sections.length; index += 1) {
+          if (cancelled) return;
+          const chunk = sections[index];
+          // eslint-disable-next-line no-await-in-loop
+          const translated = await translateChunkToTurkish(chunk);
+          if (cancelled) return;
+          translatedChunks[index] = translated;
+          const combined = translatedChunks.filter(Boolean).join('\n\n');
+          setTranslatedText(combined);
+          setTranslationProgress(Math.round(((index + 1) / sections.length) * 100));
+        }
+        if (!cancelled) {
+          setTranslationStatus('done');
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setTranslationStatus('error');
+          setTranslationError(error.message || 'Çeviri tamamlanamadı.');
+        }
+      }
+    };
+
+    runTranslation();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    ocrText,
+    setTranslatedText,
+    setTranslationError,
+    setTranslationProgress,
+    setTranslationStatus,
+    status,
+    translationTrigger,
+  ]);
+
   if (!orderedImages.length) {
     return (
       <Stack spacing={2}>
@@ -228,6 +299,69 @@ const OcrStep = () => {
             {previewText || 'Metin bekleniyor'}
           </Box>
         </Box>
+        <Box sx={{ p: 2, borderRadius: 2, bgcolor: 'background.default' }}>
+          <Stack direction={{ xs: 'column', sm: 'row' }} alignItems="flex-start" justifyContent="space-between">
+            <Box>
+              <Typography variant="subtitle1">Türkçe çeviriler</Typography>
+              <Typography variant="body2" color="text.secondary">
+                OCR metni parçalara ayrılıp GLM 4.6 ile çevriliyor.
+              </Typography>
+            </Box>
+            {translationStatus === 'error' && (
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={() => {
+                  clearTranslation();
+                  setTranslationTrigger((prev) => prev + 1);
+                }}
+              >
+                Tekrar dene
+              </Button>
+            )}
+          </Stack>
+          {translationStatus === 'running' && (
+            <Box mt={2}>
+              <LinearProgress
+                variant="determinate"
+                value={translationProgress}
+                sx={{ height: 8, borderRadius: 3 }}
+              />
+              <Typography mt={1} color="text.secondary" variant="caption">
+                %{translationProgress} tamamlandı
+              </Typography>
+            </Box>
+          )}
+          {translationStatus === 'done' && translatedText && (
+            <Alert severity="success" sx={{ mt: 2 }}>
+              Çeviri tamamlandı. EPUB üretiminde Türkçe içerik kullanılacak.
+            </Alert>
+          )}
+          {translationStatus === 'error' && translationError && (
+            <Alert severity="error" sx={{ mt: 2 }}>
+              {translationError}
+            </Alert>
+          )}
+          <Box
+            ref={translationPreviewRef}
+            sx={{
+              mt: 2,
+              maxHeight: '8.5em',
+              overflowY: 'auto',
+              whiteSpace: 'pre-wrap',
+              lineHeight: 1.5,
+              fontSize: '0.95rem',
+              color: 'text.secondary',
+              pr: 1,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 1.5,
+              p: 1.5,
+            }}
+          >
+            {translatedText || 'Çeviri bekleniyor...'}
+          </Box>
+        </Box>
       </Stack>
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} justifyContent="space-between">
         <Button variant="contained" onClick={() => navigate('/bulk-crop')}>
@@ -236,7 +370,7 @@ const OcrStep = () => {
         <Button
           variant="contained"
           onClick={() => navigate('/epub')}
-          disabled={!hasResults}
+          disabled={!hasResults || translationStatus === 'running'}
         >
           EPUB oluştur
         </Button>
@@ -246,3 +380,37 @@ const OcrStep = () => {
 };
 
 export default OcrStep;
+
+const MAX_CHUNK_LENGTH = 800;
+
+const segmentOcrText = (text) => {
+  if (!text) return [];
+  const normalized = text.replace(/\r\n/g, '\n');
+  const paragraphs = normalized.split(/\n{2,}/).map((part) => part.trim()).filter(Boolean);
+  const chunks = [];
+
+  paragraphs.forEach((paragraph) => {
+    if (paragraph.length <= MAX_CHUNK_LENGTH) {
+      chunks.push(paragraph);
+      return;
+    }
+
+    let remaining = paragraph;
+    while (remaining.length > MAX_CHUNK_LENGTH) {
+      let sliceIndex = remaining.lastIndexOf(' ', MAX_CHUNK_LENGTH);
+      if (sliceIndex === -1 || sliceIndex < MAX_CHUNK_LENGTH * 0.6) {
+        sliceIndex = MAX_CHUNK_LENGTH;
+      }
+      const chunk = remaining.slice(0, sliceIndex).trim();
+      if (chunk) {
+        chunks.push(chunk);
+      }
+      remaining = remaining.slice(sliceIndex).trim();
+    }
+    if (remaining.length) {
+      chunks.push(remaining);
+    }
+  });
+
+  return chunks;
+};