讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解

这篇具有很好参考价值的文章主要介绍了讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解,AI_development,javascript,开发语言,ecmascript

 阿丹:

        之前调用写过调用百度的文心一言写网站,讯飞的星火认知模型开放了,这次尝试一下使用流式来进行用户的交互。

官网:

平台简介 | 讯飞开放平台文档中心

星火认知大模型Web文档 | 讯飞开放平台文档中心

简介:

        本文章主要开发的是一个web应用。

值得一提的是官网很贴心的给了代码!!!

讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解,AI_development,javascript,开发语言,ecmascript

 我这里展示的js的小demo

阅读解析一下demo代码--js

讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解,AI_development,javascript,开发语言,ecmascript

解析了一下代码结构:
主要的核心代码是在index.html为简单的页面。

index.js中封装了方法,惊喜的发现前台使用的流式相应是使用的websocket协议。

解读分析一下代码:

index.html

<!--
 * @Autor: lycheng
 * @Date: 2020-01-13 16:12:22
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品体验-大模型</title>
</head>
<body>
<div>
    <div>
        <h2>产品体验-大模型</h2>
        <div class="page-main">
            <div>
                <textarea id="input_text" placeholder="请输入您要问大模型的问题" style="width: 600px">秦始皇的儿子是谁?</textarea>
            </div>
            <div>
                <button class="audio-ctrl-btn">立即提问</button>
            </div>
            <br>
            <div>
                <textarea id="output_text" style="width: 800px;height: 500px"></textarea>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 其实这个主页没有太多解释的地方。

我们来看一下封装的方法--index.js

我们将后台代码分模块进行研究

构造与后台建立websocket连接的url

function getWebsocketUrl() {
    return new Promise((resolve, reject) => {
        var apiKey = API_KEY
        var apiSecret = API_SECRET
        var url = 'wss://spark-api.xf-yun.com/v1.1/chat'
        var host = location.host
        var date = new Date().toGMTString()
        var algorithm = 'hmac-sha256'
        var headers = 'host date request-line'
        var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v1.1/chat HTTP/1.1`
        var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
        var signature = CryptoJS.enc.Base64.stringify(signatureSha)
        var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
        var authorization = btoa(authorizationOrigin)
        url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
        resolve(url)
    })
}

代码解析:

  1. function getWebsocketUrl() { 定义了一个名为 getWebsocketUrl 的函数。
  2. return new Promise((resolve, reject) => { 使用 Promise 构造函数创建了一个异步操作,并传入 resolve 和 reject 回调函数。
  3. var apiKey = API_KEY 声明了一个变量 apiKey,并将其初始化为 API_KEY 的值。
  4. var apiSecret = API_SECRET 声明了一个变量 apiSecret,并将其初始化为 API_SECRET 的值。
  5. var url = 'wss://spark-api.xf-yun.com/v1.1/chat' 声明了一个变量 url,并将其初始化为一个 WebSocket 连接的 URL。
  6. var host = location.host 声明了一个变量 host,并将其初始化为当前页面的主机名。
  7. var date = new Date().toGMTString() 声明了一个变量 date,并将其初始化为当前时间的 GMT 表示形式。
  8. var algorithm = 'hmac-sha256' 声明了一个变量 algorithm,并将其初始化为字符串 'hmac-sha256'
  9. var headers = 'host date request-line' 声明了一个变量 headers,并将其初始化为字符串 'host date request-line'
  10. var signatureOrigin = host: ${host}\ndate: ${date}\nGET /v1.1/chat HTTP/1.1`` 声明了一个变量 signatureOrigin,并将其初始化为一个字符串,包含了请求的头部信息。
  11. var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret) 使用 CryptoJS 的 HMAC-SHA256 算法对 signatureOrigin 进行哈希运算,并将结果存储在变量 signatureSha 中。
  12. var signature = CryptoJS.enc.Base64.stringify(signatureSha) 将 signatureSha 转换为 Base64 编码的字符串,并将结果存储在变量 signature 中。
  13. var authorizationOrigin = api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"声明了一个变量authorizationOrigin`,并将其初始化为一个包含授权信息的字符串。
  14. var authorization = btoa(authorizationOrigin) 使用 btoa 函数将 authorizationOrigin 转换为 Base64 编码的字符串,并将结果存储在变量 authorization 中。
  15. url = ${url}?authorization=${authorization}&date=${date}&host=${host}将带有授权信息的 URL 拼接在原始 URL 的后面,并将结果存储回变量url` 中。
  16. resolve(url) 调用 resolve 回调函数,并将带有授权信息的 URL 作为参数传递给它。
  17. }) } 结束异步操作块和函数定义。
  18. return new Promise((resolve, reject) => { ... } ) } 返回一个 Promise 对象,该对象将在异步操作完成后通过调用 resolve 回调函数来解析 URL。

这段代码的目的是通过使用 HMAC-SHA256 算法对请求进行签名,并添加授权信息到 WebSocket 连接 URL 中,以获取一个合法的 WebSocket 连接 URL。

封装的调用的工具类

class TTSRecorder {
    constructor({
                    appId = APPID
                } = {}) {
        this.appId = appId
        this.status = 'init'
    }

    // 修改状态
    setStatus(status) {
        this.onWillStatusChange && this.onWillStatusChange(this.status, status)
        this.status = status
    }

    // 连接websocket
    connectWebSocket() {
        this.setStatus('ttsing')
        return getWebsocketUrl().then(url => {
            let ttsWS
            if ('WebSocket' in window) {
                ttsWS = new WebSocket(url)
            } else if ('MozWebSocket' in window) {
                ttsWS = new MozWebSocket(url)
            } else {
                alert('浏览器不支持WebSocket')
                return
            }
            this.ttsWS = ttsWS
            ttsWS.onopen = e => {
                this.webSocketSend()
            }
            ttsWS.onmessage = e => {
                this.result(e.data)
            }
            ttsWS.onerror = e => {
                clearTimeout(this.playTimeout)
                this.setStatus('error')
                alert('WebSocket报错,请f12查看详情')
                console.error(`详情查看:${encodeURI(url.replace('wss:', 'https:'))}`)
            }
            ttsWS.onclose = e => {
                console.log(e)
            }
        })
    }


    // websocket发送数据
    webSocketSend() {
        var params = {
            "header": {
                "app_id": this.appId,
                "uid": "fd3f47e4-d"
            },
            "parameter": {
                "chat": {
                    "domain": "general",
                    "temperature": 0.5,
                    "max_tokens": 1024
                }
            },
            "payload": {
                "message": {
                    "text": [
                        {
                            "role": "user",
                            "content": "中国第一个皇帝是谁?"
                        },
                        {
                            "role": "assistant",
                            "content": "秦始皇"
                        },
                        {
                            "role": "user",
                            "content": "秦始皇修的长城吗"
                        },
                        {
                            "role": "assistant",
                            "content": "是的"
                        },
                        {
                            "role": "user",
                            "content": $('#input_text').text()
                        }
                    ]
                }
            }
        }
        console.log(JSON.stringify(params))
        this.ttsWS.send(JSON.stringify(params))
    }

    start() {
        total_res = ""; // 请空回答历史
        this.connectWebSocket()
    }

    // websocket接收数据的处理
    result(resultData) {
        let jsonData = JSON.parse(resultData)
        total_res = total_res + resultData
        $('#output_text').val(total_res)
        // console.log(resultData)
        // 提问失败
        if (jsonData.header.code !== 0) {
            alert(`提问失败: ${jsonData.header.code}:${jsonData.header.message}`)
            console.error(`${jsonData.header.code}:${jsonData.header.message}`)
            return
        }
        if (jsonData.header.code === 0 && jsonData.header.status === 2) {
            this.ttsWS.close()
            bigModel.setStatus("init")
        }
    }
}

代码解释: 

在构造函数中,有一个可选的参数appId,默认值为"APPID"。该函数会将appId赋值给隶属于类的属性this.appId,并将状态初始化为"init"。

setStatus(status)是一个方法,用于改变状态。在调用该方法之前,可以通过设置onWillStatusChange回调函数来执行一些额外操作。该方法会将状态设置为传入的status值。

connectWebSocket()是一个方法,用于建立WebSocket连接。在开始建立连接之前,会将状态设置为"ttsing"。然后,通过调用getWebsocketUrl()方法获取WebSocket的URL,并创建一个WebSocket实例,保存在ttsWS属性中。如果浏览器不支持WebSocket,则会弹出一个警告,而后续的操作将中止。

创建WebSocket实例后,定义了几个回调函数:onopenonmessageonerroronclose。在连接成功时,会调用webSocketSend()方法发送数据;接收到消息时,会调用result()方法处理数据;发生错误时,会更改状态为"error";关闭连接时,在控制台打印相关信息。

webSocketSend()方法用于向WebSocket发送数据。首先,创建了一个包含参数的params对象,其中包括应用ID、用户ID、聊天参数和要转换为语音的文本。通过调用JSON.stringify()方法将参数对象转换为字符串,并使用WebSocket实例的send()方法发送。

start()方法是启动TTS录制的入口。在该方法中,将总的回答历史total_res初始化为空字符串,然后调用connectWebSocket()方法建立WebSocket连接。

result(resultData)方法用于处理接收到的WebSocket数据。首先,将接收到的JSON字符串转换为对象,将结果累加到total_res变量中,并将其值显示在output_text元素中。如果提问失败(header.code不为0),会弹出一个警告并输出错误信息。如果提问成功但会话结束(header.status为2),则关闭WebSocket连接,并将状态设置为"init"。文章来源地址https://www.toymoban.com/news/detail-698761.html

到了这里,关于讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【分享】科大讯飞星火认知大模型(初体验)

    前言: 哈喽,大家好,我是木易巷~ 随着人工智能技术的迅猛发展,自然语言处理(NLP)成为了热门话题。在众多NLP模型中,科大讯飞星火认知大模型成为了一个备受瞩目的新秀,今天我们来了解一下这个由科大讯飞公司开发的人工智能模型~ (内测方法在文末) 5月6日,讯

    2024年02月07日
    浏览(40)
  • 讯飞星火认知大模型V2.0:迈向认知计算的全新时代

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月12日
    浏览(48)
  • 科大讯飞星火认知大模型是真能打

    5月6日,科大讯飞正式发布星火认知大模型。 先进的技术,出色的表现,直击产业痛点的商业应用,让人们再次认识了科大讯飞的强大。当然,星火认知大模型也是真能打。 01 火爆的大模型 2022年11月,人工智能公司OpenAI推出的生成式机器人ChatGPT发布后短时间便火遍全球,成

    2024年02月05日
    浏览(54)
  • 【周末闲谈】超越ChatGPT?科大讯飞星火认知大模型

    个人主页:【😊个人主页】 系列专栏:【❤️周末闲谈】 ✨第一周 二进制VS三进制 ✨第二周 文心一言,模仿还是超越? ✨第二周 畅想AR 哈喽大家好啊,愉快的周末又到了,5月6号,号称超越了ChatGPT的科大讯飞星火认知大模型终于与我们正式见面了,在发布会的现场,刘聪

    2024年02月05日
    浏览(42)
  • 体验讯飞星火认知大模型,据说中文能力超越ChatGPT

    💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜 📝 个人主页:馆主阿牛🔥 🎉 支持我:点赞👍+收藏⭐️+留言📝 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥 5月6号,科大讯飞发布了讯飞星火认知大模型,据传是国产最强AI,讯飞董事长在

    2024年02月04日
    浏览(48)
  • 【探索人工智能】我与讯飞星火认知大模型的对话

    这是讯飞星火认知大模型的地址: [讯飞星火认知大模型](https://xinghuo.xfyun.cn/desk) 我们必须清晰的认知到作为大模型其实是没有一个确切的\\\"发展历程\\\"。 那么它是怎么进行技术的更新,怎么能回答你详细的问题呢? 它的知识和能力是基于大量文本数据进行训练的,这些数据来

    2024年02月16日
    浏览(60)
  • AI —— 亲测讯飞星火认知大模型,真的很酷!

        😎博客昵称:博客小梦 😊最喜欢的座右铭:全神贯注的上吧!!! 😊作者简介:一名热爱C/C++,算法等技术、喜爱运动、热爱K歌、敢于追梦的小博主! 😘博主小留言:哈喽! 😄各位CSDN的uu们,我是你的博客好友小梦,希望我的文章可以给您带来一定的帮助,话不

    2024年02月15日
    浏览(46)
  • 文心一言没有体验上,看看讯飞星火认知大模型

    目录   前言 正文 1.简单对话环节 1.1什么是讯飞星火认知大模型 1.2你都可以干一些什么 1.3你的训练数据库还在持续更新么 1.4今天是哪一天 1.5宇宙中有哪些目前认为可能存在生命的星球 2.辅助学习对话 2.1我想完成一篇关于CT检测技术的论文综述,你有什么好的建议么 ? 2.2可

    2024年02月03日
    浏览(63)
  • 【AI大模型】“讯飞星火”认知大模型正式发布 计划10月底赶超ChatGPT

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:AI大模型 5月6日,讯飞星火认知大模型成果发布会在安徽合肥举行。科大讯飞董事长刘庆峰、研究院院长刘聪发布讯飞星火认知大模型,现场

    2024年02月04日
    浏览(44)
  • 讯飞星火认知大模型全新升级,全新版本、多模交互—测评结果超预期

    写在前面 版本新功能 1 体验介绍 登录注册 申请体验 2 具体使用 2.1 多模态能力 2.1.1 多模理解 2.1.2 视觉问答 2.1.3 多模生成 2.2 代码能力 2.2.1 代码生成 2.2.2 代码解释 2.2.3 代码纠错 2.2.4 单元测试 2.3 插件功能 2.3.1 PPT生成 2.3.2 简历生成 2.3.4 文档问答 3 其他功能 4 权

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包