当前位置: 首页 > news >正文

腾讯云AI代码助手编程挑战赛-刑说

作品简介

鉴于当代普法力度不够大,这个刑说可以帮助大家更好的普及法律知识

技术架构
采用了全后端分离的架构,前端使用Vue.js,腾讯云的AI服务处理自然语言理解与生成。

实现过程
开发环境、开发流程
系统:win11

开发工具:VSCode

开发环境为:node-v23.6.0-win-x64

开发流程:
1、解压并配置node.js环境变量
2、使用npm i命令初始化项目
3、使用npm run dev启动项目

关键技术解析
增加了切换风格与主题声明。

腾讯云AI代码助手在上述过程中的助力
1、使用生成解释功能整理了代码思路

这段代码是一个Vue 3组件,使用了`<script setup>`语法,这是Vue 3中推荐的组合式API的使用方式。下面是对代码的主要部分的解释:

### 模板部分 (`<template>`)

- 使用了`<t-chat>`组件来展示聊天界面,具有单布局(`layout="single"`),固定高度(`style="height: 600px"`)。
- `:clear-history`属性用于控制是否显示清除历史记录的选项,当`chatList`有内容且不是流式加载时显示。
- `@clear`事件监听器用于监听清除历史的操作,触发`clearConfirm`方法。
- 使用`v-for`指令遍历`chatList`数组,为每条聊天记录渲染一个`<t-chat-item>`组件。
- 在每条聊天记录中,根据条件渲染`<t-chat-action>`组件和报警按钮。
- 使用`#footer`插槽来自定义聊天界面的底部,这里放置了一个`<t-chat-input>`组件,用于输入新的消息。

### 脚本部分 (`<script setup>`)

- 导入了`ref`函数,用于创建响应式的引用。
- 定义了一系列的响应式变量,如`loading`, `isStreamLoad`, `isGood`, `isBad`, `chatRef`等,用于控制组件的状态。
- `reportItem`方法用于处理报警操作,目前只是简单地弹出一个提示框。
- `backBottom`方法用于滚动到聊天界面的底部。
- `chatList`是一个响应式数组,包含了聊天记录的数据。
- `clearConfirm`方法用于清空聊天记录。
- `onStop`方法用于停止流式加载数据。
- `handleOperation`方法用于处理聊天记录的操作,如点赞、点踩或回复。
- `handleData`方法用于处理发送消息后的数据流,包括设置加载状态、调用`fetchSSE`方法等。
- `inputEnter`方法用于处理用户输入的消息,将其添加到`chatList`中,并触发消息处理流程。
- `fetchSSE`方法是一个异步函数,用于通过Server-Sent Events (SSE)与后端API进行通信,获取流式响应数据。

### 样式部分 (`<style lang="less" scoped>`)

- 样式部分目前为空,没有提供具体的样式规则。

### 注意事项

- 代码中使用了`fetchSSE`函数来处理与后端的流式通信,这是一个自定义的函数,不是浏览器原生支持的API。
- `fetchSSE`函数中使用了`AbortController`来支持请求的取消操作,这是一个现代浏览器提供的API。
- 代码中的`apiKey`应该是用于认证的,但在实际应用中不应该硬编码在客户端代码中,而应该通过安全的方式管理。
- `fetchSSE`函数中的错误处理和数据处理逻辑比较复杂,需要仔细调试以确保稳定性。

这段代码实现了一个具有基本聊天功能的Vue组件,包括消息的显示、输入、发送以及一些交互操作。

2、增加标题
给页面和右侧增加了高亮显示的标题,使用腾讯云AI代码助手提供的代码实现。


这里还是用腾讯云AI助手提供的对应代码完成。

使用说明
1、解压并配置node.js环境变量

2、使用npm i命令初始化项目

3、使用npm run dev启动项目

4、访问http://localhost:3005/进行提问即可。

效果展示

live.csdn.net/v/442832

相关文章:

腾讯云AI代码助手编程挑战赛-刑说

作品简介 鉴于当代普法力度不够大&#xff0c;这个刑说可以帮助大家更好的普及法律知识 技术架构 采用了全后端分离的架构&#xff0c;前端使用Vue.js&#xff0c;腾讯云的AI服务处理自然语言理解与生成。 实现过程 开发环境、开发流程 系统&#xff1a;win11 开发工具&…...

【测试】持续集成CI/CD

近期更新完毕&#xff0c;建议关注收藏点赞&#xff5e; 目录 概括gitJenkinspostman集成jenkins代码集成jenkins 概括 CI/CD stands for Continuous Integration and Continuous Deployment 定义 团队成果持续集成到公共平台。一天可以集成1次or多次 本地代码管理 git 远程代…...

阿里云直播Web

官方文档&#xff1a;Web播放器SDK常见问题_视频点播(VOD)-阿里云帮助中心 bug&#xff1a;播流的不稳定&#xff0c;直播总会进入 onM3u8Retry 监听&#xff0c;用户端就会黑屏&#xff0c;&#xff08;但其实并没有关播&#xff0c;正常关播进入的是pause这个监听&#xff0…...

DuckDB:PRAGMA语句动态配置数据库行为

PRAGMA语句是DuckDB从SQLite中采用的SQL扩展。PRAGMA命令可能会改变数据库引擎的内部状态&#xff0c;并可能影响引擎的后续执行或行为。本文介绍PRAGMA命令及其典型应用场景。 DuckDB PRAGMA介绍 在 DuckDB 中&#xff0c;PRAGMA 是一种编译指示&#xff08;compiler directi…...

GO通过SMTP协议发送邮件

什么是SMTP协议 SMTP&#xff08;Simple Mail Transfer Protocol&#xff0c;简单邮件传输协议&#xff09;是用于发送邮件的协议。当一个邮件服务器需要发送邮件给另一个邮件服务器时&#xff0c;它会使用SMTP协议与目标服务器建立连接&#xff0c;并传输邮件内容。SMTP协议的…...

轻量自高斯注意力机制LSGAttention模型详解及代码复现

模型背景 近年来,卷积神经网络(CNN)在高光谱图像分类领域取得了显著进展。然而,CNN面临 长距离关系建模 和 计算成本 增加的挑战。为解决这些问题,研究人员提出了基于 轻量自高斯注意(Light Self-Gaussian-Attention, LSGA) 机制的视觉转换器(Vision Transformer, VIT),旨…...

解读若依框架中的`@Excel` 和 `@Excels` 注解

文章目录 一、Excels 注解详解1.1 适用场景1.2 作用与好处 二、Excel 注解详解2.1 核心属性解析2.2 高级用法2.3 综合应用案例 三、总结 解读若依框架中的 Xss 注解博客&#xff1a;解读若依框架中的 Xss 注解 接下来我们将对若依框架中的 Excel 和 Excels 注解进行更加详细的…...

云商城--基础数据处理和分布式文件存储

第2章 基础数据处理和分布式文件存储 1.分布式文件存储系统Ceph学习 ​ 1).掌握Ceph架构 ​ 2).掌握Ceph组件 ​ 3).搭建Ceph集群(了解) 2.Ceph使用 ​ 1).基于Ceph实现文件上传 ​ 2).基于Ceph实现文件下载 3.SKU、SPU管理 ​ 1).掌握SKU和SPU关系 ​ 2).理解商品发…...

六十九:基于openssl实战验证RSA

RSA&#xff08;Rivest-Shamir-Adleman&#xff09;是一种非对称加密算法&#xff0c;广泛应用于数据加密和数字签名领域。在实际开发和学习过程中&#xff0c;理解 RSA 的工作原理和使用场景非常重要。本文将以 OpenSSL 工具为基础&#xff0c;通过实例操作来验证和理解 RSA 的…...

Three.js 用户交互:构建沉浸式3D体验的关键

文章目录 前言一、基本交互&#xff1a;鼠标与触摸事件二、高级交互&#xff1a;键盘控制与游戏手柄支持三、物理模拟与碰撞检测四、手势识别与多点触控五、增强现实&#xff08;AR&#xff09;与虚拟现实&#xff08;VR&#xff09;六、触觉反馈与震动效果七、语音控制八、眼球…...

Android车机DIY开发之学习篇(五)默认应用修改

Android车机DIY开发之学习篇(五)默认应用修改 android默认应用位置 sdk/packages/apps InitRC配置 应用安装的目录 /system/priv-app 该路径存放一些系统底层的应用&#xff0c;比如Setting&#xff0c;systemUI等。该目录中的app拥有较高的系统权限&#xff0c;而且如果要使…...

linux 设置mysql 外网访问

1、修改 MySQL 配置文件 找到并编辑配置文件&#xff1a;在Linux系统中&#xff0c;MySQL的配置文件通常是/etc/mysql/my.cnf&#xff0c;使用命令sudo vim /etc/mysql/my.cnf打开文件。 注释或修改 bindaddress&#xff1a;找到bindaddress 127.0.0.1&#xff0c;将其注释掉…...

SQL UNION 操作符

SQL UNION 操作符 SQL UNION 操作符用于合并两个或多个 SELECT 语句的结果集。它将多个结果集组合成一个单独的结果集&#xff0c;并去除重复的行。为了使用 UNION&#xff0c;每个 SELECT 语句必须具有相同的列数&#xff0c;并且对应列的数据类型必须兼容。 语法 SELECT c…...

c++ 17 constexpr

未来已来&#xff1a;从SFINAE到concepts #include <type_traits> #include <vector> #include <list> #include <iostream> // 一个通用的容器打印函数&#xff0c;支持任何带 begin()/end() 的容器 template<typename Container> …...

Java QueryWrapper groupBy自定义字段,以及List<Map>转List<Entity>

Java queryWrapper groupby自定义字段 String sql "data_id,(select value from lz_html a where a.data_id lz_html.data_id and class_nametest-item-status) status," "(select value from lz_html a where a.data_id lz_html.data_id and class_nametes…...

【Rust自学】11.7. 按测试的名称运行测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.7.1. 按名称运行测试的子集 如果想要选择运行的测试&#xff0c;就将测试的名称&#xff08;一个或多个&#xff09;作为cargo test的…...

Git:Cherry-Pick 的使用场景及使用流程

前面我们说了 Git合并、解决冲突、强行回退等解决方案 >> 点击查看 这里再说一下 Cherry-Pick功能&#xff0c;Cherry-Pick不是merge&#xff0c;只是把部分功能代码Cherry-Pick到远程的目标分支 git cherry-pick功能简介&#xff1a; git cherry-pick 是用来从一个分…...

Ubuntu 24.04 LTS系统安装Docker踩的坑

一开始我跟着Docker给出的官网文档 Ubuntu | Docker Docs 流程走&#xff0c;倒腾了两个多小时&#xff0c;遇到了各种坑&#xff0c;最后放弃了。在我们使用脚本安装Docker命令前&#xff0c;我们先把已经安装的Docker全部卸载掉。 卸载Docker 1.删除docker及安装时自动安装…...

工作生活的感悟

前言 这篇博客基本每年都更新&#xff0c;每年都有新的感悟&#xff0c;作为一个记录吧&#xff01;以后按照年来记录 2022年 不经意间&#xff0c;已在职场耕耘数载&#xff0c;特此记录以作回顾。 无用之用&#xff0c;方为大用&#xff1a; 年岁渐长&#xff0c;愈发体会…...

NCCL学习笔记-函数解析

前言 1.NCCL 是一个专注于 GPU 间高性能通信的库&#xff0c;不提供进程管理或安全通信功能。 2.用户需要依赖应用程序的进程管理系统&#xff08;如 MPI&#xff09;来管理进程&#xff0c;并确保 NCCL 在安全的网络环境中运行。 3.通过正确配置环境变量&#xff08;如 NCCL_…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...