Upgrade auf DotNet 8.0 und C# 12

.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*]
+charset = utf-8

.idea/.idea.KIKunstKirstenKlöckner/.idea/.gitignore

@@ -0,0 +1,13 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Rider ignored files
+/modules.xml
+/.idea.KIKunstKirstenKlöckner.iml
+/contentModel.xml
+/projectSettingsUpdater.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/.idea.KIKunstKirstenKlöckner/.idea/.name

@@ -0,0 +1 @@
+KIKunstKirstenKlöckner

.idea/.idea.KIKunstKirstenKlöckner/.idea/dataSources.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="Nackenserver" uuid="2da1b5f0-41db-4b4f-adbd-3ec21fc94746">
+      <driver-ref>sqlserver.jb</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.jetbrains.jdbc.sqlserver.SqlServerDriver</jdbc-driver>
+      <jdbc-url>Server=127.0.0.1,1433;Database=KiKunst</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+    <data-source source="LOCAL" name="KiKunstDatenbank@85.215.58.36" uuid="df248d03-0de1-4e34-86bf-d38047939693">
+      <driver-ref>sqlserver.jb</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.jetbrains.jdbc.sqlserver.SqlServerDriver</jdbc-driver>
+      <jdbc-url>Server=85.215.58.36;Database=KiKunstDatenbank</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>

.idea/.idea.KIKunstKirstenKlöckner/.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="file://$PROJECT_DIR$/KIKunstKirstenKlöckner/Program.cs" charset="windows-1252" />
+  </component>
+</project>

.idea/.idea.KIKunstKirstenKlöckner/.idea/indexLayout.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="UserContentModel">
+    <attachedFolders />
+    <explicitIncludes />
+    <explicitExcludes />
+  </component>
+</project>

.idea/.idea.KIKunstKirstenKlöckner/.idea/sqlDataSources.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDataSourceStorage">
+    <option name="dataSources">
+      <list>
+        <State>
+          <option name="id" value="01ff5a47-63ce-4ef8-aed7-c9f2f9f5c726" />
+          <option name="name" value="KiKunstDatenbank" />
+          <option name="dbmsName" value="MSSQL" />
+          <option name="urls">
+            <array>
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/BildInfo.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/WunschInfo.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Insert.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_UpdateFileName.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_GetAll.sql" />
+              <option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Get.sql" />
+            </array>
+          </option>
+          <option name="remarks" value="Database Project" />
+          <option name="outPath" value="$PROJECT_DIR$/KiKunstDatenbank" />
+          <option name="codeStyleName" value="Visual Studio Database Project" />
+          <option name="outLayout" value="File per object by schema.groovy" />
+          <option name="scriptOptions">
+            <map>
+              <entry key="ConstraintContext" value="CONSTRAINT_IN_TABLE" />
+              <entry key="MsVsDdlCompatibility" value="1" />
+              <entry key="QualifyWithSchema" value="ALWAYS" />
+              <entry key="Reformat" value="1" />
+              <entry key="UseSemicolon" value="1" />
+            </map>
+          </option>
+        </State>
+      </list>
+    </option>
+  </component>
+</project>

.idea/.idea.KIKunstKirstenKlöckner/.idea/sqldialects.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_GetAll.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_UpdateFileName.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Get.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Insert.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/BildInfo.sql" dialect="TSQL" />
+    <file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/WunschInfo.sql" dialect="TSQL" />
+  </component>
+</project>

.idea/.idea.KIKunstKirstenKlöckner/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

DataAccess/DataAccess.csproj

@@ -1,15 +1,16 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
+    <LangVersion>12</LangVersion>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Dapper" Version="2.1.4" />
+    <PackageReference Include="Dapper" Version="2.1.35" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="7.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
-    <PackageReference Include="System.Data.SqlClient" Version="4.8.5" />
+    <PackageReference Include="System.Data.SqlClient" Version="4.8.6" />
   </ItemGroup>
 
 </Project>

KIKunstKirstenKlöckner.sln

@@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
 EndProject
 Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

KIKunstKirstenKlöckner/App.razor

@@ -1,4 +1,14 @@
-<Router AppAssembly="@typeof(App).Assembly">
+@using OpenAI_API
+@using OpenAI_API.Chat
+@using OpenAI_API.Models
+@using Microsoft.AspNetCore.Components
+@using KIKunstKirstenKlöckner.Data
+
+
+@inject IConfiguration Config
+@inject NavigationManager NavigationManager
+
+<Router AppAssembly="@typeof(App).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
@@ -6,7 +16,54 @@
     <NotFound>
         <PageTitle>Not found</PageTitle>
         <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
+            <p style="text-align:center;" role="alert">@_text</p>
+            @* @_mus *@
         </LayoutView>
     </NotFound>
 </Router>
+
+@code {
+    private MarkupString _mus = new MarkupString();
+    private string _text = "";
+    private OpenAIAPI _openAiApi;
+    private Conversation? _conversation;
+    private string _openAiApiKey = "";
+    private string _urlPath;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var uri = new Uri(NavigationManager.Uri);
+        _urlPath = uri.AbsolutePath; // Dies gibt den Pfadteil der URL zurück
+
+        // Optional: Entfernen Sie den führenden Schrägstrich, falls vorhanden
+        if (_urlPath.StartsWith("/"))
+        {
+            _urlPath = _urlPath.Substring(1);
+        }
+
+        _openAiApiKey = Config.GetValue<string>("API:OpenAI");
+
+        _openAiApi = new OpenAIAPI(_openAiApiKey);
+
+        //string ideaBasePrompt = "Stelle dir vor du bist ein berliner Bösewicht und ich gehe auf deine Internetseite, die sich mit der generierung von Wunschbildern mittels KI beschäftigt, und bemerke, dass es die Seite nicht gibt. Denke dir eine witzige und unterschwellige Beleidigung für diesen Sachverhalt gerichtet an mich aus. Ich würde mich freuen, wenn du etwas ausfallender mir gegenüber werden könntest. Antworte mit Berliner Schnauze. Die Seite die ich versucht habe zu erreichen, ist: " + _urlPath;
+        string ideaBasePrompt = "Stelle dir vor du bist ein berliner Bösewicht und ich gehe auf deine Internetseite und bemerke, dass es die Seite nicht gibt. Denke dir eine witzige und unterschwellige Beleidigung für diesen Sachverhalt gerichtet an mich aus. Ich würde mich freuen, wenn du etwas ausfallender mir gegenüber werden könntest. Antworte mit Berliner Schnauze. Die Seite die ich versucht habe zu erreichen, ist: " + _urlPath;
+        //string ideaBasePrompt = "Stelle dir vor jemand geht auf eine Seite einer Internetseite und bemerkt, dass es die Seite nicht gibt. Denke dir eine witzige idee als html code aus, um der Person zu präsentieren, dass die seite nicht existiert. Es soll unterschwellig beleidigend sein aber niemanden offensichtlich beleidigen. sei kreativ und denke daran, nur html und css zu generieren. Der css teil soll im html teil schon drin sein. Die seite die nicht gefunden wurde ist: " + _urlPath;
+
+        ChatRequest chatRequest = new ChatRequest
+            {
+                Temperature = 0.9,
+                Model = Model.ChatGPTTurbo //ChatGPT.GPT4Turbo
+            };
+
+        _conversation = _openAiApi.Chat.CreateConversation(chatRequest);
+
+        // Wunsch an GPT senden und Bild Idee anfordern
+        _conversation.AppendUserInput(ideaBasePrompt);
+        _text = await _conversation.GetResponseFromChatbotAsync();
+        _mus = new MarkupString(_text);
+        StateHasChanged();
+
+        await base.OnInitializedAsync();
+    }
+
+}

KIKunstKirstenKlöckner/Data/ChatGPT.cs

@@ -1,6 +1,9 @@
-namespace KIKunstKirstenKlöckner.Data;
+using OpenAI_API.Models;
+
+namespace KIKunstKirstenKlöckner.Data;
 
 public class ChatGPT
 {
-
+    public static Model GPT4Turbo => new Model("gpt-4-turbo") { OwnedBy = "openai" };
+    public static Model GPT4o => new Model("gpt-4o") { OwnedBy = "openai" };
 }

KIKunstKirstenKlöckner/Data/ImageGenerator.cs

@@ -1,7 +1,7 @@
 using DataAccess.Data;
 using DataAccess.Models;
-using Radzen;
 using System.Diagnostics;
+using SixLabors.ImageSharp;
 
 namespace KIKunstKirstenKlöckner.Data;
 
@@ -12,7 +12,7 @@ public class ImageGenerator
 
     private readonly IConfiguration _config;
 
-    private string ModelName => _config.GetValue<string>("StableDiffusionModel") ?? "No Model Defined";
+    //private string ModelName => _config.GetValue<string>("StableDiffusionModel") ?? "No Model Defined";
 
     public ImageGenerator(IConfiguration config, BildInfoData bildInfoData)
     {
@@ -34,7 +34,7 @@ public class ImageGenerator
     /// <param name="height">Die höhe des zu generierenden Bildes. <see langword="null"/> für Standardhöhe des Modells</param>
     /// <param name="negativePromt">Begriffe, die explizit nicht generiert werden sollen.</param>
     /// <returns>Die BildInfo des generierten Bildes; oder null, wenn ein Fehler auftrat.</returns>
-    public async Task<BildInfoModel?> GenerateImageAsync(string imagePrompt, WunschInfoModel wunschInfo, int? width = null, int? height = null, string negativePromt = "")
+    public async Task<BildInfoModel?> GenerateImageAsync(string imagePrompt, string modelName, WunschInfoModel wunschInfo, int? width = null, int? height = null, string negativePromt = "")
     {
         var postData = new
         {
@@ -60,7 +60,7 @@ public class ImageGenerator
 
         try
         {
-            var inferenceModelUrl = $"https://api-inference.huggingface.co/models/{ModelName}";
+            var inferenceModelUrl = $"https://api-inference.huggingface.co/models/{modelName}";
 
             var response = await _client.PostAsync(inferenceModelUrl, content);
 
@@ -75,7 +75,7 @@ public class ImageGenerator
                     // Die tatsächliche Url wird in SaveImageStreamAsync gesetzt.
                     Dateiname = "PlaceHolder",
                     Datum = imageDate,
-                    ImageModel = ModelName,
+                    ImageModel = modelName,
                     WunschId = wunschInfo.Id,
                     Prompt = imagePrompt
                 };

KIKunstKirstenKlöckner/Extensions/ListExtension.cs

@@ -0,0 +1,23 @@
+namespace KIKunstKirstenKlöckner.Extensions
+{
+    public static class ListExtension
+    {
+        public static IEnumerable<T> PickRandom<T>(this List<T> list, int n)
+        {
+            if (list.Count == 0)
+            {
+                yield break;
+            }
+            if (n <= 0)
+            {
+                throw new ArgumentException("n must be greater than 0: ", nameof(n));
+            }
+
+            for (int i = 0; i < n; i++)
+            {
+                int index = Random.Shared.Next(list.Count);
+                yield return list[index];
+            }
+        }
+    }
+}

KIKunstKirstenKlöckner/KIKunstKirstenKlöckner.csproj

@@ -1,23 +1,22 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>c1bf616d-d992-465d-91b1-995a57ba483d</UserSecretsId>
     <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
+    <LangVersion>12</LangVersion>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="HuggingFace" Version="0.2.3" />
+    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.21.0" />
-    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.18.1" />
+    <PackageReference Include="OpenAI" Version="1.11.0" />
-    <PackageReference Include="OpenAI" Version="1.7.2" />
+    <PackageReference Include="Radzen.Blazor" Version="4.33.1" />
-    <PackageReference Include="Radzen.Blazor" Version="4.14.4" />
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="wwwroot\NewFolder\" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="3.1.4" />
-    <PackageReference Include="SixLabors.ImageSharp" Version="3.0.1" />
   </ItemGroup>
 
   <ItemGroup>

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -6,25 +6,119 @@
 @using DataAccess.Data
 @using DataAccess.Models
 @using KIKunstKirstenKlöckner.Data
+@using KIKunstKirstenKlöckner.Extensions
+@using System.Diagnostics
 
+@inject IJSRuntime JSRuntime
 @inject IConfiguration Config
 @inject TooltipService TooltipService
 @inject NotificationService NotificationService
 @inject DialogService DialogService
 
-@inject WunschInfoData WunschInfoData;
 @inject ImageGenerator ImageGenerator;
+@inject BildInfoData BildInfoData;
+@inject WunschInfoData WunschInfoData;
 
-<PageTitle>AiArt</PageTitle>
+@implements IAsyncDisposable
 
-<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+<style>
+    .invisible-rectangle {
+        width: 100%;
+        height: 600px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
+
+    .invisible-rectangle-small {
+        width: 100%;
+        height: 100px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
+</style>
+
+<PageTitle>Wunschbild Generator</PageTitle>
+
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+
+    <div class="hero_area hero-area-visible">
+
+        <!-- slider section -->
+        <section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-6 ">
+                <div class="detail_box">
+                  <h1>
+                    Hier werden <br>
+                    deine Wünsche <br>
+                    Wirklichkeit
+                  </h1>
+                  <p>
+                    Weiter unten findest du meinen Assistenten. Gebe ihm deinen Wunsch und er wird sich etwas tolles dazu überlegen. Es lohnt sich geduldig zu sein. <br>
+                    Scrolle einfach nach unten!
+                  </p>
+                </div>
+              </div>
+              <div class="col-lg-5 col-md-6 offset-lg-1">
+                <div class="img_content">
+                  <div class="img_container">
+                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                        @if (_allBildInfos != null)
+                        {
+                            @foreach (var bildInfo in _allBildInfos)
+                            {
+                                if (_indexForCarusell == 0)
+                                {
+                                    <div class="carousel-item active">
+                                        <div class="img-box">
+                                            <img src="@bildInfo.Dateiname"/>
+                                        </div>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="carousel-item">
+                                        <div class="img-box">
+                                            <img src="@bildInfo.Dateiname"/>
+                                        </div>
+                                    </div>
+                                }      
+                                _indexForCarusell++;
+                            }
+                        }            
+                      </div>
+                    </div>
+                  </div>
+                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+                    <span class="sr-only">Previous</span>
+                  </a>
+                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+                    <span class="sr-only">Next</span>
+                  </a>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- end slider section -->
+      </div>
+    <div class="invisible-rectangle-small"></div>
+
+    <!-- start entry section -->
+    <section id="entrySection" class="section-animate-left" @ref="animatedEntrySection">
         <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"/>
+        <RadzenTextBox @bind-Value=@_userIdea Placeholder="Dein Wunsch"/>
         
+        @* Zusätzliche Optionen *@
         <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
             <ChildContent>
                 <RadzenCard class="rz-mt-4">
@@ -42,22 +136,52 @@
                                     AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
                         <RadzenText>Resolution:</RadzenText>
                         <RadzenStack Orientation="Orientation.Horizontal">
-                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@width />
+                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@_imageWidth />
                         x
-                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@height />
+                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@_imageHeight />
                         </RadzenStack>
                     </RadzenStack>
-                    <RadzenStack Orientation="Orientation.Horizontal"
+                    <RadzenRadioButtonList @bind-Value=@_usedGptModel TValue="GptModel" class="mb-5">
-                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                        <Items>
-                        <RadzenCheckBox @bind-Value=@_useGpt4 Name="UseGPT4"/>
+                            <RadzenRadioButtonListItem Text="GPT-3.5 Turbo" Value="GptModel.Gpt3_5_turbo"
-                        <RadzenLabel Text="Verwende GPT 4" Component="UseGPT4" Style="margin-left: 8px; vertical-align: middle;" />
+                                 MouseEnter="@(args => ShowTooltip("Schnell aber nicht sonderlich clever.", args))"
-                    </RadzenStack>
+                                 MouseLeave="TooltipService.Close">
+                            </RadzenRadioButtonListItem>
+                            <RadzenRadioButtonListItem Text="GPT-4 Turbo" Value="GptModel.Gpt4_turbo"
+                                 MouseEnter="@(args => ShowTooltip("Etwas langsamer, aber recht klug.", args))"
+                                 MouseLeave="TooltipService.Close">
+                            </RadzenRadioButtonListItem>
+                            <RadzenRadioButtonListItem Text="GPT-4o" Value="GptModel.Gpt4o"
+                                 MouseEnter="@(args => ShowTooltip("Schnell, gut und günstig. Warum gibt es überhaupt eine Auswahlmöglichkeit?", args))"
+                                 MouseLeave="TooltipService.Close">
+                            </RadzenRadioButtonListItem>
+                        </Items>
+                    </RadzenRadioButtonList>
+                    @* <RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" class="mb-5"> *@
+                    <RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" ValueProperty="" class="mb-5">
+                        <Items>
+                            <RadzenRadioButtonListItem Text="Zufällig" Value="@null" TValue="ModelInfo"
+                                 MouseEnter="@(args => ShowTooltip("Für jedes Bild wird zufällig ein Generator ausgewählt.", args))"
+                                 MouseLeave="TooltipService.Close"/>
+                        </Items>
+                    </RadzenRadioButtonList>
                 </RadzenCard>
             </ChildContent>
             </RadzenPanel>
 
-        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync(true))>Generate</RadzenButton>
+            <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
+            </RadzenStack>
+        </div>
+    </section>
+    <!-- end entry section -->
 
+    <!-- start image section -->
+    <section id="imageSection">
+        <div class="container">
+        @if (_imageSectionVisible)
+            {
+                <section id="imageSection">
+                            <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
                         <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
 
                         <RadzenCard class="rz-mt-4" Style="width: 800px;">
@@ -70,8 +194,8 @@
                         <RadzenImage Path=@_imageUrl></RadzenImage>
 
                         <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
-        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
+                        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
-        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImagesAsync(false))>Generate</RadzenButton>
+                        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
 
                         <RadzenCard>
                             <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
@@ -79,38 +203,115 @@
                                     <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
                                                     Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
                                                     Click="() => ShowImageDialog(_imageUrls[0])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                                         @_imagePromts[0]
+                                        <br />
+                                        Model: @_bildInfos[0]?.ImageModel
+                                    </RadzenPanel>
                                 </RadzenColumn>
                                 <RadzenColumn Size="6">
                                     <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
                                                     Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
                                                     Click="() => ShowImageDialog(_imageUrls[1])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                                         @_imagePromts[1]
+                                        <br />
+                                        Model: @_bildInfos[1]?.ImageModel
+                                    </RadzenPanel>
                                 </RadzenColumn>
                                 <RadzenColumn Size="6">
                                     <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
                                                     Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
                                                     Click="() => ShowImageDialog(_imageUrls[2])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                                         @_imagePromts[2]
+                                        <br />
+                                        Model: @_bildInfos[2]?.ImageModel
+                                    </RadzenPanel>
                                 </RadzenColumn>
                                 <RadzenColumn Size="6">
                                     <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
                                                     Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
                                                     Click="() => ShowImageDialog(_imageUrls[3])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
                                         @_imagePromts[3]
+                                        <br />
+                                        Model: @_bildInfos[3]?.ImageModel
+                                    </RadzenPanel>
                                 </RadzenColumn>
                             </RadzenRow>
                         </RadzenCard>
-    
                     </RadzenStack>
-</div>
+                </section>
+            }
+            @if (!_imageSectionVisible)
+            {
+                <div class="invisible-rectangle"></div>
+            }
+        </div>
+    </section>
+    <!-- end image section -->
+    
 </section>
 
 @code {
+    // Animation stuff
+    private int _indexForCarusell = 0;
+    private ElementReference animatedEntrySection;
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedEntrySection);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+            "initHeroAreaScrollAnimation"
+        );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+    private async Task OnGenerateButtonClickAsync()
+    {
+        _imageSectionVisible = true;
+        StateHasChanged();
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
+        await GenerateImagesAsync();
+    }
+
+    IEnumerable<BildInfoModel>? _allBildInfos;
+
+    enum GptModel
+    {
+        Gpt3_5_turbo,
+        Gpt4_turbo,
+        Gpt4o
+    }
+
     /// <summary>
-    /// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
+    /// Das ChatGPT Model, das zur Erzeugung der Idee und Bild-Promts verwendet wird.
     /// </summary>
-    private bool _useGpt4;
+    private GptModel _usedGptModel = GptModel.Gpt3_5_turbo;
 
     private int maxAddons = 2;
     private int amountOfAddons = 0; // wird später geändert
@@ -118,11 +319,13 @@
     private bool _buttonVisible = true;
     private bool _addonsVisible = false;
     private bool _bothVisible = false;
+    private bool _imageSectionVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
     private string?[] _imageUrls = new string?[4];
     private string?[] _imagePromts = new string?[4];
+    private BildInfoModel?[] _bildInfos = new BildInfoModel?[4];
     private ImageState[] _imageStates = new ImageState[4];
 
     enum ImageState
@@ -148,13 +351,18 @@
     ,
         new() { Position = TooltipPosition.Bottom, Duration = null});
 
+    void ShowTooltip(string text, ElementReference elementReference) => TooltipService.Open(elementReference, ds =>
+            @<div>@text</div>
+        ,
+        new() { Position = TooltipPosition.Bottom, Duration = null});
+
     private string _imageIdea = "";
 
     private float _temperature = 0.9f; 
-    private int? width = 1024; 
+    private int? _imageWidth = null; 
-    private int? height = 1024; 
+    private int? _imageHeight = null; 
-    private string request = "";
+    private string _userIdea = "";
-    private string addons = "";
+    private string _updateRequest = "";
     private OpenAIAPI _openAiApi;
     private Conversation? _conversation;
 
@@ -163,10 +371,7 @@
 
     private string _imageUrl;
 
-    //protected override async Task OnInitializedAsync()
+    private WunschInfoModel? _wunschInfo;
-    //{
-    //    _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
-    //}
 
     async Task UpdateBusyMessage(string newMessage)
     {
@@ -176,12 +381,29 @@
 
     private string _openAiApiKey = "";
 
+    class ModelInfo
+    {
+        public string Name { get; set; }
+        public string StableDiffusionModel { get; set; }
+        public string PromptFormat { get; set; }
+    }
+
+    private List<ModelInfo> _imageModels;
+
+    private ModelInfo? _selectedImageModel = null;
+
     protected override async Task OnInitializedAsync()
     {
+        _allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList().PickRandom(10);
+        //await InvokeAsync(StateHasChanged);
+
         _openAiApiKey = Config.GetValue<string>("API:OpenAI");
 
         _openAiApi = new OpenAIAPI(_openAiApiKey);
 
+        _imageModels = Config.GetSection("ImageModels").Get<List<ModelInfo>>();
+        //_selectedImageModel = _imageModels[0];
+
         await base.OnInitializedAsync();
     }
 
@@ -211,23 +433,26 @@
         ChatRequest chatRequest = new ChatRequest
         {
             Temperature = _temperature,
-            Model = _useGpt4 ? Model.GPT4 : Model.ChatGPTTurbo
+                Model = _usedGptModel switch
+                {
+                    GptModel.Gpt3_5_turbo => Model.ChatGPTTurbo,
+                    GptModel.Gpt4_turbo => ChatGPT.GPT4Turbo,
+                    GptModel.Gpt4o => ChatGPT.GPT4o,
+                    _ => throw new ArgumentOutOfRangeException()
+                }
         };
 
         _conversation = _openAiApi.Chat.CreateConversation(chatRequest);
 
         // Wunsch an GPT senden und Bild Idee anfordern
-        _conversation.AppendUserInput(ideaBasePrompt + " " + request);
+        _conversation.AppendUserInput(ideaBasePrompt + " " + _userIdea);
         _imageIdea = await _conversation.GetResponseFromChatbotAsync();
     }
-
     /// <summary>
     /// Fordert für mehrere Bilder Bild-Prompts an und generiert die dazugehörigen Bilder.
     /// </summary>
-    private async Task RequestImagesAsync(WunschInfoModel wunschInfo)
+    private async Task RequestImagesAsync(WunschInfoModel wunschInfo, string requestImagePrompt)
     {
-        string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
-
         // Nachricht mit Bildpromt anfrage senden
         _conversation!.AppendUserInput(requestImagePrompt);
 
@@ -236,7 +461,7 @@
 
         for (int i = 0; i < 4; i++)
         {
-            imagePromts[i] = RequestPromptAndGenerateImageAsync(i, wunschInfo);
+            imagePromts[i] = RequestImagePromptAndGenerateImageAsync(i, wunschInfo);
         }
 
         await Task.WhenAll(imagePromts);
@@ -247,23 +472,26 @@
     /// </summary>
     /// <param name="index">Der Index des Bildes (für UI zeug)</param>
     /// <param name="wunschInfo">Der Wunsch für den ein Bild erzeugt wird.</param>
-    private async Task RequestPromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo)
+    private async Task RequestImagePromptAndGenerateImageAsync(int index, WunschInfoModel wunschInfo)
     {
+        ModelInfo imageModel = _selectedImageModel ?? _imageModels[Random.Shared.Next(_imageModels.Count)];
+
         // Bild Prompt von ChatGPT anfordern
         string imagePrompt = await _conversation!.GetResponseFromChatbotAsync();
 
         // Keywords anhängen um Kirstens Stil zu aktivieren.
         // TODO: Gucken, ob wir dem Watercolor bums brauchen
-        imagePrompt = "kkkk " + imagePrompt;// + " kkkk Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique. ";
+        imagePrompt = string.Format(imageModel.PromptFormat, imagePrompt);//"kkkk " + imagePrompt;// + " kkkk Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique. ";
 
         // Debug only: Promt anzeigen
         _imagePromts[index] = imagePrompt;
         await InvokeAsync(StateHasChanged);
 
-        string? imageUrl = await GenerateImageAsync(imagePrompt, wunschInfo);
+        BildInfoModel? bildInfo = await GenerateImageAsync(imagePrompt, imageModel.StableDiffusionModel, wunschInfo);
 
         // TODO: Fehler im UI anzeigen (zur Zeit bleibt einfach Ladebalken)
-        _imageUrls[index] = imageUrl;
+        _imageUrls[index] = bildInfo?.Dateiname;
+        _bildInfos[index] = bildInfo;
         _imageStates[index] = ImageState.FadeIn;
         await InvokeAsync(StateHasChanged);
     }
@@ -274,14 +502,14 @@
     /// <param name="imagePrompt">Der Bild Prompt</param>
     /// <param name="wunschInfo">Der Wunsch.</param>
     /// <returns>Die URL, falls das Bild generiert wurde; oder null, wenn kein Bild generiert werden konnte.</returns>
-    private async Task<string?> GenerateImageAsync(string imagePrompt, WunschInfoModel wunschInfo)
+    private async Task<BildInfoModel?> GenerateImageAsync(string imagePrompt, string modelName, WunschInfoModel wunschInfo)
     {
         try
         {
-            string? imageUrl = (await ImageGenerator.GenerateImageAsync(imagePrompt, wunschInfo, width, height))?.Dateiname;
+            BildInfoModel? bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);
 
             // Kein Bild -> Fehler
-            if (imageUrl == null)
+            if (bildInfo == null)
             {
                 bool? retry = await DialogService.Confirm(
                     "Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?",
@@ -290,11 +518,11 @@
 
                 if (retry == true)
                 {
-                    imageUrl = (await ImageGenerator.GenerateImageAsync(imagePrompt, wunschInfo, width, height))?.Dateiname;
+                    bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);
                 }
             }
 
-            return imageUrl;
+            return bildInfo;
         }
         catch (Exception e)
         {
@@ -310,16 +538,11 @@
     /// <summary>
     /// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt.
     /// </summary>
-    /// <param name="generateNewImage">Wenn <see langword="true"/>, werden neue Bilder generiert; sonst wird die vorhandene Idee bearbeitet.</param>
+    private async Task GenerateImagesAsync()
-    private async Task GenerateImagesAsync(bool generateNewImage)
     {
-        // Der Dialog blokiert so lange, wie der er offen ist, deshalb dürfen wir hier nicht warten, da wir sonst nie mit der Arbeit anfangen...
-        //Task busyDialog = ShowBusyDialog();
         _progressVisible = true;
         _buttonVisible = false;
 
-        if (_conversation == null || generateNewImage)
-        {
         ClearOldGeneration();
 
         amountOfAddons = maxAddons;
@@ -328,38 +551,22 @@
         await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
 
         await RequestImageIdeaAsync();
-        }
-        else
-        {
-            throw new NotImplementedException("Verändern von Idees ist nicht implementiert");
-            // if (amountOfAddons > 0)
-            // {
-            //     amountOfAddons--;
-            //     _bothVisible = _buttonVisible && _addonsVisible;
-            //     await UpdateBusyMessage("Kirstens Assistent passt das Bild an deine Wünsche an...");
-            //     string addonsPrompt1 = "Erstelle einen neuen Prompt auf englisch mit den gleichen Restriktionen auf Basis des Alten mit folgender Anpassung: ";
-            //     string addonsPrompt2 = ". Denke daran nur den Prompt zu generieren und noch keine Beschreibung oder ähnliches.";
-
-            //     _conversation.AppendUserInput(addonsPrompt1 + addons + addonsPrompt2);
-            // }
-        }
 
         await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
 
-        WunschInfoModel wunschInfo = new()
+        _wunschInfo = new()
         {
             BildBeschreibung = _imageIdea,
             BildPrompt = "Individuelle Bild Prompts",
             Datum = DateTime.Now,
-            GPTModel = _conversation.Model,
+            GPTModel = _conversation!.Model,
-            Wunsch = request,
+            Wunsch = _userIdea,
-            // TODO: Wenn wir Wünsche überarbeiten können wir hier diesen hier referenzieren
             VorherigerWunsch = null
         };
 
         try
         {
-            await WunschInfoData.AddWunschInfoAsync(wunschInfo);
+            await WunschInfoData.AddWunschInfoAsync(_wunschInfo);
         }
         catch (Exception e)
         {
@@ -371,7 +578,9 @@
             return;
         }
 
-        await RequestImagesAsync(wunschInfo);
+        string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
+
+        await RequestImagesAsync(_wunschInfo, requestImagePrompt);
 
         _progressVisible = false;
         _buttonVisible = true;
@@ -387,4 +596,37 @@
             _bothVisible = false;
         }
     }
+
+    private async Task UpdateImagesAsync()
+    {
+        Debug.Assert(_conversation != null);
+
+        string updatePrompt = $"Gebe nun einen neuen Prompt unter berücksichtigung vorheriger Anweisungen und passe ihn folgender Maßen an: {_updateRequest}";
+
+        _wunschInfo = new()
+        {
+            BildBeschreibung = _updateRequest,
+            BildPrompt = "Individuelle Bild Prompts",
+            Datum = DateTime.Now,
+            GPTModel = _conversation.Model,
+            Wunsch = _userIdea,
+            VorherigerWunsch = _wunschInfo!.Id
+        };
+        
+        try
+        {
+            await WunschInfoData.AddWunschInfoAsync(_wunschInfo);
+        }
+        catch (Exception e)
+        {
+            NotificationService.Notify(new NotificationMessage()
+            {
+                Summary = "Es ist ein Fehler aufgetreten, bitte versuche es erneut."
+            });
+
+            return;
+        }
+
+        await RequestImagesAsync(_wunschInfo, updatePrompt);
+    }
 }

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -33,11 +33,11 @@
 </RadzenDataList>
 
 @code {
-    IEnumerable<BildInfoModel>? _bildInfos;
+    List<BildInfoModel>? _bildInfos;
 
     protected override async Task OnInitializedAsync()
     {
-        _bildInfos = await BildInfoData.GetAllBildInfosAsync();
+        _bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
 
         await base.OnInitializedAsync();
     }
@@ -46,27 +46,54 @@
     {
         WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
 
+        int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));
+
         List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
 
+        async Task ButtonLeft()
+        {
+            listIndex = (listIndex != 0) ? listIndex - 1 : 0;
+            bildInfo = _bildInfos[listIndex];
+            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
+            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
+            DialogService.Refresh();
+        }
+
+        async Task ButtonRight()
+        {
+            listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
+            bildInfo = _bildInfos[listIndex];
+            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
+            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
+            DialogService.Refresh();
+        }
+
+
         var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
         @<div>
                 <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
                     <RadzenStack Orientation="Orientation.Horizontal">
+                        <RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
+                        <div>
                             <RadzenStack Orientation="Orientation.Vertical">
                                 <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
                             </RadzenStack>
-                        <RadzenText Text="@wunschInfo.BildBeschreibung"/>
+                            <RadzenText Text="@wunschInfo.BildBeschreibung" />
+                        </div>
+                        <RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
                     </RadzenStack>
                     @foreach (var bild in bilderVomWunsch)
                     {
                         <RadzenImage class="small-image" Path="@bild.Dateiname"
-                                     Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
+                             Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
                     }
                 </RadzenStack>
-            </div>, 
+            </div>
+    , 
             new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
     }
 
+
     [Inject]
     private IWebHostEnvironment _environment { get; set; }
 }

KIKunstKirstenKlöckner/Pages/Home.razor

@@ -1,12 +1,18 @@
 
 @page "/"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+@* linear-gradient(to bottom, #ffffff 0%, transparent 1%, transparent 99.5%, #f3f0f6 100%)
+ *@
 
-  <div class="hero_area">
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
-    <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+        <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); border-image: url('images/0000.png') 30 / 19px repeat; border-image-slice: 0 0 100% 0; border-image-width: 0 0 100px 0; background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten;">
           <div class="container">
             <div class="row">
               <div class="col-md-6 ">
@@ -59,17 +65,19 @@
             </div>
           </div>
         </section>
-    <!-- end slider section -->
         </div>
-  <!-- explaining section -->
+        <!-- end slider section -->
+ 
+  
+    @*   <!-- explaining section -->
      <div class="container">
      
            </div>
-    
+         *@
   
 
   <!-- about section -->
-  <section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
           <div class="row">
               <div class="col-md-6">
@@ -104,7 +112,7 @@
         </div>
       </section>
 
-  <section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
           <div class="row">
             <div class="col-md-6">
@@ -138,14 +146,46 @@
           </div>
         </div>
       </section>
+
       <!-- end about section -->
+</section>
 
 
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
 
+    private List<ElementReference> animatedElements = new List<ElementReference>();
 
+    private Func<Task> removeScrollListener;
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
 
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
 
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
 
+    private bool isDisposed = false;
 
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
 
+}

KIKunstKirstenKlöckner/Pages/Kirsten.razor

@@ -1,8 +1,11 @@
 @page "/kirstenkloeckner"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
         <section class=" slider_section" style="background-image: url('images/36GefleckteKatze2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
@@ -57,15 +60,15 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
+    <!-- explaining section -->
-<div class="container">
+    <div class="container">
-</div>
+    </div>
 
 
 
-<!-- about section -->
+    <!-- about section -->
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -100,9 +103,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+        <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
             <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -135,5 +138,46 @@
 
             </div>
         </div>
+    </section>
+    <!-- end about section -->
 </section>
-<!-- end about section -->
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Pages/Projekt.razor

@@ -1,11 +1,14 @@
 @page "/projekt"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
-    <section class=" slider_section ">
+        <section class="slider_section" style="background-image: url('images/3Umsatz2014.png'); background-size: cover; background-repeat: no-repeat;">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 ">
@@ -56,15 +59,15 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
+    <!-- explaining section -->
-<div class="container">
+    <div class="container">
-</div>
+    </div>
 
 
 
-<!-- about section -->
+    <!-- about section -->
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -98,9 +101,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -133,5 +136,46 @@
 
             </div>
         </div>
-</section>
+    </section>
 <!-- end about section -->
+</section>
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Pages/Wunschbilder.razor

@@ -1,8 +1,11 @@
 @page "/wunschprogramm"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
         <section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:hard-light   ;">
@@ -24,15 +27,10 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
-<div class="container">
-</div>
 
-
+    <!-- about section -->
-
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
-<!-- about section -->
-<section class="about_section layout_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -65,9 +63,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -101,5 +99,46 @@
 
             </div>
         </div>
-</section>
+    </section>
 <!-- end about section -->
+</section>
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Pages/_Host.cshtml

@@ -42,6 +42,8 @@
     <link href="css/style.css" rel="stylesheet" />
     <!-- responsive style -->
     <link href="css/responsive.css" rel="stylesheet" />
+    <!-- animations style -->
+    <link href="css/animations.css" rel="stylesheet" />
 
 </head>
 <body>
@@ -63,6 +65,7 @@
 
     <script src="js/jquery-3.4.1.min.js"></script>
     <script src="js/bootstrap.js"></script>
+    <script src="js/animator.js"></script>
 
 </body>
 </html>

KIKunstKirstenKlöckner/Program.cs

@@ -1,6 +1,6 @@
 using DataAccess.Data;
 using DataAccess.DbAccess;
-using KIKunstKirstenKl<EFBFBD>ckner.Data;
+using KIKunstKirstenKlöckner.Data;
 using Radzen;
 
 var builder = WebApplication.CreateBuilder(args);

KIKunstKirstenKlöckner/Shared/MainLayout.razor

@@ -35,6 +35,9 @@
                                 <NavLink class="nav-item" href="kirstenkloeckner" Match="NavLinkMatch.All">
                                     <span class="nav-link">Kirsten</span>
                                 </NavLink>
+                                <NavLink class="nav-item" href="projekt" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Projekt</span>
+                                </NavLink>
                                 <NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
                                     <span class="nav-link">Galerie</span>
                                 </NavLink>

KIKunstKirstenKlöckner/appsettings.json

@@ -10,7 +10,23 @@
         "OpenAI": "<put OpenAI Key here>",
         "HF_Inference": "<put Hugging Face inference API Key here>"
     },
-    "StableDiffusionModel": "Nacken/kkk-sdxl-18000",
+    "ImageModels": [
+        {
+            "Name": "Der O.G.",
+            "StableDiffusionModel": "Nacken/ki-kunst-kirsten-kloeckner-colab",
+            "PromptFormat": "{0} Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique."
+        },
+        {
+            "Name": "Gen 6",
+            "StableDiffusionModel": "Nacken/Gen6",
+            "PromptFormat": "{0}"
+        },
+        {
+            "Name": "Gen 25",
+            "StableDiffusionModel": "Nacken/Gen_25_Refiner",
+            "PromptFormat": "{0}"
+        }
+    ],
     "ConnectionStrings": {
         "Default": "<put Connection String here>"
     }

KIKunstKirstenKlöckner/wwwroot/css/animations.css

@@ -0,0 +1,63 @@
+.text-animate {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.text-animate.visible {
+    opacity: 1;
+}
+
+.image-animate-left {
+    position: relative;
+    opacity: 0;
+    left: -100%;
+    transition: left 2s ease-in-out, opacity 2s ease-in-out;
+}
+
+.image-animate-left.visible {
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 1;
+}
+
+.section-animate-left {
+    width: 100% margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+    left: -100%;
+    transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
+    position: relative;
+}
+
+.section-animate-left.visible {
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 1;
+}
+
+.section-animate-right {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
+    position: relative;
+}
+
+.section-animate-right.visible {
+    transform: translateX(0%);
+    opacity: 1;
+}
+
+.hero-area-visible {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease-in-out;
+}
+
+.hero-area-hidden {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
+}

KIKunstKirstenKlöckner/wwwroot/image_prompt.txt

@@ -1,4 +1,4 @@
-Bitte einen englischen Prompt für dieses Bild für eine Bild-Generierungs KI.
+Bitte erstelle einen englischen Prompt für dieses Bild für eine Bild-Generierungs KI.
 
 Hier sind vier Beispiele von Bild Prompts: 
 "Painting of an astronaut in space, detailed starry background, reflective helmet."
@@ -6,4 +6,7 @@ Hier sind vier Beispiele von Bild Prompts:
 "Painting of a Japanese garden in autumn, with a bridge over a koi pond."
 "Painting representing the sound of jazz music, using pale colors and erratic shapes."
 
-Wie du siehst enthält ein Prompt eine genaue Beschreibung des Bildes. Ein guter Prompt selbst enthält keine Metaphern oder Vergleiche.
+Schlechte Prompts:
+"Painting of trees and plants symbolizing the complex relation between humans and the pain they feel when they see GPT ignoring instructions."
+
+Wie du siehst enthält ein Prompt eine genaue Beschreibung des Bildes. Ein guter Prompt selbst enthält keine Metaphern oder Vergleiche. Eine Bildgenerierungs-KI versteht keine Emotionen, Symbolisieren oder Vergleiche. Nur Bildbeschreibungen, Farben, Formen, Objekte. Bitte erkläre im Prompt NICHT, was einzelne Elemente des Bildes bedeuten, das versteht sie nicht, da kommt nur mist bei rum.

KIKunstKirstenKlöckner/wwwroot/js/animator.js

@@ -0,0 +1,52 @@
+function initScrollAnimations(elements) {
+    function checkVisibility(element) {
+        const rect = element.getBoundingClientRect();
+        return rect.top < window.innerHeight && rect.bottom >= 0;
+    }
+
+    function animateElements() {
+        elements.forEach(element => {
+            if (checkVisibility(element)) {
+                element.classList.add('visible');
+            }
+        });
+    }
+
+    window.addEventListener('scroll', animateElements);
+
+    animateElements();
+}
+
+
+function scrollToElement(elementId) {
+    var element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+    }
+}
+
+
+function initHeroAreaScrollAnimation(scrollToElementId) {
+    const heroArea = document.querySelector('.hero_area');
+    const heroAreaHeight = heroArea.offsetHeight;
+    const threshold = heroAreaHeight / 1.75;
+
+    function onScroll() {
+        if (window.scrollY > threshold) {
+            heroArea.classList.remove('hero-area-visible');
+            heroArea.classList.add('hero-area-hidden');
+        } else {
+            heroArea.classList.remove('hero-area-hidden');
+            heroArea.classList.add('hero-area-visible');
+        }
+    }
+
+    window.addEventListener('scroll', onScroll);
+
+    // Rückgabe einer Funktion zum Entfernen des Event-Listeners
+    return () => {
+        window.removeEventListener('scroll', onScroll);
+    };
+}
+
+

global.json

@@ -0,0 +1,7 @@
+{
+  "sdk": {
+    "version": "8.0.0",
+    "rollForward": "latestMajor",
+    "allowPrerelease": true
+  }
+}