生成图片是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");
#pragmawarning disable SKEXP0010
var kernel = Kernel.CreateBuilder()
.AddOpenAITextToImage(key)
.Build();
#pragmawarning 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>
<metacharset="utf-8" />
<title>上传</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"crossorigin="anonymous"></script>
<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel=" stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous">
<scriptsrc="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">
<inputtype="text" class="form-control"id="textA"value="金雕">
</div>
<div class="col">
<inputtype="text" class="form-control"id="textB"value="黄鹂">
</div>
<div class="col">
<inputtype="text" class="form-control"id="textC"value="鹦鹉">
</div>
<div class="col">
<buttontype="button"onclick="getimages()" class="btn btn-success">获取图片</button>
</div>
</div>
<div class="row">
<div class="col">
<imgid="imageA"src=""width="256" />
</div>
<div class="col">
<imgid="imageB"src=""width="256" />
</div>
<div class="col">
<imgid="imageC"src=""width="256" />
</div>
</div>
<div class="row">
<spanid="result"></span>
</div>
</div>
<script>
var i = 0;
functiongetimages() {
$("#result").html("生成中,请稍后……")
getimage($("#textA").val(), $("#imageA"))
getimage($("#textB").val(), $("#imageB"))
getimage($("#textC").val(), $("#imageC"))
}
functiongetimage(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>
效果 如下图:
利用这个功能,可以生成一些复杂的验证码图片,只需要配置好提示词,就可以使用千变万化的验证图片了。