| 基本结构

总体结构如下图所示:

 AntDesign Blazor Azure AI Foundry _Blazor Web Assembly Chinese history map _java httpclient post

流程和所用技术如下:

用户通过前端应用,输入原文(文言文)。前端采用Blazor Web Assembly和AntDesign Blazor实现,内嵌腾讯地图

前端应用将古文原文发送到后端Web API微服务,该服务采用ASP.NET Core Web API实现

Web API微服务调用部署在Microsoft Azure云上的AI Foundry服务,通过ChatGPT5大语言模型实现古文解读,并且将解读后的白话文以及文中所涉及的人名和地名一起返回给Web API微服务。返回地名的同时,还会将地理位置经纬度一并返回

Web API微服务会将大语言模型返回的信息,通过AIFunction转为结构化数据,然后以规整化的数据结构返回给前端应用

前端应用显示结果,并根据经纬度在腾讯地图上对地理位置进行标注

| 在Azure AI Foundry中部署大语言模型

完成这个应用的先决条件就是在Azure AI Foundry中有一个已经部署的AI大预言模型(LLM)。这里我选择使用ChatGPT-5,也尝试过使用DeepSeek,但是在实现AIFunction调用逻辑的时候会报错,暂时也没有去深入挖掘具体原因了。总而言之,我们需要从AI Foundry中获取LLM的这几个参数:

使用Microsoft Agent Framework实现古文解读与地理位置标注

这些参数可以在Azure AI Foundry中【我的资产】下【模型+终结点】页面中找到,如下:

Blazor Web Assembly Chinese history map _ AntDesign Blazor Azure AI Foundry _java httpclient post

| Web API微服务的实现

新建一个ASP.NET Core Web API应用程序,添加对以下两个NuGet包的引用:

然后修改Program.cs文件:

其中azureAIEndpoint、azureAIApiKey和azureAIDeployment分别为上述LLM部署的终结点、API Key和部署名称,可以从环境变量中读取。

在Web API应用程序中,实现一个Controller,用以接收来自前端的请求,并通过之前注册的AI Agent,使用LLM完成古文解读:

以上代码中需要注意的几个地方:

在调用Agent的RunAsync时,通过ChatOptions对象显式指定AIFunction工具的使用,这是因为Tool的使用是由LLM决定的,如果不显式指定,有时候LLM并不会执行指定的Tool,通过Agent得到的返回结果(response)中的数据结构就不一定包含FunctionResultContent,这将对后续结构化数据的获得造成困难

在控制器中定义了一个静态方法:TranslateChinese,并将它转换成AIFunction,并注册为Agent Tool,主要目的就是能够从LLM的返回结果中获得结构化数据,这样才能基于这种结构化数据做进一步处理,或者返回到前端应用

TranslateChinese方法及其参数使用Description特性标注,用来描述方法和参数的含义,以便LLM能够正确传入参数并调用该方法

在TranslateChinese方法上设置断点,可以看到该方法会被LLM调用:

Postman中可以得到返回结果:

Blazor Web Assembly Chinese history map _ AntDesign Blazor Azure AI Foundry _java httpclient post

接下来就是实现前端部分了。

| 前端Blazor Web Assembly应用

如我以前的一些Demo案例那样,前端应用我仍然选择Blazor Web Assembly,并使用AntDesign Blazor作为前端库,这样能够让我快速构建页面布局,完成应用开发。Web Assembly使用客户端计算资源,容器化部署也特别方便,只需要选择一款能够支持静态文件分发的HTTP服务器就可以了。

在这个应用中,我们需要整合一个地图组件,我选择使用腾讯地图,它接口简单,后续如果有脑洞更大的想法,还可以跟微信和公众号生态集成。但是我并没有把它封装成一个通用的Blazor组件,而是直接用Javascript写了一个脚本文件,并在index.html中引入这个脚本。在这个脚本文件中,定义了几个后续可能需要用到的地图操作函数,比如:

在Blazor中调用Javascript中的函数是很容易的,在Razor页面中,只需要注册Javascript运行时就可以了:

使用Microsoft Agent Framework实现古文解读与地理位置标注

然后,比如在页面完成渲染的时候,将地图显示在名为 tencentMapContainer的div容器中,可以使用这个代码:

下面是页面中最主要的代码段,已经添加了注释,供参考:

| 小结

目前这个应用还比较简单,所有人名、地名和白话文解读都是来自大语言模型,也就是说,数据准确度还是依赖所选模型本身。后续可以考虑通过整合已有历史知识库来达到提高信息准确度的效果,也可以考虑整合多种Agent,使用Workflow来实现更为高级的功能。