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

2023-07-30 23:54:49

请添加图片描述

一、需求背景

学英语，最大的痛苦莫过于背单词！

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

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

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

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

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

二、项目原理及架构

2.1 实现原理

在这里插入图片描述

（1）语料的准备

想要有好的单词记忆效果，我们的单词语料必须准备得足够完整!这里我们选用了GitHUB中开源词典数据项目。其中包含了四六级、考研、雅思托福等。这里我们主要针对英语四六级准备，所以这里使用四六级的词汇书就足够了！将其下载，然后导入到数据库中。
在这里插入图片描述

（2）制定LLM模型背单词规则

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

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

请添加图片描述

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

请添加图片描述

（3）记忆已经学会的单词

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

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

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

Milvus学习教程大全：

在这里插入图片描述

2.2 技术架构

在这里插入图片描述

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的文本生成功能。

在这里插入图片描述
使用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 小程序端设计与实现

首页学习页
在这里插入图片描述在这里插入图片描述
学习统计页
––
在这里插入图片描述

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的一种索引

在这里插入图片描述

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> -->

四、推荐阅读

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

更多推荐

运用贪心算法实现卡牌游戏-2023年全国青少年信息素养大赛Python复赛真题精选

[导读]：超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲，这是超平老师解读Python编程挑战赛真题系列的第18讲。全国青少年信息素养大赛（原全国青少年电子信息智能创新大赛）是“世界机器人大会青少年机器人设计与信息素养大赛”赛事之一，由中国电子学会主办，包含很多赛项，大赛自2013年举办，已连

WebGIS开发教程：切片地图服务和动态地图服务的区别以及加载方式

arcgis发布切片地图服务arcgis发布动态地图服务切⽚地图服务和动态地图服务是两种常⻅的Web地图服务类型，它们有以下⼏点区别：1.数据格式：切⽚地图服务是⼀种基于瓦⽚（Tile）数据的地图服务，地图数据被预先切成⼩块并存储在服务器上，⽤户在使⽤时只需加载需要的瓦⽚数据即可；⽽动态地图服务则是⼀种基于⽮量（Vec

面试（架构，网络）

java八股treemap和linkdedhashmap区别，实现原理https://blog.csdn.net/shidebin/article/details/126814905架构https://www.cnblogs.com/crazymakercircle/p/17197091.htmlhttps://www

免费和开源的机器翻译软件LibreTranslate

什么是LibreTranslate？LibreTranslate免费开源机器翻译API，完全自托管。与其他API不同，它不依赖于Google或Azure等专有提供商来执行翻译。它的翻译引擎由开源ArgosTranslate库提供支持。这个软件在2022年3月的时候折腾过，但当时容器会停止，从下面的文章看，应该可能是内存

常用与业务密切相关的prompt

可以在Bard、Bing、Claude2、ChatGPT和Llama2上使用定义您的业务目的和愿景。提示：“我正在[插入行业]创业。我的重点是定义与我的受众产生共鸣的明确目标和愿景。你能指导我制定有意义的愿景声明吗？”研究和分析您的目标市场。提示：“我想了解[插入行业]的目标市场。对他们的需求和行为的详细洞察将塑造我的

《确保安全：PostgreSQL安全配置与最佳实践》

🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🐅🐾猫头虎建议程序员必备技术栈一览表📖：🛠️全栈技术FullStack:📚MERN/MEAN/MEVNStack|🌐Jamstack|🌍GraphQL|🔁RESTfulAPI|⚡WebSockets|🔄CI/CD|🌐Git&Versio

Linux进程【1】进程概念（超详解哦）

进程概念引言（操作系统如何管理）基本概念描述与组织进程查看进程进程pid与ppidgetpid与getppid总结引言（操作系统如何管理）在冯诺依曼体系结构中，计算机由输入设备、输出设备、运算器、控制器和存储器组成。我们使用计算机的时候，实际就是数据在这些硬件中传递的过程。硬件的行为由驱动控制，驱动又由更上层的操作系统

jvm深入研究文档--jvm分区以及职责

Java虚拟机（JVM）主要包括以下几个区域：方法区（MethodArea）：这个区域存储已被加载的类信息，常量，静态变量，即时编译器编译后的代码等数据。方法区是所有线程共享的。在Java8之前，方法区是永久代（PermGen），从Java8开始，永久代被元空间（Metaspace）替代。堆区（Heap）：这是Java

K8S：Pod概念、分类及相关的策略

文章目录一.pod相关概念１.Pod基础概念２.Kubrenetes集群中Pod两种使用方式３.pause容器的Pod中的所有容器共享的资源４.kubernetes中的pause容器主要为每个容器提供功能：５.Kubernetes设计这样的Pod概念和特殊组成结构有什么用意６.Pod分为两类：二.Pod容器的分类1.基

[k8s] 常见yml配置和详细解释

在Kubernetes(K8s)中，常见的YAML文件配置包括：文章目录PodDeploymentServiceClusterIPNodePortLoadBalancerIngressConfigMapSecretVolume访问模式StatefulSetDaemonSetJob容器的重启策略ConJobPodapiV

基于Java的高校科研信息管理系统设计与实现（亮点：完整严谨的科研项目审批流程、多文件上传、多角色）

高校科研信息管理系统一、前言二、我的优势2.1自己的网站2.2自己的小程序（小蔡coding）2.3有保障的售后2.4福利三、开发环境与技术3.1MySQL数据库3.2Vue前端技术3.3SpringBoot框架3.4微信小程序四、功能设计4.1主要功能描述五、系统实现5.1系统主要功能展示5.1.1三个角色展示5.1

热文推荐
  1. 数仓主题域和数据域、雪花模型，星型模型和星座模型

    数仓模型和领域划分一、主题域和数据域的差别二、雪花模型，星座模型和星型模型一、主题域和数据域的差别明确数据域作为数仓搭建的重要一环，能够让数仓的数据便于管理和应用。数据域和主题域都是数据仓库中的重要概念，但含义略有不同，常常作为面试官的面试考点。数据域指的是特定的业务领域或是业务过程，如销售、采购、人力资源管理、财务等

  2. 前端需要知道的计算机网络知识----网络安全,自学网络安全，学习路线图必不可少，【282G】初级网络安全学习资源分享！

    网络安全（英语：networksecurity）包含网络设备安全、网络信息安全、网络软件安全。黑客通过基于网络的入侵来达到窃取敏感信息的目的，也有人以基于网络的攻击见长，被人收买通过网络来攻击商业竞争对手企业，造成网络企业无法正常营运，网络安全就是为了防范这种信息盗窃和商业竞争攻击所采取的措施。随着互联网的高速发展，信

  3. 如何写一份出色的毕业设计任务书

    title:如何写一份出色的毕业设计任务书date:2023-09-20毕业设计任务书是每个毕业生必须面对的关键文档。它不仅是你完成毕业设计的路线图，还是导师评估你工作的依据。因此，撰写一份清晰、详细且具体的任务书至关重要。本文将向你介绍如何编写一份出色的毕业设计任务书。1.确定项目背景和目的任务书的第一部分应该解释你

  4. Mysql优化习惯|建表规约丶SQL规约丶索引规约

    今天看到一个mysql规范,说mysql里面的字符集utf8不是真正的utf8(很感兴趣就去搜索了一下);真正的utf8字符集在mysql里面叫utf8mb4.感兴趣的自己可以去看下这个链接MySQL中的utf8并不是真正的UTF-8编码!!_mysql是真正utf-8_I'msureok!的博客-CSDN博客言归正传

  5. 06-Redis缓存高可用集群

    上一篇：05-Redis高可用集群之水平扩展1.集群方案比较哨兵模式在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态，如果master节点异常，则会做主从切换，将某一台slave作为master，哨兵的配置略微复杂，并且性能和高可用性等各方面表现一般，特别是在主从切换

  6. Rust : 与C多种交互尝试

    rust调用C端的库函数，有很多方法，场景也有所不同。包括windows还是linux，内置库还是自定义库，还是三方库等等。一、rust调用其内置的C库这个很简单，直接把extern"C"引入即可：比如，在rust端main.rs中:usestd::os::raw::c_int;//f32usestd::os::raw

  7. 什么是函数式编程（functional programming）？在JavaScript中如何实现函数式编程的概念？

    聚沙成塔·每天进步一点点⭐专栏简介⭐函数式编程（FunctionalProgramming）⭐纯函数（PureFunctions）⭐不可变性（Immutability）⭐高阶函数（Higher-OrderFunctions）⭐函数组合（FunctionComposition）⭐声明式编程（DeclarativeProg

  8. 第15篇ESP32 idf框架 wifi联网_WiFi AP模式_手机连接到esp32开发板

    第1篇:Arduino与ESP32开发板的安装方法第2篇:ESP32helloword第一个程序示范点亮板载LED第3篇:vscode搭建esp32arduino开发环境第4篇:vscode+platformio搭建esp32arduino开发环境​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼

  9. AI AIgents时代-(三.)AutoGPT和AgentGPT

    前两篇讲解了Agent的原理和组件，这节我将给大家介绍两个agent项目，给出它们的工作原理和区别，并教大家亲手尝试使用Agents🎉🟢AutoGPT🤖️我们的老朋友，之前文章也专门写过。AutoGPT是一个由ToranRichards创建的流行开源项目，github有接近15万星🌟。它利用GPT4作为大脑，结