391 lines
16 KiB
Plaintext
391 lines
16 KiB
Plaintext
@page "/aiart"
|
|
|
|
@using OpenAI_API
|
|
@using OpenAI_API.Chat
|
|
@using OpenAI_API.Models
|
|
@using DataAccess.Data
|
|
@using DataAccess.Models
|
|
@using KIKunstKirstenKlöckner.Data
|
|
|
|
@inject IConfiguration Config
|
|
@inject TooltipService TooltipService
|
|
@inject NotificationService NotificationService
|
|
@inject DialogService DialogService
|
|
|
|
@inject WunschInfoData WunschInfoData;
|
|
@inject ImageGenerator ImageGenerator;
|
|
|
|
<PageTitle>AiArt</PageTitle>
|
|
|
|
<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
|
<div class="container">
|
|
|
|
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
|
<h1>Wunschbilder von KI nur für dich</h1>
|
|
<RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
|
|
<RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
|
|
|
|
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
|
|
<ChildContent>
|
|
<RadzenCard class="rz-mt-4">
|
|
<RadzenStack Orientation="Orientation.Horizontal"
|
|
MouseEnter="@(args => ShowTemperatureTooltip(args))"
|
|
MouseLeave="TooltipService.Close"
|
|
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
|
<RadzenText>Temperature:</RadzenText>
|
|
<RadzenSlider @bind-Value=@_temperature TValue="float"
|
|
Step="0.1" Min="0.0m" Max="2.0m">
|
|
</RadzenSlider>
|
|
<RadzenText>@_temperature</RadzenText>
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal"
|
|
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
|
<RadzenText>Resolution:</RadzenText>
|
|
<RadzenStack Orientation="Orientation.Horizontal">
|
|
<RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@width />
|
|
x
|
|
<RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@height />
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal"
|
|
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
|
<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 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>
|
|
|
|
<RadzenImage Path=@_imageUrl></RadzenImage>
|
|
|
|
<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 GenerateImagesAsync(false))>Generate</RadzenButton>
|
|
|
|
<RadzenCard>
|
|
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
|
|
<RadzenColumn Size="6">
|
|
<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>
|
|
|
|
</RadzenStack>
|
|
</div>
|
|
</section>
|
|
|
|
@code {
|
|
/// <summary>
|
|
/// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
|
|
/// </summary>
|
|
private bool _useGpt4;
|
|
|
|
private int maxAddons = 2;
|
|
private int amountOfAddons = 0; // wird später geändert
|
|
private bool _progressVisible = false;
|
|
private bool _buttonVisible = true;
|
|
private bool _addonsVisible = false;
|
|
private bool _bothVisible = false;
|
|
|
|
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
|
|
{
|
|
FadeOut,
|
|
FadeIn
|
|
}
|
|
|
|
async Task ShowImageDialog(string imageUrl)
|
|
{
|
|
var result = await DialogService.OpenAsync("", ds =>
|
|
@<div>
|
|
<RadzenImage Style="object-fit: contain; width: 100%; height:100%;" Path="@imageUrl"/>
|
|
</div>, new DialogOptions() { CloseDialogOnOverlayClick = true });
|
|
}
|
|
|
|
void ShowTooltip(ElementReference elementReference, string text, TooltipOptions? options = null) => TooltipService.Open(elementReference, text, options);
|
|
|
|
void ShowTemperatureTooltip(ElementReference elementReference) => TooltipService.Open(elementReference, ds =>
|
|
@<div>
|
|
Gibt an, wie <em>kreativ</em> ChatGPT sein soll.<br/>
|
|
</div>
|
|
,
|
|
new() { Position = TooltipPosition.Bottom, Duration = null});
|
|
|
|
private string _imageIdea = "";
|
|
|
|
private float _temperature = 0.9f;
|
|
private int? width = 1024;
|
|
private int? height = 1024;
|
|
private string request = "";
|
|
private string addons = "";
|
|
private OpenAIAPI _openAiApi;
|
|
private Conversation? _conversation;
|
|
|
|
private string _basePrompt;
|
|
private string _ideaPrompt;
|
|
|
|
private string _imageUrl;
|
|
|
|
//protected override async Task OnInitializedAsync()
|
|
//{
|
|
// _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
|
|
//}
|
|
|
|
async Task UpdateBusyMessage(string newMessage)
|
|
{
|
|
BusyMessage = newMessage;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
private string _openAiApiKey = "";
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
_openAiApiKey = Config.GetValue<string>("API:OpenAI");
|
|
|
|
_openAiApi = new OpenAIAPI(_openAiApiKey);
|
|
|
|
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 = "";
|
|
}
|
|
|
|
/// <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"}");
|
|
|
|
ChatRequest chatRequest = new ChatRequest
|
|
{
|
|
Temperature = _temperature,
|
|
Model = _useGpt4 ? Model.GPT4 : Model.ChatGPTTurbo
|
|
};
|
|
|
|
_conversation = _openAiApi.Chat.CreateConversation(chatRequest);
|
|
|
|
// Wunsch an GPT senden und Bild Idee anfordern
|
|
_conversation.AppendUserInput(ideaBasePrompt + " " + request);
|
|
_imageIdea = 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 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;
|
|
_buttonVisible = false;
|
|
|
|
if (_conversation == null || generateNewImage)
|
|
{
|
|
ClearOldGeneration();
|
|
|
|
amountOfAddons = maxAddons;
|
|
_addonsVisible = false;
|
|
_bothVisible = _buttonVisible && _addonsVisible;
|
|
await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
|
|
|
|
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...");
|
|
|
|
WunschInfoModel wunschInfo = new()
|
|
{
|
|
BildBeschreibung = _imageIdea,
|
|
BildPrompt = "Individuelle Bild Prompts",
|
|
Datum = DateTime.Now,
|
|
GPTModel = _conversation.Model,
|
|
Wunsch = request,
|
|
// TODO: Wenn wir Wünsche überarbeiten können wir hier diesen hier referenzieren
|
|
VorherigerWunsch = null
|
|
};
|
|
|
|
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);
|
|
|
|
_progressVisible = false;
|
|
_buttonVisible = true;
|
|
if (amountOfAddons > 0)
|
|
{
|
|
_addonsVisible = true;
|
|
_bothVisible = _buttonVisible && _addonsVisible;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
else
|
|
{
|
|
_addonsVisible = false;
|
|
_bothVisible = false;
|
|
}
|
|
}
|
|
}
|