KI-Kunst-Kirsten-Kloeckner/KIKunstKirstenKlöckner/Pages/AiArt.razor

@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 AiArtPageData AiArtData; *@
@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>
                            Verwende Gibbidy 4
                        </RadzenCheckBox>
                    </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>

        <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 GenerateImages(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])" />
                </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])" />
                </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])" />
                </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])" />
                </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 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 string _imagePrompt = "";

    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();
    }

    private void ClearOldGeneration()
    {
        // Bilder verbergen
        for (int i = 0; i < 4; i++)
            _imageStates[i] = ImageState.FadeOut;

        _imageIdea = "";
        _imagePrompt = "";
    }

    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,
            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();

        // Bild Promt anfordern
        _conversation.AppendUserInput(requestImagePrompt);
        _imagePrompt = await _conversation.GetResponseFromChatbotAsync();
    }

    /// <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)
    {
        // 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);
            // }
        }

        _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,
            Datum = DateTime.Now,
            GPTModel = _conversation.Model,
            Wunsch = request
        };

        try
        {
            await WunschInfoData.AddWunschInfoAsync(wunschInfo);
        }
        catch (Exception e)
        {
            NotificationService.Notify(new NotificationMessage()
            {
                Summary = "Es ist ein Fehler aufgetreten, bitte versuche es erneut."
            });

            return;
        }

        int generatedImages = 0;

        try
        {
            // Vier Bilder generieren
            for (int i = 0; i < 4; i++)
            {
                _imageUrls[i] = await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);

                // 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)
                   {
                        await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);
                   }
                }

                generatedImages++;

                _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
            }
        }

        _progressVisible = false;
        _buttonVisible = true;
        if (amountOfAddons > 0)
        {
            _addonsVisible = true;
            _bothVisible = _buttonVisible && _addonsVisible;
            await InvokeAsync(StateHasChanged);
        }
        else
        {
            _addonsVisible = false;
            _bothVisible = false;
        }
    }
}