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

基于DeepSeek API和VSCode的自动化网页生成流程

news 2026/2/9 13:45:11
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 &#xff0c;点击API开放平台。 在开放平台界面左侧点击API keys&#xff0c;进入API keys管理界面&#xff0c;点击创建API key按钮创建API key&#xff0c;名称自定义。 2.下载并安装配置编辑器VSCode 官网Visual Studio Code - Code Editing…...

编程日记 2025/2/12 8:48:22

【AI时代】Page Assist - 本地 AI 模型的 Web UI （谷歌浏览器） 本地DeepSeek启用联网功能

Page Assist - 本地 AI 模型的 Web UI 一、部署本地模型 参考教程&#xff1a;https://blog.csdn.net/Bjxhub/article/details/145536134二、安装插件 Page Assist 浏览器谷歌商店搜索 Page Assist &#xff0c;安装该插件。 注意&#xff1a;需要一点科学的魔法。 三、使用…...

编程日记 2025/2/12 8:46:19

电脑IP地址自定义

1.连接WIFI 2.打开控制面板 3.打开网络共享中心 4.选择想要修改的WIFI 点击连接的WIFI选择属性 点击要修改的配置协议IPV4/IPV6 设置IP地址为需要的地址...

编程日记 2025/2/12 8:45:18

python卷积神经网络人脸识别示例实现详解

目录 一、准备 1&#xff09;使用pytorch 2&#xff09;安装pytorch 3&#xff09;准备训练和测试资源 二、卷积神经网络的基本结构 三、代码实现 1&#xff09;导入库 2&#xff09;数据预处理 3&#xff09;加载数据 4&#xff09;构建一个卷积神经网络 5&#xff0…...

编程日记 2025/2/12 8:40:14

EX_25/2/11

将 epoll 服务器 客户端拿来用 客户端&#xff1a; 写一个界面&#xff0c;里面有注册登录 服务器&#xff1a;处理注册和登录逻辑&#xff0c;注册的话将注册的账号密码写入数据库&#xff0c;登录的话查询数据库中是否存在账号&#xff0c;并验证密码是否正确 额外功能&a…...

编程日记 2025/2/12 8:38:12

二.2 整数表示（2.1-2.4）

在本节中&#xff0c;我们描述用位来编码整数的两种不同的方式&#xff1a;一种只能表示非负数&#xff0c;而另一种能够表示负数、零和正数。后面我们将会看到它们在数学属性和机器级实现方面密切相关。我们还会研究扩展或者收缩一个已编码整数以适应不同长度表示的效果。 图2…...

编程日记 2025/2/12 8:35:08

中间件-安装Minio-集成使用（ubantu-docker）

目录 1、安装docer 2、运行以下命令拉取MinIO的Docker镜像 3、检查当前所有Docker下载的镜像 4、创建目录 5、创建Minio容器并运行 6、SDK操作 FileUploader.java 1、安装docer 参考这篇&#xff1a;Linux安装Docker 2、运行以下命令拉取MinIO的Docker镜像 docker pull…...

编程日记 2025/2/12 8:33:06

夸克网盘多链接批量保存，自动同步更新，批量分享

最近夸克网盘有点火&#xff0c;好多资源都上夸克网盘了&#xff0c;做了一个夸克网盘的批量化程序&#xff0c;已经打包好了&#xff0c;不用配置代码环境就能用 夸克网盘工具&#xff1a;https://pan.quark.cn/s/c22f3451a6ab 百度网盘工具&#xff1a;https://pan.quark.cn…...

编程日记 2025/2/12 8:31:02

2025清华：DeepSeek从入门到精通.pdf（附下载）

本文是一份关于如何深入理解和使用DeepSeek技术的全面指南&#xff0c;由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队编撰。DeepSeek是一家中国科技公司&#xff0c;专注于通用人工智能&#xff08;AGI&#xff09;的研发&#xff0c;其开源推…...

编程日记 2025/2/12 8:26:58

【AIGC】在VSCode中集成 DeepSeek（OPEN AI同理）

在 Visual Studio Code (VSCode) 中集成 AI 编程能力&#xff0c;可以通过安装和配置特定插件来实现。以下是如何通过 Continue 和 Cline 插件集成 DeepSeek&#xff1a; 一、集成 DeepSeek 获取 DeepSeek API 密钥&#xff1a;访问 DeepSeek 官方网站&#xff0c;注册并获取 …...

编程日记 2025/2/12 8:25:57

android动态设置是否允许应用卸载

摘要&#xff1a;通过广播设置全局参数控制应用是否允许卸载&#xff0c;全局参数在Launcher和PackageInstaller两个模块中使用到。此功能可用于MDM后台控制是否允许设备卸载应用。 1. 静态注册广播 由于系统安装和卸载的功能集中在PackageInstaller模块中&#xff0c;为了更…...

编程日记 2025/2/12 8:20:52

基于微信小程序的博物馆预约系统的设计与实现

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…...

编程日记 2025/2/12 8:19:50

使用NPOI自定义导出excel文件

说明 1、自定义列名&#xff0c;将从数据库查询到的数据赋值到对应的单元格上。 2、excel文件默认导出到桌面。 3、支持进度条显示。 界面 功能实现 public void TaskTest(){Task task new Task(ExportExcel);task.Start(); }/// <summary>/// 查询数据/// </summa…...

编程日记 2025/2/12 8:16:46

基于vue2 的 vueDraggable 示例，包括组件区、组件放置区、组件参数设置区 在同一个文件中实现

为了在Vue 2中实现一个包含组件区、组件放置区以及组件参数设置区的界面&#xff0c;我们可以使用vue-draggable库来处理拖拽功能&#xff0c;并结合其他UI组件库如Element UI来构建界面。下面是一个基本的示例&#xff0c;展示如何实现这样的布局。 第一步&#xff1a;安装必…...

编程日记 2025/2/12 8:12:41

使用rknn进行facenet部署

文章目录 开源仓库pth转onnxnetron可视化onnx转rknnC++实现开源仓库 https://github.com/bubbliiiing/facenet-pytorch pth转onnx 修改facenet网络的forward函数代码 修改前 def forward(self, x, mode = "predict"):if mode ==...

编程日记 2025/2/12 8:08:35

#渗透测试#批量漏洞挖掘#29网课交单平台 SQL注入

免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。 目录 1. 漏洞原理 2. 漏洞定位 3. 攻击验证示…...

编程日记 2025/2/12 8:07:34

百问网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.…...

编程日记 2025/2/12 8:05:32

【python】3_容器

目录 一、列表 list 1.1基本语法 1.2 常用操作方法 1.3 列表的遍历 二、元组 tuple 特点&#xff1a; 三、字符串 常用操作方法&#xff1a; 四、序列 操作方法&#xff1a;切片 五、元素 特点&#xff1a; 基本语法&#xff1a; 集合常用功能&#xff1a; 六、字…...

编程日记 2025/2/12 8:03:29

数据结构与算法：动态规划dp：背包问题：理论基础（状态压缩/滚动数组）和相关力扣题（416. 分割等和子集、1049.最后一块石头的重量Ⅱ、494.目标和）

背包问题 01背包理论基础 对于01背包问题&#xff0c;物品下标为0到i&#xff0c;对应的重量为weight[0]到weight[i]&#xff0c;价值为value[0]到value[i]&#xff0c;每个物品只可以取或不取&#xff0c;背包最大容量为j的场景。 常见的状态转移方程如下&#xff1a; dp[i…...

编程日记 2025/2/12 8:01:24

数字游牧时代：IT人力外包的范式革命与文明重构

当英国工业革命时期的企业主们将生产环节外包给家庭作坊时&#xff0c;他们不会想到这种生产组织方式会演变为21世纪最复杂的商业形态。IT人力外包行业在经历三十年爆炸式增长后&#xff0c;正在经历一场静默的范式革命。这场革命不仅重构着全球IT产业链的拓扑结构&#xff0c;…...

编程日记 2025/2/12 7:53:14

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2026/1/25 10:12:06

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05