使用Aspire优雅的进行全栈开发——WinUI使用Semantic Kernel调用智普清言LLM总结Asp.Net Core通过Playwright解析的网页内容-数字星空

前言

这算是一篇学习记录博客了，主要是学习语义内核（Semantic Kernel）的实践，以及Aspire进行全栈开发的上手体验，我是采用Aspire同时启动API服务，Blazor前端服务以及WinUI的桌面端项目，同时进行三个项目的代码修改，整体感觉很方便，如果代码都修改了只需要启动Aspire项目，不用每个项目单独起一遍了，而且速度很快，即使是有用容器服务的情况下。

技术方案

1. 框架选型

WebApi使用Asp.Net Core WebApi实现。
Bing搜索结果获取，以及网页解析内容提取使用的是PlayWright库。
网页内容总结使用的是WinUI编写的客户端，结合语义内核（Semantic Kernel）调用国产智普清言LLM。
后台管理页面使用的Blazor，不过只是一个demo页面。

2. 为什么这样选

作为一个.Net开发，肯定优先使用.Net相关的技术了，也为了能实践最新的技术，就进行了一些新技术的选择。

主要说明一下选择这几个技术框架的原因：

Playwright 原因是通过测试发现它的表现最好，其他类型的库也有测试，比如Selenium，HtmlAgilityPack，HtmlAgilityPack对静态网页解析比较好，但是如果遇到js渲染的数据很多的页面就不好了，Selenium比Playwright提取的内容差了一些，Playwright是通过模拟用户操作启动浏览器，然后获取内容，感觉如果一次性处理很多的页面应该也会负载很大。
Aspire 这个是因为这是微软最新的专门给开发人员开发的工具，那既然是给开发人员做的，那肯定要体验一把了，体验完感觉是真的不错，能够节省很多的步骤。
语义内核（Semantic Kernel）选择它是因为这算是.Net社区对接大语言模型最流行的框架了，提供了很多的开箱即用的功能，对于开发智能APP帮助很大，而且社区热度也很高。
智普清言LLM 选择它是多方面考虑的结果，第一是它兼容OpenAI的接口，这样语义内核就可以通过配置就能使用它，第二是它是支持Function Call的,也就是说它可以作为OpenAI的国内平替，用它开发一些智能APP是很好的。
WinUI 选择它是个人对客户端开发主要使用的是WinUI，而且用它对接大语言模型不把对接放到后端也是为了后面对接离线大语言模型做基础，比如微软的Phi3之类的。

代码讲解

本博客涉及的代码链接如下：

https://github.com/GreenShadeZhang/BingSearchSummary

1. 搜索结果获取

示例代码如下：

先创建Playwright实例，然后进行用户操作模拟。

   var playwright = await Playwright.CreateAsync();
   var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });
   var page = await browser.NewPageAsync();

   // 设置 User-Agent 和视口大小
   var js = @"Object.defineProperties(navigator, {webdriver:{get:()=>false}});";
   await page.AddInitScriptAsync(js);

   await page.GotoAsync("https://www.bing.com");

   // 模拟用户输入搜索关键词
   await page.FillAsync("input[name=q]", keyword);
   await page.Keyboard.PressAsync("Enter");

   // 等待搜索结果加载
   await page.WaitForLoadStateAsync(LoadState.NetworkIdle);

   // 获取搜索结果内容
   var content = await page.ContentAsync();
   var dataList = BingSearchHelper.ParseHtmlToJson(content);
   var result = new List<BingSearchItem>();

将搜索结果解析成json数据如下：

这一步是因为我没有bing搜索的订阅，所以只能解析页面，如果有bing搜索的订阅这一步可以省略。

using BingSearchSummary.ApiService.Models;
using HtmlAgilityPack;

namespace BingSearchSummary.ApiService;

public class BingSearchHelper
{
    public static List<BingSearchItem> ParseHtmlToJson(string htmlContent)
    {
        var htmlDocument = new HtmlDocument();
        htmlDocument.LoadHtml(htmlContent);

        var results = new List<BingSearchItem>();

        foreach (var node in htmlDocument.DocumentNode.SelectNodes("//li[@class='b_algo']"))
        {
            var titleNode = node.SelectSingleNode(".//h2/a");
            var snippetNode = node.SelectSingleNode(".//p");
            var urlNode = node.SelectSingleNode(".//cite");

            var title = titleNode?.InnerText.Trim();
            var snippet = snippetNode?.InnerText.Trim();
            var url = urlNode?.InnerText.Trim();

            if (string.IsNullOrEmpty(title))
            {
                continue;
            }

            var searchItem = new BingSearchItem
            {
                Title = title,
                Snippet = snippet ?? "",
                Url = url ?? ""
            };

            results.Add(searchItem);
        }

        return results;
    }
}

通过上面的代码操作，关键词搜索的网页URL就已经拿到了，然后就可以继续进行页面内容的解析了。

2. 网页内容解析

客户端通过调用接口，然后获取关键词的前三条的搜索结果和网页内容。

    // 获取搜索结果内容
    var content = await page.ContentAsync();
    var dataList = BingSearchHelper.ParseHtmlToJson(content);
    var result = new List<BingSearchItem>();

    foreach (var data in dataList)
    {
        if (result.Count >= 3)
        {
            break;
        }//只处理三条数据
        await page.GotoAsync(data.Url);

        var divContent = await page.QuerySelectorAsync(".content");

        divContent ??= await page.QuerySelectorAsync("body");

        if (divContent != null)
        {
            var pageContent = await divContent.InnerTextAsync();

            result.Add(new BingSearchItem
            {
                Title = data.Title,
                Url = data.Url,
                Snippet = data.Snippet,
                PageContent = pageContent
            });
        }

swagger结果展示如下：

3. 网页结果总结

这部分代码在WinUI项目中实现，WinUI调用接口获取到结果，并通过Microsoft.SemanticKernel.PromptTemplates.Liquid库进行消息模板动态生成消息，调用语义内核（Semantic Kernel）进行内容总结。

语义内核（Semantic Kernel）注入代码如下：

            //测试token被删除 已经无效 请换成自己的智普token
            builder.AddOpenAIChatCompletion(modelId: "GLM-4-Air", apiKey: "4827638425a6b9d48bea3b0599246ff2.pFjhEKShPOZE8OFd", httpClient: GetProxyClient("https://open.bigmodel.cn/api/paas/v4/chat/completions"));

            builder.Plugins.AddFromType<TimeInformationPlugin>();

            services.AddSingleton(builder.Build());

#pragma warning disable SKEXP0040 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。
            services.AddSingleton<IPromptTemplateFactory, LiquidPromptTemplateFactory>();
#pragma warning restore SKEXP0040 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。

内容总结代码如下：

  [RelayCommand]
  private async Task SummaryAndUploadAsync(BingSearchItem item)
  {
      _chatHistory.Clear();

      SummaryProcessRingStatus = true;
      try
      {
          var arguments = new KernelArguments
          {
              ["startTime"] = DateTimeOffset.Now.ToString("hh:mm:ss tt zz", CultureInfo.CurrentCulture),

              ["userMessage"] = item.PageContent
          };

          var systemMessage = await _promptTemplateFactory.Create(new PromptTemplateConfig(_systemPromptTemplate)
          {
              TemplateFormat = "liquid",
          }).RenderAsync(_kernel, arguments);

          var userMessage = await _promptTemplateFactory.Create(new PromptTemplateConfig(_userPromptTemplate)
          {
              TemplateFormat = "liquid",
          }).RenderAsync(_kernel, arguments);

          _chatHistory.AddSystemMessage(systemMessage);

          _chatHistory.AddUserMessage(userMessage);


          var chatResult = await _chatCompletionService.GetChatMessageContentAsync(_chatHistory, _openAIPromptExecutionSettings, _kernel);

          SummaryResult = chatResult.ToString();

          await _apiClient.PostContentsAsync(new BingSearchSummaryItem
          {
              Title = item.Title,
              Summary = chatResult.ToString(),
              Url = item.Url
          });

      }
      catch (Exception ex)
      {
          System.Diagnostics.Debug.WriteLine(ex.Message);
          SummaryProcessRingStatus = false;
      }

      SummaryProcessRingStatus = false;
  }

效果如下：