基于DeepSeek API和VSCode的自动化网页生成流程
1.创建API key
访问官网DeepSeek ，点击API开放平台。
在开放平台界面左侧点击API keys，进入API keys管理界面，点击创建API key按钮创建API key，名称自定义。
2.下载并安装配置编辑器VSCode
官网Visual Studio Code - Code Editing. Redefined，安装过程不赘述，这里只讲配置。
我们可以把VS Code设置成中文，选择左侧菜单栏中的扩展选择项。在搜索栏中输入Chinese。
按住键盘上的“Ctrl+Shift+P”组合键，打开命令面板。在命令面板的输入框中输入“Configure Display Language”，然后选择该选项。
重启后生效，界面就是中文的了。
3.接入DeepSeek的API
在拓展中输入Cline，选择并安装。
安装完毕，左侧可以看到cline选项。
点击选项，可以看到刚才安装的Cline插件。
在API选项中，选择DeepSeek。
输入前面我们在DeepSeek官网注册的API key。复制APIKEY粘贴即可。然后点击Let's go！
可以在对话框中输入问题，比如你是谁？点击执行。
它会给出回答，如下所示吧啦吧啦，说明已经成功接入了DeepSeek API。
用户询问我的身份。我是一名高度熟练的软件工程师，拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助用户完成各种编程和开发任务。我是Cline，一名高度熟练的软件工程师，拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助您完成各种编程和开发任务。
4.演示完成编程需求
接下来我们就让它帮我们完成一个编程需求。输入我们的提示词：
创建一个网页，标题为“赛博木鱼”，设计要求如下：页面整体布局
背景与样式：背景颜色为深色#121212,文字颜色为纯白#FFFFFF。
使用楷体'Kaiti SC'和现代字体'PingFang SC'，无对应字体时备用sans-serif。页面内容居中对齐，顶部为标题区，中央为木鱼点击区域，底部为提示文字，整体垂直分布。
标题区：
包含三个部分：
主标题：显示渐变文字“赛博木鱼”，字体大小为25vw，使用'Kaiti SC'，渐变从rgba(255,176,103,0.05)（浅绿色）到rgba(115,55,0,0.02)（浅棕色），方向为180度，通过webkit-background-clip:text和-webkit-text-fill-color:transparent实现渐变文字效果。
计分器：显示分数，初始值为0，字体大小10vh，字体为PingFang 5C，加粗900，垂直居中。
木鱼点击区：
包含一个木鱼和锤子图案：
木鱼图片链接：https://img.alicdn.com/imagextra/i1/O1CN012CO0YU1VSfNs506ZS_!!6000000002652-2-tps-284-236.png
锤子图片链接：https://img.alicdn.com/imagextra/i1/O1CN01tKb5Et1aSjWRjCHK3_!!6000000003329-2-tps-119-69.png
锤子的相对位置：锤子固定在木鱼的右上角，具体位置为相对于木鱼的右侧边缘偏上，保持一定距离以呈现动态打击效果。锤子的初始旋转角度为0度。静态时与木鱼形成俯视敲击的视觉关系。点击木鱼触发以下交互：播放点击音效，音频链接：https://qianwen.alicdn.com/resource/qiaomuyu.mp3
锤子短暂旋转（-25°），随后复位至0°，动画时间为0.1s，木鱼放大至scale（1.1）后复位，动画时间为0.1s.显示动态漂浮字幕“功德+1”。字体为PingFang SC,大小1.5em，位置从木鱼上方飘浮消失，动画时间0.4s。点击后分数加1，实时更新计分器内容。执行任务，cline就会进行网页文件的创建以及对应代码的编写。创建完成以后，我们点击Save按钮保存。
这是自动生成的网页文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>赛博木鱼</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><div class="header"><h1 class="title">赛博木鱼</h1><div class="counter">功德：<span id="score">0</span></div></div><div class="muyu-area"><div class="muyu-container"><img src="https://img.alicdn.com/imagextra/i1/O1CN012CO0YU1VSfNs506ZS_!!6000000002652-2-tps-284-236.png" alt="木鱼" class="muyu"id="muyu"><img src="https://img.alicdn.com/imagextra/i1/O1CN01tKb5Et1aSjWRjCHK3_!!6000000003329-2-tps-119-69.png"alt="锤子"class="hammer"id="hammer"></div></div><div class="floating-text-container" id="floating-text-container"></div></div><audio id="sound-effect"><source src="https://qianwen.alicdn.com/resource/qiaomuyu.mp3" type="audio/mpeg"></audio><script src="script.js"></script>
</body>
</html>
运行效果：
总结：本文展示了基于DeepSeek API和VSCode的自动化网页生成流程。已经成功创建了一个标题为“赛博木鱼”的网页，并定义了页面的布局、样式和功能需求。
相关文章：
基于DeepSeek API和VSCode的自动化网页生成流程
1.创建API key 访问官网DeepSeek ，点击API开放平台。 在开放平台界面左侧点击API keys，进入API keys管理界面，点击创建API key按钮创建API key，名称自定义。 2.下载并安装配置编辑器VSCode 官网Visual Studio Code - Code Editing…...
【DeepSeek】私有化本地部署图文（Win+Mac）
目录 一、DeepSeek本地部署【Windows】 1、安装Ollama 2、配置环境变量 3、下载模型 4、使用示例 a、直接访问 b、chatbox网页访问 二、DeepSeek本地部署【Mac】 1、安装Ollama 2、配置环境变量 3、下载模型 4、使用示例 5、删除已下载的模型 三、DeepSeek其他 …...
vscode预览插件
在左侧列表拓展里搜索 Live Preview 安装，然后在html页面点击右键找到show Preview 结果如下图 然后就可以进行代码开发并实时预览了...
迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写应用APP
在应用代码中我们实现如下功能： 当应用程序启动后会获取命令行参数。如果命令行没有参数，LED 灯将循环闪烁；如果命令行带有参数，则根据传输的参数控制 LED 灯的开启或关闭。通过 HdfIoServiceBind 绑定 LED灯的 HDF 服务ÿ…...
在大型语言模型（LLM）框架内Transformer架构与混合专家（MoE）策略的概念整合
文章目录 传统的神经网络框架存在的问题一. Transformer架构综述1.1 transformer的输入1.1.1 词向量1.1.2 位置编码（Positional Encoding）1.1.3 编码器与解码器结构1.1.4 多头自注意力机制 二.Transformer分步详解2.1 传统词向量存在的问题2.2 详解编解码…...
tolua[一]框架搭建，运行example
一.安装tolua https://github.com/topameng/tolua 下载LuaFramework_UGUI的zip 将Assets目录拷贝到项目根目录下 提示确认注册，遇到这个对话框点确定即可 生成如下目录 二.LuaFramework->Build Windows Resource 接下来的目标是将这个main场景跑起来 需要先执行…...
大数据项目4：基于spark的智慧交通项目设计与实现
项目概述 项目直达 www.baiyuntu.com 随着交通数据的快速增长，传统的交通管理方式已无法满足现代城市的需求。交通大数据分析系统通过整合各类交通数据，利用大数据技术解决交通瓶颈问题，提升交通管理效率。本项目旨在通过大数据技术&#…...
Vue 响应式渲染 - 条件渲染
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染 目录 条件渲染 v-if v-if-else 模版template 物流状态显示判断 设置数据 不同状态渲染 总结 条件渲染 v-if 使用Vue条件判断显示和 隐藏。 示例如下： <!DOCTYPE html> …...
活动预告 |【Part1】Microsoft Azure 在线技术公开课：AI 基础知识
课程介绍 参加“Azure 在线技术公开课：AI 基础知识”活动，了解 AI 核心概念。参加我们举办的本次免费培训活动，了解组织如何使用 AI 技术克服实际挑战，以及如何借助 Azure AI 服务构建智能应用程序。本次培训适用于任何对 AI 解决…...
OpenSIPS-Dispatcher模块详解：优化SIP流量分发的利器
在 OpenSIPS 中，dispatcher 模块用于实现负载均衡和故障转移。通过 dispatcher 模块，你可以将 SIP 请求分发到一组后端服务器（如媒体服务器、代理服务器等），并根据配置的算法和策略动态调整分发逻辑。 模块功能使用样…...
深入理解linux中的文件（下）
目录 一、语言级缓冲区和内核级缓冲区 二、C语音中的FILE* fp fopen(“./file.txt”,"w"): 四、理解磁盘结构： 物理结构 逻辑结构 五、未被打开的文件： 六、更加深入理解inode编号怎么找到文件： 七、对路径结构进行…...
Deepseek系列从v3到R易背面经版
deepseek v3 base要点 MTP : Multi-Token Prediction 训练时： 1. 把前一个block中input tokens经过embedding layer和transformer block的输出，进入output head之前的内容记为h，与下一个block的input tokens经过embedding layer输出的内容都…...
SQLAlchemy 的内存消耗
为何要研究SQLAlchemy 的内存消耗问题？因为SQLAlchemy在应用中，绝大多数问题体现在应用人员对SQLAlchemy 的内存消耗问题不认知、不重视、不处理，最终造成整个系统的大问题，使SQLAlchemy 的性能大打折扣，最终影响了SQL…...
Centos Ollama + Deepseek-r1+Chatbox运行环境搭建
Centos Ollama Deepseek-r1Chatbox运行环境搭建 内容介绍下载ollama在Ollama运行DeepSeek-r1模型使用chatbox连接ollama api 内容介绍 你好！ 这篇文章简单讲述一下如何在linux环境搭建 Ollama Deepseek-r1。并在本地安装的Chatbox中进行远程调用 下载ollama 登…...
vscode和pycharm的区别
VSCode（Visual Studio Code）和 PyCharm 是两款常用的 Python 开发工具，它们在功能和使用体验上有一些关键区别： 1. 核心定位 VSCode：轻量级、多语言支持的代码编辑器，依靠插件扩展 Python 开发能力。PyCh…...
【0403】Postgres内核 检查（procArray ）给定 db 是否有其他 backend process 正在运行
文章目录 1. 给定 db 是否有其他 backend 正在运行1.1 获取 allPgXact[] 索引1.1.1 MyProc 中 databaseId 初始化实现1.2 allProcs[] 中各 databaseId 判断1. 给定 db 是否有其他 backend 正在运行 CREATE DATABASE 语句创建用户指定 数据库名（database-name）时候， 会通过 …...
MySQL 数据库的体系架构
MySQL 数据库的体系架构是其高效、灵活和可扩展性的核心基础。其设计采用 分层模块化 结构，主要分为以下四层： 1. 连接层（Connectors & Connection Pool） 功能：负责处理客户端连接、认证和权限管理。 连接管理&a…...
【C++高并发服务器WebServer】-14：Select详解及实现
本文目录 一、BIO模型二、非阻塞NIO忙轮询三、IO多路复用四、Select()多路复用实现 明确一下IO多路复用的概念：IO多路复用能够使得程序同时监听多个文件描述符（文件描述符fd对应的是内核读写缓冲区），能够提升程序的性能。 Linux下…...
apisix网关ip-restriction插件使用说明
ip-restriction插件可以在网关层进行客户端请求ip拦截。 当然了，一般不推荐使用该方法，专业的事专业工具做。建议有条件，还是上防火墙或者waf来做。 官方文档：ip-restriction | Apache APISIX -- Cloud-Native API Gateway whit…...
15vue3实战-----props和emit传值
15vue3实战-----props和emit传值 1.emit的使用2.配合props实现完整父子通信 vue3中props和emit的使用有点不一样,但万变不离其宗。 1.emit的使用 子组件: <script setup lang"ts"> // 定义触发的事件及其数据类型 const emit defineEmits([update, delete]…...
第二节 docker基础之---镜像构建及挂载
查看当前镜像： [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE [rootdocker ~]#很明显docker是咱们新搭建的所以目前还没有镜像 1，搜索镜像： [rootdocker ~]# docker search centos 搜索镜像并过滤是官…...
Android性能优化
Android性能优化 如何优化一个包含大量图片加载的Android应用，以提高性能和用户体验？ 优化一个包含大量图片加载的Android应用，可以从以下几个方面入手，以提高性能和用户体验： 选择合适的图片加载库 使用成熟的图片…...
scikit-learn简介
scikit-learn 是一个广泛使用的 Python 库，主要用于 机器学习（ML）。它提供了一些简单高效的工具，适用于 数据挖掘 和 数据分析。scikit-learn 基于 NumPy、SciPy 和 matplotlib 等科学计算库，具有 易于使用的接口 和 高…...
查询已经运行的 Docker 容器启动命令
一、导语 使用 get_command_4_run_container 查询 docker 容器的启动命令 获取镜像 docker pull cucker/get_command_4_run_container 查看容器命令 docker run --rm -v /var/run/docker.sock:/var/run/docker.sock cucker/get_command_4_run_container 容器id或容器名 …...
ssti学习笔记（服务器端模板注入）
目录 一，ssti是什么 二，原理 所谓模板引擎（三列，可滑动查看） 三，漏洞复现 1，如何判断其所属的模板引擎？ 2，判断清楚后开始注入 （1）Jinja2&a…...
Docker 部署 RabbitMQ | 自带延时队列
一、获取镜像 docker pull farerboy/rabbitmq:3.9.9 二、运行镜像 docker run -d --name rabbitmq \n --hostname rabbitmq \n -p 15672:15672/tcp \n -p 5672:5672/tcp \n -v /wwwroot/opt/docker/rabbitmq:/var/lib/rabbitmq \n farerboy/rabbitmq:3.9.9 备注：…...
如何使用deepseek创建钉钉收费AI助理
1、打开deepseek，简单描述下自己的问题，勾选深度思考 2、deepseek给我生成了一大段提示词模板 3、打开钉钉-应用中心-找AI助理 4、点击立即创作 5、创作 默认创建的是免费上网，需要创建收费的话需要先申请，填一个表单内容和价格&…...
【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）
ps.源码放在最后面 设计IIR数字滤波器可以看这里：利用MATLAB配合ARM-DSP库设计IIR数字滤波器（保姆级教程） 前言 本篇文章将介绍如何利用MATLAB与STM32的ARM-DSP库相结合，简明易懂地实现FIR低通滤波器的设计与应用。文章重点不在…...
2025年日祭
本文将同步发表于洛谷（暂无法访问）、CSDN 与 Github 个人博客（暂未发布） 本蒟自2025.2.8开始半停课。 以下是题目格式： [题目OJ 题号] [来源（选填）] 名称 …… 题号 - 名称 题目：……...
torch_bmm验算及代码测试
文章目录 1. torch_bmm2. pytorch源码 1. torch_bmm torch.bmm的作用是基于batch_size的矩阵乘法,torch.bmm的作用是对应batch位置的矩阵相乘，比如， mat1的第1个位置和mat2的第1个位置进行矩阵相乘得到mat3的第1个位置mat1的第2个位置和mat2的第2个位置…...
ChatGPT提问技巧：行业热门应用提示词案例-文案写作
ChatGPT 作为强大的 AI 语言模型，已经成为文案写作的得力助手。但要让它写出真正符合你需求的文案，关键在于如何与它“沟通”，也就是如何设计提示词（Prompt）。以下是一些实用的提示词案例，帮助你解锁 ChatG…...
k8s中,一.service发布服务,二.dashboard:基于网页的k8s管理插件,三.资源服务与帐号权限
一.service资源对内发布服务Cluster IP对外发布服务NodePortIngress 二.dashboard:基于网页的k8s管理插件 三.资源服务与帐号权限一.service:用户无法预知pod的ip地址以及所在的节点,多个相同的pod如何访问他们上面的服务功能:1.服务自动感知:pod迁移后访问service的ip,不受影响…...
Python的那些事第十六篇：Python的网络爬虫技术
基于Python的网络爬虫技术研究与应用 摘要 随着互联网的飞速发展，网络爬虫技术在数据采集、信息挖掘等领域发挥着重要作用。本文详细介绍了Python环境下常用的网络爬虫技术，包括Requests库、BeautifulSoup库以及Scrapy框架。通过对这些工具的使用方法、…...
Linux第106步_Linux内核RTC驱动实验
1、了解rtc_device结构体 1)、打开“include/linux/rtc.h” rtc_class_ops是需要用户根据所使用的RTC设备编写的,其结构体如下: struct rtc_class_ops { int (*ioctl)(struct device *, unsigned int, unsigned long);/*函数指针ioctl*/ int (*read_time)(struct device *,…...
《XSS跨站脚本攻击》
一、XSS简介 XSS全称（Cross Site Scripting）跨站脚本攻击，为了避免和CSS层叠样式表名称冲突，所以改为了XSS，是最常见的Web应用程序安全漏洞之一，位于OWASP top 10 2013/2017年度分别为第三名和第七名&…...
康谋方案 | BEV感知技术：多相机数据采集与高精度时间同步方案
随着自动驾驶技术的快速发展，车辆准确感知周围环境的能力变得至关重要。BEV（Birds-Eye-View，鸟瞰图）感知技术，以其独特的视角和强大的数据处理能力，正成为自动驾驶领域的一大研究热点。 一、BEV感知技术概…...
堆详解及C语言实现
堆结构与最大堆详解：从原理到C语言实现 1. 堆结构概述 1.1 定义与性质 堆（Heap）是一种特殊的完全二叉树数据结构，满足以下性质： 结构性：完全二叉树结构有序性：每个结点的值都≥（…...
基于STM32的智能鱼缸水质净化系统设计
🤞🤞大家好，这里是5132单片机毕设设计项目分享，今天给大家分享的是智能鱼缸水质净化系统。 目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 1、设计要求…...
python：csv文件批量导入mysql
1.导入sql文件到数据库中 mysql -u username -p要先创建一个空的数据库 CREATE DATABASE your_database_name;USE your_database_name;导入sql文件 source /path/to/your/file.sql;查看某个表格的结构，为后续数据插入做准备 DESCRIBE table_name;2.插入假数据到对应…...
第三十二周：Informer学习笔记
目录 摘要Abstract1 Informer1.1 预备知识1.2 模型框架1.3 实验分析 总结 摘要 本周学习的主要内容是Informer模型，Informer是一种专为长序列时间序列预测（LSTF） 设计的Transformer模型。相较于传统的Transformer，Informer采用Pr…...
计算机视觉核心任务
1. 计算机视频重要分类 计算机视觉的重要任务可以大致分为以下几类： 1. 图像分类（Image Classification） 识别图像属于哪个类别，例如猫、狗、汽车等。 应用场景：物品识别、人脸识别、医疗影像分类。代表模型&#…...
【python】matplotlib（animation）
文章目录 1、matplotlib.animation1.1、FuncAnimation1.2、修改 matplotlib 背景 2、matplotlib imageio2.1、折线图2.2、条形图2.3、散点图 3、参考 1、matplotlib.animation 1.1、FuncAnimation matplotlib.animation.FuncAnimation 是 Matplotlib 库中用于创建动画的一个…...
【Linux网络编程】之守护进程
【Linux网络编程】之守护进程 进程组进程组的概念组长进程 会话会话的概念会话ID 控制终端控制终端的概念控制终端的作用会话、终端、bash三者的关系 前台进程与后台进程概念特点查看当前终端的后台进程前台进程与后台进程的切换 作业控制相关概念作业状态（一般指后…...
Vue.js如何根据访问路径切换页面
Vue Router 在前端工程中，路由指的是，根据不同的访问路径，展示不同组件的内容。 Vue Router是Vue.js的官方路由。 Vue Router介绍。 要使用vue Router，得先安装 npm install vue-router4这里的4，指的是第4个版本 在s…...
Vue与Konva：解锁Canvas绘图的无限可能
前言 在现代Web开发中，动态、交互式的图形界面已成为提升用户体验的关键要素。Vue.js，作为一款轻量级且高效的前端框架，凭借其响应式数据绑定和组件化开发模式，赢得了众多开发者的青睐。而当Vue.js邂逅Konva.js，两者结…...
collabora online+nextcloud+mariadb在线文档协助
1、环境 龙蜥os 8.9 docker 2、安装docker dnf -y install dnf-plugins-core dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sed -i shttps://download.docker.comhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce /etc/yum.repos.…...
linux基础命令1
1、linux目录结构——树型结构 根目录：/ 用户主目录(家目录)：~或者 /home/edu 根目录下常见的文件夹: 2、常见的命令 1、pwd 查看当前目录 cd 切换目录 cd ~ 切换到家目录 2、ls 查看当前目录的文件信息 语法:ls [选项] [参…...
[LVGL] 在VC_MFC中移植LVGL
前言： 0. 在MFC中开发LVGL的优点是可以用多个Window界面做辅助扩展【类似GUIguider】 1.本文基于VC2022-MFC单文档框架移植lvgl8 2. gitee上下载lvgl8.3 源码，并将其文件夹改名为lvgl lvgl: LVGL 是一个开源图形库，提供您创建具有易于使用…...
Spring Boot整合MQTT
MQTT是基于代理的轻量级的消息发布订阅传输协议。 1、下载安装代理 进入mosquitto下载地址：Download | Eclipse Mosquitto，进行下载，以win版本为例 下载完成后，在本地文件夹找到下载的代理安装文件 使用管理员身份打开安装 安装…...
elasticsearch实战三 elasticsearch与mysql数据实时同步
一 介绍 elasticsearch数据不是一直不变的，需要与mysql、oracle等数据库的数据做同步。 本博客里涉及到的项目地址：https://www.aliyundrive.com/s/7bRWpTYsxWV 方案一： 同步调用，即操作mysql数据后，接着操作elastic…...