有AI，出海写代码不是梦

PW
125 阅读4分钟

随着AI的日益强大，我们学习有了更好的途径、发展有了更多的可能。通过利用好AI，相信不久的将来我们都能在国际舞台上大展拳脚。

AI作为编码助手

  • 提高效率：现代AI辅助编程工具能够自动完成代码片段、预测下一步操作、甚至生成整个函数。这大大减少了重复劳动，让开发者可以将更多精力集中在创意性和策略性的工作上。
  • 减少错误：通过分析大量已存在的代码库，AI系统能够识别潜在的bug模式，并提醒开发者注意这些问题点。此外，在代码审查过程中使用AI也可以帮助发现人类可能忽略的安全漏洞。
  • 学习新技能：对于想要进入海外市场但又担心语言障碍或者对当地编程习惯不熟悉的开发者来说，基于AI的学习平台可以根据个人需求定制课程内容，加速掌握所需知识的过程。

AI能打破地域限制

  • 在全球化日益加深的今天，远程工作已成为常态。借助于云服务和协作工具的支持，加上AI提供的强大功能，即便是身处不同国家的团队成员也能高效地协同作业。
  • 对于初创企业而言，利用AI技术可以更轻松地构建跨文化用户界面和服务，从而更好地服务于多元化的客户群体。
  • 通过社交媒体分析等手段，AI还能帮助企业了解目标市场的最新趋势及消费者偏好，指导产品设计与营销策略制定。

从零开始，一个例子带你看看前端怎么“出海”

情景是这样的，假设你的工作需要接收来着世界各地的用户发送的信息，想必你是很难理解所有语言的，这个时候我们就可以借助AI来把这些信息翻译过来。

1.准备工作

npm init -y

新建好项目文件夹并初始化，并在package.json中添加依赖

  "dependencies": {
    "dotenv": "^16.4.5",
    "openai": "^4.73.1"
  }

安装依赖和openai包

npm i
npm i openai

新建好.env文件并把key和代理地址写好

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxx
OPENAI_BASE_URL=

2.完成需求

dotenv.config()
 
const client = new OpenAI({
  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 () => {
  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",                            
    "我的屏幕在闪烁"                    
  ]
  // for of es6 的遍历 
  // 比计数循环更简洁易读 
  for(let issue of user_messages) {
    // 简洁， 代码可读性的提升 
    console.log(issue);
    const prompt = `
    Tell me what language this is : "${issue}"
  `
    const countryLanguage = await getCompletion(prompt)
    // console.log(response)
    const resultPrompt = `
      帮我翻译以下的文字到中文, "${issue}"
    `
    const result = await getCompletion(resultPrompt)
    console.log(`${countryLanguage}, 翻译结果是: ${result}`)
  }
  // console.log(issue);

}

main()

  1. 引入依赖：

    • OpenAI：用于与OpenAI的服务进行交互。
    • dotenv：从.env文件中加载环境变量。

  2. 配置环境变量：

    • 通过dotenv.config()加载.env文件中的环境变量，特别是OPENAI_API_KEY和OPENAI_BASE_URL。

  3. 创建OpenAI客户端实例：

    • 使用提供的API密钥和基础URL初始化OpenAI客户端。

  4. 定义getCompletion函数：

    • 这是一个异步函数，接受一个提示（prompt）和模型名称作为参数，默认模型为gpt-3.5-turbo。
    • 函数构造了一个包含用户消息的消息对象数组。
    • 调用OpenAI的聊天完成接口，传入模型名、消息列表以及温度参数（控制输出的随机性）。
    • 返回生成响应的第一条消息内容。

  5. 定义main函数：

    • 定义了一个用户消息数组user_messages，包含了不同语言的问题。
    • 使用for...of循环遍历每个问题。
    • 对于每一个问题，首先调用getCompletion函数来确定语言种类。
    • 然后再次调用getCompletion函数以请求该问题被翻译成中文。
    • 打印出语言种类及对应的中文翻译结果。

3.运行结果及小结

d969f87117cc4842edc1e927dc429a6.png
  • 代码中运用了ES6的一些新特性，如默认参数值、箭头函数、for...of循环等，使得代码更加简洁易读。
  • 使用async/await语法处理异步操作，让代码看起来更像同步流程，易于理解和维护。
  • dotenv 是一个轻量级的 Node.js 模块，它允许你从 .env 文件中加载环境变量到 process.env 对象。 通过.env文件管理敏感信息（如API密钥），能提高安全性。

希望这篇文章能引发你的思考。

微信图片_20241201175023.jpg

点个赞再走吧~

avatar
文章
阅读
粉丝