[Share] 直接在pdf阅读页面翻译

[zzlb0224]

Description

在pdf阅读中翻译当前页

只能说windingwind大神做的这个执行代码是在是太强了，自己在这个基础上写了个翻译当前页面的，分享出来以示对windingwind大神的敬意。

报错的代码已经删除 只保留最新的代码

Event

None

Operation

Script

Data

// 使用pdf.js对照翻译当前页
/**
 * 使用pdf.js对照翻译当前页
 *
 * 依赖项：windingwind大佬的翻译插件 https://github.com/windingwind/zotero-pdf-translate
 *
 * 有没有大佬能封装成插件？不过action模板已经很好用了，还方便调试
 * 参考代码
 * csdn文章：pdf.js最新使用方法示例，https://blog.csdn.net/itbrand/article/details/108677676
 * action模板翻译标题和摘要，https://github.com/windingwind/zotero-actions-tags/discussions/107
 *
 *
 * @author Zotero Community
 * @usage Script 自定义脚本 在pdf页面的菜单控制
 * @link https://github.com/windingwind/zotero-actions-tags/discussions/187
 * @see https://github.com/windingwind/zotero-actions-tags/discussions/187
 */
(function () {
  // @ts-ignore item
  if (!item) return;
  const tran = async () => {
    const ztoolkit = Zotero.PDFTranslate.data.ztoolkit; //借用大佬的ztoolkit
    ztoolkit.log("start translate");
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    // const window = require("window");
    const window = Zotero.getMainWindow();
    const getComputedStyle = window.getComputedStyle;
    const document = window.document;
    let readerdoc = document; //指定一下类型，后面会覆盖
    let pdfdoc = document; //指定一下类型，后面会覆盖
    const addonRef = "zzzzzzzzzzzz";
    const disableConsole = ztoolkit.basicOptions.log.disableConsole;
    ztoolkit.basicOptions.log.disableConsole = false;
    // @ts-ignore args
    const endlog = (...args) => {
      ztoolkit.log(...args);
      ztoolkit.basicOptions.log.disableConsole = disableConsole;
      delete Zotero.zzzzzzzzzzzzruntranstr;
    };
    Zotero.Promise.delay(100);
    if (Zotero.zzzzzzzzzzzzruntranstr) {
      ztoolkit.log("为什么会重复执行代码？已经执行了一次");
      return;
    }
    Zotero.zzzzzzzzzzzzruntranstr = true;
    const pdfViewerCSS = `
            .pdfViewer .page .textLayer :is(span, br){
              z-index: 5; 
            }
            .pdfViewer .page .textLayer :is(span, br).${addonRef}-tran-str{
              position: absolute;
              white-space: break-spaces;
              word-break: break-all;
              z-index: 4;
              color: #000;
              background: #fff;
              line-height:1.5;
              box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            }
            .pdfViewer .page .textLayer{
              opacity:1;
            }
            .pdfViewer .page .canvasWrapper {
              opacity: 0.07;
            }
            .textLayer span.markedContent { 
              width: 100%;
            }
            
            `;
    const tabs = document.querySelectorAll(".tabs .tab");
    let selectedindex = -1;
    for (let index = 0; index < tabs.length; index++) {
      const element = tabs[index];
      // console.log(index,element,element.className.indexOf("selected"))
      if (element.className.indexOf("selected") > -1) {
        selectedindex = index;
        // console.log(index,selectedindex)
      }
    }
    const browsers = document.querySelectorAll("#browser browser");
    selectedindex = selectedindex + browsers.length - tabs.length;
    if (selectedindex < 0) return endlog("错误的序号" + tabs);
    Zotero.ddd = document;
    ztoolkit.log(
      "tabs",
      tabs.length,
      "browsers",
      browsers.length,
      "selectedindex",
      selectedindex,
    );
    const browser1 = browsers[selectedindex];
    if (!browser1) return endlog("browser 不存在");
    // @ts-ignore contentDocument
    readerdoc = browser1.contentDocument;
    if (!readerdoc) return endlog("reader 不存在");

    const numPagesSpan = readerdoc.querySelector("#numPages");
    if (!numPagesSpan) return endlog("numPages 不存在");
    const page = parseInt(numPagesSpan.textContent || "1"); //处理格式如7/40的页码转换为7
    ztoolkit.log("page", page);
    const readerframe =
      readerdoc.querySelector("#secondary-view iframe") ||
      readerdoc.querySelector("#primary-view iframe");
    if (!readerframe) {
      return endlog("pdf 不存在");
    }
    // @ts-ignore contentDocument
    pdfdoc = readerframe.contentDocument;
    // if (!(pdfdoc instanceof Document)) {
    //   return endlog("pdf 不存在");
    // }
    //检测翻译是否存在，存在就清除，并且跳出
    const trannodes = pdfdoc.querySelectorAll(
      `#${addonRef}-pdf-viewer-style-page${page},.pdfViewer .page:nth-child(${page}) .${addonRef}-tran-str`,
    );
    if (trannodes && trannodes.length > 0) {
      ztoolkit.log("清除翻译", trannodes);
      for (const node of trannodes) {
        node.remove();
      }
      return endlog("清除翻译结束");
    }

    const stylehead = pdfdoc.querySelector("head,body,div");
    if (!stylehead) return endlog("head 不存在");
    stylehead.appendChild(
      ztoolkit.UI.createElement(pdfdoc, "style", {
        id: `${addonRef}-pdf-viewer-style-page${page}`,
        namespace: "html",
        properties: {
          textContent: pdfViewerCSS.replace(
            /\.pdfViewer \.page/g,
            `.pdfViewer .page:nth-child(${page})`,
          ),
        },
      }),
    );
    const pagewidth = getComputedStyle(
      pdfdoc.querySelectorAll(`.pdfViewer .page:nth-child(${page})`)[0],
    ).width;
    // let startNode = document.querySelector(addonRef + "nonononoelement");
    let nodes = [...document.querySelectorAll(addonRef + "nonononoelement")];
    let str = "";

    const getrect = (nodearray = nodes) => {
      if (!nodearray || nodearray.length == 0)
        return {
          left: 0,
          top: 0,
          leftwidth: 0,
          topheight: 0,
          width: 0,
          height: 0,
          leftpercent: 0,
          toppercent: 0,
          widthpercent: 0,
          heightpercent: 0,
        };

      const rects = nodearray
        // @ts-ignore style
        .map((a) => ({ cs: getComputedStyle(a), os: a.style }))
        .map((a) => ({
          left: parseFloat(a.cs.left),
          top: parseFloat(a.cs.top),
          width: parseFloat(a.cs.width),
          height: parseFloat(a.cs.height),
          leftpercent: parseFloat(a.os.left),
          toppercent: parseFloat(a.os.top),
        }))
        .filter((a) => a.height > 0)
        .map((a) =>
          Object.assign(a, {
            leftwidth: a.left + a.width,
            topheight: a.top + a.height,
            widthpercent: (a.width / a.left) * a.leftpercent,
            heightpercent: (a.height / a.top) * a.toppercent,
          }),
        );
      const left = Math.min(...rects.map((a) => a.left));
      const top = Math.min(...rects.map((a) => a.top));
      const topheight = Math.max(...rects.map((a) => a.topheight));
      const leftwidth = Math.max(...rects.map((a) => a.leftwidth));
      const leftpercent = Math.min(...rects.map((a) => a.leftpercent));
      const toppercent = Math.min(...rects.map((a) => a.toppercent));
      const widthpercent = Math.max(...rects.map((a) => a.widthpercent));
      const heightpercent = Math.max(...rects.map((a) => a.heightpercent));
      return {
        left,
        top,
        topheight,
        leftwidth,
        width: leftwidth - left,
        height: topheight - top,
        widthpercent,
        heightpercent,
        leftpercent,
        toppercent,
      };
    };

    const issametop = (anodes = nodes, bnodes = nodes, maxoffset = 15) => {
      return Math.abs(getrect(anodes).top - getrect(bnodes).top) < maxoffset;
    };
    const getcurrentlineelement = (anode = nodes[0]) => {
      const currentlineelement = [anode];
      let mynode = anode;
      while (mynode && mynode.nextElementSibling) {
        if (
          !issametop([mynode], [mynode.nextElementSibling]) &&
          getrect([mynode.nextElementSibling]).height > 1
        )
          break;
        mynode = mynode.nextElementSibling;
        currentlineelement.push(mynode);
      }
      return currentlineelement;
    };
    const tranNodeStart = async (
      currentnode = document.querySelector(addonRef + "nonononoelement"),
    ) => {
      if (!currentnode) {
        return;
      }
      const text = currentnode.textContent;
      if (text) {
        if (nodes.length > 0) {
          const lastnode = nodes[nodes.length - 1];
          if (!issametop([lastnode], [currentnode])) {
            //当前节点和上一个节点不在同一行
            // ztoolkit.log("新的一行", lastnode, currentnode);
            // 怎么判断上一句话结束了
            if (str.trim().endsWith(".")) {
              ztoolkit.log("上一句以.结尾", lastnode.textContent);
              await tranNodeEnd();
            } else if (str.trim().endsWith(":")) {
              ztoolkit.log(
                "上一句以:结尾，可能开启了公式",
                lastnode.textContent,
              );
              await tranNodeEnd();
            } else if (
              getrect([currentnode]).top - getrect([lastnode]).topheight >
              getrect([currentnode]).height
            ) {
              ztoolkit.log(
                "距离上一个文本的底部 大于一个自身高度 ",
                lastnode.textContent,
              );
              await tranNodeEnd();
            }
            //else  if (
            //   getrect(nodes).leftwidth - getrect([lastnode]).leftwidth >
            //   30
            // ) {
            //   ztoolkit.log(
            //     "上一个节点右侧 远小于 上一个所在区域的右侧没有对齐，没到结尾就结束了",
            //     getrect(nodes).leftwidth,
            //     getrect([lastnode]).leftwidth,
            //     lastnode.textContent,
            //   );
            //   await tranNodeEnd();
            // }
            else if (
              getrect(getcurrentlineelement(currentnode)).leftwidth -
                getrect([lastnode]).leftwidth >
              100
            ) {
              ztoolkit.log(
                "上一节点的右侧 远小于 当前节点所在行的右侧没有对齐，短标题适合这种情况",
                getrect(getcurrentlineelement(currentnode)).leftwidth,
                getrect([lastnode]).leftwidth,
                lastnode.textContent,
              );
              await tranNodeEnd();
            }
          }
        }
        str += text;
        nodes.push(currentnode);
      }
    };

    const tranNodeEnd = async () => {
      if (nodes.length == 0) return;
      // ztoolkit.log("nodes", nodes);
      const result = await transtr(str, 3);
      const node0ComputedStyle = getComputedStyle(nodes[0]);
      const rect = getrect(nodes);
      const fontsize = (rect.height * rect.width) / result.length / 30;
      // @ts-ignore style
      const node0style = nodes[0].style;
      const fontSize = node0style.fontSize;
      const transform = node0style.transform;
      const left = !isNaN(rect.leftpercent)?rect.leftpercent + "%":rect.left>0?rect.left + "px": node0style.left      
      const top =!isNaN(rect.toppercent)?rect.toppercent + "%":rect.top>0?rect.top + "px": node0style.top 
      const width = !isNaN(rect.widthpercent)?rect.widthpercent+ 4 / rect.widthpercent  + "%":rect.width>0?rect.width + "px":   node0ComputedStyle.width
      ztoolkit.log("目标rect", rect);
      ztoolkit.UI.appendElement(
        {
          tag: "span",
          namespace: "html",
          classList: [`${addonRef}-tran-str`],
          styles: {
            fontSize,
            left,
            top,
            width,
            transform
          },
          properties: { textContent: result },
        },
        nodes[0].parentElement,
      );
      str = "";
      nodes = [];
    };
    const transtr = async (str = "", retry = 4) => {
      if (retry <= 0) return "";
      const tstart = Date.now();
      let str1 = "";
      const res = await Zotero.PDFTranslate.api.translate(str);
      ztoolkit.log(retry, res.status);
      if (res.status == "fail") {
        ztoolkit.log("retry...");
        if (res.result.indexOf("TextTooLong") > -1) {
          //超时翻译字符太长错误，腾讯限制6000
          let sepindex = str.indexOf(".");
          if (sepindex < 0 || str.length / 2) sepindex = str.length / 2;
          await Zotero.Promise.delay(233);
          str1 = await transtr(str.substring(0, sepindex), retry);
          await Zotero.Promise.delay(233);
          let str2 = "";
          str2 = await transtr(str.substring(sepindex), retry);
          return str1 + str2;
        }
        if (res.result.indexOf("RequestLimitExceeded") > -1)
          //超时错误
          await Zotero.Promise.delay(1e3);
        if (res.result.indexOf("SignatureFailure") > -1) {
          str = str.replace(/\$\$/g, "$ $").replace(/\$\$/g, "$ $"); //处理腾讯翻译签名错误
        }
        str1 = await transtr(str, retry - 1);
        return str1;
      }
      const tdelay = 233 - Date.now() + tstart;
      if (tdelay > 0) await Zotero.Promise.delay(tdelay);
      str1 = res.result;
      return str1;
    };
    const spans = [
      ...pdfdoc.querySelectorAll(
        `div.page:nth-child(${page}) > div.textLayer  span`,
      ),
    ].filter((f) => f.childElementCount == 0);
    ztoolkit.log(
      "全文共",
      spans.length,
      "个块，共",
      [...spans].map((a) => a.textContent).join(" ").length,
      "个字",
    );
    for (const span of spans) {
      await tranNodeStart(span);
    }
    await tranNodeEnd(); // 翻译最后一个元素
    endlog(`第${page}页翻译结束`);
  };
  tran();
  // export { tran };
})();

Anything else

No response

[zzlb0224]

抱歉，在定位当前文档、页码还有文字定位上还有问题，我再改改，先删除这个

[zzlb0224]

已调整

[zzlb0224]

目前的效果，
文字定位还需要解决，有大神能处理吗？

[zzlb0224]

重新处理定位问题，基本稳定

//代码已更新 只保留最新的代码

[zzlb0224]

解决处理两次的问题

//代码已更新 只保留最新的代码

[zzlb0224]

@windingwind 求大神帮忙看看这个代码在pdf阅读器的菜单为什么总是运行两次？

//代码已更新

[windingwind]

你好，见https://github.com/windingwind/zotero-actions-tags#custom-script
对于菜单/快捷键触发的动作，会对所有选中条目触发一次（items=Array<Zotero.Item>，item=undefined），然后对选中条目分别触发一次（items=[], item=Zotero.Item）。

如需只对当前条目触发一次，在脚本开始时判断即可

if (!item) return;

[windingwind]

感谢贡献，但请善用编辑/折叠功能，过多的重复大段代码令人困惑

[zzlb0224]

谢谢建议，已经改好了，我清理一下这个页面的代码只保留最新的

[a-thriving-little-bear]

我是个小白,完全没看懂应该怎么才能用这段代码,求大神分享下配置需要哪几步啊

[a-thriving-little-bear]

请问是需要额外配置pdf.js吗(PDF-translate插件已经配置好了)

[zzlb0224]

不需要配置，做在了zotero-actions-tags的菜单里面，在打开pdf页面的时候能看到。

[zzlb0224]

可能有些小bug，需要你自己修改。
我用着也是有些pdf解析不出来。
或者你换个pdf也许就可以了。

[a-thriving-little-bear]

好奇怪, 为什么我没有您第三张图的标签, 是在PDF阅读界面直接就会出现吗, 请问您用的zotero-actions-tags版本号是什么呢, 我怀疑是不是我的版本有问题, 我用的版本号是1.0.0-15, 感谢大佬

[zzlb0224]

Release 1.0.0-23 Release 1.0.0-23 Pre-release
fix: reader menu dropmarker

这个版本才加入pdf的菜单

[jiangaq]

是选择文字后点，还是整篇翻译？为什么我按上面都设置好了，点了不起任何作用？

[zzlb0224]

这个是用来快速翻译当前页的。我测试了7.0.6-beta.2+b4239fd4c (64-bit)没有问题

[jiangaq]

我是7.05，mac系统，2个插件设置如下，

[zzlb0224]

我的设置和你的差不多。你重启之后试试。可能程序还有bug

[jiangaq]

重启了几次，重装了几次插件，莫名其妙又好了，但是效果不行

[zzlb0224]

这个效果只能将就用。我也有pdf出来这样的效果。
现在是根据dom布局来设置翻译的位置。
我估计直接用pdf.js解析位置能够有更好的效果。可惜我不会

[jiangaq]

我退出，再打开pdf，现在又没法翻译了