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"> <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"/>
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen"> <RadzenText TextStyle="TextStyle.H2">Dein Wunsch:</RadzenText>
<ChildContent>
<RadzenCard class="rz-mt-4">
<RadzenStack Orientation="Orientation.Horizontal" <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
MouseEnter="@(args => ShowTemperatureTooltip(args))" <RadzenTextBox @bind-Value=@request Placeholder="..." />
MouseLeave="TooltipService.Close" <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImages(true))>Generieren</RadzenButton>
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"> </RadzenStack>
<RadzenText>Temperature:</RadzenText>
<RadzenSlider @bind-Value=@_temperature TValue="float"
Step="0.1" Min="0.0m" Max="2.0m">
</RadzenSlider> <!--
<RadzenText>@_temperature</RadzenText> <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
</RadzenStack> <ChildContent>
<RadzenStack Orientation="Orientation.Horizontal" <RadzenCard class="rz-mt-4">
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"> <RadzenStack Orientation="Orientation.Horizontal"
<RadzenText>Resolution:</RadzenText> MouseEnter="@(args => ShowTemperatureTooltip(args))"
<RadzenStack Orientation="Orientation.Horizontal"> MouseLeave="TooltipService.Close"
<RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@width /> AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
x <RadzenText>Temperature:</RadzenText>
<RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@height /> <RadzenSlider @bind-Value=@_temperature TValue="float"
Step="0.1" Min="0.0m" Max="2.0m">
</RadzenSlider>
<RadzenText>@_temperature</RadzenText>
</RadzenStack> </RadzenStack>
</RadzenStack> <RadzenStack Orientation="Orientation.Horizontal"
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"> <RadzenText>Resolution:</RadzenText>
<RadzenCheckBox @bind-Value=@_useGpt4> <RadzenStack Orientation="Orientation.Horizontal">
Verwende Gibbidy 4 <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@width />
</RadzenCheckBox> x
</RadzenStack> <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> </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"> <RadzenCard class="rz-mt-4" Style="width: 800px;">
<ChildContent> <RadzenText>@_imageIdea</RadzenText>
<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> </RadzenCard>
</ChildContent> </RadzenStack>
</RadzenPanel>
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
<RadzenCard class="rz-mt-4" Style="width: 800px;">
<RadzenText>@_imageIdea</RadzenText>
</RadzenCard>
@ -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";
@ -310,15 +313,15 @@
// Kein Bild -> Fehler // Kein Bild -> Fehler
if (_imageUrls[i] == null) if (_imageUrls[i] == null)
{ {
bool? retry = await DialogService.Confirm( bool? retry = await DialogService.Confirm(
"Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?", "Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?",
"Ups, ein Fehler ist aufgetreten...", "Ups, ein Fehler ist aufgetreten...",
new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" }); new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" });
if (retry == true) if (retry == true)
{ {
await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo); await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);
} }
} }
generatedImages++; generatedImages++;
@ -342,6 +345,7 @@
_progressVisible = false; _progressVisible = false;
_buttonVisible = true; _buttonVisible = true;
_promptVisible = true;
if (amountOfAddons > 0) if (amountOfAddons > 0)
{ {
_addonsVisible = true; _addonsVisible = true;