Prompts überarbeitet und "Änderungswunsch"

This commit is contained in:
Simon Lübeß 2023-10-22 12:39:11 +02:00
parent dc81c5ce60
commit c5994dfc32
2 changed files with 68 additions and 49 deletions

View File

@ -6,6 +6,7 @@
@using DataAccess.Data @using DataAccess.Data
@using DataAccess.Models @using DataAccess.Models
@using KIKunstKirstenKlöckner.Data @using KIKunstKirstenKlöckner.Data
@using System.Diagnostics
@inject IConfiguration Config @inject IConfiguration Config
@inject TooltipService TooltipService @inject TooltipService TooltipService
@ -23,8 +24,9 @@
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center"> <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
<h1>Wunschbilder von KI nur für dich</h1> <h1>Wunschbilder von KI nur für dich</h1>
<RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText> <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
<RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/> <RadzenTextBox @bind-Value=@_userIdea Placeholder="Dein Wunsch"/>
@* Zusätzliche Optionen *@
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen"> <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
<ChildContent> <ChildContent>
<RadzenCard class="rz-mt-4"> <RadzenCard class="rz-mt-4">
@ -56,7 +58,7 @@
</ChildContent> </ChildContent>
</RadzenPanel> </RadzenPanel>
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync(true))>Generate</RadzenButton> <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText> <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
@ -70,8 +72,8 @@
<RadzenImage Path=@_imageUrl></RadzenImage> <RadzenImage Path=@_imageUrl></RadzenImage>
<RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText> <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" /> <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImagesAsync(false))>Generate</RadzenButton> <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
<RadzenCard> <RadzenCard>
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem"> <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
@ -153,8 +155,8 @@
private float _temperature = 0.9f; private float _temperature = 0.9f;
private int? width = 1024; private int? width = 1024;
private int? height = 1024; private int? height = 1024;
private string request = ""; private string _userIdea = "";
private string addons = ""; private string _updateRequest = "";
private OpenAIAPI _openAiApi; private OpenAIAPI _openAiApi;
private Conversation? _conversation; private Conversation? _conversation;
@ -163,6 +165,8 @@
private string _imageUrl; private string _imageUrl;
private WunschInfoModel? _wunschInfo;
//protected override async Task OnInitializedAsync() //protected override async Task OnInitializedAsync()
//{ //{
// _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}"); // _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
@ -217,17 +221,15 @@
_conversation = _openAiApi.Chat.CreateConversation(chatRequest); _conversation = _openAiApi.Chat.CreateConversation(chatRequest);
// Wunsch an GPT senden und Bild Idee anfordern // Wunsch an GPT senden und Bild Idee anfordern
_conversation.AppendUserInput(ideaBasePrompt + " " + request); _conversation.AppendUserInput(ideaBasePrompt + " " + _userIdea);
_imageIdea = await _conversation.GetResponseFromChatbotAsync(); _imageIdea = await _conversation.GetResponseFromChatbotAsync();
} }
/// <summary> /// <summary>
/// Fordert für mehrere Bilder Bild-Prompts an und generiert die dazugehörigen Bilder. /// Fordert für mehrere Bilder Bild-Prompts an und generiert die dazugehörigen Bilder.
/// </summary> /// </summary>
private async Task RequestImagesAsync(WunschInfoModel wunschInfo) private async Task RequestImagesAsync(WunschInfoModel wunschInfo, string requestImagePrompt)
{ {
string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
// Nachricht mit Bildpromt anfrage senden // Nachricht mit Bildpromt anfrage senden
_conversation!.AppendUserInput(requestImagePrompt); _conversation!.AppendUserInput(requestImagePrompt);
@ -236,7 +238,7 @@
for (int i = 0; i < 4; i++) for (int i = 0; i < 4; i++)
{ {
imagePromts[i] = RequestPromptAndGenerateImageAsync(i, wunschInfo); imagePromts[i] = RequestImagePromptAndGenerateImageAsync(i, wunschInfo);
} }
await Task.WhenAll(imagePromts); await Task.WhenAll(imagePromts);
@ -247,7 +249,7 @@
/// </summary> /// </summary>
/// <param name="index">Der Index des Bildes (für UI zeug)</param> /// <param name="index">Der Index des Bildes (für UI zeug)</param>
/// <param name="wunschInfo">Der Wunsch für den ein Bild erzeugt wird.</param> /// <param name="wunschInfo">Der Wunsch für den ein Bild erzeugt wird.</param>
private async Task RequestPromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo) private async Task RequestImagePromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo)
{ {
// Bild Prompt von ChatGPT anfordern // Bild Prompt von ChatGPT anfordern
string imagePrompt = await _conversation!.GetResponseFromChatbotAsync(); string imagePrompt = await _conversation!.GetResponseFromChatbotAsync();
@ -310,16 +312,11 @@
/// <summary> /// <summary>
/// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt. /// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt.
/// </summary> /// </summary>
/// <param name="generateNewImage">Wenn <see langword="true"/>, werden neue Bilder generiert; sonst wird die vorhandene Idee bearbeitet.</param> private async Task GenerateImagesAsync()
private async Task GenerateImagesAsync(bool generateNewImage)
{ {
// Der Dialog blokiert so lange, wie der er offen ist, deshalb dürfen wir hier nicht warten, da wir sonst nie mit der Arbeit anfangen...
//Task busyDialog = ShowBusyDialog();
_progressVisible = true; _progressVisible = true;
_buttonVisible = false; _buttonVisible = false;
if (_conversation == null || generateNewImage)
{
ClearOldGeneration(); ClearOldGeneration();
amountOfAddons = maxAddons; amountOfAddons = maxAddons;
@ -328,38 +325,22 @@
await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf..."); await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
await RequestImageIdeaAsync(); await RequestImageIdeaAsync();
}
else
{
throw new NotImplementedException("Verändern von Idees ist nicht implementiert");
// if (amountOfAddons > 0)
// {
// amountOfAddons--;
// _bothVisible = _buttonVisible && _addonsVisible;
// await UpdateBusyMessage("Kirstens Assistent passt das Bild an deine Wünsche an...");
// string addonsPrompt1 = "Erstelle einen neuen Prompt auf englisch mit den gleichen Restriktionen auf Basis des Alten mit folgender Anpassung: ";
// string addonsPrompt2 = ". Denke daran nur den Prompt zu generieren und noch keine Beschreibung oder ähnliches.";
// _conversation.AppendUserInput(addonsPrompt1 + addons + addonsPrompt2);
// }
}
await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen..."); await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
WunschInfoModel wunschInfo = new() _wunschInfo = new()
{ {
BildBeschreibung = _imageIdea, BildBeschreibung = _imageIdea,
BildPrompt = "Individuelle Bild Prompts", BildPrompt = "Individuelle Bild Prompts",
Datum = DateTime.Now, Datum = DateTime.Now,
GPTModel = _conversation.Model, GPTModel = _conversation!.Model,
Wunsch = request, Wunsch = _userIdea,
// TODO: Wenn wir Wünsche überarbeiten können wir hier diesen hier referenzieren
VorherigerWunsch = null VorherigerWunsch = null
}; };
try try
{ {
await WunschInfoData.AddWunschInfoAsync(wunschInfo); await WunschInfoData.AddWunschInfoAsync(_wunschInfo);
} }
catch (Exception e) catch (Exception e)
{ {
@ -371,7 +352,9 @@
return; return;
} }
await RequestImagesAsync(wunschInfo); string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
await RequestImagesAsync(_wunschInfo, requestImagePrompt);
_progressVisible = false; _progressVisible = false;
_buttonVisible = true; _buttonVisible = true;
@ -387,4 +370,37 @@
_bothVisible = false; _bothVisible = false;
} }
} }
private async Task UpdateImagesAsync()
{
Debug.Assert(_conversation != null);
string updatePrompt = $"Gebe nun einen neuen Prompt unter berücksichtigung vorheriger Anweisungen und passe ihn folgender Maßen an: {_updateRequest}";
_wunschInfo = new()
{
BildBeschreibung = _updateRequest,
BildPrompt = "Individuelle Bild Prompts",
Datum = DateTime.Now,
GPTModel = _conversation.Model,
Wunsch = _userIdea,
VorherigerWunsch = _wunschInfo!.Id
};
try
{
await WunschInfoData.AddWunschInfoAsync(_wunschInfo);
}
catch (Exception e)
{
NotificationService.Notify(new NotificationMessage()
{
Summary = "Es ist ein Fehler aufgetreten, bitte versuche es erneut."
});
return;
}
await RequestImagesAsync(_wunschInfo, updatePrompt);
}
} }

View File

@ -1,4 +1,4 @@
Bitte einen englischen Prompt für dieses Bild für eine Bild-Generierungs KI. Bitte erstelle einen englischen Prompt für dieses Bild für eine Bild-Generierungs KI.
Hier sind vier Beispiele von Bild Prompts: Hier sind vier Beispiele von Bild Prompts:
"Painting of an astronaut in space, detailed starry background, reflective helmet." "Painting of an astronaut in space, detailed starry background, reflective helmet."
@ -6,4 +6,7 @@ Hier sind vier Beispiele von Bild Prompts:
"Painting of a Japanese garden in autumn, with a bridge over a koi pond." "Painting of a Japanese garden in autumn, with a bridge over a koi pond."
"Painting representing the sound of jazz music, using pale colors and erratic shapes." "Painting representing the sound of jazz music, using pale colors and erratic shapes."
Wie du siehst enthält ein Prompt eine genaue Beschreibung des Bildes. Ein guter Prompt selbst enthält keine Metaphern oder Vergleiche. Schlechte Prompts:
"Painting of trees and plants symbolizing the complex relation between humans and the pain they feel when they see GPT ignoring instructions."
Wie du siehst enthält ein Prompt eine genaue Beschreibung des Bildes. Ein guter Prompt selbst enthält keine Metaphern oder Vergleiche. Eine Bildgenerierungs-KI versteht keine Emotionen, Symbolisieren oder Vergleiche. Nur Bildbeschreibungen, Farben, Formen, Objekte. Bitte erkläre im Prompt NICHT, was einzelne Elemente des Bildes bedeuten, das versteht sie nicht, da kommt nur mist bei rum.