基于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。

bash 复制代码
用户询问我的身份。我是一名高度熟练的软件工程师,拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助用户完成各种编程和开发任务。

我是Cline,一名高度熟练的软件工程师,拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助您完成各种编程和开发任务。
4.演示完成编程需求

接下来我们就让它帮我们完成一个编程需求。输入我们的提示词:

bash 复制代码
创建一个网页,标题为"赛博木鱼",设计要求如下:

页面整体布局
背景与样式:

背景颜色为深色#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按钮保存。

这是自动生成的网页文件:

XML 复制代码
<!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的自动化网页生成流程。已经成功创建了一个标题为"赛博木鱼"的网页,并定义了页面的布局、样式和功能需求。

相关推荐
空白到白几秒前
机器学习-决策树
人工智能·决策树·机器学习
奇舞精选13 分钟前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
说私域25 分钟前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
纪东东31 分钟前
机器学习——使用K近邻算法实现一个识别手写数字系统
人工智能·机器学习·近邻算法
视觉语言导航31 分钟前
南科大适应、协同与规划的完美融合!P³:迈向多功能的具身智能体
人工智能·具身智能
THMAIL35 分钟前
机器学习从入门到精通 - 数据预处理实战秘籍:清洗、转换与特征工程入门
人工智能·python·算法·机器学习·数据挖掘·逻辑回归
Moutai码农1 小时前
1.5、机器学习-回归算法
人工智能·机器学习·回归
非门由也1 小时前
《sklearn机器学习——绘制分数以评估模型》验证曲线、学习曲线
人工智能·机器学习·sklearn
THMAIL2 小时前
深度学习从入门到精通 - AutoML与神经网络搜索(NAS):自动化模型设计未来
人工智能·python·深度学习·神经网络·算法·机器学习·逻辑回归
文火冰糖的硅基工坊2 小时前
[光学原理与应用-433]:晶体光学 - 晶体光学是研究光在单晶体中传播规律及其伴随现象的分支学科,聚焦于各向异性光学媒质的光学特性
系统架构·光学·激光器·跨学科融合