使用C#开发ChatGPT聊天程序

使用C#开发ChatGPT聊天程序

总体效果如下：
在这里插入图片描述
源码下载

关键点1：无边框窗口拖动

Window中设置AllowsTransparency="True"、 Background="Transparent"以及WindowStyle="None"这样设置的话默认窗口的标题栏为不可见状态，且无法用鼠标拖动，使用windowChorme来解决

<WindowChrome.WindowChrome><WindowChrome CaptionHeight="50" UseAeroCaptionButtons="False" />
</WindowChrome.WindowChrome>

该设置的详细讲解参见WPF之Window无边框拖动、特殊形状、Grid拖拽

关键点2：输入栏实现删除按钮

在这里插入图片描述

  1. 定义TextBox的ControlTemplate模板（节取重要部分）
<Style x:Key="TextBoxPromote" TargetType="{x:Type TextBox}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBox}"><Borderx:Name="border"CornerRadius="6"<DockPanel LastChildFill="True"><!--新增btn按钮,并绑定Click事件--><Buttonx:Name="btn"Grid.Column="1"Background="White"BorderThickness="0"Click="Button_Click"Content="&#xe8d5;"DockPanel.Dock="Right"FontFamily="./img/#iconfont" /><ScrollViewerx:Name="PART_ContentHost"DockPanel.Dock="Left"Focusable="false"HorizontalScrollBarVisibility="Hidden"VerticalScrollBarVisibility="Hidden" /></DockPanel></Border><ControlTemplate.Triggers><!--新增DataTrigger，当Text属性部位为空时，不显示按钮，Hiddern表示不显示，但是用空格来代替按钮来保持布局，而Collapsed则是不显示且不保留空格--><DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value=""><Setter TargetName="btn" Property="Visibility" Value="Collapsed" /></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
  1. 实现Button按钮事件
private void Button_Click(object sender, RoutedEventArgs e)
{Button? btn = sender as Button;if (btn != null){var parent = VisualTreeHelper.GetParent(btn);while (!(parent is TextBox)){parent = VisualTreeHelper.GetParent(parent);}TextBox txt = parent as TextBox;if (txt != null){txt.Clear();}}
}

关键点3：ListBox实现聊天效果

本文使用ListBox来完成消息框的展示，因为涉及到发送和收到两种类型的消息，应该对应两种不同格式，所以会用到样式选择器，不知道怎么用的小伙伴可以看一下这篇文章WPF控件模板、数据模板、容器样式选择器。

  1. 定义选择器类

    public class DateTemplateSelector:DataTemplateSelector
{public DataTemplate SendTemplate { get; set; }public DataTemplate ResTemplate { get; set; }public override DataTemplate SelectTemplate(object item, DependencyObject container){Message message = (Message)item;if (message.IsSend){return SendTemplate;}else{return ResTemplate;}}
}

  2. 在Windwo.Resources中定义数据模板

发送模板

<DataTemplate x:Key="chatSend"><StackPanelx:Name="SendMsg"Margin="0,12,20,0"HorizontalAlignment="Right"Orientation="Horizontal"><StackPanel Margin="0,0,10,0" Orientation="Vertical"><!--  消息内容  --><BorderMinWidth="50"MinHeight="30"MaxWidth="{Binding Path=ActualWidth,ElementName=borderWidth}"Background="#c8dd1f"BorderBrush="#ddd"BorderThickness="1"CornerRadius="8,0,8,8"><TextBoxMinWidth="30"Margin="8"VerticalAlignment="Center"Background="Transparent"BorderThickness="0"FontSize="14"IsReadOnly="True"Text="{Binding Msg}"TextWrapping="WrapWithOverflow" /></Border></StackPanel><!--  头像  --><BorderWidth="35"Height="35"Margin="0,2,0,0"VerticalAlignment="Top"BorderThickness="0"><Border.Background><ImageBrush ImageSource="/img/user.jpg" /></Border.Background></Border></StackPanel>
</DataTemplate>

接收模板

<DataTemplate x:Key="chatRes"><StackPanelx:Name="SendMsg"Margin="0,12,20,0"HorizontalAlignment="Right"Orientation="Horizontal"><!--  头像  --><BorderWidth="35"Height="35"Margin="0,2,0,0"VerticalAlignment="Top"BorderThickness="0"><Border.Background><ImageBrush ImageSource="/img/图标ChatGPT.ico" /></Border.Background></Border><StackPanel Margin="0,0,10,0" Orientation="Vertical"><!--  消息内容  --><BorderMinWidth="50"MinHeight="30"MaxWidth="{Binding Path=ActualWidth,ElementName=borderWidth}"Background="#c8dd1f"BorderBrush="#ddd"BorderThickness="1"CornerRadius="0,8,8,8"><TextBoxMinWidth="30"Margin="8"VerticalAlignment="Center"Background="Transparent"BorderThickness="0"FontSize="14"IsReadOnly="True"MaxLength="25"Text="{Binding Msg}"TextWrapping="WrapWithOverflow" /></Border></StackPanel></StackPanel>
</DataTemplate>
  1. 因为发送消息和接受消息的对齐方式不同，一个是左一个是右，所以要定义下ListBox.ItemContainerStyle
<Style x:Key="listViewItemStyle" TargetType="{x:Type ListBoxItem}"><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><BorderName="Bd"Margin="1"Padding="{TemplateBinding Padding}"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"SnapsToDevicePixels="true"><ContentPresenterMargin="1"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></Border></ControlTemplate></Setter.Value></Setter><!--判断是否为发送，从而使用不同的对齐方式--><Style.Triggers><DataTrigger Binding="{Binding IsSend}" Value="True"><Setter Property="HorizontalContentAlignment" Value="Stretch" /></DataTrigger><DataTrigger Binding="{Binding IsSend}" Value="False"><Setter Property="HorizontalContentAlignment" Value="Left" /></DataTrigger></Style.Triggers>
</Style>
  1. 为了实现ListBox始终保持下拉到最后的状态，自定义类，重写OnItemsChanged方法
class ScrollingListBox : ListBox
{protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e){if (e.NewItems == null) return;var newItemCount = e.NewItems.Count;if (newItemCount > 0)this.ScrollIntoView(e.NewItems[newItemCount - 1]);base.OnItemsChanged(e);}
}
  1. XAML中设置
<!--  消息显示区  -->
<!--设置ScrollViewer.CanContentScroll="False"可以使得滚动条更加丝滑-->
<local:ScrollingListBox Grid.Row="0"BorderBrush="#D3D3D3"BorderThickness="0,1,0,1"ItemsSource="{Binding Path=Messages, ElementName=mainWindow}"ScrollViewer.HorizontalScrollBarVisibility="Disabled"ScrollViewer.CanContentScroll="False"SelectionMode="Extended"><ListBox.ItemTemplateSelector><local:DateTemplateSelector ResTemplate="{StaticResource chatRes}" SendTemplate="{StaticResource chatSend}" /></ListBox.ItemTemplateSelector><ListBox.ItemContainerStyle><Style BasedOn="{StaticResource listViewItemStyle}" TargetType="{x:Type ListBoxItem}" /></ListBox.ItemContainerStyle>
</local:ScrollingListBox>

如何调用OpenAI的接口，及各种常用参数的设置参见C#/.Net开发chatGPT、openAI
源码下载

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于vue3+pinia2仿ChatGPT聊天实例|vite4.x仿chatgpt界面

基于vue3+pinia2仿ChatGPT聊天实例|vite4.x仿chatgpt界面

使用vue3pinia2开发仿制chatgpt界面聊天实例Vue3-Chatgpt 基于Vue3.xPinia2VueRouterVue3-Markdown等技术构建仿ChatGPT网页端聊天程序。支持经典分栏界面布局、light/dark模式、全屏半屏显示、Markdown语法解析、侧边栏隐藏等功能。 技术框架 编辑工具&#xff1a;Cursor框架…
阅读更多...
ChatGPT聊天app(基于autojs)

ChatGPT聊天app(基于autojs)

这是一个调用ChatGPT的例子 在安卓上运行&#xff0c;我已经打包好了的 下面是测试功能 我已经打包好了&#xff0c;图方便用的是auto.js写的,你也可以用原生安卓写 我用蓝奏浏览器分享了[ChatGPT测试_1.0.0], 下载链接:https://wwp.lanzoup.com/iL8Q50nab43c 提取码 : wumi…
阅读更多...
和ChatGPT聊天，你会了吗？

和ChatGPT聊天，你会了吗？

​前段时间发了一篇关于ChatGPT的帖子&#xff0c;很多网友问我&#xff0c;为什么他们跟ChatGPT的聊天得不到他们想要的答案。今天就聊聊如何跟ChatGPT沟通这件事。 首先我们先了解下ChatGPT有那些功能&#xff0c;可以做哪些事情。ChatGPT基于 OpenAI 的大型语言模型。被训练…
阅读更多...
在pycharm运行chatGPT聊天机器人

在pycharm运行chatGPT聊天机器人

1.准备一个OPENAI的API_KEY。 2.在pycharm中新建一个GPT-3.5.py&#xff1a; import openai # 填入你的api_key openai.api_key ""models openai.Model.list()# 定义API参数 params {role: "user", "content": }# 定义循环 while True:# 获…
阅读更多...
Chatgpt聊天界面H5软件定制开发

Chatgpt聊天界面H5软件定制开发

要进行ChatGPT聊天界面H5软件定制开发&#xff0c;需要考虑以下几个方向&#xff1a; UI设计和交互体验&#xff1a;根据需求和用户特点&#xff0c;进行界面设计&#xff0c;包括颜色、字体、图标等方面的调整&#xff0c;以提供更符合用户习惯和审美的交互界面&#xff0…
阅读更多...
java及python调用ChatGPT聊天接口示例

java及python调用ChatGPT聊天接口示例

一、接口信息 接口地址&#xff1a;https://www.1bit.asia/openai/api/ask 类型&#xff1a;POST 参数&#xff1a;{"prompt":"写一个修仙小说目录","userName":"apiuser002","token":"链接页面获取" } 说明&am…
阅读更多...
初识Python -- 使用Python完成chatgpt聊天功能

初识Python -- 使用Python完成chatgpt聊天功能

运行前需设置环境变量&#xff1a; export OPENAI_API_ORIGANorg-你的组织id export OPENAI_API_KEYsk-IlhlSea你的apikey更多参数说明&#xff1a;https://platform.openai.com/docs/api-reference/chat 运行效果&#xff1a; 基于stream流式返回&#xff0c;逐字打印回答内…
阅读更多...
chatgpt聊天 谷歌chatGpt

chatgpt聊天 谷歌chatGpt

ChatGPT作品展示&#xff1a; 由于足球冠军的获得是由多个国家参与的&#xff0c;因此中国队夺得足球冠军的概率是不可预测的。 最近发现很多科技公司都在搞ChatGPT&#xff0c;我们普通网民没有技术也想体验一下当下比较火的ChatGPT的人工智能&#xff0c;没有开发的我们有什么…
阅读更多...
chatgpt聊天机器人程序开发

chatgpt聊天机器人程序开发

ChatGPT聊天机器人具有以下主要功能&#xff1a; 自然语言交互&#xff1a;用户可以使用自然语言与聊天机器人进行交互&#xff0c;例如提问、反馈等。 问题回答&#xff1a;聊天机器人可以通过自然语言处理技术&#xff0c;对用户的问题进行理解和分析&#xff0c;并给…
阅读更多...
全开源chatGPT聊天机器人商业版源码 支持魔改 完全开放源代码

全开源chatGPT聊天机器人商业版源码 支持魔改 完全开放源代码

正文&#xff1a; 全开源chatGPT聊天机器人商业版源码 支持魔改 完全开放源代码CHATGPT商业源码 支持魔改 全开源 无后门 全开源 随意改! 云盘地址&#xff1a; http://zijieyunpan.cn/PEpjOyeLuuK 图片&#xff1a;
阅读更多...
vue 模拟 chatgpt 聊天效果：js 实现逐字显示、延时函数模拟对话

vue 模拟 chatgpt 聊天效果：js 实现逐字显示、延时函数模拟对话

vue 模拟 chatgpt 聊天效果&#xff1a;js 实现逐字显示、延时函数模拟对话 模拟 chatgpt 聊天功能&#xff0c;展示对话效果。其中比较有意义的技术点是&#xff1a;js 实现逐字显示、延时函数&#xff0c;同步遍历。 <template><div class"chat-gpt">…
阅读更多...
3分钟自定义你的chatGPT聊天微信机器人

3分钟自定义你的chatGPT聊天微信机器人

背景 最近chatGPT实在太火了&#xff0c;不谈下都不好意思说自己在技术圈混了&#xff0c;刚好前段时间公司里面在举办一个企业微信机器人比赛&#xff0c;然后就用注册了openai的一个账号&#xff0c;用python写了一个玩玩&#xff0c;但是想想不过瘾只能公司内部体验&#x…
阅读更多...
全开源chatGPT聊天机器人商业版源码

全开源chatGPT聊天机器人商业版源码

下载&#xff1a;https://download.csdn.net/download/qq_45102995/87772789 全开源chatGPT聊天机器人商业版源码完全开放源代码 CHATGPT商业源码 全开源 全开源 随意改!
阅读更多...
ChatGPT聊天机器人程序

ChatGPT聊天机器人程序

ChatGPT聊天机器人程序是一种基于人工智能技术的智能对话程序&#xff0c;利用ChatGPT等自然语言处理模型和算法实现与用户的交互&#xff0c;回答问题、提供服务等。 ChatGPT聊天机器人程序通常包括以下模块&#xff1a; 输入模块&#xff1a;用于接收用户输入的信息&…
阅读更多...
ChatGPT聊天软件开发

ChatGPT聊天软件开发

ChatGPT聊天软件是一款基于OpenAI技术训练的智能AI对话软件&#xff0c;具有自然语言处理、问答系统、语音交互等多种功能。用户可以通过输入文字或语音与ChatGPT进行互动&#xff0c;询问问题&#xff0c;获取信息以及进行娱乐和休闲。ChatGPT聊天软件支持多语言&#xff0c;为…
阅读更多...
2023 ChatGPT聊天网站html源码

2023 ChatGPT聊天网站html源码

聊天GPT-Web ChatGPT&#xff0c;页面与官方页面的 API 独立。基于ChatGPT API的ChatGPT网页版&#xff0c;无登录障碍&#xff0c;功能丰富。 2023 ChatGPT聊天网站html源码
阅读更多...
一百行代码实现搭建简易版 ChatGPT 聊天机器人，网页搭建

一百行代码实现搭建简易版 ChatGPT 聊天机器人，网页搭建

最近&#xff0c;OpenAI 的一款聊天机器人模型 ChatGPT 爆火。本篇文章旨在为大家提供一款简易的聊天机器人&#xff0c;只需一百行代码即可制作。话不多说&#xff0c;先上效果&#xff1a; 一百行代码实现简易版chatgpt聊天机器人 CSS代码&#xff1a; .container-fluid {p…
阅读更多...
一键导出ChatGPT聊天记录：让备份更简单

一键导出ChatGPT聊天记录：让备份更简单

重要性&#xff1a; 备份ChatGPT的聊天记录同样非常重要&#xff0c;因为这些记录可能包含了您与ChatGPT的交互记录&#xff0c;这些记录可能包含了您的个人信息、兴趣爱好、偏好和其他敏感信息。以下是备份ChatGPT聊天记录的一些重要性&#xff1a; 防止数据丢失&#xff1a;…
阅读更多...
基于小程序制作一个ChatGPT聊天机器人

基于小程序制作一个ChatGPT聊天机器人

在AI技术日新月异的浪潮中，将ChatGPT与实战开发相结合，制作一个随身携带的聊天机器人，紧贴前沿的同时稳固基础。 一、前言1.1、什么是ChatGPT1.2、什么是文本完成二、API2.1、ChatGPT官网申请API所需要的key2.2、搭建API2.3、创建控制器及动作方法三、小程序3.1、页面创建3.…
阅读更多...
chatGPT聊天记录消失如何找回

chatGPT聊天记录消失如何找回

言归正传 记录并没有消失&#xff0c;只是无法显示到侧面列表&#xff0c;搜索浏览器历史记录就可以找回了 每次聊天都有一个独特的地址&#xff1a;/chat/xxxx-xxx-xxxxx-xx 查看浏览器历史记录&#xff0c;搜索以上关键字&#xff0c;找到旧的网址 打开旧的网址&#xff…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023