当前位置: 首页 > 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;…...

Qt - 地图相关 —— 3、Qt调用高德在线地图功能示例(附源码)

效果 作者其他相关文章链接:           Qt - 地图相关 —— 1、加载百度在线地图(附源码)           Qt - 地图相关 —— 2、Qt调用百度在线地图功能示例全集,包含线路规划、地铁线路查询等(附源码)           Qt - 地图相关 —— 3、Qt调用…...

cloudberry测试

一、引言 在当今大数据和 AI 飞速发展的时代&#xff0c;数据如同企业的核心资产&#xff0c;其价值不言而喻。数据库作为数据存储、管理和处理的关键工具&#xff0c;更是成为了各个领域的技术基石。无论是金融行业的交易记录处理&#xff0c;还是医疗领域的患者信息管理&…...

RocketMQ、RabbitMQ、Kafka 的底层实现、功能异同、应用场景及技术选型分析

1️⃣ 引言 在现代分布式系统架构中&#xff0c;&#x1f4e9;消息队列&#xff08;MQ&#xff09;是不可或缺的组件。它在系统&#x1f517;解耦、&#x1f4c9;流量削峰、⏳异步处理等方面发挥着重要作用。目前&#xff0c;主流的消息队列系统包括 &#x1f680;RocketMQ、&…...

UWB功耗大数据插桩调研

一、摘要 UWB功耗点 插桩点 日志关键字 电流 蓝牙持锁 BatteryStats的锁统计 vendor_bluetooth_lock 30~40mA 测距 UwbSessionManager.startRanging UwbSessionManager.stoptRanging 或接入fadiKey Uwb状态广播 "com.fadiui.dkservice.action.uwb.state.change&q…...

郭羽冲IOI2024参赛总结

非常荣幸能代表中国参加第 36 36 36 届国际信息学奥林匹克竞赛&#xff08; I O I 2024 IOI2024 IOI2024&#xff09;。感谢 C C F CCF CCF 为我们提供竞赛的平台&#xff0c;感谢随行的老师们一路上为我们提供的帮助与支持。 在每场比赛的前一个晚上&#xff0c;领队、副领…...

03:Spring之Web

一&#xff1a;Spring整合web环境 1&#xff1a;web的三大组件 Servlet&#xff1a;核心组件&#xff0c;负责处理请求和生成响应。 Filter&#xff1a;用于请求和响应的预处理和后处理&#xff0c;增强功能。 Listener&#xff1a;用于监听 Web 应用中的事件&#xff0c;实…...

lx-music落雪音乐-开源免费听歌软件[提供最新音源使用, 支持全网平台, 支持无损音乐下载]

lx-music_落雪音乐 链接&#xff1a;https://pan.xunlei.com/s/VOIpEt1xqf0un-vEQilidhjIA1?pwdgcux#...

129,【2】buuctf [BJDCTF2020]EzPHP

进入靶场 查看源代码 看到红框就知道对了 她下面那句话是编码后的&#xff0c;解码 1nD3x.php <?php // 高亮显示当前 PHP 文件的源代码&#xff0c;通常用于调试和展示代码结构 highlight_file(__FILE__); // 设置错误报告级别为 0&#xff0c;即不显示任何 PHP 错误信息…...

Python 面向对象(类,对象,方法,属性,魔术方法)

前言&#xff1a;在讲面向对象之前&#xff0c;我们先将面向过程和面向对象进行一个简单的分析比较&#xff0c;这样我们可以更好的理解与区分&#xff0c;然后我们在详细的讲解面向对象的优势。 面向过程&#xff08;Procedure-Oriented Programming&#xff0c;POP&#xff0…...

C语言之扫雷

C语言之扫雷 game.hgame.ctest.c 参考 https://blog.csdn.net/m0_62391199/article/details/124694375 game.h #pragma once #include <stdio.h> #include <time.h> #include <stdlib.h>#define ROW 9 #define COL 9#define ROWS ROW2 #define COLS COL2#de…...