Tesseract.js 多列图像文本识别优化：利用页面分段模式解决文本混淆

import React, { useState, useEffect } from "react";
import Tesseract from "tesseract.js";
import ClipboardJS from "clipboard";
import Select from "react-select";

const languageOptions = [
  // ... (语言选项保持不变)
  { value: "eng", label: "English" },
  { value: "chi_sim", label: "Chinese - Simplified" },
  // ... 其他语言
];

const ImagesToText = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [images, setImages] = useState([]);
  const [texts, setTexts] = useState([]);
  const [progress, setProgress] = useState(0);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [errorMessage, setErrorMessage] = useState("");
  const [errorLanguagesMessage, setErrorLanguagesMessage] = useState("");
  const [selectedLanguages, setSelectedLanguages] = useState([]);

  const handleImageUpload = (e) => {
    const selectedImages = Array.from(e.target.files);
    setImages(selectedImages);
    setErrorMessage("");
  };

  const handleCopyText = () => {
    const textWithSoftLineBreaks = texts.join("\n");
    navigator.clipboard.writeText(textWithSoftLineBreaks);
  };

  const handleDownloadText = () => {
    const element = document.createElement("a");
    const textBlob = new Blob([texts.join("\n")], { type: "text/plain" });
    element.href = URL.createObjectURL(textBlob);
    element.download = "converted_text.txt";
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  useEffect(() => {
    const clipboard = new ClipboardJS(".copy-button");

    clipboard.on("success", (e) => {
      e.clearSelection();
    });

    return () => {
      clipboard.destroy();
    };
  }, [texts]);

  const handleReset = () => {
    setIsLoading(false);
    setImages([]);
    setTexts([]);
    setProgress(0);
    setCurrentImageIndex(0);
    setErrorMessage("");
    setErrorLanguagesMessage("");

    window.location.reload();
  };

  const handleSubmit = async () => {
    if (images.length === 0) {
      setErrorMessage("Select an image to convert.");
      return;
    }

    if (selectedLanguages.length === 0) {
      setErrorLanguagesMessage("Select any language.");
      return;
    }

    setIsLoading(true);
    setProgress(0);
    setTexts([]);
    setCurrentImageIndex(0);
    setErrorMessage("");
    setErrorLanguagesMessage("");

    const totalImages = images.length;
    let processedImages = 0;

    if (Array.isArray(images)) {
      for (const [index, image] of images?.entries()) {
        setCurrentImageIndex(index + 1);

        try {
          // 核心修改：在 recognize 方法中添加 options 对象，设置 tessedit_pageseg_mode
          const result = await Tesseract.recognize(
            image,
            selectedLanguages.map((lang) => lang.value).join("+"),
            {
              // 启用自动页面方向和脚本检测，并尝试识别文本块
              // PSM_AUTO_OSD 对应的数值是 1
              tessedit_pageseg_mode: 1
            }
          );
          // Tesseract 识别结果中的文本通常会根据其内部逻辑进行分段。
          // 对于多列文档，PSM_AUTO_OSD 模式会尝试先识别列，然后按列顺序输出文本。
          // 这里的文本后处理逻辑可以根据实际需求调整，例如：
          // 如果 PSM_AUTO_OSD 成功将列分开，result.data.text 可能会按列顺序排列。
          // 原始代码中的分段逻辑：
          const paragraphs = result.data.text.split("\n\n");
          const formattedParagraphs = paragraphs.map((paragraph) => {
            const sentences = paragraph.split(/[.|?]\s/);
            return sentences.join(" ");
          });
          setTexts((prevTexts) => [...prevTexts, ...formattedParagraphs]);
        } catch (err) {
          console.error(err);
          // 发生错误时，清除文本并立即停止转换过程
          setTexts([]);
          setProgress(0);
          setIsLoading(false);
          return;
        } finally {
          processedImages++;
          const currentProgress = (processedImages / totalImages) * 100;
          setProgress(currentProgress);
        }
      }
    } else {
      console.error("Images is not an array.");
    }

    setIsLoading(false);
  };

  return (
    <div className="container" style={{ height: "97vh" }}>
      <div className="row h-100 mt-3">
        <div className="col-md-3 left-bar sticky-top border 1 ms-2">
          <h1 className="center py-3 mc-5 underline">Images to text (ocr)</h1>
          <input
            type="file"
            onChange={handleImageUpload}
            className="form-control mt-5 mb-2"
            multiple
            accept="image/*"
          />
          {errorMessage && <p className="text-danger">{errorMessage}</p>}
          <Select
            isMulti
            options={languageOptions}
            value={selectedLanguages}
            onChange={setSelectedLanguages}
            placeholder="Select languages..."
          />

          {errorLanguagesMessage && (
            <p className="text-danger">{errorLanguagesMessage}</p>
          )}

          <input
            type="button"
            onClick={handleSubmit}
            className="btn btn-outline-success mt-3"
            value="Start Convert"
          />
          {texts.length > 0 && (
            <button
              className="btn btn-primary mt-3 ms-1"
              onClick={handleDownloadText}
            >
              Download Text
            </button>
          )}
          <div className="mt-1">
            <button className=" btn ml-2 btn-danger" onClick={handleReset}>
              Reset
            </button>

            <button
              className="mt-3 btn btn-secondary d-inline ms-1 "
              onClick={handleCopyText}
            >
              Copy Text
            </button>
          </div>
        </div>
        <div className="col-md-8 right-bar border 1 ms-2">
          <h4 className="mt-5 text-center">Select an Image to convert (ocr)</h4>
          {isLoading && (
            <div className="text-center">
              <div className="text-center">
                <progress
                  className="custom-progress-bar"
                  value={progress}
                  max="100"
                ></progress>
                <p className="text-center py-0 my-0">
                  Converting...: {progress.toFixed(0)}% ({currentImageIndex} of{" "}
                  {images.length})
                </p>
              </div>
            </div>
          )}
          {!isLoading && texts.length > 0 && (
            <div>
              <div className="form-control box-p w-100 mt-5 m-none">
                {texts.map((paragraph, index) => (
                  <p key={index}>{paragraph}</p>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ImagesToText;