智能体开发技术（Python+FastAPI版） 课件 第三章 AI问答

AI问答content目录01功能与设计分析02前后端准备工作03文本问答功能04图像识别与生成功能与设计分析01核心功能列表AI问答系统概述AI问答系统是目前极为常见的一种AI大模型的基础应用，很多AI应用均在此基础之上进行拓展。本章主要利用JavaScript和FastAPI实现基于前后端交互的AI问答，主要包括以下功能。（1）利用FastAPI与阿里云的大模型实现对接，并处理流式响应。（2）实现基于纯文本的AI问答，与平时使用的AI聊天应用类似。（3）调用阿里云的视频理解模型实现图像识别功能，解读图像的内容。（4）调用阿里云的通义万相模型实现文本生成图像功能，并在前端展示生成的图像。（5）由于大模型不具备实时联网功能，因此AI问答系统还要实现联网搜索与问答功能。（6）对接高德地图提供的MCP服务，用于实现地理位置查询、天气查询等功能。（7）提供基于JavaScript调用操作系统本地的语音合成接口，实现语音朗读功能。整体实现思路为什么选择阿里云首先，阿里云作为国内领先的大模型提供商，其发布的Qwen3模型的功能丝毫不逊色于其他大模型。其次，阿里云提供的大模型的功能较为全面，AI问答系统涉及的文本问答、图像识别、图像生成、联网搜索等功能均可以基于阿里云大模型实现。这样做的好处是，读者可以将学习的重心放在代码逻辑和实现上，而不是各类平台的接口对接上。整体实现思路前端界面设计AI问答系统的前端界面采用标准的HTML+CSS来实现，设计比较简洁。其主要有两个关键点需要注意：第一个关键点是聊天框中的问答，由于是动态生成的DIV，因此需要使用JavaScript的文档对象来动态创建一个DIV元素，即document.createElement('div')；第二个关键点是图像识别时需要上传图像并显示，细心的读者可能已经发现，在AI问答系统项目的主界面中并没有出现文件上传的元素，而是对其进行了隐藏。文本问答功能此功能几乎可以通过对接任意大模型来实现，并在前端利用fetch()函数进行流式响应的读取和填充。整体实现思路图像识别功能首先，由于使用图像识别功能时，用户需要上传本地图像，因此会用到文件上传组件。然而，该组件的默认样式可能与整体界面风格不协调，因此建议将其隐藏。可以通过JavaScript代码来触发文件上传功能，以保持界面设计的一致性和用户体验的流畅性。其次，用户上传的图像不能直接传递至后台，而是应暂存到浏览器中，并显示预览图，可以考虑使用JavaScript的localStorage或sessionStorage对象来临时保存图像文件的Base64编码。此后，让用户编写提示词，确定提示词后，将图像与提示词一同上传给后台接口，后台接口会与大模型进行交互。AI问答系统中图像识别功能的运行结果如图3-2所示。整体实现思路图像生成功能图像生成功能主要通过调用阿里云的通义万相v2实现，此功能的实现分成两步：第一步，将用户的提示词提交给后台，再由后台转交给通义万相生成图像；第二步，等待通义万相生成结束后，获取图像的URL，并解析出图像名称，将其保存到项目目录中，将图像的路径通过响应返回给前端，由前端界面渲染该图像。注意：因为图像生成功能响应给前端的是图像的URL，所以不需要考虑流式响应的处理。整体实现思路联网搜索功能在AI问答系统中，联网搜索功能几乎成了标配，核心原因是AI大模型本身不具备实时能力，需要具备搜索功能才能分析及总结实时数据，并以大模型理解的表达形式响应给用户。联网搜索功能的本质就是根据用户的提问，通过搜索引擎进行搜索，并将返回的搜索结果连同用户的提问一起交给大模型进行总结、整理，并根据用户的提问来进行回答。联网搜索功能有两种实现方式：第一种是通过搜索引擎搜索用户提问，并将搜索结果界面的内容作为提示词输入大模型；第二种是直接调用搜索引擎提供的API，该方法可以更好地过滤搜索引擎的广告，以JSON格式返回结果。整体实现思路高德MCP服务的调用如果要在AI问答系统中集成MCP服务调用，则必须使用代码来开发MCP客户端。其中，Python的mcp库提供了对客户端开发的支持。但是，相对于开发MCP服务器，开发MCP客户端要更复杂一些，因为客户端涉及与服务器的连接、接口和规范的读取、与大模型的两次交互、异步处理、连接状态的维持等诸多操作。语音朗读功能实现该功能的方案有两种：第一种是直接利用JavaScript调用本地语音合成接口，实现简单，且JavaScript内置支持；第二种是调用云API来进行语音合成，并将合成的语音保存为文件，在前端利用JavaScript进行播放。本章采用第一种方案实现语音朗读功能。前后端准备工作02前端界面实现前端界面是标准的HTML+CSS实现，且当前只考虑在PC端实现，不考虑在移动端实现，也不考虑响应式布局，相对比较简单，通过常规的层叠样式表（CascadingStyleSheets，CSS）即可完成。在templates目录下创建一个名为chat.html的源代码文件，以便在FastAPI中作为模板进行渲染，其内容及注释如下。前端界面实现上述代码中引用的style.css文件的内容如下。如果要调试上述代码，则可以使用两种方案：第一种是直接打开该HTML文件进行调试；第二种是在FastAPI中进行调试。这里推荐使用第二种方案。静态目录设置因为前端的模板界面中通常会引入CSS文件、JavaScript源文件，或者一些静态的图像等内容，所以必须确保前端界面中至少有一个正确的路径。在FastAPI中，静态目录通常放置于项目根目录的static目录下，同时，要让chat.html中引用的JavaScript文件或CSS文件路径生效，必须完成以下两项设置。（1）将所有静态资源放置于static目录下。（2）在实例化FastAPI后，需要设置静态文件所在目录，代码如下。完成上述设置后，才能在HTML界面文件中使用<scriptsrc="/static/script.js"></script>正确引用JavaScript源文件。FastAPI多模块第2章中已经学习了FastAPI的一些关键特性，且将所有接口代码放到同一个Python源代码文件中，这样操作有一个弊端，即如果项目本身接口比较多，则该源代码文件会很大，且难以维护。为了解决该问题，FastAPI提供了APIRouter对象来帮助开发者进行多模板开发。也就是说，可以先将相关功能模板的接口放到单独的一个源文件中，再在main.py这类主代码中进行引入，以实现接口的多模块化处理。FastAPI多模块定义了上述两个接口后，再在main.py中进行引用，即可正常调用/get_test和/post_test这两个接口，代码如下。了解了上述功能后，可以将AI问答系统拆分为3个模块，分别是qa模块、recognize模块和generate模块。其中，qa模块用于常规问答，recognize模块用于图像识别，generate模块用于图像生成。另外，通常项目中还存在一些公共模块，用于在接口中调用。此时，可以创建一个名为module.py的源代码文件，用于存储非接口定义的公共代码。文本问答功能03后端代码实现首先，定义后端代码，创建文件qa.py，用于对接AI大模型并生成流式响应，其基本逻辑与第2章一致，代码如下。后端代码实现其次，在main.py中引用qa模块接口，并完善main.py中的其他代码。前端代码实现首先，讲解如何在JavaScript中实现语音合成功能，以便问答时直接调用，代码及注释如下。前端代码实现上述代码完成编写后，还不能马上使用，需要在AI的回复中添加一个“朗读”按钮来进行调用。同时，在实现对话功能前，先定义两个公共函数用于绑定Ctrl+Enter的按键事件，并将提问框滚动到底部，以查看最后的对话信息。前端代码实现实现上述两个功能模块后，即可实现chat.html界面中的“智能问答”按钮功能。调用doAsk()函数，用于在提问框中新建一个DIV并将用户提问框的内容添加到该DIV中。前端代码实现接下来实现doAnswer(

)函数，即前端与后端大模型通信的关键代码。联网搜索功能联网搜索功能采用阿里云AI搜索开放平台的服务接口来实现，不同于阿里云灵积模型的APIKey申请，阿里云AI搜索开放平台需要单独申请APIKey。在阿里云AI搜索开放平台上申请APIKey，如图3-4所示。联网搜索功能成功申请APIKey后，可以先编写一段Python代码进行测试。联网搜索功能如果测试通过，则可开始实现联网搜索的AI问答功能。在后台创建文件module.py，用于保存搜索功能代码，便于在接口中进行调用。联网搜索功能因为前文配置前端发送请求时已经考虑了是否需要实现联网搜索功能，所以构建的参数是params={"content":content,"search":false}，这意味着如果用户勾选了“联网”复选框，则参数将变为{"content":content,"search":true}，需要在后台qa模块的stream接口中调整代码。联网搜索功能上述代码的意思是，此次与大模型交互将不再单纯将用户的提问内容传给大模型，而是要将搜索结果一并作为提示词传给大模型。上述后端接口代码修改后，还需要同步修改前端的代码，主要修改doAnswer(

)函数的代码。开发MCP客户端联网搜索功能可以增强AI问答系统的问答能力，并可以针对任何提问进行搜索，功能实用性较强，但不够有针对性。而使用MCP服务可以有针对性地拓展AI问答系统的特殊功能，如天气查询、旅游规划、酒店查询等。本小节将通过实现一个MCP客户端，以调用高德地图服务，配合联网搜索功能，对AI问答系统进行完善。以下代码演示了如何通过Python代码获取高德地图的所有工具列表，并对其中的工具进行调用。开发MCP客户端上述代码运行后，会列出高德地图所有MCP服务器工具，下面取其中一个工具进行展示。前文所述代码的输出结果就是函数定义，有描述、有参数，至此，其本质上与自定义函数没有不同。同时，经过仔细分析会发现，inputSchema字段的值与FunctionCalling的函数定义部分完全一致。这非常有助于将其转换为大模型的函数定义。开发MCP客户端另外，由于mcp库的函数全部被定义为async异步处理函数，因此在上述代码中同样需要将函数定义为异步的，调用系统函数时必须使用await。理解了如何获取工具列表以及如何调用工具后，再与大模型进行整合就比较简单了。其核心过程就是先对用户提问进行处理，执行第一次大模型调用，再从中解析是否存在工具调用的需求，如果存在，则调用相应工具，最后是正常的流式响应的模型对话。在MCPClient类中，新增一个函数process_query(

)，利用以下代码即可进行AI对话与函数调用。开发MCP客户端开发MCP客户端函数调用增强因为FunctionCalling或MCP等调用更多地会应用于对话式AI应用中，所以要将函数调用整合到当前项目中，是完全可行的，这主要取决于用户需要让AI解决哪些问题。下面以通过AI提问框来发送一封邮件为例，演示如何增强AI问答系统的对话功能，对于其他各类功能的拓展，其思路和逻辑与之大体相同。首先，定义一个函数，用于通过Python向特定邮箱地址发送一封邮件，将其保存到func_calling.py源文件中，具体代码如下。函数调用增强由于使用QQ邮箱服务器来发送邮件，因此读者需要进入QQ邮箱，开启SMTP服务，并申请一个授权码。具体操作如下：登录QQ邮箱→单击“设置”按钮→单击“账号”按钮，即可进入图3-5所示的界面。按照系统提示申请授权码，即可发送邮件。函数调用增强其次，完成邮件发送代码的编写后，需要完善两段代码。此时，需要根据FunctionCalling的格式要求来定义函数规格，以便大模型可以正确识别该函数的功能及参数；需要修改AI对话的过程，只有对函数调用进行独立的处理，才能将其整合到AI问答系统中。在func_calling.py代码中添加以下函数定义。函数调用增强修改qa.py模块中的智能问答功能，将函数调用与普通问答进行整合，修改后的代码如下。图像识别与生成04图像识别功能在介绍图像识别功能之前，要先了解图像识别功能的大模型接口规范要求，可以通过查看阿里云大模型服务平台的用户指南学习视觉理解的接口规范。因为该接口是OpenAI兼容接口，所以代码调用较为简单，唯一需要注意的是图像识别的正文需要包含图像的Base64编码和文本提示词，其大致结构如下。图像识别功能除了需要重新构建文本对话有所差异的请求，其他操作与文本对话基本一致。掌握了接口规范后，即可着手编写后端接口代码，并保存于recognize.py模块中，具体内容如下。图像识别前端图像识别通常分为两步：第一步是用户上传图像并编写提示词第二步是发送给后台以获取大模型的输出。因此，只设置一个按钮显然无法满足功能要求，至少需要两个按钮。第一个按钮是“识图”按钮，用于浏览图像并显示预览效果，第二个按钮仍然使用“智能问答”按钮来与后端进行交互。需要注意的是，此处涉及在“智能问答”按钮中如何判断用户是要进行文本问答还是