Bootstrap

腾讯云AI代码助手编程挑战赛-智能聊天助手

作品简介

本作品开发于腾讯云 AI 代码助手编程挑战赛,旨在体验腾讯云 AI 代码助手在项目开发中的助力。通过这一开发过程,体验到了 AI 辅助编程的高效性。

技术架构

前端: 使用 VUE3、TypeScript、TDesign 和 ElementUI 实现。
后端: 基于 Python 开发,集成了智谱大模型的 API,涵盖语言处理、图像理解和视频生成能力。

实现过程

开发过程

我想做的就是一个可以通过对话就可以满足用户所有需求的聊天工具,页面上不需要有多余的操作。目前可以分析用户的图片分析意图和视频生成意图,后续还可以加入一些联网的功能,比如搜索车次信息,天气信息等…

  1. 后端服务
    开发工具: PyCharm。
    大模型支持: 使用智谱的大语言模型、图像理解模型和视频生成模型。
    服务接口:
    流式对话接口: 支持实时返回普通对话结果。
    普通对话接口: 支持普通对话并一次性返回响应结果,同时支持图片理解和视频生成功能。用户可以上传图片并结合描述需求生成相应的结果。
  2. 前端开发
    开发工具: VSCode。
    前端页面:
    流式对话菜单: 基于 TDesign 组件构建,实现实时聊天页面功能。
    多模态对话菜单: 使用 ElementUI 实现,与流式对话菜单相比,增加了图片上传功能,支持结合图片和用户需求生成结果。

关键技术解析

  1. 生成消息类型判断:
  • 前端未加入返回消息类型的判断逻辑,服务端需要根据用户提问分析响应类型。
  • 解决方案: 单独调用一次语言模型,并基于 LangGPT 架构编写系统 prompt,从而精准判断调用的模型及其返回结果。
  1. 上传图片判断:
  • 用户问题可能无法直接体现与图片相关的意图。
  • 解决方案: 若检测到用户上传图片,服务端会自动拼接字段 “已上传图片”,帮助模型更准确地识别用户需求。
  1. 流式响应结果:
  • 服务端需循环返回响应内容,前端则动态接收并实时拼接展示,确保流畅的用户体验。

腾讯云AI代码助手的助力

背景
本人对 Python 不够熟练,TDesign 组件也是首次使用,开发中时常遇到想法难以实现的问题。
腾讯云 AI 代码助手在以下方面提供了显著帮助:

  1. 解决编码问题与提升效率:

例如: 开发时需要为所有工具方法创建一个 ZhipuAI 客户端实例,但不清楚如何实现单例模式。AI 助手提供了解决方案,将实例提取到公共方法中。

  1. 初始化与优化代码:

创建新页面时,可以通过描述需求让 AI 助手自动生成初始代码。生成后,再描述不足,助手会优化代码直至满足需求。

  1. 代码优化:

编写完成的代码可以交给 AI 助手进一步优化,挖掘潜在问题并完善实现。

  1. 编写代码注释:

我开发不太喜欢写注释,通过助手就可以帮我快速生成注释,甚至比我自己写的更详细,如果有不足也可以自己再进行优化。

  1. 生成单元测试:

因为python本身就不是很熟悉,单元测试就更不熟了,后端的单元测试是直接全部扔给AI助手生成的,减少了我很多开发时间。

  1. 生成readme文件

可以根据前后端文件内容生成readme文件。

使用说明/效果展示

流式对话

  • 在输入框中输入信息并按下 Enter,后台服务会实时响应消息。
  • 用户可随时点击中止按钮终止消息的返回。
    在这里插入图片描述

多模态对话

  • 支持一次性响应对话消息。
  • 用户可点击上传按钮上传图片,并结合描述信息生成响应结果。
    在这里插入图片描述
  • 在输入框中输入需求,可生成与需求相关的视频。
    在这里插入图片描述
;