前端基础实战 4

AI智慧导游项目实战课件目录01系统功能与实现思路02界面布局实现03功能代码实现系统功能与实现思路AI智慧导游功能描述AI智慧导游是一个基于前端开发技术实现的AI智能体，可以随时随地为用户提供旅游咨询和行程规划服务，解答关于旅游景点的问题和提供各类信息。系统功能与实现思路AI智慧导游功能描述系统功能与实现思路各功能实现思路1．前端布局实现首先，作为一个旅游助手，其主要使用场景应该是在移动端而不是PC端，所以其页面布局和适配不需要考虑响应式布局，只需要专门针对移动端进行布局即可。而在移动端，由于不同设备的分辨率和屏幕的纵横比均不一样，考虑到各种屏幕比例的适配性，只能使用弹性布局。其次，作为一个AI对话智能体，可以参考的页面设计风格是比较丰富的，重点是如何在有限的屏幕中尽可能多地布局功能菜单，尽量不要浪费页面的布局空间。根据常用的AI对话工具的页面设计风格，将屏幕纵向划分为3个区域。系统功能与实现思路申请智谱AI的APIKey目前比较火爆的大模型主要有国内的DeepSeek、通义千问及国外的Claude、GPT-4等。系统功能与实现思路核心功能的关键技术作为一个AI旅游助手智能体，本项目的功能主要有AI问答、智能识图、语言翻译和语音播报等。对于上述几大功能，代码实现的主要思路如下。系统功能与实现思路核心功能的关键技术（1）AI问答：与常规的AI问答一样，用户提出问题，交由AI进行回答。在提示词中给定一个角色，让AI扮演导游的角色。（2）智能识图：在移动端，可以通过拍照或浏览图库的方式来上传图像，再交由AI的识图模型进行图像识别和分析，智谱AI的GLM-4V大模型可实现该功能。（3）语言翻译：语言翻译是AI大模型非常成熟的功能，这里交由GLM-4-Plus大模型来实现，只需要在提示词中给定需求，要求大模型进行相应语言之间的翻译转换即可。（4）语音播报：语音播报最主要的应用场景是进行语言翻译的时候与他人交流，进而提高沟通效率。（5）用户体验优化：因为本书主要讲解Web前端开发，所以将功能实现专注于前端JavaScript的调用上，而事实上要实现更加强大的AI智慧导游的功能，借助后端开发可以做得更好。系统功能与实现思路JavaScript对接大模型目前常用的AI大模型均支持基于HTTP的API调用，也就是说，只要是可以发送HTTP请求并处理请求的编程语言，均可以对接AI大模型。JavaScript内置了一个强大的HTTP处理函数fetch()，可以很好地处理HTTP的请求和响应。系统功能与实现思路JavaScript对接大模型运行上述代码，可以在控制台中输出大模型的响应，其为JSON格式数据，如图11-4所示。系统功能与实现思路JavaScript对接大模型上述代码主要实现了以下3个功能。（1）基于HTTP的通信规范和智谱AI对API参数的要求，配置了智谱AI的API参数，提供了智谱AI的URL地址、APIKey和对应的模型调用的请求正文。（2）使用fetch()函数将HTTP请求发送给API，使用POST请求类型进行发送，发送的是JSON格式的数据。该JSON对象的数据定义必须按照智谱AI的接口规范来定义。（3）对智谱AI的响应进行处理，包括判断响应是否正常，正常则将响应的正文内容输出到控制台，不正常则输出异常信息。界面布局实现界面布局框架在移动端，目前通用的布局方案就是弹性布局，本书第4章有专门的篇幅进行讲解，本节内容直接使用即可。首先绘制AI智慧导游布局线框图，如图11-5所示。界面布局实现界面布局框架有了AI智慧导游布局线框图后，便可以利用HTML+CSS来实现布局，此布局的核心有如下两点。（1）顶部要始终保持在页面的顶端，底部要始终保持在页面的底端，这就意味着，对于不同分辨率的手机，中间的对话区域可以灵活伸缩。（2）需要使用弹性布局来实现，同时需要固定顶部和底部，使中间区域在没有对话时也保持弹性，始终填满整个页面。因为提问和回答的盒模型是动态生成的，所以需要利用JavaScript来动态添加元素，其样式可以预先在CSS中进行设置。界面布局实现界面布局代码实现具体的实现代码如下，请读者注意查看代码中的注释界面布局实现移动端访问HTML页面要运行Nginx服务，只需要进入解压缩目录，双击nginx.exe即可，此时Nginx将开启HTTP服务的默认端口80。打开浏览器，访问“”，如果进入图11-7所示的界面，则说明Nginx服务运行成功。界面布局实现移动端访问HTML页面当Nginx运行成功后，只需要将HTML页面源文件（建议将文件命名为英文，如ai-travel.html）放置于Nginx主目录的html目录下，即可通过移动端访问该页面，具体步骤如下。（1）确保手机与计算机连接于同一个Wi-Fi网络，保证手机与计算机在同一个网段，以实现互访。（2）临时关闭Windows的防火墙，否则手机端无法正常访问Nginx的80端口。（3）在Windows操作系统的命令行窗口中运行“ipconfig”命令，查看当前计算机端的无线网络的IP地址，如编者计算机端的IP地址为“28”，此时，只需要在手机端访问28/ai-travel.html即可访问开发的页面。功能代码实现AI问答以下代码演示了如何接收流式响应并将其填充到消息框中。为节省篇幅，以下代码直接完成了AI问答的功能，具体细节请看代码注释。功能代码实现AI问答另外，关于流式响应的JSON处理，读者可以发现，相对于常规的同步响应来说，异步操作下读取的响应处理起来要麻烦一些，主要原因是流式响应可能会出现图11-8所示的响应内容。功能代码实现AI问答功能代码实现智能识图文件上传事件由

onchange来触发。将上传的图像保存为Base64编码（即使用52个大小写字母、10个数字及“+”“/”对任意文本或二进制数据进行编码），并和提示词一起提交给大模型，实现智能识图的功能。具体的实现代码如下。功能代码实现智能识图针对上述代码，还需要注意以下几点特殊情况。（1）因为文件上传框被隐藏，所以需要通过addImage()来触发文件上传框的单击事件。如果该功能基于PC端，则不会触发拍照功能，只能浏览文件。（2）因为智能识图功能通常是一次性的，不需要AI具备记忆功能，所以上述代码并没有使用全局变量messages，也没有将新响应内容记录到messages数组中，这样实现的就是单次对话的效果。（3）上述代码使用了sessionStorage对象，用于保存当前页面中的临时数据。因为图像上传后要与提示词一起提交给大模型，所以必须有一个地方来保存图像，而sessionStorage对象可以很好地实现这一功能。（4）在旅游场景下，通常用户使用智能识图功能的目的是相对确定的，所以这里直接将提示词编写到代码中，而不需要用户手动输入提示词。当用户上传图像后，页面将自动把提示词和图像提交给大模型，同时获取输出。功能代码实现语言翻译语言翻译功能与AI问答功能在本质上没有太大区别，代码基本一致，核心差异在于大模型的提示词，其关键代码如下。功能代码实现语音播报以下代码演示了如何通过WebSpeechAPI来调用操作系统的本地语音合成接口，以及进行暂停、停止、恢复等操作。功能代码实现语音播报有了上述代码，在AI智慧导游中进行整合就是比较简单的事情了，只需要一个控制按钮来进行播