项目开源地址: XTA-AI-SDK
人工智能技术的迅速发展,AI聊天应用变得越来越流行。本文将介绍如何使用Go语言和LCL库( Lazarus Component Library)创建一个功能丰富的AI聊天界面。项目主要包含以下模块:
项目背景
本项目旨在为开发者提供一个易于使用且功能全面的AI聊天界面。用户可以通过该界面与AI模型进行交互,上传文件,查看聊天记录,并保存对话内容。界面使用LCL库进行开发,确保跨平台兼容性。
功能模块
1. 主窗口实现
主窗口是应用的核心界面,包含消息显示区、聊天输入框、文件选择按钮等组件。以下是关键实现细节:
- 消息显示区(Memo组件):用于显示用户输入的消息和AI的回复。支持滚动条,方便查看历史消息。
- 聊天输入框(Memo组件):用户在此输入消息,支持多行输入和自动换行。
- 文件选择按钮:允许用户选择单个或多个文件,点击后会弹出文件选择窗口。
关键代码片段:
go
// 初始化主窗口组件
func (m *TMainWindow) initMainBox() {
go m.initXTASDK()
// 创建ComboBox用于选择AI模型
modules := lcl.NewComboBox(m)
modules.SetParent(m)
modules.SetLeft(150)
modules.Items().AddStrings2(chat.GiteeAIModels())
modules.SetItemIndex(17)
modules.SetHeight(35)
modules.SetWidth(300)
modules.Font().SetSize(12)
modules.SetOnChange(func(sender lcl.IObject) {
module := chat.GiteeAIModelNameEnum(modules.Items().Strings(modules.ItemIndex()))
m.ai.SetModel(module)
m.message.Lines().Add("模型: " + m.ai.Name())
m.SetCaption(m.title + " " + m.ai.Name())
})
}
2. 文件选择与预览
文件选择窗口允许用户选择文件,并预览文件内容。用户可以选择多个文件,并为每个文件添加描述。窗口使用FileWindow
结构体实现。
关键代码片段:
go
// 创建文件选择窗口
func createWindow(files []string, ok func(window *FileWindow)) *FileWindow {
form := lcl.NewForm(lcl.Application)
form.SetPosition(types.PoScreenCenter)
form.SetWidth(300)
form.SetHeight(200)
form.SetBorderStyleForFormBorderStyle(types.BsNone)
form.SetColor(colors.ClAzure)
window := &FileWindow{IForm: form, id: time.Now().String()}
// 创建文件描述标签和文本框
fileLabel := lcl.NewLabel(form)
fileLabel.SetParent(form)
fileLabel.SetWidth(form.Width())
fileLabel.SetLeft(5)
fileLabel.SetTop(5)
fileLabel.SetCaption("文件描述和作用")
window.text = lcl.NewMemo(form)
window.text.SetParent(form)
window.text.SetBorderStyle(types.BsSingle)
window.text.SetHeight(170)
window.text.SetWidth(300)
window.text.SetTop(30)
window.text.Font().SetSize(12)
// 确认按钮点击事件
okBtn := lcl.NewButton(form)
okBtn.SetParent(form)
okBtn.SetCaption("确认")
okBtn.SetWidth(50)
okBtn.SetTop(form.Height() - 30)
okBtn.SetLeft(form.Width() - 60)
okBtn.SetOnClick(func(sender lcl.IObject) {
// 读取文件内容并存储
for i, file := range files {
_, name := filepath.Split(file)
if i > 0 {
window.filenames += ", "
}
window.filenames += name
data, err := ioutil.ReadFile(file)
if err == nil {
buf := bytes.Buffer{}
buf.WriteString(name + "\n")
buf.Write(data)
buf.WriteString("\n")
fmt.Println("文件:", file, "大小:", buf.Len())
window.fileContent = append(window.fileContent, buf.String())
}
}
window.fileDesc = window.text.Text()
form.Hide()
if ok != nil {
ok(window)
}
})
return window
}
3. AI交互实现
AI交互模块通过调用Gitee的AI SDK实现。用户输入的消息和上传的文件内容会被发送到AI服务器,接收并处理回复。
关键代码片段:
go
// 初始化AI SDK
func (m *TMainWindow) initXTASDK() {
options := chat.DefaultGiteeAIOptions
options.APIKey = os.Getenv(chat.ENV_AI_API_KEY)
m.ai = chat.NewGiteeAI(options, false)
m.ai.SetOnReceive(func(message *chat.TResponse) {
lcl.RunOnMainThreadAsync(func(id uint32) {
if message != nil {
if message.Error != "" {
s := fmt.Sprintf("错误: %v %v", message.Error, message.ErrorType)
m.message.Lines().Add(s)
if m.saveFileBuf != nil {
m.saveFileBuf.WriteString(s)
m.saveFileBuf.Flush()
}
}
choices := message.Choices
for _, choice := range choices {
if strings.Contains(choice.Delta.Content, "\n") {
m.message.Lines().Add(choice.Delta.Content)
} else {
m.message.SetSelStart(int32(len(m.message.Lines().Text())))
m.message.SetSelText(choice.Delta.Content)
}
if m.saveFileBuf != nil {
m.saveFileBuf.WriteString(choice.Delta.Content)
m.saveFileBuf.Flush()
}
}
} else {
fmt.Println("结束")
m.message.Lines().Add("")
m.chatBtn.SetEnabled(true)
}
})
})
}
4. 消息保存功能
用户可以选择将聊天记录保存为文本文件。保存功能通过SaveDialog
实现,支持选择保存路径和文件名。
关键代码片段:
go
// 保存聊天记录
m.saveChatBtn.SetOnClick(func(sender lcl.IObject) {
if m.saveDirDlg.Execute() {
m.savePathInp.SetText(m.saveDirDlg.FileName())
}
})
使用说明
- 安装依赖 :确保安装了Go语言环境,并通过
go get
命令安装所需的依赖库。 - 配置API密钥:在环境变量中设置Gitee AI的API密钥。
- 运行应用:编译并运行项目,即可看到主界面。
- 选择文件:点击"选择文件/多选"按钮,选择需要上传的文件,并填写描述。
- 输入消息:在聊天输入框中输入消息,点击"发送"按钮与AI交互。
- 保存聊天:点击"保存消息"按钮,选择保存路径和文件名,保存当前聊天记录。
总结
通过以上模块的实现,我们成功创建了一个功能全面的AI聊天界面。项目使用了LCL库进行GUI开发,结合Gitee的AI SDK实现了智能交互。未来,可以根据需求扩展更多功能,如支持更多AI模型、增加语音输入输出等。
