Für jedes Bild eigenen Prompt
This commit is contained in:
Simon Lübeß
@ -12,7 +12,6 @@
|
||||
@inject NotificationService NotificationService
|
||||
@inject DialogService DialogService
|
||||
|
||||
@* @inject AiArtPageData AiArtData; *@
|
||||
@inject WunschInfoData WunschInfoData;
|
||||
@inject ImageGenerator ImageGenerator;
|
||||
|
||||
@ -50,40 +49,21 @@
|
||||
</RadzenStack>
|
||||
<RadzenStack Orientation="Orientation.Horizontal"
|
||||
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
||||
<RadzenCheckBox @bind-Value=@_useGpt4>
|
||||
Verwende Gibbidy 4
|
||||
</RadzenCheckBox>
|
||||
<RadzenCheckBox @bind-Value=@_useGpt4 Name="UseGPT4"/>
|
||||
<RadzenLabel Text="Verwende GPT 4" Component="UseGPT4" Style="margin-left: 8px; vertical-align: middle;" />
|
||||
</RadzenStack>
|
||||
</RadzenCard>
|
||||
</ChildContent>
|
||||
</RadzenPanel>
|
||||
|
||||
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImages(true))>Generate</RadzenButton>
|
||||
|
||||
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
|
||||
<ChildContent>
|
||||
<RadzenCard class="rz-mt-4">
|
||||
<RadzenStack Orientation="Orientation.Horizontal"
|
||||
MouseEnter="@(args => ShowTemperatureTooltip(args))"
|
||||
MouseLeave="TooltipService.Close"
|
||||
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
||||
<RadzenText>@_imagePrompt</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenCard>
|
||||
</ChildContent>
|
||||
</RadzenPanel>
|
||||
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync(true))>Generate</RadzenButton>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
|
||||
|
||||
|
||||
|
||||
<RadzenCard class="rz-mt-4" Style="width: 800px;">
|
||||
<RadzenText>@_imageIdea</RadzenText>
|
||||
</RadzenCard>
|
||||
|
||||
|
||||
|
||||
|
||||
<RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
|
||||
<RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
|
||||
|
||||
@ -91,7 +71,7 @@
|
||||
|
||||
<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" />
|
||||
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImages(false))>Generate</RadzenButton>
|
||||
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImagesAsync(false))>Generate</RadzenButton>
|
||||
|
||||
<RadzenCard>
|
||||
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
|
||||
@ -99,21 +79,25 @@
|
||||
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
|
||||
Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
|
||||
Click="() => ShowImageDialog(_imageUrls[0])" />
|
||||
@_imagePromts[0]
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
|
||||
Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
|
||||
Click="() => ShowImageDialog(_imageUrls[1])" />
|
||||
@_imagePromts[1]
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
|
||||
Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
|
||||
Click="() => ShowImageDialog(_imageUrls[2])" />
|
||||
@_imagePromts[2]
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
|
||||
Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
|
||||
Click="() => ShowImageDialog(_imageUrls[3])" />
|
||||
@_imagePromts[3]
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenCard>
|
||||
@ -138,6 +122,7 @@
|
||||
public string BusyMessage { get; set; } = "Initial Message";
|
||||
|
||||
private string?[] _imageUrls = new string?[4];
|
||||
private string?[] _imagePromts = new string?[4];
|
||||
private ImageState[] _imageStates = new ImageState[4];
|
||||
|
||||
enum ImageState
|
||||
@ -164,7 +149,6 @@
|
||||
new() { Position = TooltipPosition.Bottom, Duration = null});
|
||||
|
||||
private string _imageIdea = "";
|
||||
private string _imagePrompt = "";
|
||||
|
||||
private float _temperature = 0.9f;
|
||||
private int? width = 1024;
|
||||
@ -201,22 +185,29 @@
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Setzt alle Felder zurück, die zu einem bestimmten Wunsch gehören.
|
||||
/// </summary>
|
||||
private void ClearOldGeneration()
|
||||
{
|
||||
// Bilder verbergen
|
||||
for (int i = 0; i < 4; i++)
|
||||
{
|
||||
_imageStates[i] = ImageState.FadeOut;
|
||||
_imagePromts[i] = null;
|
||||
}
|
||||
|
||||
_imageIdea = "";
|
||||
_imagePrompt = "";
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Gibt ChatGPT den Wunsch und erlangt die Bild Idee.
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
private async Task RequestImageIdeaAsync()
|
||||
{
|
||||
string ideaBasePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/idea_prompt.txt"}");
|
||||
|
||||
string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/test_prompt2.txt"}");
|
||||
|
||||
ChatRequest chatRequest = new ChatRequest
|
||||
{
|
||||
Temperature = _temperature,
|
||||
@ -228,17 +219,99 @@
|
||||
// Wunsch an GPT senden und Bild Idee anfordern
|
||||
_conversation.AppendUserInput(ideaBasePrompt + " " + request);
|
||||
_imageIdea = await _conversation.GetResponseFromChatbotAsync();
|
||||
}
|
||||
|
||||
// Bild Promt anfordern
|
||||
_conversation.AppendUserInput(requestImagePrompt);
|
||||
_imagePrompt = await _conversation.GetResponseFromChatbotAsync();
|
||||
/// <summary>
|
||||
/// Fordert für mehrere Bilder Bild-Prompts an und generiert die dazugehörigen Bilder.
|
||||
/// </summary>
|
||||
private async Task RequestImagesAsync(WunschInfoModel wunschInfo)
|
||||
{
|
||||
string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
|
||||
|
||||
// Nachricht mit Bildpromt anfrage senden
|
||||
_conversation!.AppendUserInput(requestImagePrompt);
|
||||
|
||||
// Task-Liste, damit wir parallel Prompts anfordern und Bilder generieren können.
|
||||
Task[] imagePromts = new Task[4];
|
||||
|
||||
for (int i = 0; i < 4; i++)
|
||||
{
|
||||
imagePromts[i] = RequestPromptAndGenerateImageAsync(i, wunschInfo);
|
||||
}
|
||||
|
||||
await Task.WhenAll(imagePromts);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Fordert einen Bild Prompt an und generiert ein Bild für diesen.
|
||||
/// </summary>
|
||||
/// <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>
|
||||
private async Task RequestPromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo)
|
||||
{
|
||||
// Bild Prompt von ChatGPT anfordern
|
||||
string imagePrompt = await _conversation!.GetResponseFromChatbotAsync();
|
||||
|
||||
// Keywords anhängen um Kirstens Stil zu aktivieren.
|
||||
// TODO: Gucken, ob wir dem Watercolor bums brauchen
|
||||
imagePrompt = "kkkk " + imagePrompt;// + " kkkk Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique. ";
|
||||
|
||||
// Debug only: Promt anzeigen
|
||||
_imagePromts[index] = imagePrompt;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
|
||||
string? imageUrl = await GenerateImageAsync(imagePrompt, wunschInfo);
|
||||
|
||||
// TODO: Fehler im UI anzeigen (zur Zeit bleibt einfach Ladebalken)
|
||||
_imageUrls[index] = imageUrl;
|
||||
_imageStates[index] = ImageState.FadeIn;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Erzeugt ein Bild für den gegebenen Prompt und Wunsch.
|
||||
/// </summary>
|
||||
/// <param name="imagePrompt">Der Bild Prompt</param>
|
||||
/// <param name="wunschInfo">Der Wunsch.</param>
|
||||
/// <returns>Die URL, falls das Bild generiert wurde; oder null, wenn kein Bild generiert werden konnte.</returns>
|
||||
private async Task<string?> GenerateImageAsync(string imagePrompt, WunschInfoModel wunschInfo)
|
||||
{
|
||||
try
|
||||
{
|
||||
string? imageUrl = (await ImageGenerator.GenerateImageAsync(imagePrompt, wunschInfo, width, height))?.Dateiname;
|
||||
|
||||
// Kein Bild -> Fehler
|
||||
if (imageUrl == null)
|
||||
{
|
||||
bool? retry = await DialogService.Confirm(
|
||||
"Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?",
|
||||
"Ups, ein Fehler ist aufgetreten...",
|
||||
new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" });
|
||||
|
||||
if (retry == true)
|
||||
{
|
||||
imageUrl = (await ImageGenerator.GenerateImageAsync(imagePrompt, wunschInfo, width, height))?.Dateiname;
|
||||
}
|
||||
}
|
||||
|
||||
return imageUrl;
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
NotificationService.Notify(new NotificationMessage()
|
||||
{
|
||||
Summary = "Es ist ein Fehler beim Erzeugen der Bilder aufgetreten, bitte versuche es erneut."
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt.
|
||||
/// </summary>
|
||||
/// <param name="generateNewImage">Wenn <see langword="true"/>, werden neue Bilder generiert; sonst wird die vorhandene Idee bearbeitet.</param>
|
||||
private async Task GenerateImages(bool generateNewImage)
|
||||
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();
|
||||
@ -271,19 +344,19 @@
|
||||
// }
|
||||
}
|
||||
|
||||
_imagePrompt = "kkkk " + _imagePrompt + " kkkk Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique. ";
|
||||
|
||||
await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
|
||||
|
||||
WunschInfoModel wunschInfo = new()
|
||||
{
|
||||
BildBeschreibung = _imageIdea,
|
||||
BildPrompt = _imagePrompt,
|
||||
BildPrompt = "Individuelle Bild Prompts",
|
||||
Datum = DateTime.Now,
|
||||
GPTModel = _conversation.Model,
|
||||
Wunsch = request
|
||||
Wunsch = request,
|
||||
// TODO: Wenn wir Wünsche überarbeiten können wir hier diesen hier referenzieren
|
||||
VorherigerWunsch = null
|
||||
};
|
||||
|
||||
|
||||
try
|
||||
{
|
||||
await WunschInfoData.AddWunschInfoAsync(wunschInfo);
|
||||
@ -298,49 +371,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
int generatedImages = 0;
|
||||
|
||||
try
|
||||
{
|
||||
// Vier Bilder generieren
|
||||
for (int i = 0; i < 4; i++)
|
||||
{
|
||||
_imageUrls[i] = (await ImageGenerator.GenerateImageAsync(wunschInfo, width, height))?.Dateiname;
|
||||
|
||||
// Kein Bild -> Fehler
|
||||
if (_imageUrls[i] == null)
|
||||
{
|
||||
bool? retry = await DialogService.Confirm(
|
||||
"Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?",
|
||||
"Ups, ein Fehler ist aufgetreten...",
|
||||
new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" });
|
||||
|
||||
if (retry == true)
|
||||
{
|
||||
_imageUrls[i] = (await ImageGenerator.GenerateImageAsync(wunschInfo, width, height))?.Dateiname;
|
||||
}
|
||||
}
|
||||
|
||||
if (_imageUrls[i] != null)
|
||||
generatedImages++;
|
||||
|
||||
// TODO: Fehler anzeigen
|
||||
_imageStates[i] = ImageState.FadeIn;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
NotificationService.Notify(new NotificationMessage()
|
||||
{
|
||||
Summary = "Es ist ein Fehler beim Erzeugen der Bilder aufgetreten, bitte versuche es erneut."
|
||||
});
|
||||
|
||||
if (generatedImages == 0)
|
||||
{
|
||||
// TODO: Delete WunschInfo
|
||||
}
|
||||
}
|
||||
await RequestImagesAsync(wunschInfo);
|
||||
|
||||
_progressVisible = false;
|
||||
_buttonVisible = true;
|
||||
@ -357,4 +388,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user