微信小程序| 打造ChatGPT英语四六级背单词小程序

这篇具有很好参考价值的文章主要介绍了微信小程序| 打造ChatGPT英语四六级背单词小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划

一、需求背景

学英语,最大的痛苦莫过于背单词!

不知道你平时都是用什么方式在背单词呢?硬啃单词书?字典?还是说各类的背单词APP来回跳转?

不可否认的是,单词一两遍完全记不住,没有个三四五六七八遍,都很难在考场的卷子上认出他!

所以,这次我们来做一个通关英语四六级的背单词神器,让他能够基于艾宾浩斯遗忘规律来辅助我们高效背单词。

这个项目也是AIGC的一个方向性的探索,我们基于LLM的能力,进一部封装。相比于专栏中的前几个项目是直接基于OpenAI接口的直接生成,这次我们需要对模型进行数据的填喂。同时制定好相应的语料生成规则,让他能够根据我们的语料信息生成到我们的答案内容。

所以在本项目中,我们使用到的技术包括:语料Embedding技术Prompt微调技术、``Fine Tune技术,正是通过这三种技术能力的加持,由此颠覆以往的机械式背单词!打造一款更加完美的背单词程序!


二、项目原理及架构

2.1 实现原理

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划

(1)语料的准备

想要有好的单词记忆效果,我们的单词语料必须准备得足够完整!这里我们选用了GitHUB中开源词典数据项目。其中包含了四六级、考研、雅思托福等。这里我们主要针对英语四六级准备,所以这里使用四六级的词汇书就足够了!将其下载,然后导入到数据库中。
微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划

(2)制定LLM模型背单词规则

背过单词的都知道,人的记忆功能都是符合记忆曲线的,同样地我们冶可以将这种记忆规则迁移到我们程序中!其中最重要的就是构建好相应的Prompt来满足单词记忆的规则效果!

  • 先对LLM进行记忆规则的自定义!

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划


  • 再对LLM输入背单词进行词义混淆内容的设定!

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划

(3)记忆已经学会的单词

为了让程序记住我们已经背诵过了的单词,就要让LLM具备记忆功能。在传统的web应用开发过程中,说到数据存储,第一时间我们考虑得更多得除了关系型数据库以及中间件缓存数据库!这是由于业务得特性所决定得!我们在web应用中,数据是规整的!是结构化的。所以用传统的关系型数据库完全可以满足系统的检索需求!

但是,这次我们面对的是大语言模型,而且我们的数据是完全基于文本语料的,可以说不是完全地结构化以及关系型的数据!这个时候我们结合时下大火的向量数据库Milvus来进行数据的存储和检索!也就是传说中的Embedding技术该技术的核心原理:将文本内容通过数学运算,将其转化为向量。然后基于向量间的相似度运算来进行内容的匹配!从而检索出当前内容的最高相似度数据

Milvus 是一款开源的特征向量相似度搜索引擎,具有使用方便、实用可靠、易于扩展、稳定高效和搜索迅速等特点,在全球范围内被上百家组织和机构所采用。Milvus 已经被广泛应用于多个领域,其中包括图像处理、机器视觉、自然语言处理、语音识别、推荐系统以及新药发现等。

Milvus学习教程大全:

  • Milvus简单明了教程一
  • Milvus简单明了教程二

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划


2.2 技术架构

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划


2.3 技术栈

模块 语言及框架 涉及的技术要点
小程序前端 基于VUE 2.0语法+Uni-app跨平台开发框架 Http接口通信、Flex布局方式、uView样式库的使用、JSON数据解析、定时器的使用
小程序接口服务端 Python + Flask WEB框架 rest接口的开发、 ChatGPT API接口的数据对接 、 前后端websocket实时通信

2.4 数据交互原理


三、项目功能的实现

3.1 ChatGPT API的接入

要接入ChatGPT API,需要按照以下步骤进行操作:

  1. 注册一个账号并登录到OpenAI的官网:https://openai.com/
  2. 在Dashboard页面上,创建一个API密钥。在“API Keys”选项卡下,点击“Generate New Key”按钮。将生成的密钥保存好,以备后续使用。
  3. 选择所需的API服务,例如“Completion” API,以使用OpenAI的文本生成功能。

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划
使用Python调用ChatGPT API实现代码如下:

  • 方法一:使用request
import requests
import json

# 构建API请求
url = "https://api.openai.com/v1/engines/davinci-codex/completions"
headers = {"Content-Type": "application/json",
           "Authorization": "Bearer YOUR_API_KEY"}
data = {
    "prompt": "Hello, my name is",
    "max_tokens": 5
}

# 发送API请求
response = requests.post(url, headers=headers, data=json.dumps(data))

# 解析API响应
response_data = json.loads(response.text)
generated_text = response_data["choices"][0]["text"]

print(generated_text)


  • 方式二:使用openAI库
from flask import Flask, request
import openai

app = Flask(__name__)

openai.api_key = "YOUR_API_KEY_HERE"

@app.route("/")
def home():
    return "Hello, World!"

@app.route("/chat", methods=["POST"])
def chat():
    data = request.json
    response = openai.Completion.create(
        engine="davinci",
        prompt=data["message"],
        max_tokens=60
    )
    return response.choices[0].text

if __name__ == "__main__":
    app.run()


3.2 小程序端设计与实现

首页 学习页
微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划 微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划
学习统计页
微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划

3.3 Milvus数据库的接入

  • JAVA SDK工具类接入
  • FLAT:FLAT适用于希望在小规模、百万级数据集上获得完全准确和精确搜索结果的场景。
  • IVF_FLAT:IVF_FLAT是一种基于量化的索引,适用于追求查询准确度和速度之间的理想平衡的场景。
  • IVF_SQ8:IVF_SQ8是一种基于量化的索引,适用于那些资源非常有限且需要显著减少磁盘、CPU和GPU内存消耗的场景。
  • IVF_PQ:IVF_PQ是一种基于量化的索引,适用于那些即使付出准确度代价也要追求高查询速度的场景。
  • HNSW:HNSW是一种基于图的索引,适用于对搜索效率有高要求的场景。
  • ANNOY:ANNOY是一种基于树的索引,适用于追求高召回率的场景。
  • RAFT: 基于GPU的一种索引

微信小程序| 打造ChatGPT英语四六级背单词小程序,玩转AIGC与应用开发,小程序,微信小程序,chatgpt,人工智能,ai,uniapp,原力计划


3.4 小程序单词学习功能实现

<!--pages/learning/learning.wxml-->

<view class="bgWrapper bg-linear-{{colorType}}"></view>

<view class="topline" wx:if="{{!learnDone}}">
    <view class="progress">{{learnedNum}} / {{learnNum}}</view>
</view>

<view class="wordWrapper" bindtap="playVoice" wx:if="{{!learnDone}}">
    <view class="word word-color-{{colorType}}" wx:if="{{ wordMode == 0 }}">{{wordDetail.word}}</view>
    <view class="repeatTime" wx:if="{{ wordMode == 0 }}">
        <view class="times first {{ thisWordRepeatTime>=1? 'bg-color-light-'+colorType : 'bg' }}"
            wx:if="{{ repeatTimes>1 }}"></view>
        <view class="times {{ thisWordRepeatTime>=2? 'bg-color-light-'+colorType : 'bg' }}"
            wx:if="{{ repeatTimes>=2 }}"></view>
        <view class="times {{ thisWordRepeatTime>=3? 'bg-color-light-'+colorType : 'bg' }}"
            wx:if="{{ repeatTimes>=3 }}"></view>
        <view class="times {{ thisWordRepeatTime==4? 'bg-color-light-'+colorType : 'bg' }}"
            wx:if="{{ repeatTimes==4 }}"></view>
    </view>
    <view class="pron" wx:if="{{ wordMode == 0 && wordDetail.phonetic.length > 0 }}">/ {{wordDetail.phonetic}} / <text
            class="voice iconfont icon-sound"></text></view>
    <view class="timing" wx:if="{{ wordMode == 1 }}" catchtap="{{ isBtnActive? 'showWord':'' }}">
        <mpProgress class="progress" config="{{wordTimingConfig}}" reset="{{wordTimingReset}}"
            isStop="{{wordTimingStop}}" percentage="{{100}}" bindtimingOut="timingOut" data-type="word"></mpProgress>
        <!-- <button class="resetbtn" type="primary" bindtap="resetCanvasFunc">reset</button> -->
    </view>
    <view class="timing" wx:if="{{ wordMode == 2 }}">
        <view class="model"></view>
        <view class="model phonetic"></view>
    </view>
</view>

<view class="content" wx:if="{{!learnDone}}">
    <view class="chooseCorrect" wx:if="{{ contentMode == 0 }}">
        <view class="choice {{choiceBgList[index]}}" wx:for="{{choiceOrder}}" wx:key="index" hover-class="wasTaped"
            data-index="{{index}}" bindtap="{{ isBtnActive? 'checkChoice':'' }}">
            <view class="pos">{{wrongTransWordList[item].translation.pos}}</view>
            <view class="meaning"> {{wrongTransWordList[item].translation.meaning}}</view>
        </view>
    </view>
    <view class="translationWrapper" wx:if="{{ contentMode == 1 }}">
        <view class="transRow" wx:for="{{wordDetail.shortTrans}}" wx:key="index">
            <view class="pos" wx:if="{{ item.pos != '' }}">{{item.pos}}</view>
            <view class="meaning {{ item.more? 'moreBtn':'' }}" bindtap="{{ item.more? 'toDetail':'' }}"
                hover-class="{{ item.more? 'tapedText':'' }}">{{item.meaning}}
            </view>
        </view>
    </view>
    <view class="timing" wx:if="{{ contentMode == 2 }}" bindtap="{{ isBtnActive? 'showTrans':'' }}">
        <mpProgress class="progress" config="{{contentTimingConfig}}" reset="{{contentTimingReset}}"
            isStop="{{contentTimingStop}}" percentage="{{100}}" bindtimingOut="timingOut" data-type="content">
        </mpProgress>
        <!-- <button class="resetbtn" type="primary" bindtap="resetCanvasFunc">reset</button> -->
    </view>
    <view class="timing" wx:if="{{ contentMode == 3 }}" bindtap="{{ isBtnActive? 'showTrans':'' }}">
        <view class="model"></view>
        <view class="model"></view>
        <view class="model"></view>
    </view>
</view>

<view class="control" wx:if="{{!learnDone}}">
    <view class="btn answerBtn" wx:if="{{ controlMode == 0 }}" hover-class="wasTaped"
        bindtap="{{ isBtnActive? 'showAnswer':'' }}">
        <view class="text">答案</view>
        <view class="decorate"></view>
    </view>
    <view class="knowWrapper" wx:if="{{ controlMode == 1 }}">
        <view class="btn knowBtn left" hover-class="wasTaped" bindtap="{{ isBtnActive? 'setAsKnown':'' }}">
            <view class="text word-color-{{colorType}}">认识</view>
            <view class="decorate bg-color-light-{{colorType}}"></view>
        </view>
        <view class="btn knowBtn" hover-class="wasTaped" bindtap="{{ isBtnActive? 'setAsUnknown':'' }}">
            <view class="text notknowtext">不认识</view>
            <view class="decorate dforNotKnow"></view>
        </view>
    </view>
    <view class="knowWrapper" wx:if="{{ controlMode == 2 }}">
        <view class="btn knowBtn left" hover-class="wasTaped" bindtap="{{ isBtnActive? 'toNextWord':'' }}">
            <view class="text word-color-{{colorType}}">下一个</view>
            <view class="decorate bg-color-light-{{colorType}}"></view>
        </view>
        <view class="btn knowBtn" hover-class="wasTaped" bindtap="{{ isBtnActive? 'changeToUnknown':'' }}">
            <view class="text notknowtext">记错了</view>
            <view class="decorate dforNotKnow"></view>
        </view>
    </view>
    <view class="btn nextBtn" wx:if="{{ controlMode == 3 }}" hover-class="wasTaped"
        bindtap="{{ isBtnActive? 'toNextWord':'' }}">
        <view class="text word-color-{{colorType}}">下一个</view>
        <view class="decorate bg-color-light-{{colorType}}"></view>
    </view>
    <view class="bottomMenu">
        <!-- <view class="left">单词详情</view>
        <view class="left">跳过此轮</view>
        <view class="left">设为已掌握</view>
        <view class="left last">加入生词本</view> -->
        <view class="bottomBtn iconfont icon-getDetail" hover-class="wasTaped-bottom" bindtap="toDetail"></view>
        <view class="bottomBtn iconfont icon-skip" hover-class="wasTaped-bottom" data-type="skip"
            bindtap="{{ isBtnActive? 'skip':'' }}"></view>
        <view class="bottomBtn iconfont icon-learned" hover-class="wasTaped-bottom" data-type="master"
            bindtap="{{ isBtnActive? 'skip':'' }}"></view>
        <view class="bottomBtn iconfont icon-addToNB-{{isInNotebook?'yes':'no'}}"
            hover-class="wasTaped-bottom{{isInNotebook?'1':''}}" bindtap="toggleAddToNB"></view>
    </view>
</view>

<view class="doneWrapper" wx:if="{{learnDone}}">
    <view class="text word-color-{{colorType}}">本组单词学习已完成</view>
    <view class="btn back" hover-class="wasTaped" bindtap="goBack">完成学习</view>
    <view class="btn continue bg-color-light-{{colorType}}" hover-class="wasTaped" bindtap="reInit">继续学习</view>
</view>

<!-- <view class="test">
    <button class="showInfo" data-name="wordLearningRecord" bindtap="showInfo">l-Record</button>
    <button class="showInfo" data-name="control" bindtap="showInfo">control</button>
    <button class="showInfo" data-name="settings" bindtap="showInfo">settings</button>
</view> -->

四、推荐阅读

🥇入门和进阶小程序开发,不可错误的精彩内容🥇 :文章来源地址https://www.toymoban.com/news/detail-641750.html

  • 《小程序开发必备功能的吐血整理【个人中心界面样式大全】》
  • 《微信小程序 | 借ChatGPT之手重构社交聊天小程序》
  • 《微信小程序 | 人脸识别的最终解决方案》
  • 《微信小程序 |基于百度AI从零实现人脸识别小程序》
  • 《吐血整理的几十款小程序登陆界面【附完整代码】》

到了这里,关于微信小程序| 打造ChatGPT英语四六级背单词小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序|英语学习交流平台小程序

    作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助 收藏点赞不

    2024年04月25日
    浏览(41)
  • 英语单词记忆学习打卡系统 微信小程序

    本单词记忆系统使用了计算机语言Java和存放数据的仓库MySQL,采用了微信小程序模式来实现。本系统使用了框架SSM和Uni-weixin实现了单词记忆系统应有的功能,系统主要角色包括管理员和用户。 :Java;MySQL;SSM  在本单词记忆系统中,为了保证系统运行的安全性,想要

    2024年02月07日
    浏览(43)
  • 基于微信小程序的英语学习交流平台小程序

    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了英语学习交流平台小程序的开发全过程。通过分析英语学习交流平台小程序管理的不足,创建了一个计算机管理英语学习交流平台小程序的方案。文章介绍了英语学习交流

    2024年01月20日
    浏览(35)
  • 微信小程序的英语学习平台uniapp设计

    随着移动端互联网的发展, 越来越多的人借助智能手机学习英语, 而各类辅助学习英语的程序也如雨后春笋一般飞速发展。纵观目前的手机应用市场, 多是以APP的形式来辅助学习英语的, APP虽然功能种类繁多, 但是它无法跨平台使用, 开发成本高, 占用内存高, 且推广困难。 根据

    2024年02月20日
    浏览(37)
  • ssm基于微信小程序英语在线考试系统(程序+开题)

    本系统(程序 + 源码)带文档 lw 万字以上 文末可获取一份本项目的 java 源码和数据库参考。 研究背景: 随着英语学习的重要性日益凸显,英语考试成为了学生学习的重要环节。传统的英语考试方式存在着时间和空间限制、试卷管理繁琐等问题,无法满足学生和教师的需求。

    2024年02月01日
    浏览(39)
  • Java基于微信小程序的英语学习交流小程序

    博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 2022-2024年最全的计算机软件毕业设计选

    2024年02月19日
    浏览(37)
  • 案例030:基于微信小程序的英语学习交流平台

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 前言 系统展示 管理员模块的实现 用户信息管理 每日打卡管理 学习资源管理

    2024年02月05日
    浏览(42)
  • 微信小程序的英语学习激励系统的设计与实现(论文+源码)_kaic

    摘要 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括的信息内容比较多,用户想要对这些数据进行管理

    2024年02月03日
    浏览(67)
  • 英语在线学习考试系统 微信小程序python(flask+django)/thinkphp/nodejs/

    小程序Android端运行软件  微信开发者工具/hbuiderx uni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。 前端:HTML5,CSS3 VUE 后端:java(springboot+ssm)/python(flask+django)/thinkphp/nodejs/ 开发运行:微信开发者/hbuilderx 后端:idea/eclipse/vscode/pyc

    2024年04月15日
    浏览(59)
  • 基于微信小程序的英语单词记忆系统的设计与实现(论文+源码)_kaic

    摘  要 当前时期,国内的经济获得了非常快速的发展,互联网技术在持续的创新和完善,教育教学方面也在不断的进步,教育全面深化改革在发展,并且移动互联网技术在教育领域获得了大量的实践以及应用。语言的全球化慢慢的变成现今世纪非常重要的一种发展趋势,其中

    2024年02月12日
    浏览(36)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包