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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,65 +21,67 @@
<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"/>
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Style="min-height:800px">
<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 />
<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">
<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>
<RadzenStack Orientation="Orientation.Horizontal"
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenCheckBox @bind-Value=@_useGpt4>
Verwende Gibbidy 4
</RadzenCheckBox>
</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>
-->
<RadzenStack Orientation="Orientation.Vertical" Visible=@_promptVisible>
<RadzenCard class="rz-mt-4" Style="max-width: 500px">
<RadzenText>@_imagePrompt</RadzenText>
</RadzenCard>
</ChildContent>
</RadzenPanel>
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImages(true))>Generate</RadzenButton>
<RadzenText TextStyle="TextStyle.H4">Interpretation deines Wunsches:</RadzenText>
<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 class="rz-mt-4" Style="width: 800px;">
<RadzenText>@_imageIdea</RadzenText>
</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>
</RadzenStack>
@ -93,7 +95,7 @@
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
<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">
<RadzenColumn Size="6">
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
@ -134,6 +136,7 @@
private bool _buttonVisible = true;
private bool _addonsVisible = false;
private bool _bothVisible = false;
private bool _promptVisible = false;
public string BusyMessage { get; set; } = "Initial Message";
@ -310,15 +313,15 @@
// 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" });
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)
{
if (retry == true)
{
await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);
}
}
}
generatedImages++;
@ -342,6 +345,7 @@
_progressVisible = false;
_buttonVisible = true;
_promptVisible = true;
if (amountOfAddons > 0)
{
_addonsVisible = true;