项目1 猜拳小达人

《猜拳小达人》教学设计课题：猜拳小达人授课对象：中职一年级课型：新授课课时：2~3课时教材分析：结构内容：本节课选自《人工智能通识》的项目一。本节课的主要内容是体验人工智能的应用，了解深度学习TensorFlow.js框架，了解深度学习神经网络模型，了解图像分类的概念，掌握基于TensorFlow.js搭建网页应用的流程和方法。地位作用：如今人工智能已经逐步让人们的生活智能化，让企业服务智能化，那么无论为了工作还是为了跟上时代步伐，有必要去了解人工智能是如何运作的。本节课的学习将带领学生从零开始认识人工智能技术，并在浏览器中运行人工智能模型，使学生能够动手搭建一个简单的人工智能应用，即网页端的猜拳游戏，让学生建立起对人工智能的兴趣。学情分析学习心理特征：本节课的授课对象为中职一年级学生该阶段的学生学习自制力较差，上课注意力易被分散，因此在上课过程中，应该采用讲练结合的方式，让学生能够在实践中学习和巩固课程内容。同时该阶段的学生有很多自己的想法和创意，因此在设计任务时，需要给学生一定的自由发挥的空间，让学生自主地学习和实践。另外由于中职一年级的学生水平各不相同，因此教师在学生操作过程中应该实时观察，引导并鼓励基础较差的学生完成练习。知识基础：中职一年级学生已经掌握了计算机与浏览器的使用，因此可以让学生独立动手安装实训需要的环境。教学目标知识与技能目标：能够说出什么是人工智能能够说出人工智能的典型应用能够说出TensorFlow.js是什么能够说出Html是什么能够安装浏览器插件WebServerforChrome能够了解TensorFlow.js构建模型的过程能够部署猜拳游戏的Html与JS代码过程与方法：使用搜索引擎搜索信息，小组合作讨论人工智能的概念及其应用。根据教师发布的实训任务书，自主进行WebServerforChrome插件的安装与配置。根据教师发布的实训任务书，自主下载代码包到正确位置根据教师发布的实训任务书，自主采集手势数据、训练模型并进行猜拳游戏。情感态度与价值观：能够体会到人工智能技术的奇妙和给生活带来的乐趣。通过小组合作的方式，培养学生的主动参与的意识，强化自身的责任感，以及增强自己的合作能力。教学重难点教学重点：1、能够说出什么是人工智能2、能够说出TensorFlow.js是什么3、能够部署猜拳游戏的Html与JS代码教学难点：1、能够部署猜拳游戏的Html与JS代码教学方法教法：任务驱动法、练习法学法：自主学习法、小组合作学习法教学准备教学环境：多媒体网络计算机房教学资源：多媒体网络计算机，派Lab平台，PPT课件，微课教学过程教学内容及过程时间分配设计意图一、创设情景【教师活动】小派最近学习有点累，他想要一款游戏来缓解疲劳，于是他想到可以和计算机进行猜拳游戏：计算机的摄像头能够捕捉到小派的手势动作数据，并识别小派手势，然后根据小派和计算机随机出的手势，进行判断胜负。但是小派自己不会制作游戏，于是小派向我们寻求了帮助。2分钟该环节通过创设一个生活中真实存在的情景，让学生了解人工智能的应用。二、任务分析【教师活动】小派给我们布置了一个任务就是帮忙制作一个网页版的猜拳游戏。首先我们需要对如何开展该任务进行分析（该过程可以让学生进行小组讨论回答）预设：首先需要了解搭建网页端的人工智能应用使用什么工具或框架，接着需要了解如何运行网页端的人工智能应用及运行环境的配置，然后需要了解猜拳游戏前端页面的功能有什么，最后了解猜拳游戏中关键的手势识别模型。【学生活动】小组展开讨论各小组发表自己的任务分析结果【教师活动】对各小组的讨论结果进行评价，最后进行小结，得出最后的任务分析结果：子任务一：安装与配置环境子任务二：TensorFlow.js代码部署子任务三：手势数据采集、模型训练、猜拳PK3分钟该环节主要是对本节课的任务的一个讨论分析，在该过程中，让每个学生对接下来要完成的任务进行分析和讨论，让学生成为课堂的主体，提高学生的参与感，提升学生的自主思考能力。三、新知学习任务一：安装与配置环境【教师活动】在进行实训任务之前呢，老师这里先提供一个网址“/tools/ai-demo-simple-web/07-rps-dataset/index.html”，同学们可以通过这个网址进去体验一下猜拳游戏，这样，同学们能够对我们后面即将去实现的猜拳游戏有个整体的认识，知道这个游戏主要有什么功能。【学生活动】打开网址进行体验，根据界面功能与提示逐步进行猜拳PK。【教师活动】同学们在初次打开这个网页的时候，会有一个打开摄像头的提示，这时需要点击“允许”，因为后面的操作中会用到你的电脑内置的摄像头来捕捉你给出的手势。摄像头开启后，我们就可以采集数据了。在这个网页中我们可以看到“石头”、“布”、“剪刀”按钮，也就是说我们下面要采集这三种手势的图片。在三个按钮上方，可以看到摄像头实时捕捉的画面。假如这时你要采集石头手势的数据，那么你每点击一次，石头手势的样本就会自动加1，当然，采集数据的时候记得观察摄像头中的画面，确认你的手势出现在画面中。依次采集完数据之后呢，就可以点击按钮训练手势识别模型了。这里需要稍等一会，模型训练完成，页面会给你一个“完成”的提示。提示出来之后，你就可以开始玩猜拳游戏了。你可以随意对着摄像头给出一个剪刀、石头或者布的手势，然后点击“猜拳PK”，这时按钮下面会直接出猜拳结果。【学生活动】小组讨论探究，各组分享探究结果【教师活动】进行总结这里先简单的说一下最后猜拳PK部分的逻辑，同学们训练的手势识别模型先对你给出的手势进行识别，同时，计算机也会随机出一个手势，然后两个手势进行比较，再输出结果。15分钟在该环节中，设置了一个猜拳游戏体验的环节，能够让学生自己动手体验在网页上进行猜拳的一个过程，增加课堂的趣味性，调节课堂的氛围，同时也让学生对项目的目标成果有个整体认知。【教师活动】请同学们思考，为什么要安装Chrome浏览器的插件WebServerforChrome呢？预设：因为我们要搭建和运行网页版的猜拳游戏，想要运行本地的网页，就需要在本地模拟出一个服务器，方便起见，我们直接在Chrome浏览器中安装一个插件就可以了。【学生活动】思考并回答问题【教师活动】对学生的回答进行小结：同学们的推断都是比较准确的，Chrome浏览器因为安全的因素，限制直接运行本地网页文件，因此在进行网页相关项目调试时，就需要在本地模拟出一个网页服务器，而WebServerforChrome就是这样的一款Chrome扩展程序，让用户使用Chrome来充当自己的临时HTTP服务器。同学们，我们安装完这个插件后，要怎么运行网页呢？（同学们先动手安装，然后讨论）预设：需要配置一下这个插件，插件中会自动生成一个URL地址，点击这个地址就能跳转到网页所在的目录，然后双击网页就能打开了。【学生活动】思考并回答问题30分钟在该环节中，通过提问的方式引出接下来要操作的内容，同时让学生在动手操作之前能够思考为什么要做这个事.另外，让学生动手安装之后再抛出一个问题，让学生讨论发现问题的答案，而不是直接给出，增加学生之间的互动与交流。任务二：TensorFlow.js代码部署【教师活动】刚才我们已经把安装好了程序或者网页运行的插件，那么下面我们就要实现猜拳游戏的网页。就如同我们一开始体验的那个网页，基本的功能要有。那么一般搭建人工智能的网页应用，流行的工具是什么，TensorFlow.js。TensorFlow.js是TensorFlow的JavaScript版本。可运行在浏览器环境中，也可以通过服务器端Node.js启动。它不但支持完全基于JavaScript从头开发、训练和部署模型，也可以用来运行已有的Python版TensorFlow模型，或者基于现有的模型进行继续训练。这个框架有四大优势，我们简单了解一下即可。第一，不需要安装软件或驱动（打开浏览器即可使用）；第二，可以通过浏览器进行更加方便的人机交互；第三，可以通过手机浏览器，调用手机硬件的各种传感器（如：GPS、电子罗盘、加速度传感器、摄像头等）；第四，用户的数据可以无需上传到服务器，在本地即可完成所需操作。通过这些优势，TensorFlow.js将给开发者带来极高的灵活性。比如现在，我们不需要安装特别多特别复杂的依赖包，也不需要你的电脑有多高的配置，我们也可以搭建一个人工智能的应用。这里老师就不过多的讲解，考虑到从零开始编码实现网页的前后端难度非常大，那么请同学们进入派Lab平台，这里有相关的资源供我们借鉴。在平台上找到这门课这个项目，我们可以直接下载猜拳游戏的网页代码。下载之后，解压到指定的位置，这个时候就要回想一下配置插件的时候设置的文件夹目录。【学生活动】参考实训任务书或派Lab平台上的实训指南，完成猜拳游戏代码的部署。掌握Html与js代码之间的调用关系，TensorFlow.js构建模型的方法。【教师活动】在学生练习时进行巡视，对一些动手能力较弱的学生进行相关的指导，引导学生完成练习。【教师活动】对学生的练习进行简单小结，指出学生常见的错误。15分钟在该环节中，主要介绍猜拳游戏网页的实现，当然，这部分要考虑实现难度与学生的能力。给出一个代码样例，有条件的学生可以在此基础上进行改进。这里需要老师带着学生一起去理解代码之间的结构以及代码内部的核心部分。重点了解TensorFlow.js构建模型的部分。让学生对模型有所认知。任务三：手势数据采集、模型训练、猜拳PK【教师活动】现在我们把猜拳游戏的代码以及运行猜拳游戏网页的环境都准备好了，接下来就可以在网页上一步一步地实现猜拳PK了。想要实现最后的猜拳，就得让计算机能够看出我们出的是什么手势，然后才能进行比较。这就用到了手势自动识别模型，这个模型怎么来的呢，当然就是使用相关的手势数据进行训练得来的。那首先我们先采集一批手势数据。按照前面我们体验的过程，就可以在我们自己的网页上进行体验了。现在就请同学们参考实训任务书或者派Lab平台的实训指南，自主完成任务三。【学生活动】参考实训任务书或者派Lab平台的实训指南完成任务三【教师活动】在学生练习时进行巡视，对一些动手能力较弱的学生进行相关的指导，引导学生完成练习。最后猜拳PK的结果（供参考）15分钟该环节是一个实训环节，结合学生自身的特点，让学生自己参考任务书，完成任务，提高学生的自学能力，以及动手实践能力。四、课堂小结【教师活动】教师请各小组对本节课学习的内容进行小结。最后教师进行总结。布置课后习题5分钟让学生自己进行小结，加深学生对本节课知识的理解，也同时锻炼学生总结归纳的能力。学习效果评价课后习题题型题目答案填空题（一空一分）1、阐述什么是人工智能2、列举至少三个人工智能的应用场景3、临时在Chrome浏览器中运行本地网页，可以安装（）插件1、略2、无人驾驶、智能客服、翻译机3、WebServerforChrome选择题（每题2分）4、关于TensorFlow.js，下列说法错误的是（）A.TensorFlow.js是一个JavaScript库B.使用TensorFlow.js可以在浏览器上创建CNN、RNN等模型C.TensorFlow.js可以在浏览器或Node.js服务端运行D.TensorFlow.js中的张量即变量5、以下哪个不是TensorFlow.js的优点（）A、网页应用交互性更强B、有访问GPS，Camera，Microphone，Accelerator等传感器的标准apiC.通过链接即可分享程序D.TensorFlow.js开发的应用运行速度非常快4、D5