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

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

article 2026/4/26 5:58:58
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…...

编程日记 2026/4/11 21:18:21

结合实际讲NR系列2—— SIB1

这是在基站抓取的sib1的一条信令 L3MessageContent BCCH-DL-SCH-Messagemessagec1systemInformationBlockType1cellSelectionInfoq-RxLevMin: -64q-QualMin: -19cellAccessRelatedInfoplmn-IdentityListPLMN-IdentityInfoplmn-IdentityListPLMN-IdentitymccMCC-MNC-Digit: 4MC…...

编程日记 2026/2/24 13:12:56

信创领域的PostgreSQL管理员认证

信创产业&#xff0c;全称为信息技术应用创新产业&#xff0c;是中国为应对国际技术竞争、保障信息安全、实现科技自立而重点发展的战略性新兴产业。其核心目标是通过自主研发和生态构建&#xff0c;逐步替代国外信息技术产品&#xff0c;形成自主可控的国产化信息技术体系。 发…...

编程日记 2026/4/11 21:22:29

AI基础 -- AI学习路径图

人工智能从数学到大语言模型构建教程 第一部分&#xff1a;AI 基础与数学准备 1. 绪论&#xff1a;人工智能的过去、现在与未来 人工智能的定义与发展简史从符号主义到统计学习、再到深度学习与大模型的变迁本书内容概览与学习路径指引 2. 线性代数与矩阵运算 向量与矩阵的…...

编程日记 2026/2/23 0:28:42

使用 Visual Studio Code (VS Code) 开发 Python 图形界面程序

安装Python、VS Code Documentation for Visual Studio Code Python Releases for Windows | Python.org 更新pip >python.exe -m pip install --upgrade pip Requirement already satisfied: pip in c:\users\xxx\appdata\local\programs\python\python312\lib\site-pa…...

编程日记 2026/4/11 21:17:14

IEEE期刊Word导出PDF注意事项

在系统上提交论文时候一般要求PDF文档&#xff0c;但是word直接转PDF可能存在一些问题&#xff1a; 部分图片不清晰。字体未嵌入PDF。间距发生了变化。字体发生了变化。一张图片显示不完全。 下面介绍word转PDF最稳妥的技巧以及如何实现全部字体的嵌入。 1. 操作流程 ① 另…...

编程日记 2026/4/22 20:05:06

针对Prompt优化的深入分析

一、针对Prompt优化的深入分析 1. 结构化设计 技术原理&#xff1a; 大语言模型&#xff08;LLMs&#xff09;本质是基于概率的序列生成器&#xff0c;结构化模板通过显式定义输出框架&#xff08;如角色、段落数、连接词&#xff09;&#xff0c;利用模型的模式匹配能力&…...

编程日记 2026/2/19 23:42:34

flutter ListView 局部刷新

在 Flutter 中&#xff0c;要仅刷新 ListView 中的某一列&#xff08;即特定列表项&#xff09;&#xff0c;可以通过以下步骤实现&#xff1a; 核心思路 为每个列表项分配唯一标识&#xff08;如 Key&#xff09;&#xff0c;帮助 Flutter 识别需要更新的项。 局部状态管理&a…...

编程日记 2026/2/27 13:18:09

如何在 Elasticsearch 中设置向量搜索 - 第二部分

作者&#xff1a;来自 Elastic Valentin Crettaz 了解如何在 Elasticsearch 中设置向量搜索并执行 k-NN 搜索。 本文是三篇系列文章中的第二篇&#xff0c;深入探讨了向量搜索&#xff08;也称为语义搜索&#xff09;的复杂性以及它在 Elasticsearch 中的实现方式。 第一部分重…...

编程日记 2026/4/11 23:03:01

DeepSeek的出现会对百度有多大影响？

当DeepSeek与ChatGPT等大模型接管搜索入口&#xff0c;我们正见证百年一遇的信息革命。 01 传统搜索已死&#xff1f;AI助手正在重写游戏规则&#xff01; 当DeepSeek与ChatGPT等大模型接管搜索入口&#xff0c;我们正见证百年一遇的信息革命。 就像汽车淘汰马车、触屏终结按键…...

编程日记 2026/4/11 21:17:06

【C#】条件运算符

1.逻辑与(&&) Console.WriteLine(true && true);//true Console.WriteLine(true && false);//false Console.WriteLine(false && false);//false2.逻辑或(||) Console.WriteLine(true || true);//true Console.WriteLine(true || false);//t…...

编程日记 2026/2/25 20:02:26

单例模式详解（Java）

单例模式详解（Java） 一、引言 1.1 概述单例模式的基本概念和重要性 单例模式是一种常用的软件设计模式，它确保一个类在整个应用程序中只有一个实例，并提供一个全局访问点来访问这个唯一实例。这种模式在资源管理、配置设置和日志记录等方面非常有用，因为它们通常只需要…...

编程日记 2026/4/18 5:58:33

PyQt学习记录01——加法计算器

目录 PyQt学习记录01——加法计算器 PyQt学习记录02——串口助手 0. 安装配置 0.1 安装相关库 首先打开你的PyCharm程序&#xff0c;然后新建一个目录用于学习&#xff0c;其次在terminal中输入 pip install pyqt5如果你不具有科学上网能力&#xff0c;请改为国内源 pip …...

编程日记 2026/4/11 21:22:42

笔记：蓝桥杯python搜索（3-2）——DFS剪支和记忆化搜索

目录 一、DFS剪支 二、例题 P2942 数字王国之军训军队 P3075 特殊的多边形 三、记忆化搜索 四、例题 例题 P3820 混境之地 P216 地宫取宝 一、DFS剪支 在搜索过程中&#xff0c;如果需要完全遍历所有情况可能需要很多时间在搜索到某种状态时&#xff0c;根据当前状态判断…...

编程日记 2026/2/21 13:15:45

k8s启空容器用于排查问题

如果 Pod 一会儿就销毁了&#xff0c;可能是由于 Pod 配置、节点状态或容器运行时问题导致的。 此时想进容器排查&#xff0c;但是pod一会儿就销毁了&#xff0c;不利于排查。 为了排查问题&#xff0c;可以启动一个空容器来临时保留 Pod&#xff0c;进而进入 Pod 内部进行调…...

编程日记 2026/2/21 19:27:18

jenkins备份还原配置文件

下载ThinBackup插件 方式1 从插件市场直接下载 Manage Jenkins->Manage Plugins->可选插件搜索 注意&#xff1a;有时可能因为网络或者版本问题下载不了&#xff0c;好像是默认下载最新版本&#xff0c;可选择手动安装&#xff01; 方式二 手动安装插件 点击查看手…...

编程日记 2026/4/14 0:15:43

02.11 数据库

1.思维导图 2.题目 将 epoll 服务器、客户端拿来用客户端&#xff1a;写一个界面&#xff0c;里面有注册登录服务器&#xff1a;处理注册和登录逻辑&#xff0c;注册的话将注册的账号密码写入数据库&#xff0c;登录的话查询数据库中是否存在账号&#xff0c;并验证密码是否正…...

编程日记 2026/4/22 6:12:35

物联网（IoT）如何与人工智能（AI）的结合

物联网&#xff08;IoT&#xff09;与人工智能&#xff08;AI&#xff09;的结合是当前技术发展的重要趋势&#xff0c;通常被称为 AIoT&#xff08;人工智能物联网&#xff09;。这种结合通过将AI的计算能力和数据分析能力与物联网的海量设备连接能力相结合&#xff0c;实现了…...

编程日记 2026/3/11 13:32:09

嵌入式硬件篇---原码、补码、反码

文章目录 前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结 十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...

编程日记 2026/2/27 7:00:49

PHP函数fgetc(): 从文件中读取一个字符

在PHP中&#xff0c;有许多用于文件操作的函数&#xff0c;其中之一就是fgetc()函数。fgetc()函数用于从打开的文件中读取一个字符&#xff0c;并将指针移动到下一个字符的位置。本文将介绍fgetc()函数的用法&#xff0c;并提供一些示例来帮助读者更好地理解和使用这个函数。 …...

编程日记 2026/2/26 16:38:58

Spring Boot整合DeepSeek实现AI对话（API调用和本地部署）

本篇文章会分基于DeepSeek开放平台上的API&#xff0c;以及本地私有化部署DeepSeek R1模型两种方式来整合使用。 本地化私有部署可以参考这篇博文 全面认识了解DeepSeek利用ollama在本地部署、使用和体验deepseek-r1大模型 Spring版本选择 根据Spring官网的描述 Spring AI是一…...

编程日记 2026/4/11 21:13:16

苹果转型独立AR眼镜：一场技术与创新的深度探索

在科技日新月异的今天，增强现实（AR）技术正逐渐从科幻电影走进我们的日常生活。作为科技界的领头羊，苹果公司的每一步动向都备受关注。近期，苹果宣布暂停原定的Mac连接式AR眼镜计划，转而全力研发一款独立的AR眼镜。这一战略调整不仅反映了苹果对AR市场的深度洞察，也预示着…...

编程日记 2026/4/11 21:21:08

Java小白入门基础知识（一）

1.初识Java java源程序通过javac 编译生成字节码文件&#xff0c;通过java命令运行java程序 总结&#xff1a; 1&#xff09;在一个Java文件中&#xff0c;只能有一个public class 2&#xff09;public class一定要和文件名一致 3&#xff09;类里面包含方法 4&#xff09…...

编程日记 2026/4/21 15:58:32

通过 Docker 安装和部署 KeyDB v6.3.4 的详细步骤

KeyDB 是一种高性能的开源内存数据库&#xff0c;最初是基于 Redis 项目开发的&#xff0c;但在性能、特性和功能上进行了许多增强和改进。它兼容 Redis 的大部分命令和数据结构&#xff0c;因此可以作为 Redis 的替代品使用&#xff0c;尤其是在需要更高性能和多线程支持的场景…...

编程日记 2026/4/17 4:38:24

【JavaEE进阶】依赖注入 DI详解

目录 &#x1f334;什么是依赖注入 &#x1f384;依赖注入的三种方法 &#x1f6a9;属性注⼊(Field Injection) &#x1f6a9;Setter注入 &#x1f6a9;构造方法注入 &#x1f6a9;三种注⼊的优缺点 &#x1f333;Autowired存在的问题 &#x1f332;解决Autowired存在的…...

编程日记 2026/4/19 22:03:02

Avnet RFSoC基于maltab得5G 毫米波 开发工具箱

使用 MATLAB 连接到 AMD Zynq™ RFSoC 评估板。使用 RF 附加卡执行 OTA 测试。使用 HDL Coder 部署算法 版本要求&#xff1a; 大于 2023b 需要以下支持包之一&#xff1a; 适用于 Xilinx 基于 Zynq 的无线电&#xff08;R2023b 及更早版本&#xff09;的通信工具箱支持包适…...

编程日记 2026/4/15 22:39:35

掌握 PHP 单例模式：构建更高效的应用

在 PHP 应用开发中&#xff0c;资源的高效管理至关重要。单例模式是一种能够帮助我们实现这一目标的设计模式。本文将深入探讨单例模式的概念、工作原理以及在 PHP 项目中何时应该&#xff08;或不应该&#xff09;使用它。 什么是单例模式&#xff1f; 单例模式是一种设计模…...

编程日记 2026/4/13 15:04:28

neo4j-解决导入数据后出现：Database ‘xxxx‘ is unavailable. Run :sysinfo for more info.

目录 问题描述 解决方法 重新导入 问题描述 最近在linux上部署了neo4j&#xff0c;参照之前写的博客:neo4j-数据的导出和导入_neo4j数据导入导出-CSDN博客 进行了数据导出、导入操作。但是在进行导入后&#xff0c;重新登录网页版neo4j&#xff0c;发现对应的数据库状态变…...

编程日记 2026/4/20 5:23:09

卷积神经网络（CNN）池化层的最大池化（Max Pooling）和 平均池化（Average Pooling）

在 卷积神经网络（CNN） 中，池化层（Pooling Layer） 是用来 减少特征图的空间尺寸、减少计算量、控制过拟合 的关键层。池化层通过 窗口操作 将输入特征图中一定区域的信息压缩成一个单一的值，常见的池化方式有 最大池化（Max Pooling） 和 平均池化（Average Pooling）。这…...

编程日记 2026/4/22 14:20:43

Mac（m1）本地部署deepseek-R1模型

1. 下载安装ollama 直接下载软件&#xff0c;下载完成之后&#xff0c;安装即可&#xff0c;安装完成之后&#xff0c;命令行中可出现ollama命令 2. 在ollama官网查看需要下载的模型下载命令 1. 在官网查看deepseek对应的模型 2. 选择使用电脑配置的模型 3. copy 对应模型的安…...

编程日记 2026/4/11 21:16:34