Upgrade auf DotNet 8.0 und C# 12

Option "StableDiffusionModel" zu AppSettings hinzugefügt

.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/Data/BildInfoData.cs

@@ -0,0 +1,48 @@
+using DataAccess.DbAccess;
+using DataAccess.Models;
+
+namespace DataAccess.Data;
+
+/// <summary>
+/// Ermöglicht den Zugriff auf die BildInfo Datenbank.
+/// </summary>
+public class BildInfoData
+{
+    private readonly ISqlDataAccess _db;
+
+    public BildInfoData(ISqlDataAccess db)
+    {
+        _db = db;
+    }
+
+    /// <summary>
+    /// Fügt die gegebene BildInfo zur Datenbank hinzu und aktualisiert das <see cref="BildInfoModel.Id"/>-Feld mit dem entsprechenden Wert.
+    /// </summary>
+    /// <param name="bildInfo">Die BildInfo, die zur Datenbank hinzugefügt werden soll.</param>
+    public async Task InsertBildInfoAsync(BildInfoModel bildInfo)
+    {
+        var id = await _db.LoadData<int, BildInfoModel>("dbo.spBildInfo_Insert", bildInfo);
+        bildInfo.Id = id.Single();
+    }
+    
+    /// <summary>
+    /// Aktualisiert das Dateiname-Feld der übergebenen BildInfo in der Datenbank.
+    /// </summary>
+    /// <param name="bildInfo">Die BildInfo deren Dateiname aktualisiert werden soll.</param>
+    public Task UpdateBildInfoDateinameAsync(BildInfoModel bildInfo)
+    {
+        return _db.SaveData("dbo.spBildInfo_UpdateFileName",
+        new {
+            Id = bildInfo.Id,
+            Dateiname = bildInfo.Dateiname,
+        });
+    }
+
+    /// <summary>
+    /// Gibt alle Bild Infos der Datenbank zurück.
+    /// </summary>
+    public Task<IEnumerable<BildInfoModel>> GetAllBildInfosAsync()
+    {
+        return _db.LoadData<BildInfoModel, dynamic>("dbo.spBildInfo_GetAll", new { });
+    }
+}

DataAccess/Data/WunschInfoData.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using DataAccess.DbAccess;
+using DataAccess.Models;
+
+namespace DataAccess.Data;
+
+public class WunschInfoData
+{
+    private readonly ISqlDataAccess _db;
+
+    public WunschInfoData(ISqlDataAccess db)
+    {
+        _db = db;
+    }
+
+    public async Task AddWunschInfoAsync(WunschInfoModel wunschInfo)
+    {
+        var id = await _db.LoadData<int, WunschInfoModel>("dbo.spWunschInfo_Insert", wunschInfo);
+        wunschInfo.Id = id.Single();
+    }
+
+    /// <summary>
+    /// Gibt die WunschInfo mit der gegebenen Id zurück.
+    /// </summary>
+    /// <param name="wunschId">Die Id der zu ladenen WunschInfo</param>
+    /// <returns>Die WunschInfo mit der gegebenen Id</returns>
+    public async Task<WunschInfoModel> GetWunschInfoAsync(int wunschId)
+    {
+        var wunschInfo = await _db.LoadData<WunschInfoModel, dynamic>("dbo.spWunschInfo_Get", new { Id = wunschId });
+        return wunschInfo.Single();
+    }
+}

DataAccess/DataAccess.csproj

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

DataAccess/DbAccess/ISqlDataAccess.cs

@@ -0,0 +1,26 @@
+namespace DataAccess.DbAccess;
+
+/// <summary>
+/// Bietet lesenden und schreibenden Zugriff auf eine Datenbank.
+/// </summary>
+public interface ISqlDataAccess
+{
+    /// <summary>
+    /// Führt die angegebene Stored Procedure aus. Diese Prozedur nimmt Parameter des Typs <see cref="TParameter"/> engegen und gibt ein Enumerable des Typs <see cref="TResult"/> zurück.
+    /// </summary>
+    /// <typeparam name="TResult">Der Typ der Parameter</typeparam>
+    /// <typeparam name="TParameter">Der Typ der Rückgabewerte</typeparam>
+    /// <param name="storedProcedure">Der Name der Prozedur</param>
+    /// <param name="parameters">Die Parameter für die Prozedur.</param>
+    /// <param name="connectionId">Die optionale Id des zu verwendenen Connection Strings.</param>
+    Task<IEnumerable<TResult>> LoadData<TResult, TParameter>(string storedProcedure, TParameter parameters, string connectionId = "Default");
+    
+    /// <summary>
+    /// Führt die angegebene Stored Procedure aus. Diese Prozedur nimmt Parameter des Typs <see cref="TParameter"/> engegen und gibt nichts zurück.
+    /// </summary>
+    /// <typeparam name="TParameter">Der Typ der Parameter</typeparam>
+    /// <param name="storedProcedure">Der Name der Prozedur</param>
+    /// <param name="parameters">Die Parameter für die Prozedur.</param>
+    /// <param name="connectionId">Die optionale Id des zu verwendenen Connection Strings.</param>
+    Task SaveData<TParameter>(string storedProcedure, TParameter parameters, string connectionId = "Default");
+}

DataAccess/DbAccess/SqlDataAccess.cs

@@ -0,0 +1,33 @@
+using Microsoft.Extensions.Configuration;
+using System.Data.SqlClient;
+using System.Data;
+using Dapper;
+
+namespace DataAccess.DbAccess;
+
+/// <summary>
+/// Bietet lesenden und schreibenden Zugriff auf eine Datenbank.
+/// </summary>
+public class SqlDataAccess : ISqlDataAccess
+{
+    private readonly IConfiguration _config;
+
+    public SqlDataAccess(IConfiguration config)
+    {
+        _config = config;
+    }
+    
+    public async Task<IEnumerable<TResult>> LoadData<TResult, TParameter>(string storedProcedure, TParameter parameters, string connectionId = "Default")
+    {
+        using IDbConnection connection = new SqlConnection(_config.GetConnectionString(connectionId));
+
+        return await connection.QueryAsync<TResult>(storedProcedure, parameters, commandType: CommandType.StoredProcedure);
+    }
+    
+    public async Task SaveData<TParameter>(string storedProcedure, TParameter parameters, string connectionId = "Default")
+    {
+        using IDbConnection connection = new SqlConnection(_config.GetConnectionString(connectionId));
+
+        await connection.ExecuteAsync(storedProcedure, parameters, commandType: CommandType.StoredProcedure);
+    }
+}

DataAccess/Models/BildInfoModel.cs

@@ -0,0 +1,11 @@
+namespace DataAccess.Models;
+
+public class BildInfoModel
+{
+    public int Id { get; set; }
+    public DateTime Datum { get; set; }
+    public string Dateiname { get; set; }
+    public string ImageModel { get; set; }
+    public int WunschId { get; set; }
+    public string Prompt { get; set; }
+}

DataAccess/Models/WunschInfoModel.cs

@@ -0,0 +1,16 @@
+namespace DataAccess.Models;
+
+public class WunschInfoModel
+{
+    public int Id { get; set; }
+    public string BildPrompt { get; set; }
+    public string Wunsch { get; set; }
+    public string BildBeschreibung { get; set; }
+    public DateTime Datum { get; set; }
+    public string GPTModel { get; set; }
+    /// <summary>
+    /// Id eines vorherigen Wunsches, z.B. wenn ein Wunsch überarbeitet wird, wird der original wunsch hier referenziert.
+    /// Ist <see langword="null"/> für den initialien Wunsch.
+    /// </summary>
+    public int? VorherigerWunsch { get; set; }
+}

KIKunstKirstenKlöckner.sln

@@ -3,7 +3,11 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.6.33829.357
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "KIKunstKirstenKlöckner", "KIKunstKirstenKlöckner\KIKunstKirstenKlöckner.csproj", "{0085541E-50D4-42A5-9BFD-6CE402FB8B26}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "KIKunstKirstenKlöckner\KIKunstKirstenKlöckner.csproj", "{0085541E-50D4-42A5-9BFD-6CE402FB8B26}"
+EndProject
+Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -15,6 +19,16 @@ Global
 		{0085541E-50D4-42A5-9BFD-6CE402FB8B26}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{0085541E-50D4-42A5-9BFD-6CE402FB8B26}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{0085541E-50D4-42A5-9BFD-6CE402FB8B26}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{0880FD07-236B-42C1-9CA3-2A6F695A623C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0880FD07-236B-42C1-9CA3-2A6F695A623C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0880FD07-236B-42C1-9CA3-2A6F695A623C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0880FD07-236B-42C1-9CA3-2A6F695A623C}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

KIKunstKirstenKlöckner/.config/dotnet-tools.json

@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "7.0.9",
+      "commands": [
+        "dotnet-ef"
+      ]
+    }
+  }
+}

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/AiArtPageData.cs

@@ -0,0 +1,16 @@
+namespace KIKunstKirstenKlöckner.Data;
+
+/// <summary>
+/// Enthält Daten für die AiArt
+/// </summary>
+public class AiArtPageData
+{
+    private readonly ImageGenerator _imageGenerator;
+
+    public ImageGenerator ImageGenerator => _imageGenerator;
+
+    public AiArtPageData(ImageGenerator imageGenerator)
+    {
+        _imageGenerator = imageGenerator;
+    }
+}

KIKunstKirstenKlöckner/Data/ChatGPT.cs

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,129 @@
+using DataAccess.Data;
+using DataAccess.Models;
+using System.Diagnostics;
+using SixLabors.ImageSharp;
+
+namespace KIKunstKirstenKlöckner.Data;
+
+public class ImageGenerator
+{
+    private readonly HttpClient _client = new();
+    private readonly BildInfoData _bildInfoData;
+
+    private readonly IConfiguration _config;
+
+    //private string ModelName => _config.GetValue<string>("StableDiffusionModel") ?? "No Model Defined";
+
+    public ImageGenerator(IConfiguration config, BildInfoData bildInfoData)
+    {
+        _config = config;
+        _bildInfoData = bildInfoData;
+
+        string? inferenceApiKey = config.GetValue<string>("API:HF_Inference");
+
+        _client.DefaultRequestHeaders.Clear();
+        _client.DefaultRequestHeaders.Add("Authorization", $"Bearer {inferenceApiKey}");
+    }
+    
+    /// <summary>
+    /// Geneiert ein Bild für den gegebenen Wunsch.
+    /// </summary>
+    /// <param name="imagePrompt">Der Prompt für den das Bild erzeugt wird.</param>
+    /// <param name="wunschInfo">Der Wunsch zu dem ein Bild generiert werden soll.</param>
+    /// <param name="width">Die breite des zu generierenden Bildes. <see langword="null"/> für Standardbreite des Modells</param>
+    /// <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, string modelName, WunschInfoModel wunschInfo, int? width = null, int? height = null, string negativePromt = "")
+    {
+        var postData = new
+        {
+            inputs = imagePrompt,
+            parameters = new 
+            {
+                negative_prompt = negativePromt, //"photorealistic, highly detailed, 8K, portrait",
+                width = width,
+                height = height
+            },
+            options = new
+            {
+                // https://huggingface.co/docs/api-inference/detailed_parameters
+                // Cache deaktivieren, damit Huggingface für den selben Prompt unterschiedliche Ergebnisse liefert
+                use_cache = false,
+                // Ignoriert 503-Fehler. Diese treten auf wenn Hugging Face das Model noch nicht geladen hat.
+                // Mit true ignorieren wir den Fehler und schlagen erst fehl, wenn wir einen timeout haben.
+                wait_for_model = true
+            }
+        };
+
+        JsonContent content = JsonContent.Create(postData);
+
+        try
+        {
+            var inferenceModelUrl = $"https://api-inference.huggingface.co/models/{modelName}";
+
+            var response = await _client.PostAsync(inferenceModelUrl, content);
+
+            if (response?.IsSuccessStatusCode == true)
+            {
+                await using Stream imageStream = await response.Content.ReadAsStreamAsync();
+
+                DateTime imageDate = DateTime.Now;
+                
+                BildInfoModel bildInfo = new()
+                {
+                    // Die tatsächliche Url wird in SaveImageStreamAsync gesetzt.
+                    Dateiname = "PlaceHolder",
+                    Datum = imageDate,
+                    ImageModel = modelName,
+                    WunschId = wunschInfo.Id,
+                    Prompt = imagePrompt
+                };
+
+                await SaveImageStreamAsync(imageStream, bildInfo);
+
+                return bildInfo;
+            }
+            else
+            {
+                Console.WriteLine($"Image conversion failed: {response}");
+
+                if (Debugger.IsAttached)
+                    Debugger.Break();
+
+                return null;
+            }
+        }
+        catch (Exception exception)
+        {
+            Console.WriteLine($"Image request failed: {exception}");
+
+            if (Debugger.IsAttached)
+                Debugger.Break();
+
+            return null;
+        }
+    }
+    
+    /// <summary>
+    /// Speichert den Inhalt des gegebenen Datenstroms als Bild ab.
+    /// </summary>
+    /// <param name="dataStream">Der Datenstrom, der das Bild enthält.</param>
+    /// <param name="bildInfo">Die BildInfo des Bildes. Der Dateiname wird nach dem Speichern aktualisiert.</param>
+    private async Task SaveImageStreamAsync(Stream dataStream, BildInfoModel bildInfo)
+    {
+        using Image image = await Image.LoadAsync(dataStream);
+
+        // Speichert BildInfo in der Datenbank, aktualisiert Id der bildInfo
+        await _bildInfoData.InsertBildInfoAsync(bildInfo);
+
+        string imageUrl = $"generated_images/Image_{bildInfo.Id}.jpg";
+
+        string imageFilePath = $"./wwwroot/{imageUrl}";
+        await image.SaveAsJpegAsync(imageFilePath);
+        
+        // Speichert den geänderten Dateinamen in der Datenbank
+        bildInfo.Dateiname = imageUrl;
+        await _bildInfoData.UpdateBildInfoDateinameAsync(bildInfo);
+    }
+}

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,26 @@
 <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>
+    <ProjectReference Include="..\DataAccess\DataAccess.csproj" />
   </ItemGroup>
 
 </Project>

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -1,180 +1,377 @@
-@page "/"
 @page "/aiart"
 
 @using OpenAI_API
 @using OpenAI_API.Chat
 @using OpenAI_API.Models
+@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
 
-<PageTitle>AiArt</PageTitle>
+@inject ImageGenerator ImageGenerator;
+@inject BildInfoData BildInfoData;
+@inject WunschInfoData WunschInfoData;
 
-<h1>Wunschbilder von KI nur für dich</h1>
+@implements IAsyncDisposable
 
-@*<EditForm Model="@exampleModel" OnSubmit="@DoStuff">
+<style>
-    <InputText @bind-Value="exampleModel.Name" />
+    .invisible-rectangle {
+        width: 100%;
+        height: 600px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
 
-    <button type="submit">Submit</button>
+    .invisible-rectangle-small {
-</EditForm>*@
+        width: 100%;
+        height: 100px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
+</style>
 
-<!-- Dies ist das Textfeld -->
+<PageTitle>Wunschbild Generator</PageTitle>
-@*<input type="text" @bind="request" placeholder="Text eingeben..." />
-*@
-<!-- Dies ist der Button -->
-@*<button @onclick="DoStuff">Klick mich</button>*@
 
-<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-    <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
+    <div class="hero_area hero-area-visible">
-    <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
 
-    <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
+        <!-- slider section -->
-        <ChildContent>
+        <section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
-            <RadzenCard class="rz-mt-4">
+          <div class="container">
-                <RadzenStack Orientation="Orientation.Horizontal"
+            <div class="row">
-                             MouseEnter="@(args => ShowTemperatureTooltip(args))"
+              <div class="col-md-6 ">
-                             MouseLeave="TooltipService.Close"
+                <div class="detail_box">
-                             AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                  <h1>
-                    <RadzenText>Temperature:</RadzenText>
+                    Hier werden <br>
-                    <RadzenSlider @bind-Value=@temperature TValue="float"
+                    deine Wünsche <br>
-                                  Step="0.1" Min="0.0m" Max="2.0m">
+                    Wirklichkeit
-                    </RadzenSlider>
+                  </h1>
-                    <RadzenText>@temperature</RadzenText>
+                  <p>
-                </RadzenStack>
+                    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>
-            </RadzenCard>
+                    Scrolle einfach nach unten!
-        </ChildContent>
+                  </p>
-    </RadzenPanel>
+                </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>
 
-    <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await DoStuff(true))>Generate</RadzenButton>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- end slider section -->
+      </div>
+    <div class="invisible-rectangle-small"></div>
 
-    <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
+    <!-- start entry section -->
-        <ChildContent>
+    <section id="entrySection" class="section-animate-left" @ref="animatedEntrySection">
-            <RadzenCard class="rz-mt-4">
+        <div class="container">
-                <RadzenStack Orientation="Orientation.Horizontal"
-                             MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                             MouseLeave="TooltipService.Close"
-                             AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                    <RadzenText>@_imagePrompt</RadzenText>
-                </RadzenStack>
-            </RadzenCard>
-        </ChildContent>
-    </RadzenPanel>
 
-    <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
+        <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
-    <RadzenText>@_imageDescription</RadzenText>
+        <h1>Wunschbilder von KI nur für dich</h1>
+        <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
+        <RadzenTextBox @bind-Value=@_userIdea Placeholder="Dein Wunsch"/>
         
-    <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
+        @* Zusätzliche Optionen *@
-    <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
+        <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=@_imageWidth />
+                        x
+                        <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@_imageHeight />
+                        </RadzenStack>
+                    </RadzenStack>
+                    <RadzenRadioButtonList @bind-Value=@_usedGptModel TValue="GptModel" class="mb-5">
+                        <Items>
+                            <RadzenRadioButtonListItem Text="GPT-3.5 Turbo" Value="GptModel.Gpt3_5_turbo"
+                                 MouseEnter="@(args => ShowTooltip("Schnell aber nicht sonderlich clever.", args))"
+                                 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>
 
-    <RadzenImage Path=@_imageUrl></RadzenImage>
+            <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
+            </RadzenStack>
+        </div>
+    </section>
+    <!-- end entry section -->
 
-    <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
+    <!-- start image section -->
-    <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="Mehr Farben" />
+    <section id="imageSection">
-    <RadzenButton Visible=@_bothVisible Click=@(async ()=> await DoStuff(false))>Generate</RadzenButton>
+        <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>
 
-</RadzenStack>
+                        <RadzenCard class="rz-mt-4" Style="width: 800px;">
+                            <RadzenText>@_imageIdea</RadzenText>
+                        </RadzenCard>
+
+                        <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
+                        <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
+
+                        <RadzenImage Path=@_imageUrl></RadzenImage>
+
+                        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
+                        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
+                        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
+
+                        <RadzenCard>
+                            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
+                                <RadzenColumn Size="6">
+                                    <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>
+                </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>
+    /// Das ChatGPT Model, das zur Erzeugung der Idee und Bild-Promts verwendet wird.
+    /// </summary>
+    private GptModel _usedGptModel = GptModel.Gpt3_5_turbo;
+
     private int maxAddons = 2;
     private int amountOfAddons = 0; // wird später geändert
-    private string _imageDescriptionPrompt = "Zusätzlich zu dem Promt erkläre kurz auf deutsch, warum du dich für diese Umsetzung des Titels entschieden hast und gib zusätzlich eine Interpretation des Bildes an. Beginne diesen Teil immer mit \"Beschreibung: \". Zuletzt Beschreibe das Bild und die verbundenen Emotionen mit drei Worten und beginne den Teil mit \"Keywords: \".";
     private bool _progressVisible = false;
     private bool _buttonVisible = true;
     private bool _addonsVisible = false;
     private bool _bothVisible = false;
+    private bool _imageSectionVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
-    // Busy dialog from markup
+    private string?[] _imageUrls = new string?[4];
-    async Task ShowBusyDialog()
+    private string?[] _imagePromts = new string?[4];
+    private BildInfoModel?[] _bildInfos = new BildInfoModel?[4];
+    private ImageState[] _imageStates = new ImageState[4];
+
+    enum ImageState
     {
-        await DialogService.OpenAsync("", ds =>
+        FadeOut,
-            @<RadzenStack AlignItems="AlignItems.Center" Gap="2rem" Class="rz-p-12">
+        FadeIn
-                <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate"/>
-        <RadzenText TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
-            </RadzenStack>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = false });
     }
 
-    // Busy dialog from string
+    async Task ShowImageDialog(string imageUrl)
-    async Task BusyDialog(string message)
     {
-        await DialogService.OpenAsync("", ds =>
+        var result = await DialogService.OpenAsync("", ds =>
-        {
+            @<div>
-            RenderFragment content = b =>
+            <RadzenImage Style="object-fit: contain; width: 100%; height:100%;" Path="@imageUrl"/>
-            {
+            </div>, new DialogOptions() { CloseDialogOnOverlayClick = true });
-                b.OpenElement(0, "RadzenRow");
-
-                b.OpenElement(1, "RadzenColumn");
-                b.AddAttribute(2, "Size", "12");
-
-                b.AddContent(3, message);
-
-                b.CloseElement();
-                b.CloseElement();
-            };
-            return content;
-        }, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = false });
     }
 
     void ShowTooltip(ElementReference elementReference, string text, TooltipOptions? options = null) => TooltipService.Open(elementReference, text, options);
 
     void ShowTemperatureTooltip(ElementReference elementReference) => TooltipService.Open(elementReference, ds =>
         @<div>
-            Gibt an, wie <em>kreativ</em> ChatGPT sein soll.<br />
+            Gibt an, wie <em>kreativ</em> ChatGPT sein soll.<br/>
-            Ich glaube, eigentlich bedeutet es eher, wie <em>deterministisch</em> die Ausgabe ist.<br />
-            Bei 0.0 kommt immer fast die selbe Antwort. Bei zu hohen Werten kommt nur noch Schwachsinn.<br />
-            OpenAI empfielt einen Wert von ca. 0.9 für kreative Anwendungen.
         </div>
     ,
         new() { Position = TooltipPosition.Bottom, Duration = null});
 
-    private string _imagePrompt = "\"Painting of a soccer match with the Hamburger SV team scoring multiple goals, vibrant colors and dynamic brushstrokes.\" Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique.";
+    void ShowTooltip(string text, ElementReference elementReference) => TooltipService.Open(elementReference, ds =>
-    private string _imageDescription = "Ich habe mich für diese Interpretation des Titels entschieden, um die Dynamik und den Erfolg des Hamburger SV Fußballvereins darzustellen. Durch die Darstellung eines Spiels, in dem der HSV viele Tore schießt, wird die Leidenschaft und das Streben nach Erfolg hervorgehoben. Die lebendigen Farben und die dynamischen Pinselstriche sollen die Energie und Aufregung des Spiels wiedergeben.";
+            @<div>@text</div>
+        ,
+        new() { Position = TooltipPosition.Bottom, Duration = null});
 
-    private float temperature = 0.9f; 
+    private string _imageIdea = "";
-    private string request = "";
+
-    private string addons = "";
+    private float _temperature = 0.9f; 
-    private OpenAIAPI api = new OpenAIAPI("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");
+    private int? _imageWidth = null; 
-    private Conversation converse;
+    private int? _imageHeight = null; 
+    private string _userIdea = "";
+    private string _updateRequest = "";
+    private OpenAIAPI _openAiApi;
+    private Conversation? _conversation;
 
     private string _basePrompt;
+    private string _ideaPrompt;
 
     private string _imageUrl;
 
-    //protected override async Task OnInitializedAsync()
+    private WunschInfoModel? _wunschInfo;
-    //{
-    //    _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
-    //}
-
-    private async Task FunnyMessageSwitcher_ImageGen(CancellationToken cancellationToken)
-    {
-        Stopwatch sw = Stopwatch.StartNew();
-
-        await Task.Delay(1000, cancellationToken);
-
-        await UpdateBusyMessage("Dauert noch eine Weile...");
-
-        await Task.Delay(1000, cancellationToken);
-
-        await UpdateBusyMessage("Gut Ding hat Weil...");
-
-        await Task.Delay(1000, cancellationToken);
-
-        await UpdateBusyMessage("Sach ma, was issn da l... achso, er ist auf Klo gegangen... Er ist bestimmt gleich wieder da...");
-
-        await Task.Delay(1000, cancellationToken);
-
-        await UpdateBusyMessage("Na, also langsam verlier ich hier die Geduld, ich dachte KI soll alles schneller machen...");
-
-        while (!cancellationToken.IsCancellationRequested)
-        {
-            await Task.Delay(1000, cancellationToken);
-
-            await UpdateBusyMessage($"Keine Sorge, er arbeitet noch. Die Bilder werden gemalt... ({sw.Elapsed.Seconds}s)");
-        }
-    }
 
     async Task UpdateBusyMessage(string newMessage)
     {
@@ -182,142 +379,208 @@
         await InvokeAsync(StateHasChanged);
     }
 
-    private readonly HttpClient _client = new();
+    private string _openAiApiKey = "";
 
-    protected override Task OnInitializedAsync()
+    class ModelInfo
     {
-        var inferenceModelUrl = "https://api-inference.huggingface.co/models/Nacken/ki-kunst-kirsten-kloeckner-colab";
+        public string Name { get; set; }
+        public string StableDiffusionModel { get; set; }
+        public string PromptFormat { get; set; }
+    }
 
-        // TODO: nicht im repo speichern
+    private List<ModelInfo> _imageModels;
-        var API_TOKEN = "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";
 
-        //_client.BaseAddress = new Uri(inferenceModelUrl);
+    private ModelInfo? _selectedImageModel = null;
 
-        _client.DefaultRequestHeaders.Clear();
+    protected override async Task OnInitializedAsync()
-        _client.DefaultRequestHeaders.Add("Authorization", $"Bearer {API_TOKEN}");
+    {
+        _allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList().PickRandom(10);
+        //await InvokeAsync(StateHasChanged);
 
-        return base.OnInitializedAsync();
+        _openAiApiKey = Config.GetValue<string>("API:OpenAI");
+
+        _openAiApi = new OpenAIAPI(_openAiApiKey);
+
+        _imageModels = Config.GetSection("ImageModels").Get<List<ModelInfo>>();
+        //_selectedImageModel = _imageModels[0];
+
+        await base.OnInitializedAsync();
+    }
+
+    ///  <summary>
+    /// Setzt alle Felder zurück, die zu einem bestimmten Wunsch gehören.
+    /// </summary>
+    private void ClearOldGeneration()
+    {
+        // Bilder verbergen
+        for (int i = 0; i < 4; i++)
+        {
+            _imageStates[i] = ImageState.FadeOut;
+            _imagePromts[i] = null;
+        }
+
+        _imageIdea = "";
     }
 
     /// <summary>
-    /// Geneiert das Bild für den aktuellen <see cref="_imagePrompt"/>
+    /// Gibt ChatGPT den Wunsch und erlangt die Bild Idee.
     /// </summary>
-    public async Task GenerateImageAsync()
+    /// <returns></returns>
+    private async Task RequestImageIdeaAsync()
     {
-        var postData = new
+        string ideaBasePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/idea_prompt.txt"}");
+
+        ChatRequest chatRequest = new ChatRequest
         {
-            inputs = _imagePrompt
+            Temperature = _temperature,
+                Model = _usedGptModel switch
+                {
+                    GptModel.Gpt3_5_turbo => Model.ChatGPTTurbo,
+                    GptModel.Gpt4_turbo => ChatGPT.GPT4Turbo,
+                    GptModel.Gpt4o => ChatGPT.GPT4o,
+                    _ => throw new ArgumentOutOfRangeException()
+                }
         };
 
-        JsonContent content = JsonContent.Create(postData);
+        _conversation = _openAiApi.Chat.CreateConversation(chatRequest);
 
-        async Task FailedToDrawImage()
+        // Wunsch an GPT senden und Bild Idee anfordern
+        _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, string requestImagePrompt)
+    {
+        // Nachricht mit Bildpromt anfrage senden
+        _conversation!.AppendUserInput(requestImagePrompt);
+
+        // Task-Liste, damit wir parallel Prompts anfordern und Bilder generieren können.
+        Task[] imagePromts = new Task[4];
+
+        for (int i = 0; i < 4; i++)
         {
-            bool? retry = await DialogService.Confirm("Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?", "Ups, ein Fehler ist aufgetreten...",
+            imagePromts[i] = RequestImagePromptAndGenerateImageAsync(i, wunschInfo);
-                new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" });
-
-            if (retry == true)
-                await GenerateImageAsync();
         }
 
-        try
+        await Task.WhenAll(imagePromts);
-        {
-            var inferenceModelUrl = "https://api-inference.huggingface.co/models/Nacken/ki-kunst-kirsten-kloeckner-colab";
-
-            var response = await _client.PostAsync(inferenceModelUrl, content);
-
-            if (response?.IsSuccessStatusCode == true)
-            {
-                await using Stream imageStream = await response.Content.ReadAsStreamAsync();
-
-                using Image image = await Image.LoadAsync(imageStream);
-
-                string imgUrl = $"generated_images/{DateTime.Now:dd_MM_yyyy_hh_mm_s}.jpg";
-
-                string mapPath = $"./wwwroot/{imgUrl}";
-                await image.SaveAsJpegAsync(mapPath);
-
-                _imageUrl = imgUrl;
-            }
-            else
-            {
-                Console.WriteLine($"Image conversion failed: {response}");
-
-                if (Debugger.IsAttached)
-                    Debugger.Break();
-
-                await FailedToDrawImage();
-            }
-        }
-        catch (Exception exception)
-        {
-            Console.WriteLine($"Image request failed: {exception}");
-
-            if (Debugger.IsAttached)
-                Debugger.Break();
-                
-            await FailedToDrawImage();
-        }
     }
 
-
+    /// <summary>
-    private async Task DoStuff(bool newPic)
+    /// Fordert einen Bild Prompt an und generiert ein Bild für diesen.
+    /// </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 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 = 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);
+
+        BildInfoModel? bildInfo = await GenerateImageAsync(imagePrompt, imageModel.StableDiffusionModel, wunschInfo);
+
+        // TODO: Fehler im UI anzeigen (zur Zeit bleibt einfach Ladebalken)
+        _imageUrls[index] = bildInfo?.Dateiname;
+        _bildInfos[index] = bildInfo;
+        _imageStates[index] = ImageState.FadeIn;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    /// <summary>
+    /// Erzeugt ein Bild für den gegebenen Prompt und Wunsch.
+    /// </summary>
+    /// <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<BildInfoModel?> GenerateImageAsync(string imagePrompt, string modelName, WunschInfoModel wunschInfo)
+    {
+        try
+        {
+            BildInfoModel? bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);
+
+            // Kein Bild -> Fehler
+            if (bildInfo == 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" });
+
+                if (retry == true)
+                {
+                    bildInfo = await ImageGenerator.GenerateImageAsync(imagePrompt, modelName, wunschInfo, _imageWidth, _imageHeight);
+                }
+            }
+
+            return bildInfo;
+        }
+        catch (Exception e)
+        {
+            NotificationService.Notify(new NotificationMessage()
+                {
+                    Summary = "Es ist ein Fehler beim Erzeugen der Bilder aufgetreten, bitte versuche es erneut."
+                });
+        }
+
+        return null;
+    }
+
+    /// <summary>
+    /// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt.
+    /// </summary>
+    private async Task GenerateImagesAsync()
     {
-        // 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 (converse == null || newPic)
+        ClearOldGeneration();
-        {
-            amountOfAddons = maxAddons;
-            _addonsVisible = false;
-            _bothVisible = _buttonVisible && _addonsVisible;
-            await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
-            _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/test_prompt.txt"}");
 
-            ChatRequest chatRequest = new ChatRequest
+        amountOfAddons = maxAddons;
-                {
+        _addonsVisible = false;
-                    Temperature = temperature,
+        _bothVisible = _buttonVisible && _addonsVisible;
-                    Model = Model.ChatGPTTurbo,
+        await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
-                };
 
-            converse = api.Chat.CreateConversation(chatRequest);
+        await RequestImageIdeaAsync();
-            converse.AppendUserInput(_basePrompt + " " + request);
-        }
-        else
-        {
-            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.";
-
-                converse.AppendUserInput(addonsPrompt1 + addons + addonsPrompt2);
-            }
-        }
-
-        _imagePrompt = await converse.GetResponseFromChatbotAsync();
-        _imagePrompt += " Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique.";
-        converse.AppendUserInput(_imageDescriptionPrompt);
-        _imageDescription = await converse.GetResponseFromChatbotAsync();
 
         await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
 
-        Task makeImagesTask = GenerateImageAsync();
+        _wunschInfo = new()
+        {
+            BildBeschreibung = _imageIdea,
+            BildPrompt = "Individuelle Bild Prompts",
+            Datum = DateTime.Now,
+            GPTModel = _conversation!.Model,
+            Wunsch = _userIdea,
+            VorherigerWunsch = null
+        };
 
-        //CancellationTokenSource cancelFunnyMessages = new CancellationTokenSource();
+        try
+        {
+            await WunschInfoData.AddWunschInfoAsync(_wunschInfo);
+        }
+        catch (Exception e)
+        {
+            NotificationService.Notify(new NotificationMessage()
+            {
+                Summary = "Es ist ein Fehler aufgetreten, bitte versuche es erneut."
+            });
 
-        //Task funnyMessagesTask = FunnyMessageSwitcher_ImageGen(cancelFunnyMessages.Token);
+            return;
+        }
 
-        // Wichtig, erst Bilder awaiten, dann die lustingen Sprüche, sonst warten wir ewig...
+        string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/image_prompt.txt"}");
-        await makeImagesTask;
 
-        //cancelFunnyMessages.Cancel();
+        await RequestImagesAsync(_wunschInfo, requestImagePrompt);
-
-        //await funnyMessagesTask;
 
         _progressVisible = false;
         _buttonVisible = true;
@@ -334,4 +597,36 @@
         }
     }
 
+    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/FlippingImage.razor

@@ -0,0 +1,162 @@
+<style>
+    .flip-card {
+        background-color: transparent;
+        width: 12em;
+        height: 12em;
+        perspective: 30em;
+        transition: transform 0.2s;
+        z-index: auto;
+    }
+    
+    .flip-card:hover {
+        transform: scale(1.1, 1.1);
+        z-index: 100;
+    }
+
+    .flip-card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        transform-style: preserve-3d;
+    }
+
+    .flip-card_up .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateX(180deg);
+    }
+
+    .flip-card_down .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateX(-180deg);
+    }
+
+    .flip-card_left .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateY(-180deg);
+    }
+
+    .flip-card_right .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateY(180deg);
+    }
+
+    .fade-out-flipped-5 {
+        animation: fadeOut 5s;
+        animation-fill-mode: forwards;
+        transform: rotateY(180deg);
+    }
+    
+    .flip-card-front, .flip-card-back_up, .flip-card-back_down, .flip-card-back_left, .flip-card-back_right {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        /* Rückseite beider Karten-Seiten verstecken wird nicht angezeigt */
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    }
+    /* Rückseite der Karte ist 180 Grad gedreht */
+    .flip-card-front {
+        /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
+    }
+    
+    .flip-card-back_up {
+        transform: rotateX(-180deg);
+    }
+
+    .flip-card-back_down {
+        transform: rotateX(180deg);
+    }
+
+    .flip-card-back_left {
+        transform: rotateY(180deg);
+    }
+
+    .flip-card-back_right {
+        transform: rotateY(-180deg);
+    }
+    
+    .flip-card-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+</style>
+
+<div class="flip-card @(Show ? "" : _flipperClassName)">
+    <div class="flip-card-inner" style="--delay: @(FlipDelay)ms;">
+        <div class="@(Show ? "fade-out-5 flip-card-front" : _backClassName)" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
+            <div class="d-flex justify-content-center align-items-center flip-card-content">
+                <div class="d-flex justify-content-center align-items-center">
+                    <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" ShowValue="false" Mode="ProgressBarMode.Indeterminate"
+                                               Style="width:12em;height:12em; " />
+                </div>
+            </div>
+        </div>
+        <div class="flip-card-front" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
+            <RadzenImage Path="@ImageUrl" Style="width:12em;height:12em;" Click="@Click" class="@(Show ? "fade-in-5" : "")" />
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public bool Show { get; set; }
+
+    [Parameter]
+    public bool HideImage { get; set; }
+
+    [Parameter]
+    public string ImageUrl { get; set; } = "images/robot_painting.jpg";
+
+    public enum FlipDirection
+    {
+        Up,
+        Down,
+        Left,
+        Right
+    }
+
+    private string _flipperClassName;
+    private string _backClassName;
+    private FlipDirection _flipTo;
+
+    [Parameter]
+    public FlipDirection FlipTo
+    {
+        get => _flipTo;
+        set
+        {
+            _flipTo = value;
+            _flipperClassName = _flipTo switch
+            {
+                FlipDirection.Up => "flip-card_up",
+                FlipDirection.Down => "flip-card_down",
+                FlipDirection.Left => "flip-card_left",
+                FlipDirection.Right => "flip-card_right",
+                _ => throw new ArgumentOutOfRangeException()};
+            _backClassName = _flipTo switch
+            {
+                FlipDirection.Up => "flip-card-back_up",
+                FlipDirection.Down => "flip-card-back_down",
+                FlipDirection.Left => "flip-card-back_left",
+                FlipDirection.Right => "flip-card-back_right",
+                _ => throw new ArgumentOutOfRangeException()};
+        }
+    }
+
+    [Parameter]
+    public double FlipDelay { get; set; } = 0.0;
+
+    /// <summary>Gets or sets the click callback.</summary>
+    /// <value>The click callback.</value>
+    [Parameter]
+    public EventCallback<MouseEventArgs> Click { get; set; }
+}

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -0,0 +1,99 @@
+@page "/gallery"
+
+@using DataAccess.Data
+@using DataAccess.Models
+
+@inject DialogService DialogService;
+@inject BildInfoData BildInfoData;
+@inject WunschInfoData WunschInfoData;
+
+<style>
+    .small-image {
+        width: 10em;
+        height: 10em;
+        z-index: auto;
+        margin: 0.5em;
+        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+        border-radius: 1em;
+        /* Gibt an, dass Änderungen an der transform-Eigenschaft innerhalb von 0.2s angewandt werden.*/
+        transition: transform 0.2s;
+    }
+
+    /* Style, der angewendet wird, wenn über small-image gehovert wird. */
+    .small-image:hover {
+        transform: scale(1.1, 1.1);
+        z-index: 100;
+    }
+</style>
+
+<RadzenDataList WrapItems="@true" AllowPaging="true" PageSize="40" Data="@_bildInfos" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
+    <Template Context="bildInfo">
+        <RadzenImage class="small-image" Src="@bildInfo.Dateiname" Click="@(args => ShowImageDialog(bildInfo))" />
+    </Template>
+</RadzenDataList>
+
+@code {
+    List<BildInfoModel>? _bildInfos;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
+
+        await base.OnInitializedAsync();
+    }
+
+    async Task ShowImageDialog(BildInfoModel bildInfo)
+    {
+        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" />
+                        </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="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
+                    }
+                </RadzenStack>
+            </div>
+    , 
+            new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
+    }
+
+
+    [Inject]
+    private IWebHostEnvironment _environment { get; set; }
+}

KIKunstKirstenKlöckner/Pages/Home.razor

@@ -0,0 +1,191 @@
+
+@page "/"
+
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* linear-gradient(to bottom, #ffffff 0%, transparent 1%, transparent 99.5%, #f3f0f6 100%)
+ *@
+
+<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'); 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 ">
+                <div class="detail_box">
+                  <h1>
+                    Wo Wünsche <br>
+                    Wirklichkeit <br>
+                    werden
+                  </h1>
+                  <p>
+                    Willkommen auf meiner Webseite, wo Kunst und Technologie sich treffen. Ich freue mich, euch "Meine Wunschprogramm-Assistentin" vorzustellen, ein Projekt, das mir am Herzen liegt und das meine künstlerische Reise in eine aufregende neue Richtung führt.
+                  </p>
+                  <a href="/aiart" class="">
+                    Probier es aus!
+                  </a>
+                </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">
+                        <div class="carousel-item active">
+                          <div class="img-box">
+                            <img src="images/keks.jpg" alt="">
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <div class="img-box">
+                            <img src="images/slider-img2.jpg" alt="">
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <div class="img-box">
+                            <img src="images/slider-img3.jpg" alt="">
+                          </div>
+                        </div>
+                      </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>
+        </div>
+        <!-- end slider section -->
+ 
+  
+    @*   <!-- explaining section -->
+     <div class="container">
+     
+           </div>
+         *@
+  
+
+  <!-- about section -->
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
+        <div class="container">
+          <div class="row">
+              <div class="col-md-6">
+              <div class="img_container">
+                <div class="img-box b1">
+                  <img src="images/about4.jpg" alt="" />
+                </div>
+              </div>
+
+            </div>
+            <div class="col-md-6">
+              <div class="detail-box">
+                <div class="heading_container">
+                  <h2>
+                    Was ist der Wunschprogramm-Assistent?
+                  </h2>
+                  <img src="images/plug.png" alt="">
+                </div>
+                <p>
+                Seit Jahren habe ich Wünsche in Aquarelle verwandelt, sie humorvoll und ironisch interpretiert und ihnen eine neue Dimension gegeben. Jetzt habe ich einen mutigen Schritt gemacht und Künstliche Intelligenz (KI) als meine persönliche Assistentin in dieses kreative Unterfangen einbezogen.
+                Auf meiner Webseite Wunschprogramm.ai könnt ihr nun eure Wünsche äußern, die von meiner Wunschprogramm-Assistentin umgesetzt werden. Egal, ob es sich um einen „Happy End“, „Anerkennung“, „Ein Sportwagen“ oder „Sanfter Tod“ handelt, ich interpretiere eure Wünsche fantasievoll und gebe ihnen eine neue inhaltliche Dimension. Die „Wunschprogramm-Assistentin“ generiert in wenigen Momenten ein Bild, das ihr bestellen könnt. Wenn euch die Bilder gefallen, könnt ihr sie als hochwertigen Kunstdruck bestellen, und ich werde sie für euch als Originale handsignieren.
+
+                </p>
+                <a href="">
+                  Read More
+                </a>
+              </div>
+            </div>
+        
+
+          </div>
+        </div>
+      </section>
+
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-6">
+              <div class="detail-box">
+                <div class="heading_container">
+                  <img src="images/plug.png" alt="">
+                </div>
+                <p>
+                Auch politische Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier oder Katarina Barley sowie show-Promis wie Micaela Schäfer und Carlo von Tiedemann haben mir bereits ihre Wünsche anvertraut, und ich lade euch ein, dasselbe zu tun. Es ist eine Gelegenheit, Teil eines kreativen Dialogs zu werden, der über die traditionellen Grenzen der Kunst hinausgeht.
+                Auf dieser Webseite findet ihr alle Informationen über mein bisheriges Wunschprogramm, über meinen künstlerischen Werdegang und über die Entstehung und Realisierung dieses Projektes. "Meine Wunschprogramm-Assistentin" ist mehr als nur ein Projekt; es ist eine Erkundung dessen, was Kunst sein kann, wenn sie mit der Technologie von heute verknüpft wird. Ich lade euch ein, diese Reise mit mir zu teilen, eure Wünsche zu äußern und zu sehen, wie sie in Kunst verwandelt werden.
+                Besucht Wunschprogramm.ai und entdeckt, was möglich ist, wenn Wünsche, Kunst und Technologie aufeinandertreffen. Ich freue mich darauf, eure Wünsche in Kunst zu verwandeln.
+
+                </p>
+                <a href="">
+                  Read More
+                </a>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="img_container">
+                <div class="img-box b1">
+                  <img src="images/about1.jpg" alt="" />
+                </div>
+                <div class="img-box b2">
+                  <img src="images/about2.jpg" alt="" />
+                </div>
+              </div>
+
+            </div>
+
+          </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

@@ -0,0 +1,183 @@
+@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 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">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 ">
+                        <div class="detail_box">
+                            <h1>
+                                Wer ist <br>
+                                Kirsten <br>
+                                Klöckner?
+                            </h1>
+                            <p>
+                                Kirsten Klöckner, geboren 1962 in Braunschweig, hat die deutsche Kunstszene mit ihren humorvollen und hintergründigen Arbeiten bereichert.
+                            </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">
+                                        <div class="carousel-item active">
+                                            <div class="img-box">
+                                                <img src="images/Kirsten_draussen.png" alt="">
+                                            </div>
+                                        </div>
+                                        <div class="carousel-item">
+                                            <div class="img-box">
+                                                <img src="images/slider-img2.jpg" alt="">
+                                            </div>
+                                        </div>
+                                        <div class="carousel-item">
+                                            <div class="img-box">
+                                                <img src="images/slider-img3.jpg" alt="">
+                                            </div>
+                                        </div>
+                                    </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>
+    <!-- explaining section -->
+    <div class="container">
+    </div>
+
+
+
+    <!-- about section -->
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about4.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <h2>
+                                Was ist der Wunschprogramm-Assistent?
+                            </h2>
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            Ihre kreative Reise begann mit einem Studium der Bildhauerei an der Kunstakademie Münster, wo sie von 1983 bis 1986 unter der Leitung von Reiner Ruthenbeck studierte. Nach ihrem Studium zog sie nach Düsseldorf, um dort bis 2001 zu leben und zu arbeiten. Berlin wurde 2002 ihr neues Zuhause, ein Ort, der ihr die Konzentration auf ihre Kunst ermöglichte.
+                            Klöckner's künstlerische Ausbildung war geprägt von einer tiefen Leidenschaft für die Bildhauerei. Ihre Zeit in Münster legte den Grundstein für eine Karriere, die sich durch Vielseitigkeit und Kreativität auszeichnet. Nach ihrem Umzug nach Düsseldorf begann sie, ihre künstlerische Stimme zu finden, und Berlin bot ihr schließlich die Plattform, um sich voll und ganz auf ihre Kunst zu konzentrieren.
+                            Ihr Werk ist vielseitig und reicht von Bildhauerei über Malerei bis hin zur Verlagsarbeit. Seit den 1990er Jahren produziert sie Multiples, kleine Objekte in begrenzter Auflagenzahl, die am Rand des Kunstmarkts gehandelt, geliebt und verschenkt werden. Ihr "Wunschbilder-Programm" ist ein zentrales Thema, in dem sie Wünsche ihrer Mitmenschen humorvoll und ironisch in Aquarellen umsetzt.
+                            Im Laufe ihrer Karriere hat Kirsten Klöckner zahlreiche bemerkenswerte Ausstellungen gehabt, darunter "Science fiction, Teil 1: der Plan" (1992), "Eingemachtes" (1997), "Aquarelle + Multiples" (2004), und "Wunschbilder" (2015). Ihre Werke wurden in der Akademie der Künste in Berlin und in großen Galerien bundesweit ausgestellt. Sie hat auch an vielen Gruppenausstellungen teilgenommen, die ihre Vielseitigkeit und ihren Einfluss in der Kunstszene unterstreichen.
+
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </section>
+
+        <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
+            <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            Ihre Kunst ist in renommierten Sammlungen wie dem Kunstmuseum Düsseldorf, der Sammlung Falckenberg in Hamburg und der Kunstsammlung der Landesbank Baden-Württemberg in Stuttgart vertreten. Klöckner hat auch eine beeindruckende Liste von Veröffentlichungen, darunter "Heimatmelodie" (1989) und "Musenbesuch - BeuteKunst II" (2013), die einen tieferen Einblick in ihre kreativen Prozesse bieten.
+                            Als "eine der humorvollsten" Künstlerinnen von Klaus Staeck, dem Präsidenten der Berliner Akademie der Künste, bezeichnet, wird Kirsten Klöckner sowohl von der Kunstgemeinschaft als auch von der breiten Öffentlichkeit geschätzt und anerkannt. Ihre kreative Zusammenarbeit mit APROTO - Aktionen und Projekte pro Toleranz - hat besondere Aufmerksamkeit erregt. Das „Toleranz-Virus“, ein Aquarell und eine Skulptur von Kirsten Klöckner, wurde umgesetzt, um Toleranz in schwierigen Zeiten zu fördern. Das Aquarell und die Skulptur werden als APROTO-Toleranzpreis verliehen.
+                            Kirsten Klöckner's Reise durch die Kunstwelt ist eine, die von Humor, Intelligenz und einem unermüdlichen Streben nach kreativem Ausdruck geprägt ist. Ihre Werke und ihr Einfluss auf die Kunstszene zeugen von der Bedeutung und dem Wert ihrer Arbeit, und ihre fortwährende Innovation und ihr Engagement für Toleranz und Verständnis machen sie zu einer herausragenden Figur in der zeitgenössischen Kunst.
+
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about1.jpg" alt="" />
+                        </div>
+                        <div class="img-box b2">
+                            <img src="images/about2.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+
+            </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/Projekt.razor

@@ -0,0 +1,181 @@
+@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 hero-area-visible">
+
+        <!-- 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 ">
+                        <div class="detail_box">
+                            <h1>
+                                Das <br>
+                                Projekt <br>
+                            </h1>
+                            <p>
+                                Zusammentreffen von Talent, Technologie und sozialer Verantwortung: Die Entstehung eines einzigartigen Projekts
+                            </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">
+                                        <div class="carousel-item active">
+                                            <div class="img-box">
+                                                <img src="images/slider-img1.jpg" alt="">
+                                            </div>
+                                        </div>
+                                        <div class="carousel-item">
+                                            <div class="img-box">
+                                                <img src="images/slider-img2.jpg" alt="">
+                                            </div>
+                                        </div>
+                                        <div class="carousel-item">
+                                            <div class="img-box">
+                                                <img src="images/slider-img3.jpg" alt="">
+                                            </div>
+                                        </div>
+                                    </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>
+    <!-- explaining section -->
+    <div class="container">
+    </div>
+
+
+
+    <!-- about section -->
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about4.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <h2>
+                                Wie entstand das Wunschprogramm Projekt?
+                            </h2>
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            Das Projekt "Wunschprogramm-Assistentin" ist ein lebendiges Beispiel für kreative Zusammenarbeit, Innovation und Engagement, das sich selbstverständlich in einem ständigen Prozess der Entwicklung und Entfaltung befindet. Es vereint die Talente und Visionen von Künstlern, Journalisten, Studenten und einem engagierten Verein, um etwas wirklich Einzigartiges zu schaffen.
+                            In enger Zusammenarbeit mit einem Team von IT-Studenten an der Leibniz-Universität in Hannover und dem Verein APROTO – Aktionen und Projekte pro Toleranz, bringt die Berliner Künstlerin Kirsten Klöckner dieses einzigartige Projekt zum Leben. APROTO e.V., ein Verein, der sich für Toleranz und Verständigung einsetzt, hat bereits in der Vergangenheit durch Kunstprojekte Brücken zwischen verschiedenen Kulturen und Gesellschaftsgruppen gebaut.
+                            Die Journalistin Meike Wolff, Vorstand von APROTO e.V., trägt durch ihre Texte und ihre Kommunikationsfähigkeiten dazu bei, das Projekt in die Öffentlichkeit zu bringen. Ihre Arbeit spiegelt den dynamischen Charakter des Projekts wider, das sich ständig weiterentwickelt und wächst.
+                        
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </section>
+
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            Die Idee zu diesem innovativen Projekt stammt von dem Journalisten Till-Matthias Jürgens. In enger Abstimmung mit den IT-Studenten und der Künstlerin Kirsten Klöckner überwacht er die Gesamtkonzeption und stellt sicher, dass das Projekt in Bewegung bleibt, sich anpasst und innovativ bleibt.
+                            Die technische Umsetzung liegt in den fähigen Händen von Jan Kaminski, Meiko Remiorz, Simon Lübeß und Timm Kleipsties, KI-Studenten der Leibniz-Universität in Hannover. Sie arbeiten kontinuierlich an der Entwicklung des KI-Modells und seiner Daten-Einspeisung. Jan Kaminski, der auch für die grafische Umsetzung der Webseite verantwortlich ist, fungiert als kommunikative Schnittstelle und sorgt dafür, dass die technische und kreative Seite des Projekts nahtlos zusammenarbeiten.
+                            Das Projekt "Wunschprogramm-Assistentin" ist mehr als nur eine künstlerische Unternehmung; es ist ein Zusammentreffen von Talent, Technologie und sozialer Verantwortung. Es zeigt, wie Kunst, Wissenschaft und Gemeinschaft zusammenarbeiten können, um etwas zu schaffen, das sowohl schön als auch bedeutungsvoll ist. Es ist ein Beweis dafür, dass die Grenzen zwischen diesen Bereichen nicht festgelegt sind und dass durch Zusammenarbeit und Innovation neue Wege beschritten werden können. Es ist ein aufregender Blick in die Zukunft der Kunst, eine Zukunft, die jetzt stattfindet, und ein Projekt, das sich in einem ständigen Prozess der Entdeckung und Erneuerung befindet.
+
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about1.jpg" alt="" />
+                        </div>
+                        <div class="img-box b2">
+                            <img src="images/about2.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+
+            </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/Wunschbilder.razor

@@ -0,0 +1,144 @@
+@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 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   ;">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 ">
+                        <div class="detail_box">
+                            <h1>
+                                Das <br>
+                                Wunschprogramm
+                            </h1>
+                            <p>
+                                Ich mache mich zur Komplizin der Wünschenden.
+                            </p>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end slider section -->
+    </div>
+
+    <!-- about section -->
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about4.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <h2>
+                                Was ist der Wunschprogramm-Assistent?
+                            </h2>
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            Das Wunschprogramm von Kirsten Klöckner ist eine Reise in die Welt der Wünsche, eine faszinierende Verschmelzung von Kunst und menschlicher Sehnsucht. In einer Zeit, in der Kunst oft mit hohen Erwartungen konfrontiert ist, stellt Klöckner die Frage: Was, wenn Kunst auch Wünsche erfüllen könnte? Mit ihrem einzigartigen „Wunschbilder-Programm“ tut sie genau das.
+                            Kirsten Klöckner hat sich auf die humorvolle und ironische Umwandlung von Wünschen ihrer Mitmenschen in Aquarelle spezialisiert. Sie interpretiert die Wünsche fantasievoll, gibt ihnen Substanz und verwandelt sie in Kunstwerke. Egal, ob es sich um einfache oder komplizierte Wünsche, kleine oder riesige, alberne oder ernsthafte Wünsche handelt, sie nimmt sie alle an und macht sie zu einem Teil ihres kreativen Prozesses. Selbst prominente Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier und Showpromis wie Micaela Schäfer haben ihre Wünsche anvertraut.
+
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </section>
+
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="detail-box">
+                        <div class="heading_container">
+                            <img src="images/plug.png" alt="">
+                        </div>
+                        <p>
+                            In ihren eigenen Worten beschreibt Klöckner das Wunschprogramm als eine Möglichkeit, sich etwas zu wünschen, in einer Welt, in der die Kunst oft schwer beschäftigt ist. „Ich lebe in einer Zeit, in der das Wünschen hilft“, sagt sie und fügt hinzu: „Ich mache mich zur Komplizin der Wünschenden.“
+                            Das „Wunschprogramm“ von Kirsten Klöckner ist mehr als nur eine künstlerische Technik. Es ist eine Einladung, über unsere Wünsche nachzudenken und sie in die Welt der Kunst zu bringen. Es ist eine Möglichkeit, unsere tiefsten Sehnsüchte und Träume in einer Form zu sehen, die sowohl schön als auch nachdenklich ist. Es ist eine Erinnerung daran, dass die Kunst immer noch die Kraft hat, uns zu überraschen, zu inspirieren und uns etwas zu wünschen.
+                            Die Kunst des Wünschens, wie sie von Klöckner praktiziert wird, ist ein lebendiger Dialog zwischen dem Künstler und dem Betrachter, eine Möglichkeit, die oft flüchtigen Gedanken und Sehnsüchte in etwas Greifbares und Bleibendes zu verwandeln. Es ist eine Reise, die uns alle einlädt, Teilnehmer und Zeugen der Transformation von Wünschen in Kunst zu sein, und es ist ein Beweis dafür, dass Kunst immer noch die Macht hat, uns auf unerwartete und wunderbare Weise zu berühren.
+
+
+                        </p>
+                        <a href="">
+                            Read More
+                        </a>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="img_container">
+                        <div class="img-box b1">
+                            <img src="images/about1.jpg" alt="" />
+                        </div>
+                        <div class="img-box b2">
+                            <img src="images/about2.jpg" alt="" />
+                        </div>
+                    </div>
+
+                </div>
+
+            </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/_Host.cshtml

@@ -18,6 +18,33 @@
     <!-- Radzen.Blazor -->
     <link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">
     <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+
+    <!-- Basic -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!-- Mobile Metas -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <!-- Site Metas -->
+    <meta name="keywords" content="" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+
+    <title>KI Kunst Kirsten </title>
+
+    <!-- slider stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" />
+
+    <!-- bootstrap core css -->
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
+
+    <!-- fonts style -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <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>
     <component type="typeof(App)" render-mode="ServerPrerendered" />
@@ -34,5 +61,11 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+
+
+    <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,3 +1,6 @@
+using DataAccess.Data;
+using DataAccess.DbAccess;
+using KIKunstKirstenKlöckner.Data;
 using Radzen;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -5,9 +8,17 @@ var builder = WebApplication.CreateBuilder(args);
 // Add services to the container.
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
+
 builder.Services.AddScoped<TooltipService>();
 builder.Services.AddScoped<DialogService>();
 builder.Services.AddScoped<NotificationService>();
+builder.Services.AddScoped<ImageGenerator>();
+
+builder.Services.AddScoped<AiArtPageData>();
+
+builder.Services.AddSingleton<ISqlDataAccess, SqlDataAccess>();
+builder.Services.AddSingleton<BildInfoData>();
+builder.Services.AddSingleton<WunschInfoData>();
 
 var app = builder.Build();
 

KIKunstKirstenKlöckner/Shared/MainLayout.razor

@@ -3,17 +3,133 @@
 <PageTitle>KIKunstKirstenKlöckner</PageTitle>
 
 <div class="page">
-    @*
-    <div class="sidebar">
-    <NavMenu />
-    </div>
-    *@
-
     <main>
+        <!-- header section strats -->
+        <header class="header_section">
+            <div class="container">
+                <nav class="navbar navbar-expand-lg custom_nav-container ">
+                    <a class="navbar-brand" href="/">
+                        <img src="images/robot_painting_small.jpg" alt="">
+                        <span>
+                            KI-Wunschprogramm
+                        </span>
+                    </a>
+                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="s-1"> </span>
+                        <span class="s-2"> </span>
+                        <span class="s-3"> </span>
+                    </button>
+
+                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <div class="d-flex ml-auto flex-column flex-lg-row align-items-center">
+                            <ul class="navbar-nav  ">
+                                <NavLink class="nav-item" href="" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Start</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="aiart" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Generieren</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="wunschprogramm" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Wunschprogramm</span>
+                                </NavLink>
+                                <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>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+        </header>
+
+        <!-- end header section -->
 
         <article class="content px-4">
             @Body
         </article>
+
+        <!-- info section -->
+
+        <section class="info_section layout_padding">
+            <div class="container">
+                <div class="info_contact">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <a href="">
+                                <img src="images/location-white.png" alt="">
+                                <span>
+                                    Kirsten Klöckners KI-Atelier
+                                </span>
+                            </a>
+                        </div>
+                        <div class="col-md-4">
+                            <a href="">
+                                <img src="images/telephone-white.png" alt="">
+                                <span>
+                                    +012334567890
+                                </span>
+                            </a>
+                        </div>
+                        <div class="col-md-4">
+                            <a href="">
+                                <img src="images/envelope-white.png" alt="">
+                                <span>
+                                    nackenbox@gmail.com
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-4 col-lg-3">
+                        <div class="info_social">
+                            <div>
+                                <a href="https://www.facebook.com/kirsten.kloeckner">
+                                    <img src="images/fb.png" alt="">
+                                </a>
+                            </div>
+                            <div>
+                                <a href="https://twitter.com/kkbeutekunst">
+                                    <img src="images/twitter.png" alt="">
+                                </a>
+                            </div>
+                            <div>
+                                <a href="https://de.linkedin.com/in/kirsten-kl%C3%B6ckner-2a123393">
+                                    <img src="images/linkedin.png" alt="">
+                                </a>
+                            </div>
+                            <div>
+                                <a href="https://www.instagram.com/kirstenkloeckner/">
+                                    <img src="images/instagram.png" alt="">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+        <!-- end info section -->
+          <!-- footer section -->
+        <footer class="container-fluid footer_section">
+        <div class="container">
+            <div class="row">
+            <div class="col-lg-7 col-md-9 mx-auto">
+                <p>
+                &copy; 2022 All Rights Reserved By Nackenbox GMBH und Co. KG
+                </p>
+            </div>
+            </div>
+        </div>
+        </footer>
+  <!-- footer section -->
     </main>
 </div>
 

KIKunstKirstenKlöckner/appsettings.Development.json

@@ -1,9 +1,12 @@
 {
-  "DetailedErrors": true,
+    "DetailedErrors": true,
-  "Logging": {
+    "Logging": {
-    "LogLevel": {
+        "LogLevel": {
-      "Default": "Information",
+            "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+            "Microsoft.AspNetCore": "Warning"
+        }
+    },
+    "ConnectionStrings": {
+        "Default": "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=KiKunstDatenbank;Integrated Security=True;Connect Timeout=60;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"
     }
-  }
 }

KIKunstKirstenKlöckner/appsettings.json

@@ -1,9 +1,33 @@
 {
-  "Logging": {
+    "Logging": {
-    "LogLevel": {
+        "LogLevel": {
-      "Default": "Information",
+            "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+            "Microsoft.AspNetCore": "Warning"
+        }
+    },
+    "AllowedHosts": "*",
+    "API": {
+        "OpenAI": "<put OpenAI Key here>",
+        "HF_Inference": "<put Hugging Face inference API Key here>"
+    },
+    "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>"
     }
-  },
-  "AllowedHosts": "*"
 }

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/css/responsive.css

@@ -0,0 +1,118 @@
+@media (max-width: 1120px) {}
+
+@media (max-width: 992px) {
+
+  .hero_area {
+    height: auto;
+  }
+
+  .header_section {
+    padding-top: 10px;
+  }
+
+  #navbarSupportedContent {
+    margin-top: 25px;
+  }
+
+  .slider_section {
+
+    padding-top: 75px;
+    padding-bottom: 150px;
+
+  }
+
+  .about_section .img-box {
+    margin: 0 5%;
+  }
+
+  .about_section .detail-box {
+    margin-right: 5%;
+  }
+
+  .service_section .service_container .box {
+    -ms-flex-preferred-size: 48%;
+    flex-basis: 48%;
+  }
+
+  .about_section .img_container .img-box.b2 {
+    margin-top: -5%;
+  }
+
+}
+
+@media (max-width: 768px) {
+
+
+  .slider_section .detail_box {
+    text-align: center;
+  }
+
+  .slider_section .img_content {
+    margin-top: 55px;
+  }
+
+  .contact_section .map_container {
+    margin-top: 45px;
+  }
+
+  .info_section .info_contact a {
+    margin-bottom: 15px;
+  }
+
+  .info_section .info_social {
+    justify-content: center;
+  }
+
+  .service_section .service_container .box {
+    flex-basis: 98%;
+  }
+
+  .contact_section form {
+    padding-right: 0;
+  }
+
+  .info_section .info_contact a {
+    text-align: center;
+  }
+}
+
+@media (max-width: 576px) {
+  .about_section .img_container .img-box.b1 {
+    width: 80%;
+  }
+
+  .about_section .img_container .img-box.b2 {
+    width: 55%;
+  }
+
+  .info_section .info_form form {
+    flex-direction: column;
+  }
+
+  .info_section .info_form form input {
+    width: 100%;
+  }
+
+  .info_section .info_form form button {
+    margin-top: 15px;
+    padding: 10px 40px;
+  }
+}
+
+@media (max-width: 480px) {}
+
+@media (max-width: 420px) {
+
+  .slider_section .carousel-control-prev,
+  .slider_section .carousel-control-next {
+    right: 0;
+  }
+}
+
+@media (max-width: 360px) {}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+}

KIKunstKirstenKlöckner/wwwroot/css/site.css

@@ -63,6 +63,56 @@ a, .btn-link {
     color: white;
 }
 
-    .blazor-error-boundary::after {
+.blazor-error-boundary::after {
-        content: "An error has occurred."
+    content: "An error has occurred."
+}
+
+.fade-in-5 {
+    animation: fadeIn 5s;
+    animation-fill-mode: forwards;
+}
+.fade-out-5 {
+    animation: fadeOut 5s;
+    animation-fill-mode: forwards;
+}
+
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
     }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.flip-image {
+    animation: flip 0.6s;
+    animation-fill-mode: forwards;
+    -webkit-backface-visibility: hidden;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    backface-visibility: hidden;
+}
+
+@keyframes flip {
+    0% {
+        transform: rotateY(0deg);
+    }
+
+    100% {
+        transform: rotateY(180deg);
+    }
+}

KIKunstKirstenKlöckner/wwwroot/css/style.css

@@ -0,0 +1,693 @@
+body {
+  font-family: "Poppins", sans-serif;
+  color: #0c0c0c;
+  background-color: #ffffff;
+}
+
+.layout_padding {
+  padding-top: 90px;
+  padding-bottom: 90px;
+}
+
+.layout_padding2 {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
+.layout_padding2-top {
+  padding-top: 45px;
+}
+
+.layout_padding2-bottom {
+  padding-bottom: 45px;
+}
+
+.layout_padding-top {
+  padding-top: 90px;
+}
+
+.layout_padding-bottom {
+  padding-bottom: 90px;
+}
+
+.heading_container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-align: center;
+}
+
+.heading_container h2 {
+  position: relative;
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.heading_container img {
+  width: 30px;
+}
+
+/*header section*/
+.hero_area {
+  height: 98vh;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  background-color: #eae6f5;
+}
+
+.sub_page .hero_area {
+  height: auto;
+}
+
+.header_section .container {
+  padding: 0;
+}
+
+.header_section .nav_container {
+  margin: 0 auto;
+}
+
+.custom_nav-container .navbar-nav .nav-item .nav-link {
+  padding: 7px 20px;
+  margin: 10px 15px;
+  color: #000000;
+  text-align: center;
+  border-radius: 35px;
+  text-transform: uppercase;
+  font-size: 15px;
+}
+
+.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
+  background-color: #4b208c;
+  color: #ffffff;
+}
+
+a,
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: initial;
+}
+
+.btn,
+.btn:focus {
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.custom_nav-container .nav_search-btn {
+  background-image: url(../images/search-icon.png);
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position-y: 7px;
+  width: 35px;
+  height: 35px;
+  padding: 0;
+  border: none;
+}
+
+.navbar-brand {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.navbar-brand img {
+  margin-right: 5px;
+  width: 150px;
+}
+
+.navbar-brand span {
+  font-size: 22px;
+  font-weight: 700;
+  color: #4b208c;
+}
+
+.custom_nav-container {
+  z-index: 99999;
+}
+
+.navbar-expand-lg .navbar-collapse {
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+
+.custom_nav-container .navbar-toggler {
+  outline: none;
+}
+
+.custom_nav-container .navbar-toggler {
+  padding: 0;
+  width: 37px;
+  height: 42px;
+}
+
+.custom_nav-container .navbar-toggler span {
+  display: block;
+  width: 35px;
+  height: 4px;
+  background-color: #190734;
+  margin: 7px 0;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  margin: 0;
+  margin-bottom: -4px;
+}
+
+.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
+  display: none;
+}
+
+.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  margin: 0;
+  margin-top: -4px;
+}
+
+.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
+.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
+.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
+  -webkit-transform: none;
+          transform: none;
+}
+
+/*end header section*/
+/* slider section */
+.slider_section {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  z-index: 2;
+  color: #3b3a3a;
+  padding-bottom: 90px;
+}
+
+
+.slider_section .row {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.slider_section .detail_box {
+  color: #000000;
+}
+
+.slider_section .detail_box h1 {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.slider_section .detail_box p {
+  margin-top: 20px;
+}
+
+.slider_section .detail_box a {
+  display: inline-block;
+  padding: 10px 40px;
+  background-color: #4b208c;
+  color: #ffffff;
+  border-radius: 35px;
+  margin-top: 35px;
+}
+
+.slider_section .detail_box a:hover {
+  background-color: #5625a1;
+}
+
+.slider_section .img_container {
+  border: 7px solid #7b57b2;
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.slider_section .img_container div#carouselExampleContarols {
+  width: 100%;
+  position: unset;
+}
+
+.slider_section .img_container .img-box img {
+  width: 100%;
+}
+
+.slider_section .carousel-control-prev,
+.slider_section .carousel-control-next {
+  top: initial;
+  left: initial;
+  bottom: 5%;
+  right: 10%;
+  width: 45px;
+  height: 45px;
+  border: none;
+  border-radius: 100%;
+  opacity: 1;
+  background-repeat: no-repeat;
+  background-size: 8px;
+  background-position: center;
+}
+
+.slider_section .carousel-control-prev {
+  background-image: url(../images/prev.png);
+  background-color: #ffffff;
+  -webkit-transform: translate(-85px, 30px);
+          transform: translate(-85px, 30px);
+}
+
+.slider_section .carousel-control-next {
+  background-image: url(../images/next.png);
+  background-color: #4b208c;
+  -webkit-transform: translate(-45px, 0);
+          transform: translate(-45px, 0);
+}
+
+.service_section {
+  text-align: center;
+}
+
+.service_section .heading_container {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.service_section .service_container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 35px 0;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.service_section .service_container .box {
+  margin: 25px 1%;
+  -ms-flex-preferred-size: 31%;
+      flex-basis: 31%;
+  padding: 35px 25px 25px;
+  border-radius: 15px;
+  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  border-top: 15px solid transparent;
+  overflow: hidden;
+  -webkit-transition: all .1s;
+  transition: all .1s;
+}
+
+.service_section .service_container .box .img-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 125px;
+}
+
+.service_section .service_container .box .img-box img {
+  width: 90px;
+}
+
+.service_section .service_container .box .detail-box {
+  margin-top: 25px;
+}
+
+.service_section .service_container .box .detail-box h5 {
+  color: #2e0e5f;
+  font-weight: 600;
+  position: relative;
+}
+
+.service_section .service_container .box:hover, .service_section .service_container .box.active {
+  border-top: 15px solid #512a97;
+}
+
+.service_section .btn-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: 25px;
+}
+
+.service_section .btn-box a {
+  display: inline-block;
+  padding: 10px 35px;
+  background-color: #4b208c;
+  color: #ffffff;
+  border-radius: 35px;
+}
+
+.service_section .btn-box a:hover {
+  background-color: #5625a1;
+}
+
+.about_section {
+  background-color: #f3f0f6;
+}
+
+.about_section .row {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.about_section .img_container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.about_section .img_container .img-box {
+  border: 5px solid #7b57b2;
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.about_section .img_container .img-box.b1 {
+  width: 70%;
+}
+
+.about_section .img_container .img-box.b2 {
+  width: 50%;
+  margin-left: auto;
+  margin-top: -12%;
+}
+
+.about_section .img_container .img-box img {
+  width: 100%;
+}
+
+.about_section .detail-box {
+  margin-right: 15%;
+}
+
+.about_section .detail-box p {
+  margin-top: 25px;
+}
+
+.about_section .detail-box a {
+  display: inline-block;
+  padding: 10px 35px;
+  background-color: #4b208c;
+  color: #ffffff;
+  border-radius: 5px;
+  margin: 25px 0 45px 0;
+}
+
+.about_section .detail-box a:hover {
+  background-color: #5625a1;
+}
+
+.blog_section .heading_container {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.blog_section .heading_container h2::before {
+  background-color: #ffffff;
+}
+
+.blog_section .box {
+  margin-top: 55px;
+  background-color: #ffffff;
+  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+}
+
+.blog_section .box .img-box {
+  position: relative;
+}
+
+.blog_section .box .img-box img {
+  width: 100%;
+}
+
+.blog_section .box .detail-box {
+  padding: 25px 25px 15px;
+}
+
+.blog_section .box .detail-box h5 {
+  font-weight: bold;
+}
+
+.contact_section {
+  position: relative;
+}
+
+.contact_section form {
+  margin-top: 45px;
+  padding-right: 35px;
+}
+
+.contact_section input {
+  width: 100%;
+  border: none;
+  height: 50px;
+  margin-bottom: 25px;
+  padding-left: 25px;
+  background-color: transparent;
+  outline: none;
+  color: #101010;
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+}
+
+.contact_section input::-webkit-input-placeholder {
+  color: #737272;
+}
+
+.contact_section input:-ms-input-placeholder {
+  color: #737272;
+}
+
+.contact_section input::-ms-input-placeholder {
+  color: #737272;
+}
+
+.contact_section input::placeholder {
+  color: #737272;
+}
+
+.contact_section input.message-box {
+  height: 120px;
+}
+
+.contact_section button {
+  border: none;
+  display: inline-block;
+  padding: 12px 45px;
+  background-color: #4b208c;
+  color: #ffffff;
+  border-radius: 0px;
+  margin-top: 35px;
+}
+
+.contact_section button:hover {
+  background-color: #5625a1;
+}
+
+.contact_section .map_container {
+  height: 100%;
+  min-height: 325px;
+}
+
+.contact_section .map_container .map-responsive {
+  height: 100%;
+}
+
+.footer_bg {
+  background-image: url(../images/footer-bg.png);
+  background-size: cover;
+  background-position: top;
+}
+
+/* info section */
+.info_section {
+  background-color: #190734;
+  color: #ffffff;
+}
+
+.info_section h6 {
+  font-weight: bold;
+}
+
+.info_section .info_contact {
+  margin-top: 60px;
+  margin-bottom: 45px;
+}
+
+.info_section .info_contact .col-md-4 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.info_section .info_contact a {
+  color: #ffffff;
+}
+
+.info_section .info_contact img {
+  max-width: 100%;
+  margin-right: 10px;
+}
+
+.info_section .info_form {
+  margin: 0 auto;
+  margin-bottom: 45px;
+}
+
+.info_section .info_form h4 {
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.info_section .info_form form {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.info_section .info_form form input {
+  background-color: #ffffff;
+  border: none;
+  -webkit-box-flex: 2.5;
+      -ms-flex: 2.5;
+          flex: 2.5;
+  outline: none;
+  color: #000000;
+  min-height: 42.4px;
+  padding-left: 15px;
+}
+
+.info_section .info_form form input ::-webkit-input-placeholder {
+  color: #ffffff;
+  opacity: 0.2;
+}
+
+.info_section .info_form form input :-ms-input-placeholder {
+  color: #ffffff;
+  opacity: 0.2;
+}
+
+.info_section .info_form form input ::-ms-input-placeholder {
+  color: #ffffff;
+  opacity: 0.2;
+}
+
+.info_section .info_form form input ::placeholder {
+  color: #ffffff;
+  opacity: 0.2;
+}
+
+.info_section .info_form form button {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  border: none;
+  display: inline-block;
+  padding: 10px 30px;
+  background-color: #4b208c;
+  color: #ffffff;
+  border-radius: 0;
+  font-size: 15px;
+  text-transform: uppercase;
+}
+
+.info_section .info_form form button:hover {
+  background-color: #5625a1;
+}
+
+.info_section .box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.info_section .info_social {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.info_section .info_social img {
+  width: 35px;
+  margin-right: 8px;
+}
+
+/* end info section */
+/* footer section*/
+.footer_section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: relative;
+}
+
+.footer_section p {
+  color: #222222;
+  margin: 0 auto;
+  text-align: center;
+  padding: 20px;
+}
+
+.footer_section p a {
+  color: #222222;
+}
+/*# sourceMappingURL=style.css.map */

KIKunstKirstenKlöckner/wwwroot/css/style.scss

@@ -0,0 +1,643 @@
+$white: #ffffff;
+$black: #000000;
+$primary1: #4b208c;
+$primary2: #371e71;
+
+@mixin main-font {
+  font-family: "Poppins", sans-serif;
+}
+
+@mixin hero_btn($col1, $col2, $pad1, $pad2, $bRadius) {
+  display: inline-block;
+  padding: $pad1 $pad2;
+  background-color: $col1;
+  color: $col2;
+  border-radius: $bRadius;
+
+  &:hover {
+    background-color: lighten($color: $col1, $amount: 5);
+  }
+}
+
+@mixin upperBold {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+body {
+  @include main-font;
+  color: #0c0c0c;
+  background-color: #ffffff;
+}
+
+.layout_padding {
+  padding-top: 90px;
+  padding-bottom: 90px;
+}
+
+.layout_padding2 {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
+.layout_padding2-top {
+  padding-top: 45px;
+}
+
+.layout_padding2-bottom {
+  padding-bottom: 45px;
+}
+
+.layout_padding-top {
+  padding-top: 90px;
+}
+
+.layout_padding-bottom {
+  padding-bottom: 90px;
+}
+
+.heading_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+
+  h2 {
+    position: relative;
+    font-weight: bold;
+    margin-right: 10px;
+  }
+
+  img {
+    width: 30px;
+  }
+}
+
+/*header section*/
+.hero_area {
+    height: 98vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: #eae6f5;
+}
+
+.sub_page {
+  .hero_area {
+    height: auto;
+  }
+
+
+}
+
+.header_section {
+  .container {
+    padding: 0;
+  }
+
+  .nav_container {
+    margin: 0 auto;
+  }
+}
+
+.custom_nav-container {
+  .navbar-nav {
+    .nav-item {
+      .nav-link {
+        padding: 7px 20px;
+        margin: 10px 15px;
+        color: $black;
+        text-align: center;
+        border-radius: 35px;
+        text-transform: uppercase;
+        font-size: 15px;
+      }
+
+      &.active,
+      &:hover {
+        .nav-link {
+          background-color: $primary1;
+          color: $white;
+        }
+      }
+    }
+  }
+}
+
+a,
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: initial;
+}
+
+.btn,
+.btn:focus {
+  outline: none !important;
+  box-shadow: none;
+}
+
+.custom_nav-container .nav_search-btn {
+  background-image: url(../images/search-icon.png);
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position-y: 7px;
+  width: 35px;
+  height: 35px;
+  padding: 0;
+  border: none;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+
+
+    img {
+        margin-right: 5px;
+        width: 70px;
+        height: 70px;
+    }
+
+    span {
+        font-size: 22px;
+        font-weight: 700;
+        color: $primary1;
+    }
+}
+
+.custom_nav-container {
+  z-index: 99999;
+}
+
+.navbar-expand-lg .navbar-collapse {
+  align-items: flex-end; //for this site only
+}
+
+.custom_nav-container .navbar-toggler {
+  outline: none;
+}
+
+.custom_nav-container .navbar-toggler {
+  padding: 0;
+  width: 37px;
+  height: 42px;
+
+  span {
+    display: block;
+    width: 35px;
+    height: 4px;
+    background-color: #190734;
+    margin: 7px 0;
+    transition: all .3s;
+  }
+
+
+  &[aria-expanded="true"] {
+    .s-1 {
+      transform: rotate(45deg);
+      margin: 0;
+      margin-bottom: -4px;
+    }
+
+    .s-2 {
+      display: none;
+    }
+
+    .s-3 {
+      transform: rotate(-45deg);
+      margin: 0;
+      margin-top: -4px;
+    }
+  }
+
+  &[aria-expanded="false"] {
+
+    .s-1,
+    .s-2,
+    .s-3 {
+      transform: none;
+    }
+  }
+
+}
+
+
+
+/*end header section*/
+
+/* slider section */
+.slider_section {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    color: #3b3a3a;
+    padding-bottom: 90px;
+
+    .row {
+        align-items: center;
+    }
+
+    .detail_box {
+        color: $black;
+
+        h1 {
+            text-transform: uppercase;
+            font-weight: bold;
+        }
+
+        p {
+            margin-top: 20px;
+        }
+
+        a {
+            @include hero_btn($primary1, $white, 10px, 40px, 35px);
+            margin-top: 35px;
+        }
+    }
+
+
+
+    .img_container {
+        border: 7px solid #7b57b2;
+        border-radius: 100%;
+        overflow: hidden;
+
+        div#carouselExampleContarols {
+            width: 100%;
+            position: unset;
+        }
+
+        .img-box {
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+
+
+    .carousel-control-prev,
+    .carousel-control-next {
+        top: initial;
+        left: initial;
+        bottom: 5%;
+        right: 10%;
+        width: 45px;
+        height: 45px;
+        border: none;
+        border-radius: 100%;
+        opacity: 1;
+        background-repeat: no-repeat;
+        background-size: 8px;
+        background-position: center;
+    }
+
+    .carousel-control-prev {
+        background-image: url(../images/prev.png);
+        background-color: $white;
+        transform: translate(-85px, 30px);
+    }
+
+    .carousel-control-next {
+        background-image: url(../images/next.png);
+        background-color: $primary1;
+        transform: translate(-45px, 0);
+    }
+}
+
+// end slider section
+
+
+// service section
+
+.service_section {
+  text-align: center;
+
+  .heading_container {
+    justify-content: center;
+  }
+
+  .service_container {
+    display: flex;
+    justify-content: center;
+    padding: 35px 0;
+    flex-wrap: wrap;
+
+    .box {
+      margin: 25px 1%;
+      flex-basis: 31%;
+      padding: 35px 25px 25px;
+      border-radius: 15px;
+      box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: .15);
+      border-top: 15px solid transparent;
+      overflow: hidden;
+      transition: all .1s;
+
+      .img-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 125px;
+
+        img {
+          width: 90px;
+        }
+
+
+      }
+
+      .detail-box {
+        margin-top: 25px;
+
+        h5 {
+          color: #2e0e5f;
+          font-weight: 600;
+          position: relative;
+        }
+      }
+
+      &:hover,
+      &.active {
+        border-top: 15px solid #512a97;
+      }
+
+    }
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: center;
+    margin-top: 25px;
+
+    a {
+      @include hero_btn($primary1, $white, 10px, 35px, 35px);
+    }
+  }
+}
+
+// end service section
+
+
+
+// about section
+.about_section {
+  background-color: #f3f0f6;
+
+  .row {
+    align-items: center;
+  }
+
+  .img_container {
+    display: flex;
+    flex-direction: column;
+
+    .img-box {
+      border: 5px solid #7b57b2;
+      border-radius: 100%;
+      overflow: hidden;
+
+      &.b1 {
+        width: 70%;
+      }
+
+      &.b2 {
+        width: 50%;
+        margin-left: auto;
+        margin-top: -12%;
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .detail-box {
+    margin-right: 15%;
+
+
+    p {
+      margin-top: 25px;
+    }
+
+    a {
+      @include hero_btn($primary1, $white, 10px, 35px, 5px);
+      margin: 25px 0 45px 0;
+    }
+  }
+}
+
+// end about section
+
+
+
+// blog section
+.blog_section {
+
+  .heading_container {
+    justify-content: center;
+
+    h2 {
+      &::before {
+        background-color: $white;
+      }
+    }
+  }
+
+  .box {
+    margin-top: 55px;
+    background-color: $white;
+    box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: .15);
+
+    .img-box {
+      position: relative;
+
+      img {
+        width: 100%;
+      }
+
+    }
+
+    .detail-box {
+      padding: 25px 25px 15px;
+
+      h5 {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// end blog section
+
+// contact section
+.contact_section {
+  position: relative;
+
+
+  form {
+    margin-top: 45px;
+    padding-right: 35px;
+  }
+
+  input {
+    width: 100%;
+    border: none;
+    height: 50px;
+    margin-bottom: 25px;
+    padding-left: 25px;
+    background-color: transparent;
+    outline: none;
+    color: #101010;
+    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+
+    &::placeholder {
+      color: #737272;
+    }
+
+    &.message-box {
+      height: 120px;
+    }
+  }
+
+
+  button {
+    border: none;
+    @include hero_btn($primary1, $white, 12px, 45px, 0px);
+    margin-top: 35px;
+  }
+
+  .map_container {
+    height: 100%;
+    min-height: 325px;
+
+    .map-responsive {
+      height: 100%;
+    }
+  }
+}
+
+// end contact section
+
+
+
+.footer_bg {
+  background-image: url(../images/footer-bg.png);
+  background-size: cover;
+  background-position: top;
+}
+
+/* info section */
+.info_section {
+  background-color: #190734;
+  color: $white;
+
+  h6 {
+    font-weight: bold;
+  }
+
+
+  .info_contact {
+    margin-top: 60px;
+    margin-bottom: 45px;
+
+    .col-md-4 {
+      display: flex;
+      justify-content: center;
+    }
+
+    a {
+      color: $white;
+    }
+
+    img {
+      max-width: 100%;
+      margin-right: 10px;
+    }
+  }
+
+  .info_form {
+    margin: 0 auto;
+    margin-bottom: 45px;
+
+    h4 {
+      text-transform: uppercase;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    form {
+      display: flex;
+      align-items: center;
+
+      input {
+        background-color: $white;
+        border: none;
+        flex: 2.5;
+        outline: none;
+        color: $black;
+        min-height: 42.4px;
+        padding-left: 15px;
+
+        ::placeholder {
+          color: $white;
+          opacity: 0.2;
+        }
+      }
+
+      button {
+        flex: 1;
+        border: none;
+        @include hero_btn($primary1, $white, 10px, 30px, 0);
+        font-size: 15px;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  .box {
+    display: flex;
+  }
+
+  .info_social {
+    display: flex;
+
+    img {
+      width: 35px;
+      margin-right: 8px;
+    }
+  }
+}
+
+/* end info section */
+
+/* footer section*/
+
+.footer_section {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.footer_section p {
+  color: #222222;
+  margin: 0 auto;
+  text-align: center;
+  padding: 20px;
+
+  a {
+    color: #222222;
+  }
+}
+
+
+// end footer section

KIKunstKirstenKlöckner/wwwroot/idea_prompt.txt

@@ -0,0 +1,2 @@
+Gib mir eine kreative und wenn möglich tiefsinnige Idee für ein Gemälde.
+Der Titel ist: 

KIKunstKirstenKlöckner/wwwroot/image_prompt.txt

@@ -0,0 +1,12 @@
+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."
+"Painting of a floating island with giant clock gears, populated with mythical creatures."
+"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."
+
+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);
+    };
+}
+
+

KIKunstKirstenKlöckner/wwwroot/prompt.txt

@@ -1,121 +0,0 @@
-title	 Textual-description
- Christmas tree,	 Bare tree upside down with colored ball as root, black border
- Being by the sea with your hair blowing in the wind,	 Wavy strokes of color in the shape of hair from the right side in front of light blue center stripe
- Sales volume,	 geometric simple blocks on a black surface with striped clouds in the background
- Regulated life,	 Line drawing of a torso on a table with a connection of buten balls stretching across the entire image.
- Don't be afraid of mistakes,	 A picture of a yellow, black sponge with light blue paint running from the top. White background
- An H - for the French,	 Red Black Background. The letter H. Solid in the lower part and frayed in the upper part.
- Lamborghini,	Ball in rainbow colors painted over with green and white, irregular, net-shaped strokes. Background pale colorful
- A separate museum for the collection,	 a house on a steep green/white hill out the door straight white fan-shaped strokes deep blue sky
- A different policy for refugees,	White black rays going into the picture. In the foreground a lawn-like area with a brown frame in the shape of a house. In the frame a red, unfinished heart on a white plate-shaped object.
- A sea of cow parsley,	 Blue blobs of paint running upwards. In the lower part light green / yellow gradients. In the foreground individual plant-like strokes with fan-shaped tips.
- Happy end,	 Grid with black background and green lines. Some quadrants painted with dark green paint. In the foreground several horizontal lines with irregular peaks and valleys similar to a heartbeat or stock price
- walk by the sea,	 A pair of blue and yellow rubber boots. Gradient color accents in the background. Pretzel and round shapes in the foreground. A conch shell in the lower left corner
- Dancing tango with red gloves,	 Two arms that merge into a heart from the upper arm. Pink flowers in the background.
- I pot,	 A potty for toddlers with a 3-dimensional letter I inside. gray background.
- A gentle death,	 colorful picture. A red scythe is clearly visible, as is an hourglass. A severed hooded Red Man is censored by a black bar at eye level. Many individual gradients in the picture with white gaps.
- A summer dress,	 Lots of white clothes in a black blue gradient. Lines Flowers and Colorful
- Stay healthy and happy together,	 Irregular grid of blue and yellow lines. A form embroidered out of red crosses. It looks like sewn fabric.
- Read Kant!,	 Gray pistols on the rim with yellow and red stoppers in the barrel. Black background with the inscription "Have courage, you..."
- A domicile fixe,	 Background black and colored with many small "cell-like" points. 2 beds in the foreground one is empty and the other is covered with colorful duvets
- not be young,	 A colorful swirl of colors, in front of a piece of white furniture. In the foreground 2 crutches.
-Buddha,	 Silhouette of a person painted from many colorful horizontal lines. Some color gradients on the shoulder
- Ganesha,	 Gray silhouette of a hornless bison against a black background. A horn with Rotel kriesen in the foreground
- mountains and eggs,	 3 pointed white-brown mountains in front of a deep blue background with one-shaped objects in the background.
- roses,	 Colorful vertical tendrils with thorns against a white background with pale red rose shaped accents.
- More time,	 A clock without hands against a dark background. Both pointers are below in the picture
- A very large beer,	 strip cut shape of a beer glass in a blue background with lots of round blue bubbles/circles
- Stupid tax, now!,	 A Germany flag with holes
- 1000 fans of Borussia Mönchengladbach,	 A historic stadium with towers with lots of color dots. Each of the color dots has very large sunglasses. At the top of the stadium, a blob of color is waving a flag with its arms.
- change,	Black background and white Coin shaped objects stacked in multiple stacks
- Find the fountain of youth,	 Green vertical lines with white chain link fence in foreground
- A certain house should blow up,	 A house-shaped 3d line in front of a black background. Lots of dashes down from the house showing speed.
- An intellectual lover,	 black background. A man with large glasses and a bald head reads a newspaper and looks at the viewer. The newspaper says "intellect"
- An expensive handbag,	 A plain white top handle bag against a black background. The lower part of the bag is in gold color
- The boy should get away from the PC,	 A power plug without a cable. A dense network of branching lines extends from the rear part of the plug. In the background you can see a yellow wall with the socket.
- Helgoland,	 Several silhouettes of helicopters. A red big cross. Blue wavy lines, Elgoland as an inscription.
- Spotted Cat,	 Purple cat paws on a light blue background. White black fur in the front and.
- 30 pounds less,	 Cuboid with holes at the bottom from which something white flows. Large teardrop shapes in the foreground. Red blobs.
- (pretty) leftist Christmas stollen,	 running horizontal dark lines. A star with a ring in the middle and a cut white Christmas stollen
- Elephant eats carrots,	 two gray elephants and 4 carrots in the foreground. The leaves of the carrots blur into each other
- Be healthy,	 A white sphere with a Rotel Cross on the surface against a black background.
- Classical music,	 fire salamander with a hat and red cape plays toreo with huge waves.
- A bag of colorful ideas for life,	 a tote bag. Between the handles is a cuboid object
- A clear head,	 A simple drawing of a head. The top half of the head is an iron cage.
- Lower Rhine,	 White silhouette of the Kalkar nuclear power plant in front of a blue silhouette of the Madonna by Kevelaer.
- Proud,	 A noble colorful crown against a black and white background.
- Olympia,	 rubber bands in the Olympic colors. With a lot of small colorful blobs of paint
- Light,	 Shape of a lightbulb made up of many precisely arranged yellow circles against a dark background with a simple drawing of a candle
- garden dream,	 Large bow ties and a white fence element
- utopia,	 A box with black and white balloons flying out of it with the inscription "Utopia"
- A small cat,	 A red and white maze
- Go out,	 Colorful Short Stripes on White Black Background
- courage,	 A white silhouette of a human in a dark colored liquid with large white cubes
- MacBook,	 A laptop with red blue and black creations
- A good friend,	 a blue, smeared silhouette of a person raising an arm. Gray and black background with many different sized colorful crosses
- 5 million,	 A 50 euro note with the number 5000000. Background: many green dots on a pink background
- Something private,	 A rolled white paper on a dark blue background
- field flowers,	 Black and white field flowers, pale green vertical branches and big splashes of blue colour
- pool with fish (Becken mit Fisch),	 a pelvic bone with fish in the foreground
- The madness should end,	 A town exit sign with the town name "Insanity" and a speed limit of 37
- repartee,	 A white silhouette of a hammer on a wall on a light yellow and light blue background with lots of nails
- A stable full of grandchildren,	 A hand comes out of the middle of the picture against a dark background. Various names are written in different colors and orientations across the entire image
- Performers out of the temple,	 A dark hat over a castle. In the foreground, many green dots are connected with red lines. A large dark trident juts through the entire image
- Overcome the ego,	 A 3D star with many points on a dark background. In the lower corner is the silhouette of a boxer hitting the star
- mess,	 An egg with an overlay of a pig's head
- Monkey with chocolate cake,	 A green monkey on a red background. Many pieces of cake can be seen in the foreground.
- silence,	 A dark image with many blue dots on a dark blue background. A cruez can be seen in the lower dark area.
- A wish in reserve,	 white box on a green background. On the box there are 2 orthogonal stripes, like on a present, which extend to the edges.
- High heels (just in case),	 The silhouette of a high heel in front of an irregular checkered pattern
- More and more treats for Frodo,	 Many bones on a dark green to light yellow background
- Luck,	 a round object with many small color accents on it. In the foreground you can see a couple of monochromatic crises with their shadows.
- Live with a dog again,	 White silhouettes of dogs overlaid by a dog's head with an open snout. The eye of the dog's head is the center of a star-shaped ray
- serenity prayer,	 A paper basket with paper balls. Vertical dark lines
- light legs,	 pair of legs pointing upwards. These stick in a round black object
- A pious wish,	 A childlike angel leans on a dark stripe, pink background. A swirl of halo and black simple star shapes.
- I want to be an artist,	 black barcode a yellow crown, 2 hands and a circle with 2 dots in it.
- Confidence,	Many houses on a green plain. A large red roof in the foreground and a black line drawing of the "House of Nicholas"
- tolerance virus,	 Dark image with a large black virus shape in the center. All around are colorful smaller virus forms.
- More goals for HSV,	 Abstract representation of a soccer goal net. green background. Big white circles and several white racks of football goals.
- healthy passion,	 human denture in front of a very colorful celled background
- A lot of ice cream,	 An abstract representation of balls of ice cream in a cone lying upside down on the ground melting
- hospitality,	 2 silhouettes of tables in front of a dark background with many loops distributed over the image
- Responsibility,	 black representation of a world map in front of a blue globe. There is an open umbrella above the globe
- celebrate Thanksgiving,	 A green abstract turkey leg between a colorful recycling symbol
- attitude,	 A piece of red fabric is held by several hooks on all sides
- sheep,	 two crochet hooks crochet the silhouette of a sheep out of blue wool. Dark background with green crocheted fabric
- Youngsters for the fire brigade,	 A red fireman's helmet above a crowd of ladybugs on a light blue background
- Start again,	 many grey, blue, red and green rectangular areas superimposed irregularly.
- Nazi club,	 A colorful club against a light blue background. A broken swastika can be seen in the background
- See the Erlkönig,	 A car of black lines against pale swirls of black, blue, and green stripes
- 1 centimeter more,	 Stack of white dice against a blue background that decreases towards the top. The top edge of the image is red and the right edge is yellow
- Free days,	 A view of a calendar with white wildly painted lines on it
- Experience more nature,	 perpendicular green lines with flowers at the ends. two walls Swirl of colors on the floor
- A castle,	 View through a mosaic glass made of round glass panes. A church can be seen behind the glass
- I want to play football as much as I want,	 large soccer ball on the right side of the picture. Several colorful soccer balls on the left.
- Riding a horse through Mongolia,	 4 legs and hooves of a horse in front of a yellow and red shape with many cloud shapes in the foreground and background
- A small dog,	 A red dog leash and a yellow collar in front of a blue-green surface
- Get out of everyday life and into pleasure,	 cage. A yellow beam runs through the center of the cage. Blue smoke emanates from the left side of the steel. To the right of the star are pale red spots
- Armor's arrow should hit - namely...,	 A plaid shirt against a green, black background. There's a dial on the shirt. There is an arrow in the center of the target
- Hang laundry outside,	 red clotheslines with white laundry and yellow clothespins. Background above: blue, background below: white
- I want to be able to do magic,	 black and a white hand with blue rings against an orange background. There are many yellow and pink circles across the image
-
-Dies ist eine Liste von Bildern von der Künstlerin Kirsten Klöckner. 
-Sie hat einen Titel bekommen und dazu ein Bild gemalt. Bitte generiere einen Englischen Prompt für eine Bild KI basierend auf dieser Liste. 
-
-Hier findest du Beispiele, wie der Promt aussehen soll: 
-
-"Portrait of an astronaut in space, detailed starry background, reflective helmet."
-“Painting of a floating island with giant clock gears, populated with mythical creatures.”
-“Landscape 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.”
-“Painting of a modern smartphone with classic art pieces appearing on the screen.”
-“Battle scene with futuristic robots and a golden palace in the background.”
-“Painting of a bustling city market with different perspectives of people and stalls.”
-“Painting of a ship sailing in a stormy sea, with dramatic lighting and powerful waves.”
-“Painting of a female botanist surrounded by exotic plants in a greenhouse.”
-“Painting of an ancient castle at night, with a full moon, gargoyles, and shadows.”
-
-Bitte nutze für den Prompt maximal 20 Wörter und achte darauf, dass der Prompt auf englisch ist.
-
-Den Titel für den zu erstellenden Promt ist: 

KIKunstKirstenKlöckner/wwwroot/test_prompt.txt

@@ -1,29 +0,0 @@
-Kunststil und Techniken: Kirsten Klöckner ist eine Künstlerin, die sich auf Aquarell- und Tusche-Materialien spezialisiert hat. Diese Techniken erfordern ein hohes Maß an Geschick und Präzision, da sie sowohl transparente als auch deckende Effekte erzeugen kann. Die Verwendung von Papier als Untergrund ermöglicht es ihr, mit verschiedenen Strukturen und Texturen zu experimentieren. Die Vielfalt der Techniken, die sie beherrscht - wie Federzeichnung, Pinselzeichnung, Nass-in-Nass-Technik, Trocken-auf-Trocken-Technik und Lasur - ermöglicht es ihr, ihre künstlerische Vision in unterschiedlichen Ausdrucksformen zu realisieren.
-
-Themen und Motive: Klöckners Kunst zeigt eine breite Palette von Themen und Motiven. Ihre Werke enthalten oft Naturmotive wie Schafe, Pferde und Blumen, die eine Verbindung zur Natur und zum Landleben nahelegen. Gleichzeitig widmet sie sich aber auch gesellschaftlichen und politischen Anliegen, wie zum Beispiel Gastfreundschaft, Verantwortung, Klimaschutz und kritischen Reflektionen über den Alltag. Die Vielfalt der Themen zeigt, dass sie eine Künstlerin ist, die sich für viele Facetten des Lebens interessiert und ihre Kunst als Ausdrucksmittel für verschiedene Gedanken und Gefühle nutzt.
-
-Emotionen und Interpretation: Kirsten Klöckners Kunst scheint stark von Emotionen durchdrungen zu sein, die bei den Betrachtern Resonanz erzeugen. Die Assoziationen und Reaktionen anderer Menschen auf ihre Werke reichen von Freude und Dankbarkeit bis hin zu nachdenklichen Reflexionen über gesellschaftliche Fragen. Dies deutet darauf hin, dass ihre Kunst eine breite Palette von Emotionen anspricht und eine starke Verbindung zu den Betrachtern herstellt. Klöckners Fähigkeit, Emotionen in ihren Werken zu vermitteln, zeugt von ihrer künstlerischen Sensibilität und ihrer Fähigkeit, eine tiefere Ebene der Kommunikation mit ihrem Publikum zu erreichen.
-
-Narrative Elemente: In ihrer Kunst integriert Klöckner oft narrative Elemente, die Geschichten erzählen oder eine tiefere Bedeutung hervorheben. Diese erzählerischen Aspekte tragen dazu bei, dass ihre Werke komplexer und aussagekräftiger werden. Die Verwendung von Symbolen wie Schleifen, Tischen und Haken in ihren Bildern gibt den Betrachtern einen zusätzlichen Anreiz, die Bedeutung hinter den Kunstwerken zu erkunden und sich mit den dargestellten Themen auseinanderzusetzen.
-
-Künstlerische Ambition und Botschaft: Kirsten Klöckner zeigt durch ihre Kunst eine klare Botschaft und Ambition. Ihre Werke sind nicht nur ästhetisch ansprechend, sondern dienen auch als Medium, um ihre persönlichen Überzeugungen und Gedanken zu verschiedenen Themen auszudrücken. Sie fordert die Betrachter dazu auf, über gesellschaftliche Fragen, Naturverbundenheit und das menschliche Dasein nachzudenken. Ihre Kunst regt Diskussionen und Reflexionen an und zeigt, dass sie als Künstlerin eine Botschafterin für verschiedenste Anliegen ist.
-
-Dies die Vorgehensweise bei der Entwicklung eines Bildes von Kirsten Klöckner.
-Wenn sie einen Titel bekommen hat und dazu ein Bild malen sollte, hat sie so gearbeitet. Bitte generiere einen Englischen Prompt für eine Bild KI basierend auf den gennanten Aspekten. 
-
-Hier findest du Beispiele, wie der Promt aussehen soll: 
-
-"Portrait of an astronaut in space, detailed starry background, reflective helmet."
-“Painting of a floating island with giant clock gears, populated with mythical creatures.”
-“Landscape 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.”
-“Painting of a modern smartphone with classic art pieces appearing on the screen.”
-“Battle scene with futuristic robots and a golden palace in the background.”
-“Painting of a bustling city market with different perspectives of people and stalls.”
-“Painting of a ship sailing in a stormy sea, with dramatic lighting and powerful waves.”
-“Painting of a female botanist surrounded by exotic plants in a greenhouse.”
-“Painting of an ancient castle at night, with a full moon, gargoyles, and shadows.”
-
-Bitte nutze für den Prompt maximal 20 Wörter und achte darauf, dass der Prompt auf englisch ist.
-
-Den Titel für den zu erstellenden Promt ist: 

KiKunstDatenbank/KiKunstDatenbank.refactorlog

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Operations Version="1.0" xmlns="http://schemas.microsoft.com/sqlserver/dac/Serialization/2012/02">
+  <Operation Name="Rename Refactor" Key="c957123b-8f1b-4753-96eb-c2ea2811027a" ChangeDateTime="10/10/2023 12:47:37">
+    <Property Name="ElementName" Value="[dbo].[BildInfo].[Prompt]" />
+    <Property Name="ElementType" Value="SqlSimpleColumn" />
+    <Property Name="ParentElementName" Value="[dbo].[BildInfo]" />
+    <Property Name="ParentElementType" Value="SqlTable" />
+    <Property Name="NewName" Value="BildPrompt" />
+  </Operation>
+  <Operation Name="Rename Refactor" Key="9e69babc-e66c-496f-960a-0c9ad936d763" ChangeDateTime="10/10/2023 12:47:42">
+    <Property Name="ElementName" Value="[dbo].[BildInfo].[Beschreibung]" />
+    <Property Name="ElementType" Value="SqlSimpleColumn" />
+    <Property Name="ParentElementName" Value="[dbo].[BildInfo]" />
+    <Property Name="ParentElementType" Value="SqlTable" />
+    <Property Name="NewName" Value="BildBeschreibung" />
+  </Operation>
+  <Operation Name="Rename Refactor" Key="1dc11132-1619-4a0d-b261-0d56392a3d51" ChangeDateTime="10/10/2023 13:39:00">
+    <Property Name="ElementName" Value="[dbo].[BildInfo].[Index]" />
+    <Property Name="ElementType" Value="SqlSimpleColumn" />
+    <Property Name="ParentElementName" Value="[dbo].[BildInfo]" />
+    <Property Name="ParentElementType" Value="SqlTable" />
+    <Property Name="NewName" Value="GroupIndex" />
+  </Operation>
+  <Operation Name="Rename Refactor" Key="bedfe6e4-86b6-478d-b086-eb3be65f475f" ChangeDateTime="10/14/2023 11:45:03">
+    <Property Name="ElementName" Value="[dbo].[BildPrompts].[Id]" />
+    <Property Name="ElementType" Value="SqlSimpleColumn" />
+    <Property Name="ParentElementName" Value="[dbo].[BildPrompts]" />
+    <Property Name="ParentElementType" Value="SqlTable" />
+    <Property Name="NewName" Value="BildId" />
+  </Operation>
+</Operations>

KiKunstDatenbank/KiKunstDatenbank.sqlproj

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
+    <Name>KiKunstDatenbank</Name>
+    <SchemaVersion>2.0</SchemaVersion>
+    <ProjectVersion>4.1</ProjectVersion>
+    <ProjectGuid>{a19cd19a-fe5b-4d4e-896b-dcc43b45f734}</ProjectGuid>
+    <DSP>Microsoft.Data.Tools.Schema.Sql.Sql150DatabaseSchemaProvider</DSP>
+    <OutputType>Database</OutputType>
+    <RootPath>
+    </RootPath>
+    <RootNamespace>KiKunstDatenbank</RootNamespace>
+    <AssemblyName>KiKunstDatenbank</AssemblyName>
+    <ModelCollation>1033, CI</ModelCollation>
+    <DefaultFileStructure>BySchemaAndSchemaType</DefaultFileStructure>
+    <DeployToDatabase>True</DeployToDatabase>
+    <TargetFrameworkVersion>v4.7.2</TargetFrameworkVersion>
+    <TargetLanguage>CS</TargetLanguage>
+    <AppDesignerFolder>Properties</AppDesignerFolder>
+    <SqlServerVerification>False</SqlServerVerification>
+    <IncludeCompositeObjects>True</IncludeCompositeObjects>
+    <TargetDatabaseSet>True</TargetDatabaseSet>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+    <OutputPath>bin\Release\</OutputPath>
+    <BuildScriptName>$(MSBuildProjectName).sql</BuildScriptName>
+    <TreatWarningsAsErrors>False</TreatWarningsAsErrors>
+    <DebugType>pdbonly</DebugType>
+    <Optimize>true</Optimize>
+    <DefineDebug>false</DefineDebug>
+    <DefineTrace>true</DefineTrace>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <OutputPath>bin\Debug\</OutputPath>
+    <BuildScriptName>$(MSBuildProjectName).sql</BuildScriptName>
+    <TreatWarningsAsErrors>false</TreatWarningsAsErrors>
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <Optimize>false</Optimize>
+    <DefineDebug>true</DefineDebug>
+    <DefineTrace>true</DefineTrace>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup>
+    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">11.0</VisualStudioVersion>
+    <!-- Default to the v11.0 targets path if the targets file for the current VS version is not found -->
+    <SSDTExists Condition="Exists('$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\SSDT\Microsoft.Data.Tools.Schema.SqlTasks.targets')">True</SSDTExists>
+    <VisualStudioVersion Condition="'$(SSDTExists)' == ''">11.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Condition="'$(SQLDBExtensionsRefPath)' != ''" Project="$(SQLDBExtensionsRefPath)\Microsoft.Data.Tools.Schema.SqlTasks.targets" />
+  <Import Condition="'$(SQLDBExtensionsRefPath)' == ''" Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\SSDT\Microsoft.Data.Tools.Schema.SqlTasks.targets" />
+  <ItemGroup>
+    <Folder Include="Properties" />
+    <Folder Include="dpo" />
+    <Folder Include="dpo\Tables" />
+    <Folder Include="dpo\StoredProcedures" />
+  </ItemGroup>
+  <ItemGroup>
+    <Build Include="dpo\Tables\BildInfo.sql" />
+    <Build Include="dpo\StoredProcedures\spBildInfo_Insert.sql" />
+    <Build Include="dpo\Tables\WunschInfo.sql" />
+    <Build Include="dpo\StoredProcedures\spWunschInfo_Insert.sql" />
+    <Build Include="dpo\StoredProcedures\spBildInfo_UpdateFileName.sql" />
+    <Build Include="dpo\StoredProcedures\spBildInfo_GetAll.sql" />
+    <Build Include="dpo\StoredProcedures\spWunschInfo_Get.sql" />
+  </ItemGroup>
+  <ItemGroup>
+    <RefactorLog Include="KiKunstDatenbank.refactorlog" />
+  </ItemGroup>
+  <ItemGroup>
+    <PostDeploy Include="Script.PostDeployment.sql" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="KiKunstDatenbank.publish.xml" />
+  </ItemGroup>
+</Project>

KiKunstDatenbank/Script.PostDeployment.sql

@@ -0,0 +1,19 @@
+/*
+Vorlage für ein Skript nach der Bereitstellung							
+--------------------------------------------------------------------------------------
+ Diese Datei enthält SQL-Anweisungen, die an das Buildskript angefügt werden.		
+ Schließen Sie mit der SQLCMD-Syntax eine Datei in das Skript nach der Bereitstellung ein.			
+ Beispiel:   :r .\myfile.sql								
+ Verwenden Sie die SQLCMD-Syntax, um auf eine Variable im Skript nach der Bereitstellung zu verweisen.		
+ Beispiel:   :setvar TableName MyTable							
+               SELECT * FROM [$(TableName)]					
+--------------------------------------------------------------------------------------
+*/
+--IF NOT EXISTS (SELECT 1 FROM [dbo].[User])
+--BEGIN
+--	INSERT INTO [dbo].[User] (FirstName, LastName)
+--	VALUES ('Simon', 'Lübeß'),
+--	('Peter', 'Enis'),
+--	('John', 'Smith'),
+--	('Mary', 'Jones')
+--END

KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_GetAll.sql

@@ -0,0 +1,7 @@
+CREATE PROCEDURE [dbo].[spBildInfo_GetAll]
+AS
+BEGIN
+    -- TODO: Den Prompt brauchen wir im UI eigentlich nie, wir könnten ihn in eine extra Tabell auslagern, oder einfach nicht rausrücken
+    SELECT Id, Datum, Dateiname, ImageModel, WunschId, Prompt
+    FROM [dbo].[BildInfo];
+END

KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql

@@ -0,0 +1,18 @@
+CREATE PROCEDURE [dbo].[spBildInfo_Insert]
+    @Id INT,
+    @Datum DATETIME2, 
+    @Dateiname NVARCHAR(256), 
+    @ImageModel NVARCHAR(32), 
+    @WunschId INT,
+    @Prompt NVARCHAR(MAX)
+AS
+BEGIN
+    INSERT INTO [dbo].[BildInfo] (Datum, Dateiname, ImageModel, WunschId, Prompt)
+	VALUES (@Datum,
+            @Dateiname,            
+            @ImageModel,
+            @WunschId,
+            @Prompt);
+            
+    SELECT Id FROM [dbo].[BildInfo] WHERE Id = CAST(SCOPE_IDENTITY() AS INT);
+END

KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_UpdateFileName.sql

@@ -0,0 +1,9 @@
+CREATE PROCEDURE [dbo].[spBildInfo_UpdateFileName]
+    @Id INT,
+    @Dateiname NCHAR(256)
+AS
+BEGIN
+    UPDATE [dbo].[BildInfo]
+	SET Dateiname = @Dateiname
+	WHERE Id = @Id;
+END