《智能前端技术与实践》——前言

简介: 《智能前端技术与实践》——前言

推荐序 1


随着大数据、云计算、互联网、物联网等信息技术的发展泛在感知数据和图形处理器等计算平台极大地推动了以深度神经网络为代表的人工智能技术的应用,大幅弥补了科学与应用之间的技术鸿沟像分类、语音识别、知识问答、人机对弈、无人驾驶等技术实现了从不能用、不好用到可以用、效果好的突破。

然而,以深度神经网络为代表的人工智能应用过度依赖计算机算力因此在后摩尔定律时代它可能会遭遇发展瓶颈。具体来说,计算能力提10倍相当于三年的算法改进,算力提高的背后却是无法承受的硬件成本此,基于当下现有的硬件设施平台设计出参数少、准确率高的神经网络对复杂人工智能技术在移动端设备或嵌入式设备上的落地应用显得尤为重要。

本书基于TensorFlow.js框架将计算机视觉技术与前端开发有机结合,介绍了线性回归、logistical回归、XOR问题、人体姿态检测、目标检测、OCROptical Character Recognition光学字符识别)等案例的部署。这是一本横跨前端开发和深度学习两大技术领域的书,可谓一册在手,应有尽有!


李昌华

陕西省计算机教育学会副理事长、博士生导师


推荐序2



当我认识璞东时,他还是一名即将毕业的大四学生,还记得我们第一次视频通话是在2020年。当时他对代码的浓厚兴趣给我留下了深刻的印象他根据自己在前端开发和深度习方面的编程经验编写了本书。

书中相关主题的知识广度令人印象深刻。本书一共包含多个案例,如线性回归、logistical回归、XOR问题、姿态检测、目标检测、OCR等案例。这些案例可在石璞东的个人网站、微信小程序和Google网上应用商店上找到。

Web TensorFlow JavaScript方面的开发水平。我真心希望本书能够帮助所有具Web开发经验和深度学习能的程序员或对该领域有兴趣的人。



Alex(岑国良)

Savills Singapore Pte公司会计


推荐序3



我希望我的描述能让读者快速感知到能从本书里学到什么。如果你已经有了一些编程基础,想要通过本书了解更多的实战经验并且能够快速上手,那么本书会令你得偿所愿虽然实践出真知,但是基础理论也很重要。

本书

本书首先介绍开发环境的配置与前端开发基础知识(包含HTMLCSSJavaScript),并将其与深度学习有机融合,在此基础上带领读者进行一些简单的网页开发、Google浏览器插件开发以及微信小程序开发等。本书然后分别介绍了深度学习的基础知识、TensorFlow.js框架以及等,以及一些基础实践案例。Google层递起读的兴

本书的所有案例可参见作者的个人网站、者的信小程序Google上应用商店。丰富的案例将帮助所有阅读本书的人更好地理解相关技术。

我很荣幸能够与本书的作者在同一所大学相识,在一同学习前端开发的过程中,我能够深刻地感受到作者对于技术的热爱与追求,我也很钦佩他孜孜不倦的探索精神。

本书是一本实用的工具书,相比于枯燥乏味的理论知识,它主要展示从实际操作中总结出的一些经验教训我热切地希望本书的读者能够打开自己的代码编译器,动手实现本书中的一切案例,你会有意想不到的收获



霍鑫楠

北京完美世界前端开发工程师



一个成熟的人工智能应用包括算法、数据以及工程(即大前端)三个方面,因此,在人 工智能时代,前端智能化是 Web 前端领域的重要发展趋势之一,该技术处于机器学习和 JavaScript 的前沿。


我是通过本科毕业设计才开始接触到前端智能化的,还记得当时的毕业设计要求是基于 TensorFlow 搭建 AlexNet 网络并训练 MNIST 手写数字,并保证其准确识别率不低于 95%。 虽然这个任务完成起来几乎没有任何难度,但我当时脑海中要完成的任务绝非如此。在我的 想象中,最终的任务是用户通过手机等移动端设备或其他嵌入式设备随意采集不同的手写数 字,经过模型预测之后,其结果可以正确显示出来。随着不断学习,我发现要想将我脑海中 的画面落地到实际业务场景中,需要同时具备前端开发和机器学习两大领域的背景知识。虽 然机器学习并非全新的概念,但通过 JavaScript 将其应用到前端的技术还处于起步探索阶段, 并且相关的文献寥寥无几,因此大部分情况下只能自己硬啃官方文档。


除横跨两大技术栈的难度外,我们还要考虑数据预处理、张量操作。针对不同硬件设备, 选择不同的神经网络设计方法。针对不同前端平台,选择相应开发方法等。对于任何一个初 学者来说,如此庞大的知识体系是很难快速搭建的。


在研究生入学前的暑假,我有幸认识了哈尔滨工业大学的博士研究生冯振和人民邮电出 版社的编辑张涛,他们听取了我关于本科毕业设计的一些想法,并鼓励我写一本关于前端和 人工智能的书。我听了之后热血沸腾,这既可以系统梳理我的知识体系,又可以分享我学习 过程中的经验教训,帮助大家少走弯路,于是我答应了。


因为从大二开始,我就在我的个人网站、微信公众号等其他第三方平台发表文章,所以我 想当然地以为写书会和写博客文章一样简单。直到 2020 年寒假正式开始写书,我才体验到其 中的艰辛。为了打磨书稿,我无数次更改目录,无数次调整内容框架,无数次梳理文字,无数次 考究推理的合理性。为了迎合最新版本或适配更多设备,我还需要不断升级改造案例,我深入考 虑每一章、每一节、每一段话,甚至每一个用词的细节。在 2021 年寒假期间,我完成了全书内容 的 80%。开学之后,由于没有太多集中的时间,直到 2021 年 6 月我才完成了本书的初稿。接下来 的修改又花了几个月的时间。不过,最后看到我研究生期间的第一本作品,我觉得这一切都是值 得的。


本书基于 TensorFlow.js 讲述如何在浏览器端开发人工智能应用。我希望本书能够帮助相关从业者或任何对前端和深度学习感兴趣的朋友快速入门,进而促进复杂人工智能在移动端 设备或嵌入式设备上的应用。


全书共12章,主要内容如下。

1重点介绍了如何在Windows系统和macOS下配置相关的开发环境,包括Anaconda3TensorFlow 2npmWebStormGoogle览器以及微信开发者工具的安装等

2章重点介绍了与前端开发相关的基础内容,包括HTML基础、CSS基础、Google扩展程序相关JavaScript API深度学习中JavaScript以及微信小程序开发等。其中,信小程序端样式设计基于ColorUI框架,网页端样式设计基于Bootstrap框架,网页端交互操作基于jQuery框架。

3章讨论了与深度学习相关的基础内容,包括深度学习环境、深度学习框架等。

4章讲述了与前端智能开发相关的框架,包括TensorFlow.js低阶APITensorFlow.js高阶APITensorFlow.js Vis库以及其他较重要的API

5章介绍了与卷积神经网络相关的内容,包括卷积神经网络的核心思想、卷积层、化层以及4种经典的轻量级卷积神经网络。

6章讨论了5个简单的案例。

7章讲述了5个与计算机视觉有关的数据集及其使用方法,并结合微信小程序展示了基于CNNMNIST手写数字的识别

8章讨论了一个基于CNN的常见水果分类案例。

9章展示了一个关于人体姿态检测的案例。

10章展示了如何在微信小程序端完成一个基于Coco SSD的目标检测案例。

11章讨论了传OCR技术以及深度学习背景下的OCR技术,并详细讲解了OCR术在微信小程序以及Google扩展程序中的部署。

12章介绍了一些有趣的前端人工智能应用。

本书适合以下人员阅读:

Web端开发工程师;

前端AI工程师

深度学习算法工程师;

计算机相关专业学生以及任何对前端开发和深度学习感兴趣的人。

本书有专门的读者交流群,添加hahaCoder微信公众号即可加入读者交流群。同时,我也会在bilibili网站分享一些技术总结和个人感悟,在bilibili网站中搜索“石璞东”即可找到我。


致谢

本书的顺利完成,得益于家人、老师和朋友的帮助

感谢我的奶奶、爸爸、妈妈为我提供的写作环境,感谢姐姐、姐夫、堂哥、表哥给我的建议,没有他们的支持与鼓励,我难以完成本书。

感谢我的女朋友王璐瑶在写书过程中对我的理解、陪伴与支持。

感谢人民邮电出版社的编辑在选题立项、书稿撰写、审核出版等过程中的指导,没有他们的督促与把关,我也难以看到本书的顺利出版

最后,感谢我的读者以及所有曾经帮助过我的人!



石璞东

相关文章
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
2天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
2天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
2天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
2天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
2天前
|
前端开发 JavaScript 安全
【TypeScript技术专栏】TypeScript在微前端架构中的应用
【4月更文挑战第30天】微前端架构通过拆分应用提升开发效率和降低维护成本,TypeScript作为静态类型语言,以其类型安全、代码智能提示和重构支持强化这一架构。在实践中,TypeScript定义公共接口确保跨微前端通信一致性,用于编写微前端以保证代码质量,且能无缝集成到构建流程中。在微前端架构中,TypeScript是保障正确性和可维护性的有力工具。
|
2天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
2天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
2天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略