Electron自制翻译工具:截图翻译

98 阅读2分钟

前言

不知道大家平时都是用什么翻译方式,我一般使用有道截图翻译和浏览器插件的沉浸式翻译。沉浸式翻译还是很不错的,没用过的推荐去体验下。有道翻译一般情况下是好用的,但是如果我是想要复制原文和译文就难了(主要是想白嫖)。

既然这样的话,那就自己来实现一个吧。换成以前的话可能有点难,但是大人时代变了。零基础electron经验+AI秒了。

我起一个引导方向的作用,剩下的Cursor会写,虽然有时候不太聪明,但是总体上还是没有问题的。

先来看看效果,效果还是可以的。

动画.gif

后面有源码地址

正文

界面

先来看看界面,主要的页面就两个。

首页

image.png

设置翻译的目标语言AIAPI key,目前就提供了DeepSeekGPTGeminiGLMAPI key设置。GeminiGLMAPI是可以免费使用的。使用Gemini翻译的话,注意要使用魔法。

image.png

所用技术

使用React作为主开发语言;使用electron-vite作为脚手架来创建项目;组件库的话使用了最近很火的shadcn/ui同一风格。

流程

  1. 使用快捷键或点击按钮进行截图,快捷键的设置参考Snipaste,他用F1,我就用F2
  2. 对图片使用tesseract库进行OCR识别,定位文字的位置。
  3. 由于tesseract识别的文字是一段一段的,所以换行会被拆成两句话。我们需要处理一下。

原文

image.png

不处理会是这个样子

image.png

我们处理一下,将十分靠近的上下两句话合为一句话翻译

image.png

  1. 调用AI的接口,对我们拼接的话进行翻译

可以去使用GeminiGLMAPi key,免费使用的。

  • Gemini API key获取

官网: aistudio.google.com/prompts/new…

可以看到免费的

image.png

  • GLM API key获取

官网: www.bigmodel.cn/

可以去注册一下账号,然后创建一个api key,可以看到模型这边0元/千Tokens就是免费的,你自己用够了。

image.png

  1. 将翻译后的结果在对应的位置上显示,也是按ESC键关闭翻译结果弹窗

结语

感兴趣的可以去试试。虽然目前还是有些不足,大家也可以提一提问题

项目地址:github.com/lzt-T/scree…