AI赋能前端 - 抛弃百度翻译，自部署AI翻译服务

前端柒八九

发布于 2025-01-19 20:58:22

25500

代码可运行

文章被收录于专栏：柒八九技术收纳盒柒八九技术收纳盒

运行总次数：0

代码可运行

❝Everything must be paid for twice

大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder

❝此篇文章所涉及到的技术有

AI
翻译
LibreTranslate
自部署
Argos Translate
Python

因为，行文字数所限，有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。

前言

最近，大家在冲浪的时候，有一个话题是绕不过去的。- Tiktok 难民（Tiktok Refugee），起因是2024年4月，美国总统拜登打着所谓“保护国家安全”的旗号，签署一项国会通过的“不卖就禁”法案，要求TikTok母公司字节跳动在2025年1月19日前将TikTok出售给非中国企业，否则这款应用程序将在美国被禁用。

而，“自由”美利坚的网民为了抵制这个行为，他们全都跑到中国的社交媒体("小红书/抖音")上进行冲浪。

看到一个美国年轻人回答为什么他们来中国的小红书：

美国政府不让他们上tiktok，他们生气了，偏要上中国的APP。
中国的APP只有小红书接受国际电话注册。
不去facebook，是因为他们爷爷奶奶爸爸奶奶在上面分享AI生成的耶稣画像（老头子们太老土了）。
不去instagram是因为那里的世界太假，都是粉饰过的，不是真实的。
来了小红书，发现中国网民好好玩，就这了。

但是呢，显然小红书没有做好出海准备，以至于平台中所有的内容都是中文环境，然后缺少了国际化处理。

甚至有些老铁，已经开始给小红书提功能。

小红书，作为国内顶级的图文社交软件，其实它的国际化处理或者说对文本进行翻译(中文-英文/英文-中文)和我们公司的部分业务是类似的。

所以，今天我们就来讲讲，如何自部署一套自己的翻译服务。

好了，天不早了，干点正事哇。

我们能所学到的知识点

❝

案例展示
翻译服务
本地部署服务

1. 案例展示

我们使用f_cli_f来构建一个前端项目。

在安装好依赖后，我们通过yarn dev来启动项目。其中，我们Home.tsx的代码如下：

import {  useState } from'react';
import { Input,Button } from'antd';

const { TextArea } = Input;

const Home = () => {
    const [question,setQuestion] = useState("")
    const [transResult, setTransResult] = useState("");
    const translate = async (source:string,target:string) => { 
        const res = await fetch("http://192.168.3.167:7891/translate", {
            method: "POST",
            body: JSON.stringify({
                q: question,
                source,
                target,
                format: "text",
            }),
            headers: { "Content-Type": "application/json" }
        });
        const result = await res.json();
        setTransResult(result.translatedText)
    }


    return (
        <section className="h-screen w-screen overflow-auto flex flex-col gap-4 justify-center items-center">
            <section className='flex flex-col gap-2'>
                <div>自动识别语言并翻译为英语<Button onClick={()=>translate("auto",'zt')}>翻译</Button></div>
                <div className='flex gap-1'>
                    <TextArea  rows={4} onChange={(e)=>setQuestion(e.target.value)}/>
                    <TextArea  rows={4} value={transResult} allowClear onClear={()=>setTransResult("")}/>
                </div>
            </section>
            
        </section>
    );
};

exportdefault Home;

可以看到，代码中有http://192.168.3.167:7891/translate的配置信息，这就是我们自部署的翻译服务。这个我们后面会讲。

中转英

自动识别语言

❝当然上面的例子，我们是用最简单的模式，其实我们可以将其做成在TextArea文本信息变更时，就抬起接口(当然最好做防抖处理)

2. 翻译服务

我们是采用开源的翻译服务 - LibreTranslate。

❝它完全自主托管的免费开源机器翻译 API。与其他 API 不同的是，它不依赖 Google 或 Azure 等专有提供商来执行翻译。相反，它的翻译引擎由开源的 Argos Translate 库提供支持。[图片]

大家可以通过官方线上地址来进行体验。当然，它有很多配置项目，大家可以自行研究。

3. 本地部署服务

既然，我们已经知道了使用LibreTranslate进行翻译，现在我们就需要将其部署到服务器中，然后通过API来调用对应的服务。

有大神已经为我们封装好更容易部署的代码。下面，我们就直接使用现成的代码来在本地部署。对于的代码为ott。

部署步骤

由于我们使用的是Mac，所以下面的按照步骤是Mac的。

先确认是否安装了正确的python版本3.9+和git， python -V 或者python3 -V
创建空目录并进入，比如 /data/ott && cd /data/ott, 然后拉取源码 git clone https://github.com/jianchang512/ott .
创建虚拟环境并激活 python3 -m venv venv && . ./venv/bin/activate
安装依赖，pip3 install -r requirements.txt --no-deps，如果提示“not found”，同样将镜像改为 pip官方或阿里云镜像
如果要启用cuda加速翻译，则继续执行

pip3 uninstall -y torch

pip3 install torch==2.1.2 --index-url https://download.pytorch.org/whl/cu121

在 she.ini中设置代理地址
启动服务 python3 start.py

❝注意如果你的python执行命令不是python3，上面命令中的 python3需替换为对应的命令比如 python

代码解释

上面我们运行python3 start.py就会启动对应的python服务。其中，最重要的代码就是

def run():
    try:
        sys.argv.extend(["--host",settings['HOST'],"--port",str(settings['PORT']),"--load-only",settings['LANG'],"--update"])
        # 不存在 index.json 并且无法连接 raw.githubusercontent.com，则停止执行
        ifnot testgithub():
            return
        from libretranslate.main import main
        main()
    except Exception as e:
        err=str(e)
        if re.search(r'download error',err,re.I):
            msg='第一次启动需要下载模型，请设置代理地址'ifnot settings['PROXY'] elsef'你设置的代理地址不正确:{settings["PROXY"]},请正确设置代理，以便下载模型'
            print(f"\n=======\n无法下载模型，{msg}\n{err}\n\n")
        else:
            print(err)
        sys.exit()