當前位置: 妍妍網 > 碼農

SemanticKernel之TextToImage

2024-04-02碼農

生成圖片是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 SKEXP0010var kernel = Kernel.CreateBuilder() .AddOpenAITextToImage(key)  .Build();#pragmawarning disable SKEXP0001var 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>

效果 如下圖:

利用這個功能,可以生成一些復雜的驗證碼圖片,只需要配置好提示詞,就可以使用千變萬化的驗證圖片了。