AI i18n,两行js实现html全自动翻译。
交给AI,无需改动页面、无语言配置文件、无API Key、对SEO友好!
简体中文 | 繁體中文 | English | 日語 | Русский | deutsch | Français
- 使用极其简单。 直接加入几行 JavaScript 代码即可让其拥有上百种语言切换能力,不增加工作量,无需改造页面本身植入大量垃圾代码变得臃肿,也不需要配置各种语种的语言文件,因为它会直接扫描你的DOM自动识别并翻译显示,它不需要你到某某网站登录去申请什么key,它是开源开放的,拿来就能用。
- 极其灵活扩展。 您可指定它只翻译某些指定区域的元素、自定义切换语言方式及美化、某些id、class、tag不被翻译、自定义翻译术语、自动根据用户的语言喜好及所在的国家切换到这个语种进行浏览、 …… 只要你想的,它都能做到。做不到的,你找我我来让它做到!
- 极速翻译能力。 采用多线程加速,内置三层缓存、预加载机制、文本预处理清洗等,提供毫秒级瞬间翻译的能力。
- 永久开源免费。 采用MIT开源协议,您可永久免费使用。另外你可以用它来做某些系统的三方插件、浏览器插件…等等,进行售卖盈利
- 搜索引擎友好。 完全不影响你本身网站搜索引擎的收录。爬虫所爬取的网页源代码,它不会对其进行任何改动,你可完全放心。
- 支持私有部署。 在某些政府机关及大集团内部项目中,对数据隐私及安全保密有强要求场景、或者完全不通外网的场景,可以自行私有部署翻译API服务
- 全球网络节点。 美洲、亚洲、欧洲 … 都有网络节点,它能自动适配最快节点,每间隔1分钟自动获取一次延迟最小的节点进行接入使用,使全球范围使用都可高效稳定。
拿别人的网站试试效果
- 随便打开一个网页
- 右键 - 审查元素
- 粘贴入以下代码:
var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'https://res.zvo.cn/translate/inspector_v2.js'; head.appendChild(script); - Enter 回车键 , 执行
- 在当前网页的左上角,就出现了一个大大的切换语言,切换试试看。
在线体验Demo
http://res.zvo.cn/translate/demo.html
快速接入
在网页最末尾, </html> 之前,加入以下代码,一般在页面的最底部,就会选择语言的 select 切换标签 :
<script src="https://cdn.staticfile.net/translate.js/3.18.66/translate.js"></script>
<script>
translate.language.setLocal('chinese_simplified'); //设置本地语种(当前网页的语种)。如果不设置,默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等
translate.service.use('client.edge'); //设置机器翻译服务通道,相关说明参考 http://translate.zvo.cn/545867.html
translate.listener.start(); //开启页面元素动态监控,js改变的内容也会被翻译,参考文档: http://translate.zvo.cn/4067.html
translate.execute();//完成翻译初始化,进行翻译
</script>
更深入使用
- 快速使用 - 让你最快看到效果,了解它翻译的原理
- 常见问题 - 我有多个页面,怎么都能每个页面都能翻译
- 最优体验 - 打开新页面后先显示原文1秒然后再显示译文,如何不显示原文?
- 项目上线 - 更换更稳定响应更快翻译更好的大模型翻译通道
它支持极其丰富的微调扩展方式,可参考下面的微调指令
微调指令
它有极其丰富的扩展指令,让你可以对它进行各种精准控制,满足各种难缠客户的各种脑洞要求。(如果满足不了,可提出来,我们加)
- 切换语言select选择框的自定义设置,设置切换语言选择框位置、CSS美化、是否出现、显示的语种、触发后的自定义、以及重写等。
- 设置默认翻译为什么语种进行显示,用户第一次打开时,默认以什么语种显示。
- 自定义翻译术语,如果你感觉某些翻译不太符合你的预期,可进行针对性的定义某些词或句子的翻译结果,进行自定义术语库
- 翻译完后自动触发执行,当翻译完成后会自动触发执行您的某个方法,以便您来做自定义扩展。
- 指定翻译服务接口,如果你不想用我们开源免费的翻译服务接口,使用您自己私有部署的、或者您自己二次开发对接的某个翻译服务,可通过此来指定自己的翻译接口。
- 监控页面动态渲染的文本进行自动翻译,如果页面用 JavaScript 的地方比较多,内容都是随时用JS来控制显示的,比如 VUE、React 等框架做的应用,它可以实时监控DOM中文字的变动,当发生变动后立即识别并进行翻译。
- 设置本地语种(当前网页的语种),手动指定当前页面的语言。如果不设置,它会自动识别当前网页的文本,取当前网页文本中,出现频率最高的语种为默认语种。
- 自动切换为用户所使用的语种,用户第一次打开网页时,自动判断当前用户所使用的语种、以及所在的国家,来自动进行切换为这个语种。
- 主动进行语言切换,开放一个方法提供程序调用,只需传入翻译的目标语言,即可快速切换到指定语种
- 只翻译指定的元素,指定要翻译的元素的集合,可传入一个或多个元素。如果不设置此,默认翻译整个网页。
- 翻译时忽略指定的id,翻译时追加上自己想忽略不进行翻译的id的值,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
- 翻译时忽略指定的class属性,翻译时追加上自己想忽略不进行翻译的class标签,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
- 翻译时忽略指定的tag标签,翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
- 翻译时忽略指定的文字不翻译,翻译时追加上自己想忽略不进行翻译的文字(支持配置字符串和正则表达式),凡是在这里面的,都不进行翻译。
- 对网页中图片进行翻译,在进行翻译时,对其中的图片也会一起进行翻译。
- 鼠标划词翻译,鼠标在网页中选中一段文字,会自动出现对应翻译后的文本
- 获取当前显示的是什么语种,如果用户切换为英语进行浏览,那么这个方法将返回翻译的目标语种。
- 根据URL传参控制以何种语种显示,设置可以根据当前访问url的某个get参数来控制使用哪种语言显示。
- 离线翻译及自动生成配置,其实它也就是传统 i18n 的能力,有语言配置文件提供翻译结果。
- 手动调用接口进行翻译操作,通过JavaScript调用一个方法,传入翻译文本进行翻译,并获得翻译结果
- 元素的内容整体翻译能力配置,对node节点的文本拿来进行整体翻译处理,而不再拆分具体语种,提高翻译语句阅读通顺程度
- 翻译接口响应捕获处理,对翻译API接口的响应进行捕获,进行一些自定义扩展
- 清除历史翻译语种的缓存,清除掉你上个页面所记忆的翻译语种,从而达到切换页面时不会按照上个页面翻译语种自动进行翻译的目的。
- 网页ajax请求触发自动翻译,监听当前网页中所有的ajax请求,当请求结束后,自动触发翻译
- 设置只对指定语种进行翻译,翻译时只会翻译在这里设置的语种,未在里面的语种将不会被翻译。
- 识别字符串语种及分析,对字符串进行分析,识别出都有哪些语种,每个语种的字符是什么、每个语种包含的字符数是多少
- 重写一级缓存(浏览器缓存),你如果不想使用默认的 localStorage 的缓存,您完全可以对其重写,设置自己想使用的缓存方式
- 设置使用的翻译服务 translate.service.use,目前有自有的服务器提供翻译API方式、无自己服务器API的方式两种。
- 启用企业级稳定翻译,独立于开源版本的翻译通道之外,仅对少数用户开放,提供企业级的稳定、高速、以及更多网络分发节点。
- 增加对指定标签的属性进行翻译,可以增加对指定html标签的某个或某些属性进行翻译。比如element、vue 等框架,有些自定义的标签属性,想让其也正常翻译
- 本地语种也进行强制翻译,切换为中文时,即使本地语种设置的是中文,网页中只要不是中文的元素,都会被翻译为要显示的语种
- 自定义通过翻译API进行时的监听事件,当通过翻译API进行文本翻译时的整个过程进行监听,做一些自定义处理,比如翻译API请求前要做些什么、请求翻译API完成并在DOM渲染完毕后触发些什么。
- 启用翻译中的遮罩层,在进行通过翻译API进行翻译时,相关元素上面显示一层加载中的动画效果,让用户知道这段文本正在进行处理中
- 对JS对象及代码进行翻译,可对JavaScript 对象、以及 JavaScript 代码进行翻译。
- 网络请求自定义附加参数,追加上一些自定义的参数传递到后端翻译服务。主要用于定制扩展使用。
- 网络请求数据拦截并翻译,当用户触发网络请求时,它可以针对ajax、fetch请求中的某个参数,进行拦截,并进行翻译,将翻译后的文本赋予这个参数,然后再放开请求。
- 翻译排队执行,避免接入时的异常设置,导致非常频繁的去执行扫描及翻译的情况。
- 翻译相关网络请求的自定义控制,进行翻译的时候,会有一些初始化、多节点测速、当前支持语种、等请求,可以通过提前配置的方式,不在发起这几个网络请求,以及对翻译接口请求进行转发修改等。
- 获取翻译区域显示的原始文本,获取翻译区域的原始文本,翻译前的文本。这里会把空白符等过滤掉,只返回纯显示的文本
- 重写语种识别策略,识别当前语种、或某个元素是什么语种的计算方式
- 进行翻译的生命周期监控及触发,监控执行翻译 translate.execute(); 之后,它会进行的一系列动作,可以针对其某一刻,进行触发自定义方法。
- 网页打开时自动隐藏文字,翻译完成后显示译文,避免这种情况:刷新当前页面后,会先显示原本的文本,然后再翻译为切换为的语种,体验效果有点欠缺。
框架中使用
- Vue | vue2 demo
- React | React 18 Demo
- Uniapp | 打包APP使用的说明及Demo
- Layui | Demo
帮你集成
正常情况,你稍微懂一点JavaScript,就可以非常方便的进行使用了。你还可以加我们讨论QQ群等进行讨论各种不同的使用方式等。
如果使用时遇到的一些意外情况,我们可以给你进行协助:
- 你在使用时遇到BUG,文档就是这么说的,但是它没生效,可以反馈我,我免费帮你排查、解决
- 你不懂JavaScript,或者你没有时间去集成它,我们可以有偿帮你完成接入集成
- 你们的项目是内网形态,没有提供公网访问,想要我支持参与,我也可以出差去你们公司实地进行参与调试、指导、配合,完成接入集成工作。可联系我
translate.js 衍生了一系列扩展能力,在其他各个不同的领域,默默对当前的现状进行着改变。
分支:浏览器翻译插件
提供整体的浏览器翻译插件的全套方案,您如果是开发者,完全可以拿去将界面美化包装一下,而后直接提交应用市场进行售卖盈利。
浏览器插件的源码 | 能直接安装到浏览器的插件Demo
分支:HTML文件翻译API
提供开放API接口,传入html文件(html源代码)及要翻译为的语言即可拿到翻译后的html源码。完美支持识别各种复杂及不规范html代码,支持翻译前的微调,比如不翻译某个区域、图片翻译、js语法操作html文件中的元素进行增删改等。
详细说明 | Demo
分支:翻译服务私有部署
- 提供文本翻译API,可为 translate.js 提供翻译接口支持。
- 可使用在线大模型 GiteeAI 、或内网私有部署大模型(qwen3、glm、deepseek、 Hunyuan-MT …) 转为统一的文本翻译API输出。
- 内置内存加速、多线程加速、鉴权、译文调整、统计 …等多项能力。
开放的文本翻译API | linux上私有部署
分支:源站翻译及域名分发
将您现有的网站,翻译成全新的小语种网站,小语种网站可以分别绑定域名并支持搜索引擎收录和排名。而您的源站无需任何改动。也就是你可以将你朋友的网站,翻译为小语种网站,绑定上自己的域名,提供对外访问。而你无需向你朋友取得任何的如账号等相关权限
更多介绍及视频说明 | 私有部署 | 某个网站的Demo
分支:文本翻译大模型
https://huggingface.co/xnx3/translate100 是一个用于翻译任务的 seq-to-seq 架构、基于 Transformer 的神经机器翻译模型,由m2m100(12B)经过蒸馏(small100)及各种处理后,得到的可以完全适配 translate.js 的一键部署应用。
它的翻译能力很一般,它最大的特点是在超低配置的终端(1核2G内存)运行使用、及做到适配全球主流的上百个语言。
它在CPU(Intel 7700k)上可以达到43token/s,在淘宝100块钱就能买到的p106显卡上可以达到90tokens/s
它的初衷,是我们针对私有化部署场景,采用qwen3 8~32B 做主要翻译时,针对千问大模型处理不了的部分,又做的一层保障,将qwen3翻译不达标的文本再交由 translate100 来进行最后的翻译,以完成大模型翻译的可靠稳定性闭环,避免返回翻译失败。
当然,你也可以部署它后,通过它开放的文本翻译API,来进行使用。 它最大的优势是对硬件要求极低极低,完全无需联网就能使用。
(注意,https://huggingface.co/xnx3/translate100 这个链接需要科学上网才能打开)
开放的文本翻译API(它跟translate.js 使用的翻译API是完全一致的) | 私有部署