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的深度交互和高效利用。
在这里插入图片描述

2.查询余额

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

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)

则证明你需要在微信开发者工具右上角，点击详情，在下面勾选 “不校验合法域名” ，具体如下所示：
在这里插入图片描述

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.效果展示

解决完上述问题后，可以发现代码运行效果如下所示：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/451085.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

系统及其分类

系统及其分类

系统定义 系统&#xff1a;指若干相互关联的事物组合而成的具有特定功能的整体。 系统的基本作用&#xff1a;对输入信号进行加工和处理&#xff0c;将其转换为所需要的输出信号。 系统分类 系统的分类错综复杂&#xff0c;主要考虑其数学模型的差异来划分不同类型。主要分为…
阅读更多...
【HarmonyOS】鸿蒙开发之工具安装与工程项目简介——第1章

【HarmonyOS】鸿蒙开发之工具安装与工程项目简介——第1章

鸿蒙开发工具包下载与使用 鸿蒙开发工具包下载 下载deveco studio开发工具包 系统要求: Windows 操作系统&#xff1a;Windows 10/11 64 位 内存&#xff1a;8GB 及以上 硬盘&#xff1a;100GB 及以上 分辨率&#xff1a;1280*800 像素及以上macOS 操作系统&#xff1a;mac…
阅读更多...
leetcode代码记录（有序数组两数之和

leetcode代码记录（有序数组两数之和

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定一个已按照 升序排列 的整数数组 numbers &#xff0c;请你从数组中找出两个数满足相加之和等于目标数 target 。 函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numb…
阅读更多...
【办公类-22-13】周计划系列（5-5）“周计划-05 上传周计划png“ （2024年调整版本）

【办公类-22-13】周计划系列（5-5）“周计划-05 上传周计划png“ （2024年调整版本）

作品展示——将docx 转PDF转png&#xff0c;保留第一张图片 背景需求&#xff1a; 把周计划内容初步替换后&#xff0c;获得了19周的周计划教案的docx 需要把周计划第一页的反思内容删除&#xff0c;&#xff0c;然后把第一页横版截图上传班级主页。 需求&#xff1a;周计划do…
阅读更多...
开机一直提示dll文件缺失的修复方法，轻松解决弹窗dll问题

开机一直提示dll文件缺失的修复方法，轻松解决弹窗dll问题

当我们在启动计算机并进入操作系统的过程中&#xff0c;如果遇到了开机即刻弹出窗口提示“dll文件缺失”的情况&#xff0c;这究竟是怎么一回事呢&#xff1f;首先&#xff0c;我们需要理解“dll”是Dynamic Link Library&#xff08;动态链接库&#xff09;的缩写&#xff0c;…
阅读更多...
智海Mo 平台与 Datawhale 携手浙江大学，共襄 AI+X 高校行！

智海Mo 平台与 Datawhale 携手浙江大学，共襄 AI+X 高校行！

2024年3月9日&#xff0c;一场以"AIX 高校行"为主题的活动在浙江大学成功举办。本次活动由 Datawhale 与杭州市人工智能学会主办&#xff0c;浙江大学人工智能研究所、浙江大学控制科学与工程学院联合主办&#xff0c;浙江大学学生人工智能协会承办&#xff0c;趋动云…
阅读更多...
49、东北大学、阿尔伯塔大学：MVS-GCN多视角脑区、具有先验脑结构学习的图模型[GCN六元理论识别所有EEG！]

49、东北大学、阿尔伯塔大学：MVS-GCN多视角脑区、具有先验脑结构学习的图模型[GCN六元理论识别所有EEG！]

本文由东北大学医学图像智能计算教育部重点实验室&#xff0c;加拿大阿尔伯塔大学于2022年1.19日发表于<Computers in Biology and Medicine> JCR\IF: Q1\7.7 Abstract&#xff1a; 目的:近年来&#xff0c;脑功能网络(FBN)已被用于神经系统疾病的分类&#xff0c;如自…
阅读更多...
【nvm】下载安装，管理 node

【nvm】下载安装，管理 node

nvm管理node 一. 阐述二. 需求三. nvm3.1 下载3.2 安装3.3 验证是否安装成功 四. 重启电脑五. 管理成功六. 报错6.1 nvm安装后node无效&#xff08;nvm入手&#xff0c;解决nvm use 不成功问题&#xff09;6.2 安装nvm后node无效&#xff08;node版本入手&#xff0c;直接替换更…
阅读更多...
Kubeadm部署K8s

Kubeadm部署K8s

Kubeadm部署K8s 集群规划&#xff1a; Master节点规划: Node节点规划: 安装要求 在开始之前&#xff0c;部署Kubernetes集群机器需要满足以下几个条件&#xff1a; 操作系统 CentOS7.x-86_x64 硬件配置&#xff1a;2GB或更多RAM&#xff0c;2个CPU或更多CPU&#xff0c;硬盘…
阅读更多...
Capture One 23：光影魔术师，细节掌控者mac/win版

Capture One 23：光影魔术师，细节掌控者mac/win版

Capture One 23&#xff0c;不仅仅是一款摄影后期处理软件&#xff0c;它更是摄影师们的得力助手和创意伙伴。这款软件凭借其卓越的性能、丰富的功能和前沿的技术&#xff0c;为摄影师们带来了前所未有的影像处理体验。 Capture One 23 软件获取 Capture One 23以其强大的色彩…
阅读更多...
rt-thread组件之audio组件(结合wavplayer包使用)

rt-thread组件之audio组件(结合wavplayer包使用)

前言 继上一篇RT-Thread组件之Audio框架i2s驱动的编写&#xff0c;应用层使用rt-thread软件包里面的wavplayer组件使用过程中wavplayer版本和rt-thread 5.0版本出现一个小的版本不兼容问题,这里做个记录 wavplayer软件包 问题出现的地方 源码应该修改为 版本对比
阅读更多...
【消息队列开发】 背景知识与需求分析

【消息队列开发】 背景知识与需求分析

文章目录 &#x1f343;前言&#x1f332;消息队列背景知识&#x1f333;需求分析&#x1f6a9;核心概念&#x1f6a9;核心API&#x1f6a9;交换机类型(Exchange Type)&#x1f6a9;持久化&#x1f6a9;网络通信&#x1f6a9;消息应答&#x1f6a9;模块划分 ⭕总结 &#x1f34…
阅读更多...
2024VLN综述（1）

2024VLN综述（1）

1 INTRODUCTION 视觉语言导航（VLN）[12-14]作为体现智能领域的一个重要研究方向，融合了人工智能、自然语言处理、计算机视觉和机器人技术。其目的是通过理解自然语言指令和解释视觉信息，使代理能够在虚拟和真实环境中导航[15-17]。这种方法不仅为更自然、更高效的人机交互铺…
阅读更多...
初识Jwt（结合SpringBoot）

初识Jwt（结合SpringBoot）

最近接触JWT&#xff0c;顺便记录下 目录 JWT简介JWT组成JWT使用流程JWT实战引入Maven核心代码 JWT优缺点 JWT简介 JWT是JSON Web Token的简称&#xff0c;是目前流行的跨域的认证解决方案&#xff0c;作为传递信息的凭证&#xff0c;它是由服务器端签发的且是带签名的&#x…
阅读更多...
Vue-Router学习笔记

Vue-Router学习笔记

文章目录 一、Vue Router简介二、简单使用三、动态路由匹配3.1 响应路由参数的变化3.2 捕获所有路由或 404 Not found 路由 四、路由的匹配语法4.1 在参数中自定义正则4.2 可重复的参数4.3 Sensitive 与 strict 路由配置4.4 可选参数 五、嵌套路由嵌套的命名路由 六、编程式导航…
阅读更多...
CMAQ空气质量模式在移动源污染控制中的技术应用

CMAQ空气质量模式在移动源污染控制中的技术应用

CMAQ&#xff08;Community Multiscale Air Quality&#xff09;空气质量模式是一种先进的空气质量模拟工具&#xff0c;广泛应用于环境科学、气象学以及大气污染控制等领域。该模式能够综合考虑大气中各种污染物的传输、扩散、转化和沉降过程&#xff0c;从而实现对空气质量的…
阅读更多...
部署MGR集群（OpenEuler版步骤详细可参考）

部署MGR集群（OpenEuler版步骤详细可参考）

MGR集群理论知识&#xff1a; MGR具备以下几个特点&#xff1a; 基于shared-nothing模式&#xff0c;所有节点都有一份完整数据&#xff0c;发生故障时可以直接切换。 MGR提供了数据一致性保障&#xff0c;默认是最终一致性&#xff0c;可根据业务特征需要自行调整一致性级别…
阅读更多...
[Prob] Definition 3.7.5 (Function of two r.v.s)

[Prob] Definition 3.7.5 (Function of two r.v.s)

定义3.7.5&#xff08;两个随机变量的函数&#xff09;&#xff1a;给定一个样本空间 \( S \) 的实验&#xff0c;如果 \( X \) 和 \( Y \) 是映射 到X(s) 和 Y(s) 的随机变量&#xff0c;那么 g(X, Y) 就是映射 s 到 g(X(s), Y(s)) 的随机变量。 请注意&#xff0c;我…
阅读更多...
IEEE802.11v协议介绍

IEEE802.11v协议介绍

IEEE802.11v协议简介 协议全称&#xff1a;无线网络管理(Wireless Network Management) 批准日期&#xff1a;2011年2月 协议状态&#xff1a;并入802.11-2012 协议别名&#xff1a;BSS过渡管理 主要功能 支持AP和STA间交换&#xff1a;关于RF环境和拓扑状态的信息&#…
阅读更多...
C#，精巧实用的代码，文件夹的时间整理工具FolderTime及其源代码

C#，精巧实用的代码，文件夹的时间整理工具FolderTime及其源代码

一、文件夹LastWriteTime 我们在Windows资源管理器中看到的文件夹时间，是什么时间呢？ 按微软的解释，应该是该文件夹的最后写入（修改）的时间，称为 LastWriteTime。 DirectoryInfo root = new DirectoryInfo(@"c\root");DateTime ft = root.LastWriteTime; La…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站