腾讯云AI代码助手编程挑战赛 - 腾讯云AI代码助手小试

作品简介

        本项目基于腾讯云AI代码助手,对平台提供的AI问答应用进行了功能拓展。页面显示采用Vue框架,对话部分使用TDesign组件,模型为hunyuan。主要新增了TDesign页面主题模式改变、页面主题颜色随机切换、文件上传模拟等功能,虽未实现头像切换功能,但整体提升了应用的实用性和用户体验。

技术架构

  • 前端:Vue.js,一种渐进式JavaScript框架,易学易用且性能出色,适用于构建用户界面。
  • UI组件:TDesign,腾讯开源的企业级设计体系,提供统一的设计语言和视觉风格,以及开箱即用的UI组件库,支持Vue等技术栈。
  • AI模型:hunyuan,腾讯的混元大模型,具备强大的语义理解、逻辑推理和编程知识掌握能力,为AI问答等功能提供底层支持。

实现过程

  1. 页面主题模式改变:参考TDesign官网,通过修改主题相关配置,实现了页面主题模式的改变,但因文字颜色为白色,还需同步调整字体颜色以适配不同主题。
  2. 页面主题颜色随机切换:编写代码逻辑,使页面主题颜色能够随机切换,为用户带来新鲜的视觉体验。
  3. 文件上传模拟功能:模拟读取本地文件,虽未找到合适的解析API接口,但通过模拟实现了文件上传后AI解析文件并进行提问的流程,为后续功能拓展奠定了基础。
  4. 头像切换功能尝试:因可能是TDesign本身不支持,未能成功完成用户自定义头像的修改。

开发环境、开发流程

  • 开发环境:使用支持Vue和TDesign的开发环境,如VS Code等。
  • 开发流程
    • 初始化项目:解压文件进入对应目录,运行npm i安装依赖,接着运行npm run dev启动项目。
    • 功能开发:根据需求依次实现各功能,过程中不断调试优化。
    • 测试验证:对新增功能进行测试,确保其正常运行且与现有功能兼容。

关键技术解析

  • Vue.js:利用其组件化架构、响应式数据绑定等特点,高效构建页面和实现功能交互。
  • TDesign:借助其丰富的UI组件和统一的设计风格,快速搭建页面,提升应用的美观度和一致性。
  • hunyuan模型:凭借其强大的AI能力,为问答等功能提供智能支持,使应用具备更自然、准确的交互体验。

腾讯云AI代码助手在上述过程中的助力

  • 代码生成与补全:在不熟悉项目工程和语法时,可全选代码提出疑问,代码助手能给出不错的解答,还能针对选中代码段直接解答问题,提高了编码效率。
  • 知识库支持:其RAG知识库虽目前内容有限,但涵盖的TDesign、Spring Boot等知识库已相当实用,回答问题准确,几乎无幻觉错误,为开发过程中的技术难题提供了有效参考。

使用说明

  1. 解压项目文件,进入对应目录。
  2. 运行npm i安装项目依赖。
  3. 执行npm run dev启动项目,即可在浏览器中访问应用,体验新增功能。

效果展示

  • 美化UI界面:美化界面ui。
  • 页面主题模式改变:页面可在不同主题模式间切换,适应不同用户的视觉偏好。
  • 页面主题颜色随机切换:每次刷新页面或触发切换,主题颜色随机变化,增加趣味性。
  • 文件上传模拟功能:用户可上传本地文件,应用模拟解析文件并进行提问,拓展了问答的应用场景。

1.ui优化

 

2.护眼模式

3.随机切换主题

4.文件模拟上传

 

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

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

相关文章

【Web安全】SQL 注入攻击技巧详解:UNION 注入(UNION SQL Injection)

【Web安全】SQL 注入攻击技巧详解:UNION 注入(UNION SQL Injection) 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集,可以获取数据库中未授权的数据。这种注入技术要…

机器学习05-最小二乘法VS梯度求解

机器学习05-最小二乘法VS梯度求解 文章目录 机器学习05-最小二乘法VS梯度求解0-核心知识点梳理1-最小二乘法和梯度求解算法什么关系最小二乘法梯度求解算法两者的关系 2-最小二乘法可以求解非线性回归吗3-最小二乘法不使用梯度求解算法,给出一个简单的示例&#xff…

网络授时笔记

SNTP的全称是Simple Network Time Protocol,意思是简单网络时间协议,用来从网络中获取当前的时间,也可以称为网络授时。项目中会使用LwIP SNTP模块从服务器(pool.ntp.org)获取时间 我们使用sntp例程,sntp例程路径为D:\Espressif\…

HTTP-响应协议

HTTP的响应过程? 浏览器请求数据--》web服务器过程:请求过程 web服务器将响应数据-》到浏览器:响应过程 响应数据有哪些内容? 1.和请求数据类似。 2. 响应体中存储着web服务器返回给浏览器的响应数据。并且注意响应头和响应体之间…

【学习笔记】理解深度学习和机器学习的数学基础:数值计算

深度学习作为人工智能领域的一个重要分支,其算法的实现和优化离不开数值计算。数值计算在深度学习中扮演着至关重要的角色,它涉及到如何在计算机上高效、准确地解决数学问题。本文将介绍深度学习中数值计算的一些关键概念和挑战,以及如何应对…

JVM与Java体系结构

一、前言: Java语言和JVM简介: Java是目前最为广泛的软件开发平台之一。 JVM:跨语言的平台 随着Java7的正式发布,Java虚拟机的设计者们通过JSR-292规范基本实现在Java虚拟机平台上运行非Java语言编写的程序。 Java虚拟机根本不关心运行在其内部的程序到底是使用何…

计科高可用服务器架构实训(防火墙、双机热备,VRRP、MSTP、DHCP、OSPF)

一、项目介绍 需求分析: (1)总部和分部要求网络拓扑简单,方便维护,网络有扩展和冗余性; (2)总部分财务部,人事部,工程部,技术部,提供…

4.3.3 最优二叉树+二叉查找树

文章目录 基本概念哈夫曼方法应用:通信编码译码二叉查找树 基本概念 最优二叉树哈夫曼树 哈夫曼树:带权路径长度最短的树。 路径:一个结点到另一个结点的通路。 路径长度:路径上的分支数量。 树的路径长度:根到每个叶子…

Conda虚拟Python环境下安装包遇到的坑

明天下午要去参加Nvidia组织的一个开发者夏令营活动,按照2024 NVIDIA开发者社区夏令营环境配置指南(Win & Mac)_nvidia mac-CSDN博客提供的指引配置环境。里面建议的是用conda来配置Python虚拟环境,原本本机直接安装最直接,不过正好学习下…

MVC执行流程

(1)用户通过浏览器(客户端)向服务端(后端)发送请求,请求会被前端控制器DispatcherServlet拦截。 (2)DispatcherServlet拦截到请求后,会调用处理器映射器&…

Spring——依赖注入之p命名空间和c命名空间

p命名空间 其实就是Set注入 只不过p命名空间写法更简洁 p可以理解为 property标签的首字母p p命名空间依赖于set方法 依赖引入 使用前需要再配置文件头文件中引入p命名空间的依赖: ** xmlns:p“http://www.springframework.org/schema/p” ** 用法 在bean标签…

01-51单片机LED与独立按键

一、单片机概述 注意:个人学习笔记,里面涉及到的C语言和进程转换相关的知识在C语言部分已经写了,这里是默认都会的状态学习单片机。 1.什么是单片机 单片机,英文Micro Controller Unit,简称MCU。其内部集成了CPU、R…

Day04-后端Web基础——Maven基础

目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…

spring boot学习第二十三篇:Spring Boot集成RocketMQ

前置条件先安装好RocketMQ 希望在Window10安装rocketMQ并简单使用&#xff0c;可以参考如下文章&#xff1a; Window10安装rocketMQ并简单使用-CSDN博客 1、pom.xml文件里面加上依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId&…

【Docker】入门教程

目录 一、Docker的安装 二、Docker的命令 Docker命令实验 1.下载镜像 2.启动容器 3.修改页面 4.保存镜像 5.分享社区 三、Docker存储 1.目录挂载 2.卷映射 四、Docker网络 1.容器间相互访问 2.Redis主从同步集群 3.启动MySQL 五、Docker Compose 1.命令式安装 …

Go语言之路————go环境的初始化

Go语言之路————go环境的初始化 前言一、Go的安装二、环境配置三、初始化一个新项目四、常用的一些指令 前言 我是一名多年Java开发人员&#xff0c;因为工作需要现在要学习go语言&#xff0c;Go语言之路是一个系列&#xff0c;记录着我从0开始接触Go&#xff0c;到后面能正…

【C语言系列】函数递归

函数递归 一、递归是什么&#xff1f;1.1尾递归 二、递归的限制条件三、递归举例3.1举例一&#xff1a;求n的阶乘3.2举例二&#xff1a;顺序打印一个整数的每一位 四、递归与迭代4.1举例三&#xff1a;求第n个斐波那契数 五、拓展学习青蛙跳台问题 一、递归是什么&#xff1f; …

编程题-二分查找

题目&#xff1a; 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1 解法一&#xff08;循环遍历查找&#xff09;&#xff…

关于大数据的基础知识(一)——定义特征结构要素

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于大数据的基础知识&#xff08;一&a…

【git】-2 分支管理

目录 一、分支的概念 二、查看、创建、切换分支 1、查看分支-git branch 2、创建分支- git branch 分支名 3、切换分支- git checkout 分支名 三、git指针 -实现分支和版本间的切换 四、普通合并分支 git merge 文件名 五、冲突分支合并 ​​​​​​【git】-初始gi…