基于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…...
【AI时代】Page Assist - 本地 AI 模型的 Web UI （谷歌浏览器） 本地DeepSeek启用联网功能
Page Assist - 本地 AI 模型的 Web UI 一、部署本地模型 参考教程：https://blog.csdn.net/Bjxhub/article/details/145536134二、安装插件 Page Assist 浏览器谷歌商店搜索 Page Assist ，安装该插件。 注意：需要一点科学的魔法。 三、使用…...
电脑IP地址自定义
1.连接WIFI 2.打开控制面板 3.打开网络共享中心 4.选择想要修改的WIFI 点击连接的WIFI选择属性 点击要修改的配置协议IPV4/IPV6 设置IP地址为需要的地址...
python卷积神经网络人脸识别示例实现详解
目录 一、准备 1）使用pytorch 2）安装pytorch 3）准备训练和测试资源 二、卷积神经网络的基本结构 三、代码实现 1）导入库 2）数据预处理 3）加载数据 4）构建一个卷积神经网络 5࿰…...
EX_25/2/11
将 epoll 服务器 客户端拿来用 客户端： 写一个界面，里面有注册登录 服务器：处理注册和登录逻辑，注册的话将注册的账号密码写入数据库，登录的话查询数据库中是否存在账号，并验证密码是否正确 额外功能&a…...
二.2 整数表示（2.1-2.4）
在本节中，我们描述用位来编码整数的两种不同的方式：一种只能表示非负数，而另一种能够表示负数、零和正数。后面我们将会看到它们在数学属性和机器级实现方面密切相关。我们还会研究扩展或者收缩一个已编码整数以适应不同长度表示的效果。 图2…...
中间件-安装Minio-集成使用（ubantu-docker）
目录 1、安装docer 2、运行以下命令拉取MinIO的Docker镜像 3、检查当前所有Docker下载的镜像 4、创建目录 5、创建Minio容器并运行 6、SDK操作 FileUploader.java 1、安装docer 参考这篇：Linux安装Docker 2、运行以下命令拉取MinIO的Docker镜像 docker pull…...
夸克网盘多链接批量保存，自动同步更新，批量分享
最近夸克网盘有点火，好多资源都上夸克网盘了，做了一个夸克网盘的批量化程序，已经打包好了，不用配置代码环境就能用 夸克网盘工具：https://pan.quark.cn/s/c22f3451a6ab 百度网盘工具：https://pan.quark.cn…...
2025清华：DeepSeek从入门到精通.pdf（附下载）
本文是一份关于如何深入理解和使用DeepSeek技术的全面指南，由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队编撰。DeepSeek是一家中国科技公司，专注于通用人工智能（AGI）的研发，其开源推…...
【AIGC】在VSCode中集成 DeepSeek（OPEN AI同理）
在 Visual Studio Code (VSCode) 中集成 AI 编程能力，可以通过安装和配置特定插件来实现。以下是如何通过 Continue 和 Cline 插件集成 DeepSeek： 一、集成 DeepSeek 获取 DeepSeek API 密钥：访问 DeepSeek 官方网站，注册并获取 …...
android动态设置是否允许应用卸载
摘要：通过广播设置全局参数控制应用是否允许卸载，全局参数在Launcher和PackageInstaller两个模块中使用到。此功能可用于MDM后台控制是否允许设备卸载应用。 1. 静态注册广播 由于系统安装和卸载的功能集中在PackageInstaller模块中，为了更…...
基于微信小程序的博物馆预约系统的设计与实现
hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 🦁作者简介：一名喜欢分享和记录学习的在校大学生…...
使用NPOI自定义导出excel文件
说明 1、自定义列名，将从数据库查询到的数据赋值到对应的单元格上。 2、excel文件默认导出到桌面。 3、支持进度条显示。 界面 功能实现 public void TaskTest(){Task task new Task(ExportExcel);task.Start(); }/// <summary>/// 查询数据/// </summa…...
基于vue2 的 vueDraggable 示例，包括组件区、组件放置区、组件参数设置区 在同一个文件中实现
为了在Vue 2中实现一个包含组件区、组件放置区以及组件参数设置区的界面，我们可以使用vue-draggable库来处理拖拽功能，并结合其他UI组件库如Element UI来构建界面。下面是一个基本的示例，展示如何实现这样的布局。 第一步：安装必…...
使用rknn进行facenet部署
文章目录 开源仓库pth转onnxnetron可视化onnx转rknnC++实现开源仓库 https://github.com/bubbliiiing/facenet-pytorch pth转onnx 修改facenet网络的forward函数代码 修改前 def forward(self, x, mode = "predict"):if mode ==...
#渗透测试#批量漏洞挖掘#29网课交单平台 SQL注入
免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。 目录 1. 漏洞原理 2. 漏洞定位 3. 攻击验证示…...
百问网imx6ullpro调试记录（linux+qt）
调试记录 文章目录 调试记录进展1.开发板相关1.1百问网乌班图密码 1.2 换设备开发环境搭建串口调试网络互通nfs文件系统挂载 1.3网络问题1.4系统启动1.5进程操作 2.QT2.1tslib1.获取源码2.安装依赖文件3.编译 2.2qt移植1.获取qt源码2.配置编译器3.编译 2.3拷贝到开发板1.拷贝2.…...
【python】3_容器
目录 一、列表 list 1.1基本语法 1.2 常用操作方法 1.3 列表的遍历 二、元组 tuple 特点： 三、字符串 常用操作方法： 四、序列 操作方法：切片 五、元素 特点： 基本语法： 集合常用功能： 六、字…...
数据结构与算法：动态规划dp：背包问题：理论基础（状态压缩/滚动数组）和相关力扣题（416. 分割等和子集、1049.最后一块石头的重量Ⅱ、494.目标和）
背包问题 01背包理论基础 对于01背包问题，物品下标为0到i，对应的重量为weight[0]到weight[i]，价值为value[0]到value[i]，每个物品只可以取或不取，背包最大容量为j的场景。 常见的状态转移方程如下： dp[i…...
数字游牧时代：IT人力外包的范式革命与文明重构
当英国工业革命时期的企业主们将生产环节外包给家庭作坊时，他们不会想到这种生产组织方式会演变为21世纪最复杂的商业形态。IT人力外包行业在经历三十年爆炸式增长后，正在经历一场静默的范式革命。这场革命不仅重构着全球IT产业链的拓扑结构，…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...