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

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

【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;需要一点科学的魔法。 三、使用…...

电脑IP地址自定义

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

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

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

EX_25/2/11

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

二.2 整数表示(2.1-2.4)

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

中间件-安装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…...

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

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

2025清华:DeepSeek从入门到精通.pdf(附下载)

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

【AIGC】在VSCode中集成 DeepSeek(OPEN AI同理)

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

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

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

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

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

使用NPOI自定义导出excel文件

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

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

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

使用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 特点&#xff1a; 三、字符串 常用操作方法&#xff1a; 四、序列 操作方法&#xff1a;切片 五、元素 特点&#xff1a; 基本语法&#xff1a; 集合常用功能&#xff1a; 六、字…...

数据结构与算法:动态规划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…...

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

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...