学习.NET MAUI Blazor(七)、实现一个真正的ChatGPT聊天应用

news2024/11/14 23:26:19

今天在新闻上看到一条消息,OpenAI已经开放了ChatGPT的接口,也就是GPT-3.5,对比原来的GPT-3,增加了gpt-3.5-turbogpt-3.5-turbo-0301两个模型。

  • gpt-3.5-turbo:使用最新的GPT-3.5模型,并针对聊天进行了优化,使用最新的模型进行迭代
  • gpt-3.5-turbo-0301:属于 gpt-3.5-turbo的快照,此模型不会进行更新,并且在2023年6月1日停止支持
    因此,我们使用gpt-3.5-turbo就可以了。

对于GPT-3,GPT-3.5是支持上下文的。通过API,我们可以完成完整的聊天了。gpt-3.5-turbo的API如下:

  • model:我们使用gpt-3.5-turbo
  • messages:数组形式,例如:[{"role": "user", "content": "Hello!"}]role分为三种角色,分别是systemassistantuser
  • temperature:取值是0-2,
  • top_p:默认值是1,
  • n:默认值是1
  • stream:默认值是false
  • stop:默认值是null
  • max_tokens:最大值是4096
  • presence_penalty:默认值是0
  • frequency_penalty:默认值是0
  • logit_bias:默认值是null
    其中,modelmessages是必填的,其他,我们采用默认值就可以了
    根据上一篇文章,学习.NET MAUI Blazor(六)、基于OpenAI接口的伪ChatGPT,我们还是使用开源的SDK类库OpenAI-DotNet,该类库于3月2日升级到了5.0版本,新增了Chat接口,这样就可以实现聊天应用了。接着上一篇文章,我们来做一个真正的ChatGPT对话功能。

打开Shared/NavMenu.razor,修改内容如下:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">OpenAI</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> 文本
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="chat" Match="NavLinkMatch.All">
                <span class="oi oi-chat" aria-hidden="true"></span> 对话
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="code">
                <span class="oi oi-plus" aria-hidden="true"></span> 代码
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="image">
                <span class="oi oi-list-rich" aria-hidden="true"></span> 图像
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

接着在Pages目录下,新建一个Chat.razor。页面内容如下:

@using System.Text;
@using Mode;
@page "/chat"
<MContainer Class="spacing-playground pa-6 pr h-100" Fluid>
    <MSkeletonLoader Class="mb-12 h-full w-100" Boilerplate="@Boilerplate" Elevation="2" Loading="@Boilerplate" Type="article, actions">
        <ChildContent>
            <MRow Class="h-full body_row">
                <MCol Class="d-flex answers_box" Cols="24" Sm="12">
                    <MVirtualScroll Class="answer_list_box" Items="_items" @ref="_vs">
                        <ItemContent>
                            <MListItem Class=" d-flex flex-column">
                                <div class="question_items d-flex flex-row w-100">
                                    <div class="quest_img"><img src="image/user.png" /></div>
                                    <div class="question_txt">@context.question</div>
                                </div>
                                <div class="answers_items d-flex flex-row  w-100">
                                    <div class="answer-img"><svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-6 w-6"><path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor"></path></svg></div>
                                    <div class="answer-txt">@context.answer</div>
                                </div>
                            </MListItem>
                        </ItemContent>
                    </MVirtualScroll>
                </MCol>
            </MRow>
            <div class="footer_box">
                <div class="d-flex justify-content-center">
                    <div class="col-18 col-sm-9">
                        <div class="send_box">
                            <textarea class="send_input" @bind="question"></textarea>
                            <MButton Class="send_btn" Fab Small Color="primary" OnClick="RequestAnswers"><MIcon Size="14">mdi-send-outline</MIcon></MButton>
                        </div>
                    </div>
                </div>

            </div>
        </ChildContent>
        </MSkeletonLoader>


        </MContainer>

编写Code代码

@code {

    public string question = "";
    private bool Boilerplate = false;

    private MVirtualScroll<QA> _vs;
    private List<OpenAI.Chat.ChatPrompt> chatPromptsList = new List<OpenAI.Chat.ChatPrompt>();
    private List<QA> _items = new();

    private async Task RequestAnswers()
    {
        Boilerplate = true;

        var api = new OpenAI.OpenAIClient(new OpenAI.OpenAIAuthentication(OpenAIConfig.api_key));
        OpenAI.Chat.ChatPrompt chatPrompt = new OpenAI.Chat.ChatPrompt("user", question);
        chatPromptsList.Add(chatPrompt);
        var chatRequest = new OpenAI.Chat.ChatRequest(chatPromptsList);
        QA qa = new();
        qa.question = question;
        var result = await api.ChatEndpoint.GetCompletionAsync(chatRequest);
        string answer = result.FirstChoice.Message.Content;

        answer = answer.ReplaceFirst("\r", "").ReplaceFirst("\n", "");
        qa.answer = answer;
        _items.Add(qa);

        

        Boilerplate = false;
    }

}

至此,一个简单的聊天应用就完成了。运行效果如下:
在这里插入图片描述
从运行效果来看,使用GPT-3.5的接口,确实支持上下文了。

总结
注册了openai的账号,送的18刀比较耐用,自己玩了很久,才用了不到1刀。所以,下载下来,尽情玩耍吧。

实例完整源码下载

点击下方公众号卡片,关注我,回复1003 下载!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

和风SDK查询城市ID(保姆级教程)

android studio版本&#xff1a;2021.2.1例程名&#xff1a;hfserachcityid这几天没什么事做&#xff0c;而且我原来那个“项目”因为免费api不能用了&#xff0c;只能改为和风的免费api,但需要申请&#xff0c;而且还要城市ID&#xff0c;玩天气的基本都知道城市ID这个东西&am…

公司章程包括了哪些内容

一、公司章程包括了哪些内容 《中华人民共和国公司法》第11条规定&#xff1a;“设立公司必须依法制定公司章程。公司章程对公司、股东、董事、监事、高级管理人员具有约束力。”明确地强调了公司章程对于公司的重要性&#xff0c;公司章程对于公司而言不但是股东合意达成的协…

葵花8号卫星数据简介与下载笔记

1、葵花8号卫星数据简介JMA于2015年7月7日开始运营Himawari-8&#xff0c;以取代MTSAT-2&#xff08;也称为Himawari-7&#xff09;。 Himawari-9号卫星于2017年3月10日开始后备运行。两颗卫星都位于向东约140.7度的轨道上&#xff0c;并将观测东亚和西太平洋区域15年。 源自Hi…

【项目实战】IDEA常用快捷键汇总

一、修改为Eclipse的快捷键 相信很多朋友跟我一样&#xff0c; 都是习惯了eclipse的快捷键&#xff0c;没错&#xff0c;习惯这东西真的很难改&#xff01;IDEA非常强大&#xff0c;支持我们修改IDEA中的keymap为Eclipse的快捷键&#xff01;友好又贴心&#xff0c;有没有&…

大数据框架之Hadoop:MapReduce(四)Hadoop数据压缩

4.1概述 1、压缩概述 压缩技术能够有效减少底层存储系统&#xff08;HDFS&#xff09;读写字节数。压缩提高了网络带宽和磁盘空间的效率。在运行MR程序时&#xff0c;IO操作、网络数据传输、shuffle和Merge要花大量的时间&#xff0c;尤其是数据规模很大和工作负载密集的情况…

3月2日第壹简报,星期四,农历二月十一

3月2日第壹简报&#xff0c;星期四&#xff0c;农历二月十一坚持阅读&#xff0c;静待花开1. 第三次延期&#xff01;财政部&#xff1a;对于购置期在2023年的新能源汽车继续免征车辆购置税。2. 我国2月份制造业PMI为52.6% &#xff0c;创2012年4月以来新高。3. 全国地级市财力…

深入浅出消息队列MSMQ

消息队列MSMQ&#xff0c;相信稍有开发经验的小伙伴都了解一些。开始讲解之前&#xff0c;我们先弄清楚一件事&#xff0c;为什么我们要使用MSMQ&#xff1a; 您可能认为您能够通过一个简单的数据库表(一个应用程序往其中写入数据&#xff0c;另一个应用程序从中读取数据)来应用…

采编式AIGC视频生产流程编排实践

作者 | 百度人工智能创作团队 导读 本文从业务出发&#xff0c;系统介绍了采编式 TTV的实现逻辑和实现路径。结合业务拆解&#xff0c;实现了一个轻量级服务编排引擎&#xff0c;有效实现业务诉求、高效支持业务扩展。 全文6451字&#xff0c;预计阅读时间17分钟。 01 背景 近…

WebRTC之RTP封装与解封装

1 前言rtp_rtcp模块作为Webrtc组件中非常重要的组成部分&#xff0c;首先是对应rtp和rtcp的封装与解封装&#xff0c;第二部分是对QOS各种策略的支持都离不开rtcp的控制协议。这里首先进行协议封装的探讨。2 RTP协议解析各个音视频的大佬对下面这张RTP协议图应该并不陌生&#…

ChatGPT到底是个啥?简析ChatGPT!

目录 ​编辑 1. ChatGPT到底是个啥&#xff1f; 1.1. 简介 1.2 玩法 1.2.1.生成公司理念、生成广告标语 1.2.2.写小说写故事写情书 1.2.3.生成自媒体文案 1.2.4.写代码 2.简析ChatGPT 2.1.ChatGPT核心能力 2.2.ChatGPT进化史 2.2.1.历史沿革 2.2.2.算法 2.3.ChatGPT特…

k8s学习之路 | Pod 基础

文章目录Pod 基础认知什么是 PodPod 的示例 yamlPod 的形式Pod 的多容器协同Pod 的生命周期容器的类型应用容器初始化容器临时容器静态 Pod什么是静态 Pod静态 Pod 位置Pod 探针机制探针类型Probe 配置项探针案例Pod 基础认知 什么是 Pod https://kubernetes.io/zh-cn/docs/c…

Word处理控件Aspose.Words功能演示:使用 Java 合并 MS Word 文档

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c; Aspose API支持流行文件格式处…

Overlay网络技术

大家好&#xff0c;我是技福的小咖老师。 Overlay网络是通过网络虚拟化技术&#xff0c;在同一张Underlay网络上构建出的一张或者多张虚拟的逻辑网络。不同的Overlay网络虽然共享Underlay网络中的设备和线路&#xff0c;但是Overlay网络中的业务与Underlay网络中的物理组网和互…

aardio - 【库】简单信息框

昨晚得知aardio作者一鹤的妻子病情严重&#xff0c;深感悲痛。今日给一鹤捐赠少许&#xff0c;望其妻能挺过难关&#xff0c;早日康复。 aardio是一个很好的编程工具&#xff0c;我非常喜欢&#xff0c;这两年也一直在用。虽然未曾用其获利&#xff0c;但其灵活的语法&#xff…

操作系统真相还原——第7章 中断

中断&#xff1a;CPU 暂停正在执行的程序&#xff0c;转而去执行处理该事件的程序&#xff0c;当这段程序执行完毕后&#xff0c; CPU 继续执行刚才的程序。 通常&#xff0c;中断牺牲的是个体的时间&#xff0c;但可以实现多设备的并发&#xff0c;从而提高系统效率 操作系统…

评估Jupyter环境的安全性

评估Jupyter环境的安全性 如何判断您的 Jupyter 实例是否安全&#xff1f; NVIDIA AI 红队开发了一个 JupyterLab 扩展来自动评估 Jupyter 环境的安全性。 jupysec 是一种根据近 100 条规则评估用户环境的工具&#xff0c;这些规则检测配置和工件&#xff0c;这些配置和工件已被…

暴力递归到动态规划

暴力递归到动态规划 假设有排成一行的n个位置&#xff0c; 记为1~n&#xff0c;n-定大于或等于2。开始时机器人在其中的m位置上(m 一定是1~n中的一个)。如果机器人来到1位置&#xff0c;那么下一步只能往右来到2位置&#xff1b;如果机器人来到n位置&#xff0c; 那么下一步只能…

js中splice方法和slice方法

splice方法用来操作数组splice(startIndex,deleteNum,item1,....,)此操作会改变原数组。删除数组中元素参数解释&#xff1a;startIndex为起始index索引。deleteNum为从startIndex索引位置开始需要删除的个数。分三种情况&#xff1a;没有传第三个参数的情况下&#xff0c;dele…

pytest两种生成测试报告的方法——html

pytest有两种生成测试报告的方法&#xff08;html和allure&#xff09;&#xff0c;今天就给大家一介绍下html 一.pytest-html基本语法 1.安装&#xff1a;pip install pytest-html 2.查看版本&#xff1a;pip show pytest-html 3.生成测试报告基本语法&#xff1a; 语法一…

STM32物联网项目之程序框架

前言&#xff1a; 这个系列&#xff0c;我主要写我用32f103实现的各种功能模块&#xff0c;已经程序编写过程中&#xff0c;硬件调试中出现的问题&#xff0c;一边记录&#xff0c;一边分享&#xff0c;一边复盘。 使用的是STM32cubemax&#xff0c;自动生成代码&#xff0c;…