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
@using System.Diagnostics

@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=@_userIdea Placeholder="Dein Wunsch"/>
        
        @* Zusätzliche Optionen *@
        <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=@_imageWidth />
                        x
                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@_imageHeight />
                        </RadzenStack>
                    </RadzenStack>
                    <RadzenStack Orientation="Orientation.Horizontal"
                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
                        <RadzenCheckBox @bind-Value=@_useGpt4Turbo Name="UseGPT4"/>
                        <RadzenLabel Text="Verwende GPT 4 Turbo" Component="UseGPT4" Style="margin-left: 8px; vertical-align: middle;" />
                    </RadzenStack>
                    @* <RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" class="mb-5"> *@
                    <RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" ValueProperty="" class="mb-5">
                        <Items>
                            <RadzenRadioButtonListItem Text="Zufällig" Value="@null" TValue="ModelInfo"/>
                        </Items>
                    </RadzenRadioButtonList>
                </RadzenCard>
            </ChildContent>
        </RadzenPanel>

        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>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=@_updateRequest Placeholder="z.B. Mehr Farben" />
        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>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])" />
                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                        @_imagePromts[0]
                        <br/>
                        Model: @_bildInfos[0]?.ImageModel
                    </RadzenPanel>
                </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])" />
                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                            @_imagePromts[1]
                            <br />
                            Model: @_bildInfos[1]?.ImageModel
                        </RadzenPanel>
                </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])" />
                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                            @_imagePromts[2]
                            <br />
                            Model: @_bildInfos[2]?.ImageModel
                        </RadzenPanel>
                </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])" />
                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                            @_imagePromts[3]
                            <br/>
                            Model: @_bildInfos[3]?.ImageModel
                        </RadzenPanel>
                </RadzenColumn>
            </RadzenRow>
        </RadzenCard>
    
    </RadzenStack>
</div>
</section>

@code {
    /// <summary>
    /// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
    /// </summary>
    private bool _useGpt4Turbo;

    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 BildInfoModel?[] _bildInfos = new BildInfoModel?[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? _imageWidth = null; 
    private int? _imageHeight = null; 
    private string _userIdea = "";
    private string _updateRequest = "";
    private OpenAIAPI _openAiApi;
    private Conversation? _conversation;

    private string _basePrompt;
    private string _ideaPrompt;

    private string _imageUrl;

    private WunschInfoModel? _wunschInfo;

    async Task UpdateBusyMessage(string newMessage)
    {
        BusyMessage = newMessage;
        await InvokeAsync(StateHasChanged);
    }

    private string _openAiApiKey = "";

    class ModelInfo
    {
        public string Name { get; set; }
        public string StableDiffusionModel { get; set; }
        public string PromptFormat { get; set; }
    }

    private List<ModelInfo> _imageModels;

    private ModelInfo? _selectedImageModel = null;

    protected override async Task OnInitializedAsync()
    {
        _openAiApiKey = Config.GetValue<string>("API:OpenAI");

        _openAiApi = new OpenAIAPI(_openAiApiKey);

        _imageModels = Config.GetSection("ImageModels").Get<List<ModelInfo>>();
        //_selectedImageModel = _imageModels[0];

        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 = _useGpt4Turbo ? ChatGPT.GPT4Turbo : Model.ChatGPTTurbo
        };

        _conversation = _openAiApi.Chat.CreateConversation(chatRequest);

        // Wunsch an GPT senden und Bild Idee anfordern
        _conversation.AppendUserInput(ideaBasePrompt + " " + _userIdea);
        _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)
    {
        // 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] = RequestImagePromptAndGenerateImageAsync(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 RequestImagePromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo)
    {
        ModelInfo imageModel = _selectedImageModel ?? _imageModels[Random.Shared.Next(_imageModels.Count)];

        // 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 = string.Format(imageModel.PromptFormat, 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);

        BildInfoModel? bildInfo = await GenerateImageAsync(imagePrompt, imageModel.StableDiffusionModel, wunschInfo);

        // TODO: Fehler im UI anzeigen (zur Zeit bleibt einfach Ladebalken)
        _imageUrls[index] = bildInfo?.Dateiname;
        _bildInfos[index] = bildInfo;
        _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<BildInfoModel?> GenerateImageAsync(string imagePrompt, string modelName, WunschInfoModel wunschInfo)
    {
        try
        {
            BildInfoModel? bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);

            // Kein Bild -> Fehler
            if (bildInfo == 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)
                {
                    bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);
                }
            }

            return bildInfo;
        }
        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>
    private async Task GenerateImagesAsync()
    {
        _progressVisible = true;
        _buttonVisible = false;

        ClearOldGeneration();

        amountOfAddons = maxAddons;
        _addonsVisible = false;
        _bothVisible = _buttonVisible && _addonsVisible;
        await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");

        await RequestImageIdeaAsync();

        await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");

        _wunschInfo = new()
        {
            BildBeschreibung = _imageIdea,
            BildPrompt = "Individuelle Bild Prompts",
            Datum = DateTime.Now,
            GPTModel = _conversation!.Model,
            Wunsch = _userIdea,
            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;
        }

        string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");

        await RequestImagesAsync(_wunschInfo, requestImagePrompt);

        _progressVisible = false;
        _buttonVisible = true;
        if (amountOfAddons > 0)
        {
            _addonsVisible = true;
            _bothVisible = _buttonVisible && _addonsVisible;
            await InvokeAsync(StateHasChanged);
        }
        else
        {
            _addonsVisible = 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);
    }
}