让国内程序员头疼多年的问题,终于有救了!

01

让程序员头疼的问题

VS Code是当今最流行的代码编辑器,也是很多程序员的主力编程工具。

在使用VS Code编程和学习过程中,经常需要面对大量的英文,编程语言是英文,注释是英文,资料是英文......

程序员如果英文不过关,连简单的英文变量名和函数名读起来都很吃力,更不用说长文本注释和长篇大论的英文文档了,这对于程序员来说是很大的阻碍。

当然,我们可以把这些英文复制/粘贴到翻译软件或者翻译网站中,看看中文含义,然后再返回VS Code继续,这样来回切换,对编程思路来说是很大的打断。

现在的浏览器中有不少沉浸式翻译的插件,VS Code也支持插件/扩展,同样也可以开发出类似的沉浸式翻译功能,确实有人这么做了,但是很多VS Code插件只支持单词翻译,不支持整个句子/文档的翻译。即使是支持,用的大多是上一代机翻技术,机械的翻译,无法达到信达雅的效果。

最近我注意到智谱BigModel开放平台(bigmodel.cn)的应用空间中推出了多个“翻译智能体”:

它不但支持通用的多语种翻译,还支持专业文档翻译,文学翻译,影视字幕翻译和社交媒体翻译。

我尝试了一下,发现它翻译的效果相当不错,比如这句英文:Caught between a rock and a hard drive with this coding dilemma.

普通的机器可能翻译为:陷入这种编码困境的岩石和硬盘之间。

但是智谱的翻译体(使用转述翻译)可以翻译成:

可见效果是相当不错的。

这些翻译智能体不但可以在网页端直接使用,也对外提供了API:

我立刻就想到,为什么不利用它开发一个VS Code 的插件呢?

在VS Code只需要选中变量名、方法名、注释、文档等英文,然后利用智谱翻译智能体强悍的能力进行翻译。

02

总体设计

这个插件可以叫做"Code Translator",用户在VS Code中选取一段代码中的英文文本(可能是变量名、方法名、注释、文档),点击右键,在弹出的菜单中选择“翻译”,插件会把用户选中的英文文本发给翻译智能体。

对于翻译结果的展示,在展示的方式上需要区分一下:

1.如果要翻译的英文比较短,可以把翻译的结果漂浮在英文文本旁边。

2.如果英文本身就比较长(例如很长的注释,整个文档),可以把翻译成的中文放到一个临时文件中,展示给用户。

值得注意的是,需要对变量,函数名,类名等需要做一些预处理,例如把parsePropertyElement进行切分,变成Parse Property Element 然后进行翻译。

03

插件实现

我之前做过Eclipse插件的开发,没有做过VS Code插件的开发,但是这两个产品都出自大神Eric Gamma,我相信这两者肯定有相似之处,应该都是找到某个扩展点,然后写对应的扩展代码。

何况现在还有大模型,可以让它辅助把大部分代码都生成!

在自动生成的代码中,已经基本完成了VS Code插件所需的配置,尤其是当点击右键时对弹出菜单项“Translate”的处理,由于有很多VS Code插件所需的样板代码,这里就不一一展示了。

我需要做的是完善对智谱翻译智能体的调用,核心代码还是很简单的,调用起来非常方便,一目了然。

const response = await axios.post(  url,  {    agent_id: 'general_translation',    messages: [      {        role: 'user',        content: [          {            type: 'text',            text: text          }        ]      }    ],    custom_variables: {      source_lang: 'en',      target_lang: 'zh'    }  },  {    headers: {      'Content-Type': 'application/json',      'Authorization': `Bearer ${apiKey}`    }  });const data = response.data;const translatedText = data?.choices?.[0]?.messages?.[0]?.content?.text || '[No translation found]';return translatedText;

值得提醒的是,记得去智谱开放平台(bigmodel.cn)去申请一个API Key。

当VS Code插件收到翻译结果以后,就可以展示出来了。

一种是漂浮在英文文本旁边,用Decoration来实现,5秒后消失。

const deco = vscode.window.createTextEditorDecorationType({      after: {        contentText: ` → ${translatedText}`,        color: 'gray',        margin: '0 0 0 1em',        fontStyle: 'italic'          }       });       editor.setDecorations(deco, [selection]);       setTimeout(() => deco.dispose(), 5000);

另外一种是创建一个临时文档,显示在侧边栏:

const content = `${translatedText}`;const doc = await vscode.workspace.openTextDocument(  { content, language: 'markdown' });vscode.window.showTextDocument(doc, vscode.ViewColumn.Beside, true);

04

运行测试

我拿了一个早期的Spring源代码做了一下测试,在VS Code中,选择一个方法名("afterPropertiesSet"),点击右键,在弹出菜单中选择“Translate”:

翻译结果(“设置属性后”)立刻就显示在旁边了,5秒后就自动消失。

这个例子是对变量名的翻译:

无论是对变量名,函数名,还是类名,都进行了一些预处理,把camelCase,PascalCase,snake_case拆分成了具体的单词。

下面是对注释的翻译:

如果选择的英文文本比较长,没法漂浮在旁边,就会生成一个临时文档,放在英文文档的右边,方便对比着看。

05

总结

从我实验的结果看,智谱翻译智能体很容易就能集成到自己的插件中,翻译的效果相当不错,很准确,很全面。

使用这个小插件,程序员可以在编程和学习迅速地把不懂的英文翻译成中文,沉浸式地阅读资料,不用在VS Code和其他翻译系统直接来回切换,可以很大程度上提升专注度,让自己的开发流程更加顺畅。

当然,这个插件还有很大的改进空间,比如:可以把常用的词缓存起来,避免多次调用;对注释格式的处理要更加智能;翻译结果的显示位置要更加合理等等;还可以加入自定义的计算机专业词库,进一步调优翻译的质量。

这个VS Code插件只是智谱翻译智能体的一个小小的应用,强烈建议大家也到智谱开放平台(bigmodel.cn)去看看,尝试一下智谱翻译智能体,发挥你的想象力,也许可以用它开发出更有创意的应用/网站,甚至出海去赚钱呢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值