Tesseract.js 多栏文本识别优化指南：活用页面分段模式 (PSM)

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

// ... (languageOptions 和其他组件代码保持不变) ...

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([]);
  // 新增状态用于存储选定的PSM模式
  const [selectedPsm, setSelectedPsm] = useState({ value: 1, label: "PSM_AUTO_OSD" }); // 默认选择 PSM_AUTO_OSD

  // PSM 选项
  const psmOptions = [
    { value: 0, label: "OSD_ONLY" },
    { value: 1, label: "PSM_AUTO_OSD" },
    { value: 2, label: "PSM_AUTO_ONLY" },
    { value: 3, label: "PSM_AUTO (Default)" },
    { value: 4, label: "PSM_SINGLE_COLUMN" },
    { value: 5, label: "PSM_SINGLE_BLOCK_VERT_TEXT" },
    { value: 6, label: "PSM_SINGLE_BLOCK" },
    { value: 7, label: "PSM_SINGLE_LINE" },
    { value: 8, label: "PSM_SINGLE_WORD" },
    { value: 9, label: "PSM_CIRCLE_WORD" },
    { value: 10, label: "PSM_SINGLE_CHAR" },
    { value: 11, label: "PSM_SPARSE_TEXT" },
    { value: 12, label: "PSM_SPARSE_TEXT_OSD" },
    { value: 13, label: "PSM_RAW_LINE" },
  ];

  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("");
    setSelectedPsm({ value: 1, label: "PSM_AUTO_OSD" }); // 重置PSM
    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 {
          const result = await Tesseract.recognize(
            image,
            selectedLanguages.map((lang) => lang.value).join("+"),
            {
              // 在这里设置页面分段模式 (PSM)
              tessedit_pageseg_mode: selectedPsm.value,
            }
          );
          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>
          )}

          {/* 新增 PSM 选择器 */}
          <Select
            options={psmOptions}
            value={selectedPsm}
            onChange={setSelectedPsm}
            placeholder="Select Page Segmentation Mode..."
            className="mt-3"
          />

          <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;