Gottfried
/
KI-Kunst-Kirsten-Kloeckner
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases Wiki Activity

Fancy animation zur image section wenn generate butten gepresst wurde.

This commit is contained in:
klappstuhl24 2023-11-16 22:47:03 +01:00
parent a4e6cc4518
commit 74fe4ca4a1
2 changed files with 82 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
KIKunstKirstenKlöckner/Pages/AiArt.razor
View File

@ -8,6 +8,7 @@
@using KIKunstKirstenKlöckner.Data @using KIKunstKirstenKlöckner.Data
@using System.Diagnostics @using System.Diagnostics
@inject IJSRuntime JSRuntime
@inject IConfiguration Config @inject IConfiguration Config
@inject TooltipService TooltipService @inject TooltipService TooltipService
@inject NotificationService NotificationService @inject NotificationService NotificationService
@ -64,67 +65,74 @@
</ChildContent> </ChildContent>
</RadzenPanel> </RadzenPanel>
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton> <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText> @if (_imageSectionVisible)
{
<section id="imageSection">
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
<RadzenCard class="rz-mt-4" Style="width: 800px;"> <RadzenCard class="rz-mt-4" Style="width: 800px;">
<RadzenText>@_imageIdea</RadzenText> <RadzenText>@_imageIdea</RadzenText>
</RadzenCard> </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> <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" /> <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
<RadzenCard> <RadzenImage Path=@_imageUrl></RadzenImage>
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
<RadzenColumn Size="6"> <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up" <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
Click="() => ShowImageDialog(_imageUrls[0])" />
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info"> <RadzenCard>
@_imagePromts[0] <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
<br/> <RadzenColumn Size="6">
Model: @_bildInfos[0]?.ImageModel <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
</RadzenPanel> Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
</RadzenColumn> Click="() => ShowImageDialog(_imageUrls[0])" />
<RadzenColumn Size="6"> <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
<FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false" @_imagePromts[0]
Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200" <br />
Click="() => ShowImageDialog(_imageUrls[1])" /> Model: @_bildInfos[0]?.ImageModel
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info"> </RadzenPanel>
@_imagePromts[1] </RadzenColumn>
<br /> <RadzenColumn Size="6">
Model: @_bildInfos[1]?.ImageModel <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
</RadzenPanel> Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
</RadzenColumn> Click="() => ShowImageDialog(_imageUrls[1])" />
<RadzenColumn Size="6"> <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
<FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false" @_imagePromts[1]
Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600" <br />
Click="() => ShowImageDialog(_imageUrls[2])" /> Model: @_bildInfos[1]?.ImageModel
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info"> </RadzenPanel>
@_imagePromts[2] </RadzenColumn>
<br /> <RadzenColumn Size="6">
Model: @_bildInfos[2]?.ImageModel <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
</RadzenPanel> Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
</RadzenColumn> Click="() => ShowImageDialog(_imageUrls[2])" />
<RadzenColumn Size="6"> <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
<FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false" @_imagePromts[2]
Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400" <br />
Click="() => ShowImageDialog(_imageUrls[3])" /> Model: @_bildInfos[2]?.ImageModel
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info"> </RadzenPanel>
@_imagePromts[3] </RadzenColumn>
<br/> <RadzenColumn Size="6">
Model: @_bildInfos[3]?.ImageModel <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
</RadzenPanel> Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
</RadzenColumn> Click="() => ShowImageDialog(_imageUrls[3])" />
</RadzenRow> <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
</RadzenCard> @_imagePromts[3]
<br />
Model: @_bildInfos[3]?.ImageModel
</RadzenPanel>
</RadzenColumn>
</RadzenRow>
</RadzenCard>
</RadzenStack>
</section>
}
</RadzenStack> </RadzenStack>
</div> </div>
@ -142,6 +150,7 @@
private bool _buttonVisible = true; private bool _buttonVisible = true;
private bool _addonsVisible = false; private bool _addonsVisible = false;
private bool _bothVisible = false; private bool _bothVisible = false;
private bool _imageSectionVisible = false;
public string BusyMessage { get; set; } = "Initial Message"; public string BusyMessage { get; set; } = "Initial Message";
@ -156,6 +165,15 @@
FadeIn FadeIn
} }
private async Task OnGenerateButtonClickAsync()
{
_imageSectionVisible = true;
StateHasChanged();
await Task.Delay(100);
await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
await GenerateImagesAsync();
}
async Task ShowImageDialog(string imageUrl) async Task ShowImageDialog(string imageUrl)
{ {
var result = await DialogService.OpenAsync("", ds => var result = await DialogService.OpenAsync("", ds =>

8
KIKunstKirstenKlöckner/wwwroot/js/animator.js
View File

@ -14,6 +14,12 @@
window.addEventListener('scroll', animateElements); window.addEventListener('scroll', animateElements);
// Initialer Aufruf für den Fall, dass Elemente bereits sichtbar sind
animateElements(); animateElements();
} }
function scrollToElement(elementId) {
var element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}