ChatGPT引领智能对话:微信小程序的新潮玩法

这篇具有很好参考价值的文章主要介绍了ChatGPT引领智能对话:微信小程序的新潮玩法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.引言

ChatGPT是由OpenAI开发的基于深度学习的自然语言处理模型,它在人工智能领域具有重要的影响力。ChatGPT基于大规模的文本数据进行训练,能够生成高质量的自然语言文本,包括对话、文章等。它的影响力主要体现在以下几个方面:

  1. 语言生成和理解能力:ChatGPT具有出色的语言生成和理解能力,可以模拟人类的对话方式,生成连贯、自然的文本。这种能力使得ChatGPT可以用于各种自然语言处理任务,如对话系统、文本摘要、翻译等。

  2. 开放性和通用性:ChatGPT是一个开放式模型,能够处理各种类型和主题的文本。它不仅可以应对预定义的任务,还可以适应新的领域和场景,具有很强的通用性。

  3. 社交和娱乐应用:ChatGPT在社交和娱乐应用中具有很大的潜力,可以用于构建智能聊天机器人、虚拟助手等。它可以与用户进行自然、流畅的对话,提供个性化的服务和娱乐。

微信小程序作为轻量级应用开发平台在移动互联网领域拥有广泛的使用和便捷性。它允许开发者在微信环境中快速开发和发布应用,无需下载安装即可直接使用,具有良好的用户体验。微信小程序的特点包括:

  1. 低门槛:微信小程序的开发门槛较低,开发者可以使用HTML、CSS、JavaScript等前端技术进行开发,无需学习新的编程语言。

  2. 即时体验:用户可以直接在微信中打开和使用小程序,无需下载安装,节省了用户的时间和手机存储空间。

  3. 社交共享:微信小程序可以方便地与微信的社交功能集成,用户可以通过微信分享、转发小程序,扩大了小程序的传播范围。

在微信小程序中集成ChatGPT API能够带来以下创新功能和服务:

  1. 智能客服和虚拟助手:开发者可以通过整合ChatGPT API实现智能客服和虚拟助手功能,帮助用户解决问题、提供个性化的服务。

  2. 智能对话应用:基于ChatGPT的强大对话生成能力,开发者可以构建各种智能对话应用,如智能聊天机器人、情感交互应用等,提供更加丰富和有趣的用户体验。

  3. 个性化推荐和建议:通过分析用户的对话和需求,结合ChatGPT的语言理解能力,开发者可以实现个性化的推荐和建议服务,提高用户的满意度和粘性。

综上所述,将ChatGPT集成到微信小程序中可以为开发者提供更加智能、个性化的应用服务,丰富了小程序的功能和体验,促进了人工智能与移动互联网的深度融合。

2.准备工作

1.创建API Key

要获取并启用ChatGPT API功能,用户只需访问ChatGPT管理后台并通过点击指定链接进入。在用户后台界面中,您将找到创建新密钥的功能选项——“Create new secret key”。只需轻点此按钮,系统即会自动生成一个新的API Key供用户使用。通过这一关键步骤,用户即可顺利调用强大的ChatGPT大模型,并将其集成至各类应用和服务中,从而实现与ChatGPT的深度交互和高效利用。
chat微信小程序,人工智能,人工智能

2.查询余额

在成功创建API Key之后,需要注意的是,仅凭此步骤并不意味着可以立即启用ChatGPT大模型的调用功能。为了确保顺利使用接口服务,用户的账户中必须拥有充足的余额。请在生成API Key后,核实并确保您的账户已充值或具有足够的信用额度。具体查询账户余额的链接如右侧所示:余额查询链接,请通过该链接进行实时核查,以避免因余额不足导致无法顺利调用ChatGPT大模型接口的情况发生。
chat微信小程序,人工智能,人工智能

3.微信小程序代码测试

1.index.wxml

<!--index.wxml-->
<navigation-bar title="Chat问答系统" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
  <scroll-view scroll-y="true" class="chat-content">
    <view wx:for="{{chatMessages}}" wx:key="{{index}}" class="chat-message">
      <view wx:if="{{item.type === 'user'}}" class="user-message">{{item.text}}</view>
      <view wx:else class="bot-message">{{item.text}}</view>
    </view>
  </scroll-view>
  <view class="input-box">
    <input class="input" type="text" placeholder="Type a message..." value="{{inputText}}" bindinput="handleInput"/>
    <button class="send-btn" bindtap="sendMessage">Send</button>
  </view>
</view>
</scroll-view>

2.index.css

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-content {
  flex: 1;
}

.chat-message {
  margin: 5px 10px;
}

.user-message {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 5px;
}

.bot-message {
  background-color: #c0e5fc;
  padding: 5px 10px;
  border-radius: 5px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.input {
  flex: 1;
  height: 36px;
  margin-right: 10px;
}

.send-btn {
  width: 80px;
  height: 36px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  outline: none;
}

3.index.js


// index.js
Page({
  data: {
    chatMessages: [],
    inputText: ''
  },

  handleInput: function (e) {
    this.setData({
      inputText: e.detail.value
    });
  },

  sendMessage: function () {
    const inputText = this.data.inputText.trim();
    if (inputText === '') return;

    const chatMessages = this.data.chatMessages;
    chatMessages.push({ text: inputText, type: 'user' });
    this.setData({
      chatMessages: chatMessages,
      inputText: ''
    });

    this.getChatResponse(inputText);
  },

  getChatResponse: function (inputText) {
    // 发送请求到 ChatGPT API,获取响应
    // 以下为示例代码,实际需根据 API 接口的调用方式进行修改
    wx.request({
    // 国内需要走代理url
      url: 'https://api.openai-proxy.com/v1/chat/completions',
      method: 'POST',
      data: {
        model: 'gpt-3.5-turbo',
        messages: [
          {"role": "user", 
          "content": inputText},
        ],
        // max_tokens: 150
        // 其他参数根据 API 要求进行设置
      },
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR-API-KEY' // 将YOUR_API_KEY替换为您的API密钥
      },
      success: res => {
        const chatMessages = this.data.chatMessages;
        // res.data.choices[0].message.content 这个根据返回数据的结构进行动态调整
        chatMessages.push({ text: res.data.choices[0].message.content, type: 'bot' });
        this.setData({
          chatMessages: chatMessages
        });
      },
      fail: err => {
        console.error('Failed to get chat response: ', err);
      }
    });
  }
});

4.问题解决

1.非合法域名校验

如果你创建了API Key,同时也完成了代码,但是代码运行后报错,即:

https://api.openai-proxy.com 不在以下 request 合法域名列表中,请参考文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: 
Windows,mp,1.06.2401020; lib: 3.3.4)

则证明你需要在微信开发者工具右上角,点击详情,在下面勾选 “不校验合法域名” ,具体如下所示:
chat微信小程序,人工智能,人工智能

2.超出限额

若解决上述问题后,出现新的问题,即:

“error”: { “message”: “You exceeded your current quota, please check your plan 
and billing details., “type”: “insufficient_quota”, “param”: null, “code”: null }}

则代表该账号OpenAI提供的配额用完了,需要重新更换账号或充值!

3.服务代理

由于OpenAI及GFW的双重限制,导致国内用户无法访问OpenAI的API,因此,如果直接使用OpenAI的API,将会出现如下错误:

POST https://api.openai.com/v1/chat/completions 401 (Unauthorized)
(env: Windows,mp,1.06.2401020; lib: 3.3.4)

因此,需要将url更换为代理url,即为https://api.openai-proxy.com/v1/chat/completions

5.效果展示

解决完上述问题后,可以发现代码运行效果如下所示:
chat微信小程序,人工智能,人工智能文章来源地址https://www.toymoban.com/news/detail-841914.html

到了这里,关于ChatGPT引领智能对话:微信小程序的新潮玩法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序| 基于ChatGPT+明基屏幕挂灯实现超智能家居物联网小程序

    在尝试了这么多次的 ChatGPT 在纯软方向的应用开发后,深感 LLM(大语言模型) 的能力之强大。俗话说得好: 心有多大舞台就有多大! 基于AI大模型,可以尝试的方面实在是数不胜数!轻轻松松就可以突破在移动互联网时代APP/平台所积累下的数据壁垒和优势!以及像一些高门槛

    2024年02月08日
    浏览(64)
  • 微信小程序短剧开发技术短剧系统短剧实战玩法分销cps系统搭建教程

    怎么搭建上线短剧小程序呢? 1. 小程序搭建整个流程是注册账号,认证资质,编辑代码(想要呈现怎么样的小程序浏览页面,后台页面及其功能)。 2. 在微信公众平台上注册一个账号,像云微追剧这款小程序可以在微信小程序上能搜索到的追剧小程序(模板) 3. 账号注册

    2024年02月11日
    浏览(43)
  • 大屏时代:引领信息可视化的新潮流

    在信息时代的浪潮下,数据已经成为推动各行各业发展的重要动力。然而,海量的数据如何快速、直观地呈现给用户,成为了一个亟待解决的难题。在这样的背景下, 可视化大屏 应运而生,以其出色的表现力和 交互性 成为信息展示的佼佼者。   可视化大屏是一种利用先进

    2024年02月07日
    浏览(64)
  • 微信小程序——实现对话模式(调用大模型图片生成)

    大家好,我是yma16,本文分享微信小程序——实现对话模式(调用大模型图片生成)。 aigc图片生成 AIGC (Artificial Intelligence Generated Content) 可以生成各种类型的图片,包括风景、动物、人物、抽象等等。生成图片的过程通常是使用预训练的神经网络模型,该模型可以根据输入的

    2024年04月09日
    浏览(55)
  • 数字化运维:引领IT运维管理的新潮流

    目录 前言 数字化运维与传统运维 数字化运维是什么 数字化运维的关键技术 书本推荐 主要内容 读者对象 总结  数字化转型已经成为大势所趋,各行各业正朝着数字化方向转型,利用数字化转型方法论和前沿科学技术实现降本、提质、增效,从而提升竞争力。 数字化转型是

    2024年04月13日
    浏览(42)
  • 微信小程序WebSocket实现stream流式聊天对话功能

    要在微信小程序实现聊天对话功能,回话是流式应答,这里使用了WebSocket技术。WebSocket大家应该都很熟悉,使用wx.connectSocket就可以了。这里可能需要注意下的是流式应答,后端如何发送,前端如何接收。直接上代码: 可以扫码体验: 后端关键代码: 小程序ts代码: 可以扫码

    2024年04月10日
    浏览(80)
  • 怪兽 AI 实时交互数字人直播软件系统,引领直播新潮流

    在当今数字化的时代,直播已经成为了一种极具影响力和吸引力的传播方式。无论是企业营销、教育培训还是娱乐互动,直播都发挥着重要的作用。而怪兽 AI 实时交互数字人直播软件系统的出现,更是为直播领域带来了全新的变革和机遇。 怪兽智能:https://www.guaishouai.com​​

    2024年04月16日
    浏览(45)
  • 实在智能RPA亮相2023全球人工智能技术博览会,“能对话的数字员工”引领智能自动化新篇章

    随着ChatGPT火爆全网,人工智能再次成为学术界和科技领域“新宠”,一场“智能革命”的序幕悄然掀开。 6月13日,“智能驱动 砥砺前行”为主题的2023全球人工智能技术博览会在杭州未来科技城学术交流中心圆满落下帷幕。此次博览会以展示智能科技创新前沿为目标,集合了

    2024年02月10日
    浏览(69)
  • 引领Midjourney Logo设计新潮流:激发创意,探索无限可能 - V5版 中

    我们继续 AIGC讨论:qigeai7777 所有的提示词,球:七哥的AI日常 21、Silhouette “Silhouette logo” 意为剪影标志,是一种图形标志设计的形式。这种设计通常采用单色或简化的形状,以创建一个清晰而轮廓分明的图像。剪影标志通常是对物体或人物的轮廓进行简化,剔除细节,使其

    2024年02月20日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包