Datawhale AI 冬令营 2期:使用豆包在线IDE制作蕃茄时钟(基于WEB)

主线任务:制作蕃茄时钟

环境准备

  • 豆包在线IDE

在这里插入图片描述

本次蕃茄时钟是基于WEB三客(HTML、CSS、JS)来实现的,选择HTML/CSS/JS来创建工程即可。

在这里插入图片描述
如下图所示,我们的项目就创建完毕了。
在这里插入图片描述

编写代码

请你基于html、tailwind css和javascript,帮我设计一个“番茄时钟”。要求UI简洁美观大方,同时具有呼吸感,点击开始计时、点击暂停计时和重置计时的功能能够完美实现

将我们想要的蕃茄时钟的要求交给豆包IDE,就可以让豆包按照我们的要求生成代码。

在这里插入图片描述

然后将生成好的代码按照格式cp到工程对应的文件里,如图所示。

在这里插入图片描述

点击运行。

在这里插入图片描述
在这里插入图片描述

支线任务1:豆包MarsCode の其它初体验

1.代码AI修复

豆包的C++ IDE自带代码静态检测,只需要把鼠标移动到红色下波浪线的位置即可看到报错信息。
豆包在线IDE自带AI Fix,也就是AI修复。只需要点击AI Fix就可以体验啦。
请添加图片描述
这里是拿了一个C++的示范来演示,本来觉得这学期学完了JAVA感觉将面向对象编程的思想应用在C++上应该也是差不多的,结果发现C++是有自己一套面向对象编程范式的。 AI Fix的时间很快,经过Thinking和Print,大概5秒钟左右就出来了。可以看到AI Fix生成出来的正确标绿代码放在了右侧,与错误的原代码进行对比(什么插件也没有的VSC使用者看哭)。此时在输入框继续输入你的需求Prompt,可以接着进一步对代码进行更改,如果对生成出来的修正代码满意的话,就可以点击蓝色的Accept按钮,将错误代码替换成生成出来的修正代码。
请添加图片描述

修改好后的代码

2. 解释代码、AI注释

在线IDE版

在线IDE提供了很方便的快速解释代码、注释、生成单侧的方法。只需要用鼠标选上需要豆包解释的代码,IDE会自动弹出一个菜单栏,点击Explain\解释代码就会让豆包进行解释了。同理,点击Doc\注释 就会让豆包给现有的代码添加注释。

在这里插入图片描述

插件版

在本地IDE安装豆包插件后,豆包会在每一个代码块、函数、方法前加入小菜单栏。点击解释代码就可以让MarsCode帮你解释代码。很实用的功能,至少不会再打开浏览器,再复制粘贴到XX AI上了。(笑)
在这里插入图片描述

在这里插入图片描述

3. 单测

点击单测让豆包为代码生成测试点以便检测代码的鲁棒性。很适合在工程开发和刷题的时候配合食用。在线IDE的单测功能跟上面的同理,“划词”即用。

在这里插入图片描述

4. 在Code-server/其他IDE/编辑器使用豆包

目前豆包MarsCode官方提供支持嵌入Visual Studio Code和JetBrains全家桶两种流行编程使用软件。本人平时使用自己在服务器搭建的Code-Server,但是code-server里的商店并没有提供豆包安装包(应该是被CodeServer隐藏起来了,我安装的时候反正是没有搜到),而且豆包在Code-Server登录授权逻辑有些问题(在IDE中需要登录账号后会弹出到外面的浏览器,然后在浏览器登录成功后会向豆包返回一个登录Token,但是我的Code-Server并不是在本地的。。。),总之希望未来豆包能够修复这些问题吧。

在这里插入图片描述

在这里插入图片描述
Code-Server效果如上图所示。

想在VSC和JetBrains全家桶用就很简单了,进入官网后直接点击对应按钮即可。

支线任务2:思考

关于Prompt

Prompt用来引导模型进行输入和输出,直观来讲,有的时候AI系统可能无法直接识别用户对AI输入的内容里超级超级长的句子,但是包含了Prompt,或者AI系统会把这些句子转化成AI可以识别的Prompt,这样才可以让AI系统理解用户的要求,并按照用户的要求(Prompt)来进行内容的生成。

在这里插入图片描述
在主线任务中,我们要求AI生成一个基于HTML、Tailwind CSS和JavaScript的“番茄时钟”。这个时钟需要拥有简洁美观大方的UI设计,并且具有呼吸感(即界面元素有轻微的动态变化,给人一种放松、自然的感觉)。此外,它还必须包括点击开始计时、点击暂停计时和重置计时的功能。

在MarsCode的视角中,它首先会捕捉这些重要信息:html,tailwind css,JavaScript。这些信息奠定了生成的内容是基于什么技术栈来实现的。用户指定了使用WEB三客来生成内容,豆包就不会用C++生成代码,也不会用Julia来生成代码,也不会用cangjie来生成代码。。。(真的是够了

在这里插入图片描述

这些Prompt关键词对于AI是极为重要的。拿与人的沟通交流举个例子,老师对小明说,“小明,请你拿着我的杯子,去隔壁的水房帮我打个热水。”小明就会捕捉到关键信息:拿着老师的杯子,去水房打热水。捕捉正确的关键信息才会更好地理解、执行实现用户想要的内容效果。在AI系统中,Prompt中的关键词也是帮助AI理解用户意图和生成符合期望内容的关键。AI会分析这些关键词,理解其语义和上下文,从而生成与用户需求相匹配的内容或执行相应的操作。

主线作业:井字棋

请你基于html、tailwind css和javascript,帮我设计一个“井字棋游戏”。要求UI简洁美观大方,同时具有呼吸感,人类玩家以及电脑玩家放置棋子,游戏胜负平局判定条件能够完美实现

在这里插入图片描述

实现效果

在这里插入图片描述

修复问题

格子BUG1

点击格子后会出现bug,即点击一个格子后其他的格子也会被自动点亮。

在这里插入图片描述

function makeMove(index) {
    if (board[index] === '') {
        board[index] = currentPlayer;
        console.log('Updated board:', board); // 添加日志输出
        updateBoard();
        checkWinner();
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        if (currentPlayer === 'O') {
            setTimeout(makeComputerMove, 1000);
        }
    }
}

格子BUG2

在这里插入图片描述

最终实现效果

在这里插入图片描述

感想(碎碎念话痨时刻)

很赞同Datawhale 冬令营第2题Baseline里的一句话,AI时代下的编程,要更好地与AI协作解决问题。 身边的同学有使用ChatGPT来构建基于抓取校园信息的校园AI助手系统,我自己也是使用MarsCode和FittenCode(嗯,有一说一跟豆包比还要继续努力啊)来搭建自己的基于Vue-Vite-Electron的深度定制AI聊天助手HoshinoProject(详情见24年Datawhale夏令营哈哈)。
目前计算机可以实现很多华丽的效果,但是这确实是一个庞大的工程量,也许实现一个动效就要动辄几百行代码。合理使用AI工具确实提高了软件的开发效率,让开发者能够节省出来一些时间去思考其他的问题。
随着技术的不断发展,任何人都需要不断适应技术变革,掌握新技术,正如历史所展示的那样,才能在未来更自如地面对变化和挑战。 合理使用AI技术,也不能完全依赖于AI,将其作为一款辅助开发的工具,才能让自己的水平和开发效率继续提升。

一个AI代码自动补全的例子
OK,这是本人第三次参加DataWhale冬令营,非常感谢科鲸再次给我这次机会学习AI(来自双非SE学生的苦笑)。距离参加上次的夏令营已经有一学期(半年)的时间了,感觉大二的时间真的很宝贵,也觉得时间特别的稀有,原本参加完夏令营后立Flag要在这学期里没事的时候看看DataWahle的AI,补一补深度学习和PyTroch,结果还是犯懒了。这学期参加了XCPC,也是学到了JAVA面向对象编程的思想,反过来再看一看之前所学的内容,确实比以前轻松了很多。希望这个假期接着与Datawhale和冬令营的小伙伴们一起学习,一起进步,一起收获。

2024.12.24 ~~写文章用时一节日语课和一个晚饭的功夫~~

于明阳湖畔~~的10教~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值