扬帆AI出海:打造智能多语言识别与翻译解决方案!

引言

今天我们要探讨的是AI技术在出海应用中的一个具体案例,通过使用OpenAI的API结合Node.js来构建一个能够识别多种语言并进行翻译的应用。这个过程不仅展示了如何利用现代AI技术解决实际问题,还体现了Prompt Engineering(提示工程)的重要性。想象一下,你的产品能够自动理解全球各地用户的心声,并以他们熟悉的语言回应------这不就是科技的魔力吗?在开始之前,我们需要先设置好我们的开发环境。

环境配置与项目初始化

1.老方案

您可以参考零基础学习 prompt Engineering 心得!中的相关配置命令及解释。

2.新方案

  • 1.确保您的开发环境中已安装Node.js

  • 2.npm i -y 初始化一个新的项目

    • 这会自动生成一个基本的package.json文件,用于管理项目的依赖关系和其他元数据。
  • 3.然后只需要把之前下载好的package.json中的dependencies(依赖项)复制到对应文件的package.json下。

    • 这样做的好处是快速复用已经配置好的依赖项,减少重复工作,并保持项目的一致性
  • 4.最后使用 npm i 命令
    • 执行npm i命令会根据当前目录下的package.json文件安装所有列出的依赖项(dependencies),这对于确保团队成员之间或不同环境中的代码一致性非常有用。

接下来,实战开始!

现在,我们需要创建必要的JavaScript文件,如main.mjs,并编写相应的逻辑来调用OpenAI API。下面是实现这一功能的部分中与零基础学习 prompt Engineering 心得!里相似的代码,这部分我就不多说了:

js 复制代码
import OpenAI from "openai";
import dotenv from "dotenv";

dotenv.config()

const client = new OpenAI({
    // node 里的进程对象
    apiKey: process.env.OPENAI_API_KEY,
    baseURL: process.env.OPENAI_BASE_URL
})
// es6 默认参数值
// 通用的LLM 聊天完成接口函数, 复用
const getCompletion = async (prompt, model = "gpt-3.5-turbo") => {
    // 用户提的问题
    const messages = [{
        role: 'user',
        content: prompt
    }];
    // AIGC chat 接口
    const response = await client.chat.completions.create({
        model: model,
        messages: messages,
        // LLM 生成内容的随机性 因为是翻译,所以要尽可能小
        temperature: 0.1
    })
    return response.choices[0].message.content
}

const main = async () => {
    
}

main()

接下来的js都是在main的异步函数中实现

下面先是添加了一些提前找好的messages,是一些用来测试的信息:

js 复制代码
const main = async () => {
    const user_messages = [
        "La performance du système est plus lente que d'habitude.",  //系统的性能比平时慢         
        "Mi monitor tiene píxeles que no se iluminan.",              //我的显示器有些像素点不亮。
        "Il mio mouse non funziona",                                // 我的鼠标坏了
        "Mój klawisz Ctrl jest zepsuty",                            // 我的Ctrl键坏了
        "我的屏幕在闪烁"
    ]
}

利用for循环遍历user_messages中的元素,这里使用for...of循环来遍历user_messages数组,因为这种循环方式简洁且易于理解。它特别适合处理可迭代对象,比如数组,而不需要手动管理索引,从而提高代码的可读性和维护性。想象一下,如果每次都要写i++,那得多麻烦啊!

js 复制代码
const main = async () => {
......//const user_messages

// for of es6 的遍历
    for (let issue of user_messages) {
        //简洁,代码可读性的提升
        console.log(issue);
        const prompt = `
        Tell me what language this is : "${issue}"
         `
        const country_language = await getCompletion(prompt)
        console.log(country_language)
    }  
}

利用以上代码,我们已经能够识别出用户输入的语言。不过,如果只是识别语言而没有实现翻译,总觉得有点儿"半途而废"的感觉。为了使我们的应用更加完善和实用,我们可以进一步优化代码,添加一个翻译功能。

想象一下,如果不仅能告诉用户他们输入的是哪种语言,还能直接将内容翻译成中文,那该有多酷!这不仅提高了用户体验,还大大扩展了应用的功能性。下面,我们就来实现这个更完善的版本。

main函数中,我们可以在识别语言之后,再调用一次getCompletion函数来进行翻译。具体来说,我们可以为每个用户输入创建一个新的提示(prompt),要求AI将输入的内容翻译成中文。然后,我们将识别出的语言和翻译结果结合起来输出。

js 复制代码
    ......//const user_messages
    
    for (let issue of user_messages) {
        //简洁,代码可读性的提升
        console.log(issue);
        const prompt = `
        Tell me what language this is : "${issue}"
         `
        const country_language = await getCompletion(prompt)
        // console.log(country_language)

        const resultPrompt = `
        帮我翻译以下的文字到中文,"${issue}"
        `
        const result = await getCompletion(resultPrompt)
        
        console.log(`${country_language},翻译结果是:${result}`)
    }
    // console.log(issue);
}

通过这种方式,我们就可以得到如下图的一个相较完善的AI翻译功能了,不仅能够识别用户输入的语言,还能提供准确的中文翻译。这样,无论用户来自哪个国家,使用哪种语言,我们的应用都能轻松应对,并给出清晰的反馈。这样一来,我们的多语言识别与翻译系统就变得更加完善了。

通过上述步骤,我们成功搭建了一个简单的多语言识别及翻译系统。这只是一个起点,你可以在此基础上添加更多功能,比如支持更多的语言、优化提示词以提高翻译质量,甚至是集成到更复杂的应用场景中去。

结语

希望这个例子能激发你对AI技术和Prompt Engineering的兴趣,并鼓励你探索更多有趣的应用场景。谁知道呢?也许下一个改变世界的创新就出自你的手!

相关推荐
海的诗篇_1 分钟前
前端开发面试题总结-vue2框架篇(二)
前端·javascript·css·vue.js·前端框架·vue
Pu_Nine_92 分钟前
Vue 组合式 API 与 选项式 API 全面对比教程
前端·javascript·vue.js
古茗前端团队12 分钟前
让我带实习生,真的假的?
前端
我不吃饼干16 分钟前
倒反天罡,CSS 中竟然可以写 JavaScript
前端·javascript·css
扉间7981 小时前
Transformer 核心概念转化为夏日生活类比
人工智能·transformer
10年前端老司机2 小时前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~2 小时前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客3 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2453 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
要努力啊啊啊4 小时前
YOLOv1 技术详解:正负样本划分与置信度设计
人工智能·深度学习·yolo·计算机视觉·目标跟踪