AI赋能前端

AI赋能前端

❝Everything must be paid for twice

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

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

1. AI
2. 翻译
3. LibreTranslate
4. 自部署
5. Argos Translate
6. Python

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

前言

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

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

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

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

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

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

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

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

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

我们能所学到的知识点

❝

1. 案例展示
2. 翻译服务
3. 本地部署服务

1. 案例展示

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

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

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

ct { TextArea } = Input;

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


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

exportdefault Home;

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

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

2. 翻译服务

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

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

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

. 本地部署服务

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

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

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

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

pip uninstall -y torch

pip install torch==2.1.2 --index-url 

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

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

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

def run():
    try:
        sys.(["--host",settings['HOST'],"--port",str(settings['PORT']),"--load-only",settings['LAG'],"--update"])
        # 不存在 index.json 并且无法连接 raw.githubusercontent，则停止执行
        ifnot testgithub():
            return
        from  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.ar 传递参数，如 HOST、PORT 和语言设置给翻译服务。
• 如果网络测试失败，则退出程序。
• 启动 ，加载翻译服务。
• 捕获错误并输出对应提示信息。

在start.py中存在另外一个函数-testgithub()。它是在项目初始化的时候就从argosopentech模型列表下载对于的模型。

如果下载成功，那么在项目中的.local中就有对应的模型信息了。

从上面的模型看出来，我们是可以支持很多语言的互相翻译的。