使用 OpenAI API 生成 JavaScript 代码的开发方式
在现代软件开发中，自动化代码生成工具变得越来越重要。本文将介绍一种基于 OpenAI API 的开发方式，通过描述需求自动生成 JavaScript 代码。这种方式不仅提高了开发效率，还减少了手动编写代码的错误率。
1. 概述
本文展示的开发方式利用 OpenAI 的 API 来生成 JavaScript 代码。通过向 API 提供代码生成的需求描述，API 会返回符合要求的 JavaScript 代码片段。这种方式特别适合快速生成单一功能的代码，尤其是在需要频繁生成类似代码的场景中。
2. 代码结构
2.1 OpenAI API 初始化
首先，我们需要初始化 OpenAI API 客户端，并指定使用的模型和 API 密钥。
javascript 代码解读复制代码import OpenAI from "openai";
const model = "claude-3-5-sonnet-20240620";
const openai = new OpenAI({
baseURL: 'https://xxx/v1',
apiKey: 'xxx'
});
2.2 代码生成函数
接下来，我们定义一个 jsFunctionGenerate 函数，该函数接收一个代码生成的需求描述，并返回生成的 JavaScript 代码。
javascript 代码解读复制代码async function jsFunctionGenerate(functionDescription) {
try {
const completion = await openai.chat.completions.create({
messages: [
{
role: "system",
content: `
1. 你是一个代码生成器，负责根据用户需求生成单一的 JavaScript 代码。
2. 生成的代码格式为：function fnName(...) { return ... }。
3. 所有函数的参数都会由调用的时候传入，不需要多余的判断，
4. 输出仅包含纯 JavaScript 代码.
5. 仅返回文本代码，无需任何特殊格式或说明解释，不需要md格式！这一条是强制要求！。
`
},
{
role: "user",
content: functionDescription
}
],
model: model,
stream: true,
temperature: 0.2
});
console.log("Completion request initiated...");
const stream = completion.toReadableStream();
let generatedCode = "";
for await (const chunk of stream) {
let decode = new TextDecoder("utf-8").decode(chunk);
const completion = JSON.parse(decode);
const content = completion.choices[0].delta.content;
if (content) {
generatedCode += content;
}
}
return generatedCode;
} catch (error) {
console.error("Error generating code:", error);
throw error;
}
}
2.3 生成中文名称函数
我们可以使用 jsFunctionGenerate 函数来生成一个生成中文名称的函数。
javascript 代码解读复制代码const generateChineseName = await jsFunctionGenerate(`
创建一个js方法，生成百家姓开头的中文名称(包括复姓)，名称长度在2-4位长度（长度为4的只能是复姓开头），函数内部可以提供两个数组，
firstName数组存储百家姓。lastName数组存储100个常用的中文汉字且不重复,
要求函数能够控制生成名称长度的频率，名称长度为2和3的频率分别为0.3， 四位长度的为0.01。
输出只是一个名称字符串即可。
这是函数输入(firstNameList, lastNameList)
`).then(code => {
console.log(code);
return eval(`(${code})`);
});
2.4 生成百家姓和常用汉字数组
同样地，我们可以生成包含百家姓和常用汉字的数组。
javascript 代码解读复制代码const firstNameList = await jsFunctionGenerate(`
1. 生成一个 JavaScript 数组，包含不超过 100 个常见的百家姓（包括单姓和复姓）。
2. 数组必须严格控制在 100 个以内，例如：['赵', '钱', '孙', '李', '欧阳', '诸葛', ...]。
3. 仅返回数组，无需任何说明或解释。
`).then(code => {
console.log(code);
return eval(`(${code})`);
});
const lastNameList = await jsFunctionGenerate(`
1. 生成一个包含常用汉字的 JavaScript 数组。
2. 数组长度严格为 100 个，不包含生僻字。
3. 仅返回数组内容，例如：['安', '柏', '博', '才', '德', '栋', ...]，确保字数不超过 100
4. 仅返回数组，无需任何说明或解释。
`).then(code => {
console.log(code);
return eval(`(${code})`);
});
2.5 测试生成的函数
最后，我们可以测试生成的 generateChineseName 函数，生成 100 个中文名称。
javascript 代码解读复制代码for (let i = 0; i < 100; i++) {
const name = generateChineseName(firstNameList(), lastNameList());
console.log(name);
}
2.6 运行结果
javascript 代码解读复制代码Completion request initiated...
function generateChineseName(firstNameList, lastNameList) {
const lengthProbabilities = [0.3, 0.3, 0.4];
const nameLength = Math.random() < 0.01 ? 4 : (Math.random() < 0.3 ? 2 : 3);
let name = '';
if (nameLength === 4) {
const surname = firstNameList[Math.floor(Math.random() * firstNameList.length)];
name += surname;
for (let i = 0; i < 2; i++) {
name += lastNameList[Math.floor(Math.random() * lastNameList.length)];
}
} else {
const surname = firstNameList[Math.floor(Math.random() * firstNameList.length)];
name += surname;
for (let i = 0; i < nameLength - 1; i++) {
name += lastNameList[Math.floor(Math.random() * lastNameList.length)];
}
}
return name;
}
Completion request initiated...
function getCommonSurnames() {
return ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严',
'华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方',
'俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮',
'卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏',
'成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危', '江', '童', '颜',
'郭', '梅', '盛', '林', '刁', '钟', '徐', '邱', '骆', '高', '夏', '蔡', '田', '樊', '胡', '凌', '霍', '虞', '万', '支', '柯', '昝', '管', '卢', '莫', '经', '房', '裘', '缪',
'干', '解', '应', '宗', '丁', '宣', '贲', '邓', '郁', '单', '杭', '洪', '包', '诸', '左', '石', '崔', '吉', '钮', '龚', '程', '嵇', '邢', '滑', '裴', '陆', '荣', '翁', '荀',
'羊', '於', '惠', '甄', '曲', '家', '封', '芮', '羿', '储', '靳', '汲', '邴', '糜', '松', '井', '段', '富', '巫', '乌', '焦', '巴', '弓', '牧', '隗', '山', '谷', '车', '侯',
'宓', '蓬', '全', '郗', '班', '仰', '秋', '仲', '伊', '宫', '宁', '仇', '栾', '暴', '甘', '钭', '厉', '戎', '祖', '武', '符', '刘', '景', '詹', '束', '龙', '叶', '幸', '司',
'韶', '郜', '黎', '蓟', '薄', '印', '宿', '白', '怀', '蒲', '邰', '从', '鄂', '索', '咸', '籍', '赖', '卓', '蔺', '屠', '蒙', '池', '乔', '阴', '欎', '胥', '能', '苍', '双',
'闻', '莘', '党', '翟', '谭', '贡', '劳', '逄', '姬', '申', '扶', '堵', '冉', '宰', '郦', '雍', '舄', '璩', '桑', '桂', '濮', '牛', '寿', '通', '边', '扈', '燕', '冀', '郏',
'浦', '尚', '农', '温', '别', '庄', '晏', '柴', '瞿', '阎', '充', '慕', '连', '茹', '习', '宦', '艾', '鱼', '容', '向', '古', '易', '慎', '戈', '廖', '庾', '终', '暨', '居',
'衡', '步', '都', '耿', '满', '弘', '匡', '国', '文', '寇', '广', '禄', '阙', '东', '殴', '殳', '沃', '利', '蔚', '越', '夔', '隆', '师', '巩', '厍', '聂', '晁', '勾', '敖',
'融', '冷', '訾', '辛', '阚', '那', '简', '饶', '空', '曾', '毋', '沙', '乜', '养', '鞠', '须', '丰', '巢', '关', '蒯', '相', '查', '後', '荆', '红', '游', '竺', '权', '逯',
'盖', '益', '桓', '公', '仉', '督', '晋', '楚', '闫', '法', '汝', '鄢', '涂', '钦', '段干', '百里', '东郭', '南门', '呼延', '归', '海', '羊舌', '微生', '岳', '帅', '缑', '亢', '况', '后', '有', '琴', '商', '牟', '佘', '佴', '伯', '赏', '南宫', '墨', '哈', '谯', '笪', '年', '爱', '阳', '佟', '第五', '言', '福'];
}
Completion request initiated...
function generateCommonChineseCharacters() {
return ['安', '柏', '博', '才', '德', '栋', '福', '刚', '海', '杰', '俊', '凯', '良', '明', '宁', '鹏', '强', '荣', '山', '涛', '伟', '祥', '雄', '阳', '勇', '志', '忠',
'成', '东', '峰', '光', '国', '华', '辉', '建', '军', '林', '民', '明', '南', '平', '庆', '瑞', '生', '世', '顺', '天', '文', '武', '旭', '学', '亚', '义', '永', '友', '宇',
'远', '泽', '振', '正', '志', '中', '子', '宗', '祖', '宝', '保', '昌', '超', '晨', '诚', '达', '丹', '德', '迪', '定', '东', '恩', '发', '凡', '飞', '丰', '风', '锋', '福',
'富', '刚', '高', '格', '根', '庚', '光', '贵', '海', '汉', '浩', '和', '恒', '宏', '洪', '鸿', '华', '怀', '辉', '会', '惠', '吉', '纪', '继', '家', '嘉', '坚', '建', '剑',
'江', '杰', '金', '锦', '进', '景', '敬', '靖', '静', '久', '军', '君', '俊', '骏', '凯', '康', '科', '克', '坤', '兰', '朗', '乐', '磊', '力', '立', '利', '连', '良', '林',
'霖', '凌', '龙', '隆', '路', '伦', '罗', '迈', '茂', '美', '梦', '米', '敏', '明', '铭', '木', '牧', '慕', '乃', '南', '能', '宁', '诺', '欧', '朋', '鹏', '平', '齐', '启',
'谦', '乾', '强', '乔', '钦', '青', '清', '庆', '秋', '权', '全', '群', '然', '仁', '荣', '瑞', '润', '若', '森', '山', '善', '尚', '绍', '深', '升', '圣', '盛', '诗', '石',
'时', '实', '士', '世', '守', '寿', '书', '舒', '顺', '思', '松', '泰', '涛', '腾', '天', '庭', '亭', '通', '同', '桐', '童', '图', '拓', '万', '威', '维', '伟', '卫', '文',
'武', '熙', '希', '曦', '喜', '先', '贤', '显', '宪', '祥', '翔', '向', '潇', '晓', '孝', '心', '信', '星', '兴', '雄', '修', '旭', '轩', '学', '雪', '勋', '雅', '延', '岩',
'炎', '彦', '焱', '阳', '洋', '尧', '业', '叶', '一', '伊', '依', '仪', '宜', '义', '毅', '易', '益', '逸', '毅', '银', '英', '永', '勇', '友', '宇', '雨', '玉', '育', '昱',
'渊', '元', '远', '岳', '云', '泽', '展', '章', '长', '昭', '兆', '哲', '真', '振', '正', '政', '志', '中', '忠', '钟', '仲', '众', '重', '舟', '洲', '竹', '子', '宗', '祖', '尊', '左', '作', '祚'];
}
归实涛
司乃
左银善
通欧思
伊友
詹惠渊
支仪刚
习森竹
广罗剑
戴逸
范平展
欎伟立
阚英亚
步心
况长庭
和松哲
路和乃
濮远
利兴
蔚文友
沃俊
翁良保
边连
归善
於林熙
窦银恒
滑恩
佴富亭
亢喜尧
钱骏丰
韩怀桐
简风朋
水众嘉
狄义全
党升荣
佘宗森
吴久
嵇叶永
水子
元威乔
边竹昱
南门桐
叶山和
舄森
魏齐启
毋瑞
墨尧宇
郎俊
郑牧
桓建勇
龙罗鹏
南宫迈力
韩先叶
籍怀
秋诗刚
杭拓
杨顺
毋静洋
芮童刚
况诗木
索志杰
苏宇
严刚焱
庄通建
祝盛乐
焦童欧
蒯坤鹏
琴刚兴
商显辉
赖钦
景祚荣
连光光
伊玉
奚国涛
那中宇
储恩连
林晓延
吕岩展
王仲
逄然钟
诸飞
宁东秋
百里伦兆
於振
家岩寿
殷兆宁
黎霖
屈江远
姚钦阳
蒙民心
霍先宁
祖元
韦兰时
都亭中
狄乾
富青发
须格昭
廖祥东
卓才隆
鞠展
3. 总结
通过使用 OpenAI API 生成 JavaScript 代码，我们可以显著提高开发效率，尤其是在需要频繁生成单一功能代码的场景中。这种方式不仅减少了手动编写代码的工作量，还降低了代码错误的风险。希望本文能为你提供一种新的开发思路，帮助你在项目中更高效地生成代码。
评论记录：
回复评论：