智能体开发技术（Python+FastAPI版） 课件 第3、4章 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模块中，具体内容如下。图像识别前端图像识别通常分为两步：第一步是用户上传图像并编写提示词第二步是发送给后台以获取大模型的输出。因此，只设置一个按钮显然无法满足功能要求，至少需要两个按钮。第一个按钮是“识图”按钮，用于浏览图像并显示预览效果，第二个按钮仍然使用“智能问答”按钮来与后端进行交互。需要注意的是，此处涉及在“智能问答”按钮中如何判断用户是要进行文本问答还是要进行图像识别的问题。从chat.html源代码中可以看出，“识图”按钮调用的是addImage()函数，该函数的代码实现只是为了触发文件上传框的单击事件，用于模拟文件上传时的浏览文件功能，代码如下。图像识别前端当用户浏览图像后，接下来即可响应文件上传框中的onchange="saveAndPreview()"代码，saveAndPreview()函数用于将图像的Base64编码数据保存到sessionStorage中，并在提问框中进行预览显示。之所以使用sessionStorage而不是localStorage，是因为sessionStorage只用于临时存储数据，关闭浏览器后就会清空数据，不会永久保存，而AI问答系统也不需要永久保存。具体实现代码如下。图像识别前端如果上述代码的功能正常，则当用户浏览图像后，可以在提问框中显示预览图，其实现效果如图3-7所示。图像生成功能因为通义万相模型不支持使用OpenAI的SDK，所以必须使用Dashscope的SDK实现，根据文档的示例代码即可方便地生成图像。创建generate.py后端接口，实现代码如下。图像生成功能后端代码实现后，直接编写前端代码实现对接，并对生成的图像进行渲染即可。图像生成功能图3-8中的提示词还不够完善。此时，可以选择将这句提示词交给智能问答系统，让智能问答系统帮助用户优化得到一份更加完善的提示词。以下提示词是由本章的AI问答系统生成的。每日新闻摘要content目录01功能与设计分析02基础功能实现03扩展功能实现功能与设计分析01核心功能列表新闻摘要系统在设计该项目时，要考虑以下6点。（1）选择合适的新闻来源，本书选择的是新浪新闻。（2）通过爬虫技术获取新闻标题和新闻原文内容，以便于把内容交给AI大模型进行总结和摘要。（3）由于新闻不是随时更新的，因此每日新闻摘要项目需要具备定时更新新闻内容的能力。但是到更新时间时，因为可能某些新闻还未更新，所以数据库还要具备去重的能力。（4）既然是新闻摘要，用户的需求主要就是快速获取新闻的大致信息。所以其界面要尽量简洁，不宜提供过多功能。同时，如果用户对某个新闻比较感兴趣，则可能会想查看新闻原文内容，最好提供原文链接，让用户可以跳转阅读原文。（5）由于新闻类型比较丰富，如国内新闻、国际新闻、娱乐体育新闻、财经科技新闻等，因此应该具备新闻分类功能，以便用户快速找到自己感兴趣的新闻。（6）由于每天的新闻均保存在数据库中，因此需要支持按日期展示历史新闻，使用户可以快速查看过去某天的新闻内容。核心功能列表新闻摘要系统整体实现思路（1）新闻原文内容爬取。使用Python中的BeautifulSoup库可以非常方便地对网页内容进行解析和提取。（2）交给大模型进行总结摘要时，只需要编写好提示词模板，把要求和对应的新闻原文提交给大模型，大模型就可以返回摘要内容。其准确度主要取决于大模型本身的理解能力，不过目前通义千问或DeepSeek等大模型在这方面的表现都较为出色。（3）在新闻实时更新方面，需要设置一个定时任务爬取新浪新闻上的最新新闻。（4）新闻分类本质上也可以通过爬虫技术获得，但是由于每日新闻摘要项目只针对新浪新闻进行摘要，同一个新闻站点的新闻类型通常是固定的，因此可以在代码中预先写好分类。（5）更新新闻时，通常需要将更新时间插入数据表，而该时间可以作为分组依据。以日期进行SQL查询分组后，可以获得日期的列表，并在前端界面中通过超链接功能将每个日期单独设为一条超链接，用户单击相应超链接后就可以获取当天的新闻摘要。基础功能实现02前端界面布局在掌握了某个系统的功能需求后，通常要优先考虑进行项目的原型设计，或者直接开发原型界面，以便对需求和交互逻辑等进行更合理的规划。一旦界面元素和交互逻辑基本确定，就说明需求理解已经完整和准确；再从技术层面考虑前后端的具体实现，这样可以确保思路上的通畅。如果是团队开发某个项目，预先设计好原型界面可以使得成员之间的沟通更加顺畅。整个新闻摘要的界面布局并不复杂，主要由顶部分类、中部新闻摘要主体、底部的按日期浏览这几个部分构成，以下是HTML+CSS的布局代码。前端界面布局前端界面布局上述界面布局代码可以置于templates目录下，并由Jinja2模板引擎进行渲染，这一部分内容与第3章的模板界面渲染完全一致，此处不赘述。其实现效果如图4-2所示。一般来说，在设计前端界面时，由于还没有后台数据用于填充，因此可以先在HTML界面中任意填充一些数据进行占位，以预览真实的实现效果，后续可通过Jinja2模板引擎在相应位置进行动态填充，以正常实现功能。数据表结构根据前文分析的结果，设计每日新闻摘要的数据表结构，如图4-3所示。其中，id为自增长列，category为新闻类型，headline为新闻标题，hyperlink为原文超链接，content为新闻原始内容（保存与否均可，因为最终展现的不是原文而是摘要），summary为新闻摘要，createtime为该条数据的生成时间。目前，每日新闻摘要项目不需附加其他功能，只需要创建这一张表。BeautifulSoup库由于每日新闻摘要项目只需爬取新浪新闻网站上的公开数据，且只涉及几个固定界面，比较有针对性，因此相对容易处理。每日新闻摘要项目完成以下两个关键步骤后即可正常爬取到相应的内容：第一步是利用Python的requests库发送Get请求以获取界面的源代码；第二步是利用BeautifulSoup库对该源代码进行解析，将需要的内容提取出来。新浪新闻版块截图如图4-4所示，其中新闻部分的标题和超链接就是后续需要获取的内容。为了获取网页中元素的属性，需要在浏览器中按F12键打开开发者工具，以查看网页源代码和对应的元素。BeautifulSoup库运行“pipinstallbeautifulsoup4lxml”命令，在Python环境下安装BeautifulSoup库。运行以下代码，尝试进行爬取。BeautifulSoup库以同样的方式编写代码，具体如下。以此类推，可以获取其他类型的新闻。每日新闻摘要项目主要爬取今日要闻、国内新闻、国际新闻、财经科技、娱乐体育等几类新闻。读者也可以根据需要爬取其他类型的新闻，不影响每日新闻摘要项目的技术运用即可。爬取标题与超链接分析新闻首页的元素属性可以发现，除了今日要闻的元素及属性与其他类型新闻不同外，其他类型新闻的class属性、ul元素及HTML层次都是一样的，唯一区别在于id属性和data-client属性所对应的值不同。所以针对这些类型的新闻，可以将其封装到一个函数体中，并将id属性和data-client属性作为参数进行传递，实现复用爬虫代码。要将新闻标题、超链接和新闻类型保存到数据库中，需要创建一个模块代码文件crawler.py。该模块用于编写爬虫代码，并创建SQLModel库的数据映射关系。首先，在news.py中定义数据库引擎和映射关系，以便在其他模块代码中引用。爬取标题与超链接其次，编写crawler.py的代码。获取和摘要新闻当完成新闻标题和超链接的爬取及保存后，可以进一步爬取新闻的完整内容，并利用AI大模型对内容进行摘要，从而将其更新到数据库中。首先，数据库中已经保存了新闻的标题和链接，所以此时遍历news表中的新闻链接，即可对新闻的正文内容进行爬取。爬取的新闻正文可以保存到数据库中，也可以不保存到数据库中，因为每日新闻摘要项目最终呈现的只是经过大模型摘要后的简短文字，所以将摘要保存到数据表中即可。其次，如何对新闻正文内容进行摘要呢？只需要将新闻正文连同提示词提交给大模型，即可获取摘要内容，并将该内容更新到数据表对应的行中。最后，由于新闻正文内容通常比较多，因此对接云端大模型所消耗的Token也较多，如果读者本地部署有Ollama，则也可以尝试利用本地大模型进行摘要，以减少Token开销。每日新闻摘要项目仍然与云端大模型对接，以获取更好的总结效果。获取和摘要新闻创建summarize.py模块文件，内容如下前端界面渲染完成数据库的数据更新后，数据表中保存了新闻的标题、超链接和摘要，此时，便可以从数据库中查询此类信息，并通过模板界面将其渲染到前端。首先，在news.py模块中通过get_news_by_dc()函数增加查询代码，此处为了方便后续重用，设计参数date和category，以便通过日期和新闻类型来查询相应的新闻摘要。其中，date参数的默认值为None，如果不传递该参数的值，则表示获取当天的新闻摘要，否则获取指定日期的新闻摘要；而category的默认值为hot，表示默认获取今日要闻类型的新闻摘要，否则获取其他类型的新闻摘要。前端界面渲染其次，在main.py中添加接口代码，用以填充模板界面。前端界面渲染再次，重新修改news.html模板界面，利用Jinja2进行循环的动态填充。前端界面渲染最后，运行main.py，访问:8000/，如果效果如图4-6所示，则表示功能成功实现。扩展功能实现03新闻分类浏览在编写news.py模块的get_news_by_dc()函数时已经考虑新闻分类功能，因此，只需在main.py中添加相应接口即可实现功能。新闻分类浏览因为前端代码在之前已经添加了分类的超链接，所以不需要做任何修改便可以正常浏览分类新闻。上述代码运行后，新闻摘要分类浏览效果如图4-7所示。按日期浏览新闻如果不涉及新闻分类问题，那么按日期浏览新闻与按类型浏览新闻在实现思路上是相似的，例如，将接口从/china修改为/2025-05-15就实现了按日期浏览功能。但是现在的关键问题是每天的新闻均有不同类型，也就是说，每个日期下均有不同类型的新闻可以浏览。因此，用后台接口处理日期的同时也需要考虑类型。基于这样的思路，如果将接口地址设计为/2025-05-15/china，能否一次性解决问题？经过分析，这是可行的，但是有一个问题需要考虑，即按类型浏览和按日期浏览是两个超链接，用户是单独单击的。例如，用户想浏览2025-05-13的新闻，默认可以访问接