From 247c913051187b19f25bf87ff90424f65f327545 Mon Sep 17 00:00:00 2001
From: Meiko Remiorz <meiko.remiorz@web.de>
Date: Wed, 11 Oct 2023 18:31:25 +0200
Subject: [PATCH] redesign vom bilder generieren

---
 KIKunstKirstenKlöckner/Pages/AiArt.razor | 126 ++++++++++++-----------
 1 file changed, 65 insertions(+), 61 deletions(-)

diff --git a/KIKunstKirstenKlöckner/Pages/AiArt.razor b/KIKunstKirstenKlöckner/Pages/AiArt.razor
index f066303..fe914b5 100644
--- a/KIKunstKirstenKlöckner/Pages/AiArt.razor
+++ b/KIKunstKirstenKlöckner/Pages/AiArt.razor
@@ -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;