redesign vom bilder generieren

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -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">
     <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">
 
+        <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">
@@ -57,29 +65,23 @@
                     </RadzenCard>
                 </ChildContent>
             </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.Horizontal"
-                                 MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                                 MouseLeave="TooltipService.Close"
-                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+
+
+        <RadzenStack Orientation="Orientation.Vertical" Visible=@_promptVisible>
+                <RadzenCard class="rz-mt-4" Style="max-width: 500px">
                     <RadzenText>@_imagePrompt</RadzenText>
-                    </RadzenStack>
                 </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;">
                     <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";
 
@@ -342,6 +345,7 @@
 
         _progressVisible = false;
         _buttonVisible = true;
+        _promptVisible = true;
         if (amountOfAddons > 0)
         {
             _addonsVisible = true;