超越代码:LLM与AIGC的融合未来

引言

在当今快速发展的技术世界中,大型语言模型(LLM)和人工智能生成内容(AIGC)正在引领一场编程革命。传统的编程方法,虽然功能强大,但往往需要大量的时间和精力来编写和维护代码。然而,随着LLM的出现,这一切都有了翻天覆地的变化。

AIGC简述

人工智能生成内容(AIGC)是指使用人工智能技术,特别是大型语言模型(LLM),来自动生成或协助生成各种内容的过程。这包括但不限于文本、图像、音乐和视频。AIGC的核心在于其能够理解和处理自然语言,使其能够接收简单的指令并产生复杂的输出。AIGC与LLM的结合为内容创作带来了新的可能性。LLM的强大语言理解能力使得它能够准确地把握用户的意图,并生成符合要求的内容。这种结合不仅提高了内容质量,还扩展了创作的边界。

传统编程

以编写爬虫来爬取豆瓣电影排行榜为例,使用x-crawl库来创建爬虫应用,并通过crawlPage函数来爬取豆瓣电影的排行榜数据。完成等待页面元素加载、选择特定的DOM元素、提取数据以及处理异步任务。

// 复制代码
import { createCrawl } from 'x-crawl' // 创建爬虫

// 创建爬虫应用
const crawlApp = createCrawl() // 

// crawlPage 用于爬取页面
crawlApp.crawlPage('https://movie.douban.com/chart').then(async (res) => {
    
  const { page, browser } = res.data
  
  // 等待元素出现在页面中
  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
    ])
  }

  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)
      }
    })
  }
})

运行爬虫后可获取如下

{ 复制代码
  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: '106773人评价'
    },
    {
      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: '18034人评价'
    },
    {
      name: '哥斯拉-1.0',
      picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900227040.webp',
      info: '2023-11-01(东京国际电影节) / 2023-11-03(日本) / 神木隆之介 / 滨边美波 / 山田裕贵 / 青木崇高 / 吉冈秀隆 / 安藤樱 / 佐佐木藏之介 / 西垣匠 / 中村织央 / 谷口翔太 / 须田邦裕 / 水桥研二 / 阿南健治 / 饭田基祐 / 远藤雄弥 / 田中美央 /  桥爪功...',
      commentsNumber: '22921人评价'
    },
    {
      name: '彷徨之刃',
      picture: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2907398842.webp',
      info: '2024-05-17(中国大陆) / 王千源 / 王景春 / 齐溪 / 张宥浩 / 王天辰 / 周政杰 / 阿如那 / 吴双 / 中国大陆 / 陈卓 / 2024-05-03 16:17 / 107分钟 / 剧情 / 犯罪 / 悬疑 / 杨薇薇 Weiwei Yang / 李佳颖 Carol Li / 徐翔云 Xiangyun Xu / 陈卓 Zhuo Chen / 汉语普通话...',
      commentsNumber: '尚未上映'
    },
    {
      name: '银河写手',
      picture: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2905680871.webp',
      info: '2023-07-24(FIRST青年电影展) / 2024-03-30(中国大陆) / 宋木子 / 合文俊 / 李飞 / 李文茹 / 宋晓亮 / 张皓森 / 刘默然 / 祁又一 / 魏来 / 白志强 / 李阔 / 单丹丹 /  尹思淇 /  沈腾 / 中国大陆 / 李阔 / 单丹丹 / 103分钟 / 106分钟(影展版) / 剧情 / 喜剧...',
      commentsNumber: '34868人评价'
    },
    {
      name: '老狐狸',
      picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900908599.webp',
      info: '2023-10-27(东京国际电影节) / 2023-11-24(中国台湾) / 白润音 / 刘冠廷 / 陈慕义 / 刘奕儿 / 门胁麦 / 黄健玮 /  温升豪 / 班铁翔 / 杨丽音 / 傅孟柏 / 高英轩 / 庄益增 / 张再 兴 / 许博维 / 管罄 / 钟瑶 / 游珈瑄 / 郑旸恩 / 戴雅芝 / 姜仁 / 萧鸿文...',
      commentsNumber: '49335人评价'
    },
    {
      name: '魔鬼深夜秀',
      picture: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2905556722.webp',
      info: '2023-06-11(澳大利亚) / 2024-04-19(美国网络) / 大卫·达斯马齐连 / 劳拉·戈登 / 伊恩·布利斯 / 费萨尔·巴齐 / 英 格丽·托蕾莉 / 里斯·奥特里 / 乔治娜·海格 / 乔什·邝·塔特 / 斯蒂夫·莫察基斯 / 宝拉·阿伦德尔 /  塔马拉·谢尔顿 / 克里斯托弗· 卡比...',
      commentsNumber: '19246人评价'
    },
    {
      name: '完美的日子',
      picture: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2898894527.webp',
      info: '2023-05-25(戛纳电影节) / 2023-12-21(德国) / 2023-12-22(日本) / 役所广司 / 柄本时生 / 中野有纱 / 山田葵  /  麻生祐未 / 石川小百合 / 三浦友和 / 田中泯 / 大下浩人 / 犬山犬子 / 牧口元美 / 长井短 / 研直子 / 茂吕师冈 / 县森鱼 / 片桐 入 / 芹泽兴人...',
      commentsNumber: '41780人评价'
    },
    {
      name: '机器人之梦',
      picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2899644068.webp',
      info: '2023-05-20(戛纳电影节) / 2023-12-06(西班牙) / 2024(中国大陆) / 伊万·拉班达 / 阿尔伯特·特里佛·塞加拉 / 拉法·卡尔沃 / 何塞·加西亚·托斯 / 何塞·路易斯·梅地亚维拉 / 加西埃拉·莫利娜 / 埃斯特·索兰斯 / 西班牙 / 法国 / 巴勃罗·贝格尔...',
      commentsNumber: '76232人评价'
    },
    {
      name: '血爱成河',
      picture: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2902183869.webp',
      info: '2024-01-20(圣丹斯电影节) / 2024-03-08(美国) / 克里斯汀·斯图尔特 / 凯蒂·M·奥布莱恩 / 艾德·哈里斯 / 戴夫·弗兰科 / 吉娜·马隆 / 安娜·巴瑞辛尼科夫 / 基思·雅各 / 伊薇特·法 齐奥-德莱尼 / 戴维·德劳 / 凯莱布·贝克 / 米坎德鲁 / 莉莉·哈里斯...',
      commentsNumber: '6418人评价'
    }
  ],
  type: 'multiple'
}

小结

传统编程需要开发者具备扎实的编程素养,包括理解HTTP协议、处理可能出现的错误代码(如408请求超时)、编写和调试代码。这个过程虽然能够锻炼开发者的逻辑思维,但也不可避免地带来了时间和精力上的消耗。

LLM编程

现在,我们可以利用LLM来简化这一过程。LLM能够理解开发者的需求,并生成相应的代码。以通义千问为例,我们向通义千问发送电影相关的网页源代码。

复制代码
        <tbody><tr class="item">
            <td width="100" valign="top">
                

                    <a class="nbg" href="https://movie.douban.com/subject/35490167/" title="破墓">
                        <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2905896429.webp" width="75" alt="破墓" class="">
                    </a>
            </td>

            <td valign="top">
                

                <div class="pl2">

                    <a href="https://movie.douban.com/subject/35490167/" class="">
                        破墓
                        / <span style="font-size:13px;">The Unearthed Grave / Exhuma</span>
                    </a>



                    <p class="pl">2024-02-16(柏林电影节) / 2024-02-22(韩国) / 崔岷植 / 金高银 / 柳海真 / 李到晛 / 全镇基 / 洪瑞俊 / 李大卫 / 小山力也 / 金智安 / 金善映 / 韩国 / 张在现 / 134分钟 / 破墓 / 悬疑 / 惊悚 / 恐怖 / 张宰贤 Jae-hyun Jang / 韩语 / 日语 / 英语</p>

                    


                        
                        <div class="star clearfix">
                                <span class="allstar35"></span>
                                <span class="rating_nums">6.7</span>
                                <span class="pl">(106772人评价)</span>

                        </div>


                </div>

            </td>
        </tr>
    </tbody></table>

并向LLM提供Prompt 这是一部电影的html片段,获取需要的电影的名字(name),封面链接(picture),简介(desc),评分(score),评论人数(conmentsNumber),请使用括号的单纯作属性名,以JSON对象的格式返回

LLM则能够自动生成JSON数组,包含电影的名称、图片、描述和评分等信息。这种方法不仅提高了效率,而且还降低了出错的可能性。

小结

LLM的优势在于其对自然语言的理解能力和生成式任务的执行能力。它可以处理文字、图片、视频等多种形式的内容,使得编程变得更加直观和灵活。此外,LLM还能够与各种API进行集成,进一步扩展其功能。本文使用x-crawl工具, 具体使用说明可以查阅官方文档。如果想尝试使用最先进的大模型GPT4,可以参考该文章升级GPT4

总结

这篇文章尝试捕捉从传统编程到AI思维的转变,并展望了LLM在未来编程中的作用。未来的编程将是编程技能与AIGC素养的结合。开发者需要学会如何编写有效的Prompt,这就像是给LLM下达指令,让它成为一个编程助手。这种全栈的能力,将使得开发者能够更快地实现想法,并创造出更加丰富和多样的数字产品。随着LLM技术的不断进步,我们正迎来一个编程与AI思维相结合的新时代。在这个时代中,LLM不仅仅是一个工具,更是一个合作伙伴,它将帮助开发者释放创造力,推动数字世界的发展。

相关推荐
前端李易安4 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
Ztiddler14 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山15 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
老攀呀17 小时前
安装多个nodejs版本(nvm)
node.js
佚名程序员17 小时前
【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用
安全·node.js
zxg_神说要有光1 天前
快速入门 AI:调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员1 天前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js
赵闪闪1681 天前
Node.js 安装与开发环境配置全指南
node.js
前端与小赵1 天前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You1 天前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js