使用C#开发ChatGPT聊天程序

news/2024/12/30 20:13:56/

使用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
源码下载

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

相关文章

技巧|使用Chatgpt在聊天界面直接显示公式

ChatGPT的使用已经越来越多&#xff0c;从问问题到写代码&#xff0c;但是有些时候&#xff0c;当我们问一些数学问题的时候&#xff0c;由于要显示公式&#xff0c;ChatGPT会直接给我们输出Latex代码。有Latex代码当然是好&#xff0c;我们可以把它放到编辑器编辑即可。 但是说…

和ChatGPT聊天,你会了吗?

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

ChatGPT真的在和我们“聊天”吗?

原创&#xff1a;辛束同学&#xff08;公众号&#xff1a;一只辛束&#xff09; ChatGPT吸引了全世界的注意力&#xff0c;包括我。 近期向ChatGPT抛出了各类奇怪的问题&#xff0c;着实为它所产出的规范且标准的文本所折服&#xff0c;同时这个工具的使用又极其简单&#xff0…

聊天机器人ChatGPT横空出世,今天来看看ChatGPT是如何回答面试官的问题的?

目录 什么是ChatGPTChatGPT回答面试题 在CSDN中向 ChatGPT 提问使用 大家好&#xff0c;我是小冷 ChatGPT热度不断&#xff0c;百度的股票涨了百分数三十多&#xff0c;微软也给对openAI投资了百亿美元。 什么是ChatGPT ChatGPT&#xff0c;是美国“开放人工智能研究中心”研发…

史诗级聊天AI ChatGPT来啦!

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住&#xff0c;它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏&#xff1a;先用ChatG…

和ChatGPT聊天,一定试试这些提问技巧

在和ChatGPT聊天时&#xff0c;要使用清晰简洁的语言&#xff0c;尽量避免使用含糊不清或模糊的词语和语句。 一、首次提问时&#xff0c;用这些方法提问更高效&#xff1a; 1. 用通俗易懂的语言&#xff1a; 尽可能使用通俗易懂的语言提问&#xff0c;不要使用过于专业或难…

聊天新纪元:什么是ChatGPT以及如何使用ChatGPT

文章目录 1. 了解ChatGPT1.1 ChatGPT 的概述1.2 ChatGPT 的应用场景1.2.1 客户支持与服务1.2.2 虚拟助手1.2.3 内容生成与编辑1.2.4 编程与技术支持1.2.5 教育与学习辅导1.2.6 语言翻译1.2.7 创意思维与头脑风暴1.2.8 产品推荐与个性化服务1.2.9 情感支持与心理辅导1.2.10 游戏…

linux安装mysql以及使用navicat连接mysql

目录 一、下载mysql 二、安装mysql 三、使用Navicat连接MySQL 四、常见问题 1、启动服务时报错 Failed to start mysql.service: Unit not found. 的解决方法。 2、登录过程出现&#xff1a;access denied for user’root’‘localhost’(using password:Yes) 的解决方…