前言

随着科技的不断发展，人工智能（AI）在我们生活中的角色越来越重要。其中自然语言处理（NLP）技术在AI领域中占据着重要地位，而ChatGPT作为一种强大的自然语言处理模型，它正逐渐改变着我们与计算机和智能系统交互的方式。本文将介绍简单如何搭建一个自己的chatGPT

AI模型

作为科大讯飞的老用户了，经常在工作和生活中询问讯飞星火如何解决和实现问题。
近期讯飞星火的API也是免费向新老用户提供，所以我们利用讯飞星火的API开发一个自己的应用来实现AI的能力并进行包装，也是个非常不错的程序员业余变现思路。
我们采用讯飞星火认知大模型开放的api 讯飞星火认知大模型

注册账号登录

注册账号登陆这里就不做演示了，登录后可以看到API免费试用

领取免费tokens

完全免费！0 门槛领取 20 万讯飞星火认知大模型 API Tokens；
通过专属二维码个人用户最高可再申请 400 万 Tokens，企业用户最高可申请 1000 万 Tokens。

进入服务控制台

进入到后台可以看到AppId，密钥和ApiKey，接入文档等内容。

API接入

不同接口地址对应的是不同的模型版本，1.5版本和2.0版本对应都是10万token数，3.0版本200万token数，前期调试阶段建议使用1.5即可

通用鉴权URL生成

html文档中引入CryptoJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"><script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/hmac-sha256.js"></script>

鉴权URL生成

// 获取请求地址
async function getWebsocketUrl () {
    return new Promise(async (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)
    })
}

连接WebSocket

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 => {
            }
        })
    }
    // websocket发送数据
    webSocketSend () {
        this.ttsWS.send(JSON.stringify(params))
    }
    start () {
        total_res = ""; // 请空回答历史
        this.connectWebSocket()
    }
    // websocket接收数据的处理
    result (resultData) {
        let jsonData = JSON.parse(resultData)
        total_res += jsonData.payload.choices.text[0].content
        if (jsonData.header.status == 0) {
            let chatBox = document.createElement('div')
            let dom = `
            <img src="/img/ai.jpg" alt="">
            <pre class="chatpdfContent">${total_res}</pre>
            `
            chatBox.innerHTML = dom
            chatBox.classList.add('chatpdfRow','assistant')
            chatpdfLine.appendChild(chatBox)
        }
        var lastChild = chatpdfLine.lastElementChild;
        lastChild.children[1].textContent = total_res
        // 提问失败
        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) {
            params.payload.message.text.push({
                "role": "assistant",
                "content": total_res
            })
            this.ttsWS.close()
            this.setStatus("init")
        }
    }
}

发送消息

// ======================开始调用=============================
function requestOnlineConnection () {
    let chatBox = document.createElement('div')
    let dom = `
    <img src="/img/user.webp" alt="">
    <pre class="chatpdfContent">${textarea.value}</pre>
    `
    chatBox.innerHTML = dom
    chatBox.classList.add('chatpdfRow', 'chatpdfAsk')
    chatpdfLine.appendChild(chatBox)
    params.payload.message.text.push({
        "role": "user",
        "content": textarea.value
    })
    bigModel.start()
    textarea.value = ''
    textarea.style.height = 'auto';
}
send.addEventListener('click', function (event) {
    requestOnlineConnection()
});

页面刷新恢复聊天数据

let elementAsString = sessionStorage.getItem("chat_message");
if (chatpdfLine.children.length == 1 && elementAsString) {
    chatpdfLine.innerHTML = JSON.parse(elementAsString).element
}
window.addEventListener('beforeunload', function(event) {
if(chatpdfLine.children.length > 1){
sessionStorage.setItem('chat_message',JSON.stringify({element:chatpdfLine.innerHTML}))
}
  event.preventDefault();
  event.returnValue = '';  // 为了兼容旧版本的浏览器
});

效果展现

写在最后

至此，文章就分享完毕了，我是程序员LinXiao，一位前端开发工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注
如果你对我有兴趣，欢迎添加我的个人微信Lxlucky2022
Github：https://github.com/KevinLin8