SemanticKernel之TextToImage

　　生成图片是LLM多模态中的基本功能，SemanticKernel也把这个基本功能引入进来了，是通过添加TextToImage来实现的，对于GPT，内部对应着DallE模型，下面的例子通过一个简单的方式来实现生成。

　　首先引入SemanticKernel。

 <ItemGroup>
    <PackageReference Include="Microsoft.SemanticKernel" Version="1.6.3" />
  </ItemGroup>

　　通过一个提示词，来接收不同的请求，生成一些雷同的图片。

　　后端代码实现如下：

using Microsoft.SemanticKernel.TextToImage;
using Microsoft.SemanticKernel;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseStaticFiles();
var chatModelId = "gpt-4-0125-preview";
var key = File.ReadAllText(@"C:\GPT\key.txt");
#pragma warning disable SKEXP0010
var kernel = Kernel.CreateBuilder()
    .AddOpenAITextToImage(key) 
    .Build();
#pragma warning disable SKEXP0001
var dallE = kernel.GetRequiredService<ITextToImageService>();

app.MapGet("/image", async (string name) =>
{
    var width = 256;
    var imageDescription = $"请画一只站在树枝上，背景是蓝天，清晰的并且占满画面的{name}。";
    app.Logger.LogInformation(imageDescription);
    var imageUrl = await dallE.GenerateImageAsync(imageDescription, width, width);
    app.Logger.LogInformation(imageUrl);
    return imageUrl;
});

app.Run();

　　前端代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>上传</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <input type="text" class="form-control" id="textA" value="金雕">
            </div>
            <div class="col">
                <input type="text" class="form-control" id="textB" value="黄鹂">
            </div>
            <div class="col">
                <input type="text" class="form-control" id="textC" value="鹦鹉">
            </div>
            <div class="col">
                <button type="button" onclick="getimages()" class="btn btn-success">获取图片</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <img id="imageA" src="" width="256" />
            </div>
            <div class="col">
                <img id="imageB" src="" width="256" />
            </div>
            <div class="col">
                <img id="imageC" src="" width="256" />
            </div>
        </div>
        <div class="row">
            <span id="result"></span>
        </div>
    </div>
    <script>
        var i = 0;
        function getimages() {
            $("#result").html("生成中，请稍后……")
            getimage($("#textA").val(), $("#imageA"))
            getimage($("#textB").val(), $("#imageB"))
            getimage($("#textC").val(), $("#imageC"))
        }
        function getimage(name, image) {
            $.ajax({
                url: '/image?name=' + name,
                type: 'GET',
                success: function (data) {
                    i++
                    image.attr("src", data);
                    if (i == 3) {
                        i = 0;
                        $("#result").html("")
                    }
                },
                error: function (xhr, status, error) {
                    alter(error)
                }
            });
        }
</script>
</body>
</html>