开篇
首先,我们来认识一下本期的主角:AIGC (Artificial Intelligence Generative Content),即人工智能生成内容。相信许多小伙伴日常都会使用 AI大模型 来解决一些工作和学习上的问题,废话不多说,上图:
如图,上面我使用了 通义千问 绘画了一张精美的3D图像,而获取这张图片的的代价仅仅是输入一段详细的 提示词 (Prompt) 。当然,这只是其中一种玩法,目前的AI大模型已经能够胜任许多任务,写文案、做题、写代码等都不在话下。在AI大模型更新迭代的过程中,提示词工程 (Prompt Engineering) 也逐渐成为用户提升AI大模型在处理复杂任务场景下的重要帮手。基于AIGC(人工智能生成内容),我们是否能够利用AI大模型为我们的实际开发降本增效呢?这也是本期内容的核心。
案例引入
本期内容的灵感来源于 爬虫(crawler) ,以爬取 某瓣 的电影列表为例。(注:本文涉及的爬虫功能仅用于案例分析,无任何其他用途)
首先让我们来梳理一下传统的网络爬虫实现步骤:
1.导入 x-crawl 爬虫资源包
js
import { createCrawl } from 'x-crawl'
- 准备一个爬虫应用:crawlApp
js
const crawlApp = createCrawl()
- 利用crawlApp向目标网站发送http请求
js
crawlApp.crawlPage('https://movie.douban.com/chart').then(res=>....)
- 接收响应的html字符串
js
const { page, browser } = res.data
- 利用正则表达式过滤出需要的属性写入JSON数组对象
js
// 等待元素出现在页面中
await page.waitForSelector('#wrapper #content .article')
const filmHandleList = await page.$$('#wrapper #content .article table')
const pendingTask = []
for (const filmHandle of filmHandleList) {
// 封面链接(picture)
const picturePending = filmHandle.$eval('td img', (img) => img.src)
// console.log(picturePending, '////')
// 电影名(name)
const namePending = filmHandle.$eval(
'td:nth-child(2) a',
(el) => el.innerText.split(' / ')[0]
)
// 简介(info)
const infoPending = filmHandle.$eval(
'td:nth-child(2) .pl',
(el) => el.textContent
)
// 评分(score)
const scorePending = filmHandle.$eval(
'td:nth-child(2) .star .rating_nums',
(el) => el.textContent
)
// 评论人数(commentsNumber)
const commentsNumberPending = filmHandle.$eval(
'td:nth-child(2) .star .pl',
(el) => el.textContent?.replace(/\(|\)/g, '')
)
pendingTask.push([
namePending,
picturePending,
infoPending,
// scorePending,
commentsNumberPending
])
}
- 返回结果
js
const filmInfoResult = []
let i = 0
for (const item of pendingTask) {
Promise.all(item).then((res) => {
// filmInfo 是一个电影信息对象,顺序在前面就决定好了
const filmInfo = [
'name',
'picture',
'info',
// 'score',
'commentsNumber'
].reduce((pre, key, i) => {
pre[key] = res[i]
return pre
}, {})
// 保存每个电影信息
filmInfoResult.push(filmInfo)
// 最后一次的处理
if (pendingTask.length === ++i) {
browser.close()
// 整理,根据数量决定是多还是单
const filmResult = {
element: filmInfoResult,
type: filmInfoResult.length > 1 ? 'multiple' : 'single'
}
console.log(filmResult)
}
结果如下:
js
{
element: [
{
name: '破墓',
picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2905896429.webp',
info: '2024-02-16(柏林电影节) / 2024-02-22(韩国) / 崔岷植 / 金高银 / 柳海真 / 李到晛 / 全镇基 / 洪瑞俊 / 李大卫 / 小山力也 / 金智安 / 金善映 / 韩国 / 张在现 / 134分钟 / 破墓 / 悬疑 / 惊悚 / 恐怖 / 张宰贤 Jae-hyun Jang / 韩语 / 日语 / 英语',
commentsNumber: '105652人评价'
},
{
name: '对你的想象',
picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2905327559.webp',
info: '2024-03-16(西南偏南电影节) / 2024-05-02(美国网络) / 安妮·海瑟薇 / 尼古拉斯·加利齐纳 / 艾拉·鲁宾 / 安妮·玛莫罗 / 瑞德·斯科特 / 帕芮·马费尔德 / 乔丹·亚伦·霍尔 / 玛蒂尔达·吉安诺普洛斯 / Meg Millidge / 奇克·曼诺哈 / Ray Cham / Jaiden...',
commentsNumber: '17295人评价'
}...
//内容过多不详细展示
],
type: 'multiple'
}
传统的编程式实现爬虫获取电影列表过程大致是这样,在这个过程中,每一个步骤、每一行代码都需要正确,才能得出正确结果。特别地 ,本地运行环境也是决定能否得到结果的因素。如此可见,传统的编程方式在实际开发场景中有许多不便,那么这时我们完全可以使用 AIGC 来减少我们的编码工作。
同样使用通义千问,我们在对话框中输入正确的提示词:
(这是 一部电影的Html片段,获取需要的电影名{name},封面链接{pictrue},简介{info},评分{score},评论人数{commentsNumber},请使用括号的单词作为属性名,以* JSON对象的格式返回*)
爬取一部电影的数据结果同样正确,这时如果需要爬取电影列表我们仅仅需要复制对应html,并修改提示词为:
(这是一些 电影的Html片段,获取需要的电影名{name},封面链接{pictrue},简介{info},评分{score},评论人数{commentsNumber},请使用括号的单词作为属性名,以JSON数组对象的格式返回)
结果如下:
看到这,大家应该能够体会到 AIGC 在实际开发中的降本增效,使用 AIGC 我只用了几分钟就完成了工作,不需要调试代码,不受制于本地运行环境!!!
这算是一个简单的 提示词工程(Prompt Engineering) 案例,本质上还是涉及到许多实际操作。
拓展
其实,还有更加灵活的做法。目前,AI大模型官方提供了相应的API 供开发人员调用,同样的工作我们可以调用API来输入Prompt ,从而间接获取正确结果。 (注:爬虫的功能无法直接通过API调用来实现,因为API通常用于数据交换和处理逻辑,而不是执行浏览器自动化任务)
总结
使用过AIGC后,我们可以体会到AIGC 确实香,但我们也应该意识到:涉及到AIGC的开发并不是让我们完全放弃coding,而是使用coding+prompt的方式来开发项目,这才是提示词工程的核心意义 。对于实际项目来说,通过调用AI大模型的API进行开发,能够拥有一个更加规范、动态的开发环境,真正为我们的实际项目开发降本增效。
AIGC时代就在眼前,让我们拥抱AI,拓宽我们的编程思维,不再做传统意义上的码农。