redesign vom bilder generieren

This commit is contained in:
Meiko Remiorz 2023-10-11 18:31:25 +02:00
parent 80c7dca613
commit 247c913051
1 changed files with 65 additions and 61 deletions

View File

@ -21,11 +21,19 @@
<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten"> <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"> <div class="container">
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center"> <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Style="min-height:800px">
<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"/>
<RadzenText TextStyle="TextStyle.H2">Dein Wunsch:</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
<RadzenTextBox @bind-Value=@request Placeholder="..." />
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImages(true))>Generieren</RadzenButton>
</RadzenStack>
<!--
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen"> <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
<ChildContent> <ChildContent>
<RadzenCard class="rz-mt-4"> <RadzenCard class="rz-mt-4">
@ -57,29 +65,23 @@
</RadzenCard> </RadzenCard>
</ChildContent> </ChildContent>
</RadzenPanel> </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.Vertical" Visible=@_promptVisible>
<RadzenStack Orientation="Orientation.Horizontal" <RadzenCard class="rz-mt-4" Style="max-width: 500px">
MouseEnter="@(args => ShowTemperatureTooltip(args))"
MouseLeave="TooltipService.Close"
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenText>@_imagePrompt</RadzenText> <RadzenText>@_imagePrompt</RadzenText>
</RadzenStack>
</RadzenCard> </RadzenCard>
</ChildContent>
</RadzenPanel>
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
<RadzenText TextStyle="TextStyle.H4">Interpretation deines Wunsches:</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>
</RadzenStack>
@ -93,7 +95,7 @@
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" /> <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImages(false))>Generate</RadzenButton> <RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImages(false))>Generate</RadzenButton>
<RadzenCard> <RadzenCard Visible="@_promptVisible">
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem"> <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
<RadzenColumn Size="6"> <RadzenColumn Size="6">
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
@ -134,6 +136,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 _promptVisible = false;
public string BusyMessage { get; set; } = "Initial Message"; public string BusyMessage { get; set; } = "Initial Message";
@ -342,6 +345,7 @@
_progressVisible = false; _progressVisible = false;
_buttonVisible = true; _buttonVisible = true;
_promptVisible = true;
if (amountOfAddons > 0) if (amountOfAddons > 0)
{ {
_addonsVisible = true; _addonsVisible = true;