diff --git a/KIKunstKirstenKlöckner/Pages/AiArt.razor b/KIKunstKirstenKlöckner/Pages/AiArt.razor index 439309e..fd0fd5f 100644 --- a/KIKunstKirstenKlöckner/Pages/AiArt.razor +++ b/KIKunstKirstenKlöckner/Pages/AiArt.razor @@ -14,15 +14,102 @@ @inject NotificationService NotificationService @inject DialogService DialogService -@inject WunschInfoData WunschInfoData; @inject ImageGenerator ImageGenerator; +@inject BildInfoData BildInfoData; +@inject WunschInfoData WunschInfoData; + +@implements IAsyncDisposable + + AiArt - - + - + + + + + + + + + + Hier werden + deine Wünsche + Wirklichkeit + + + Weiter unten findest du meinen Assistenten. Gebe ihm deinen Wunsch und er wird sich etwas tolles dazu überlegen. Es lohnt sich geduldig zu sein. + Scrolle einfach nach unten! + + + + + + + + + @if (_allBildInfos != null) + { + @foreach (var bildInfo in _allBildInfos) + { + if (_indexForCarusell == 0) + { + + + + + + } + + + + + + _indexForCarusell++; + } + } + + + + + Previous + + + Next + + + + + + + + + + + + + + + + Wunschbilder von KI nur für dich Nenne uns deinen Wunsch: @@ -63,10 +150,17 @@ - + Generate + + + + + + + @if (_imageSectionVisible) { @@ -133,12 +227,63 @@ } + @if (!_imageSectionVisible) + { + + } + + + - - @code { + // Animation stuff + private int _indexForCarusell = 0; + private ElementReference animatedEntrySection; + private List animatedElements = new List(); + + private Func removeScrollListener; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + animatedElements.Add(animatedEntrySection); + + removeScrollListener = await JSRuntime.InvokeAsync>( + "initHeroAreaScrollAnimation" + ); + + await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements); + } + } + + private bool isDisposed = false; + + public async ValueTask DisposeAsync() + { + if (!isDisposed) + { + if (removeScrollListener != null) + { + await removeScrollListener.Invoke(); + } + isDisposed = true; + } + } + + private async Task OnGenerateButtonClickAsync() + { + _imageSectionVisible = true; + StateHasChanged(); + await Task.Delay(100); + await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection"); + await GenerateImagesAsync(); + } + + List? _allBildInfos; + /// /// Wenn wird GPT4 verwendet um die Idee zu interpretieren. /// @@ -165,15 +310,6 @@ FadeIn } - private async Task OnGenerateButtonClickAsync() - { - _imageSectionVisible = true; - StateHasChanged(); - await Task.Delay(100); - await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection"); - await GenerateImagesAsync(); - } - async Task ShowImageDialog(string imageUrl) { var result = await DialogService.OpenAsync("", ds => @@ -229,6 +365,9 @@ protected override async Task OnInitializedAsync() { + _allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList(); + StateHasChanged(); + _openAiApiKey = Config.GetValue("API:OpenAI"); _openAiApi = new OpenAIAPI(_openAiApiKey);
+ Weiter unten findest du meinen Assistenten. Gebe ihm deinen Wunsch und er wird sich etwas tolles dazu überlegen. Es lohnt sich geduldig zu sein. + Scrolle einfach nach unten! +