通过laf引入Claude后才发现一切都这么简单

前言

当前风口浪尖的AI话题热度一直高居不下，不同的人工智能也层出不穷。而API调用的也就ChatGPT支持较好。但是当在slack里发现了claude这一神奇AI后，也曾想过看看支不支持API调用引入网站，可惜也是没有开放。直到我遇见了laf，everything changed！

什么是laf

第一次遇见laf是机缘巧合下看到一篇关于网站引入ChatGPT的文章：好像是叫《三分钟接入ChatGPT》。根据教程一步步引入后发现，laf真是太强大了,必须安利一波!

life is shot , u need laf

laf 是一个集函数、数据库、存储为一体的云开发平台，随时随地发布上线。故而言之，前端 + laf = 全栈。不论是写接口还是链接数据库还是打包发布网站，laf都倡导：3分钟解决一切！社区和群都相当活跃，有专人解答各种问题，甚至专门训练了laf机器人AI回答相关问题予以示例！
具体了解可查看以下文章：
https://forum.laf.run/t/3min

什么是Claude

claude，由Anthropic开发的AI助手！采用最先进的人工智能算法与技术,包括深度学习、自然语言处理、知识表示与推理等。Claude拥有超大规模的知识库,涵盖常识、专业知识与开放域知识。她可以从互联网中实时抓取信息,不断学习与更新自己的知识结构,实现知识的动态增量。Claude同时具备强大的自然语言推理与生成能力,能够分析用户输入,理解用户意图,并据此进行智能回复。当然目前仅仅能在slack中引入应用体验，但是laf找到了调用的适配方法去实现自己网站/公众号使用。

如何用laf将claude引入自己网站

官方教程已发布，真滴细（有手就行），我就不赘述了：https://forum.laf.run/d/648

关键点分享

流式调用（教程有源码）的返回处理方案：

因为以数据流方式返回时他会把上一次返回内容也带上，导致不能直接渲染进页面。

最后也是与laf交流群中一位大佬交流给出了思路解决拿到了方案：

其实就是每次拿到一整句话后，将这段字符串trim()一下，再记录长度作为初始下标。拿到下一段话的时候直接把拿到的字符串用substring(初始下标)方法处理就可以直接取到当前完整的一句话去渲染进页面了。如果想优化一个字一个字往处走的话其实一样，可以以计算文字长度作为结束条件设置定时器。最后上一下大佬代码作为参考。

          axios({method: 'post',url: 'url',data: postData,responseType: "stream",onDownloadProgress: ({ event }) => {const { responseText } = event.targetconst lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)let chunk = responseTextif (lastIndex !== -1) {chunk = responseText.substring(lastIndex)}try {const data = JSON.parse(chunk)this.messages[this.messages.length - 1].conversationId = data.conversationIdconst text = data.text.trim()let timer = setInterval(() => {this.messages[this.messages.length - 1].content = text.substring(0,i)i++if(this.messages[this.messages.length - 1].content.length == text.length){clearInterval(timer)}}, 100)} catch (error) {this.messages[this.messages.length - 1].content = '出错了❎'} finally {}},}).then(res => {}).catch(err => {console.log('[ err ] >', err)this.messages[this.messages.length - 1].content = '出错了❎'}).finally(() => {console.log('finally');this.loading = false})