redesign vom bilder generieren

- Menü: Fixed typo in Gallerie
- Datenbanken-Funktionen dokumentiert

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 AddBildInfoAsync(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,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Dapper" Version="2.1.4" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="7.0.0" />
+    <PackageReference Include="System.Data.SqlClient" Version="4.8.5" />
+  </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,10 @@
+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; }
+}

DataAccess/Models/WunschInfoModel.cs

@@ -0,0 +1,11 @@
+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; }
+}

KIKunstKirstenKlöckner.sln

@@ -5,6 +5,10 @@ VisualStudioVersion = 17.6.33829.357
 MinimumVisualStudioVersion = 10.0.40219.1
 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("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -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/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,6 @@
+namespace KIKunstKirstenKlöckner.Data;
+
+public class ChatGPT
+{
+
+}

KIKunstKirstenKlöckner/Data/ImageGenerator.cs

@@ -0,0 +1,105 @@
+using DataAccess.Data;
+using DataAccess.Models;
+using Radzen;
+using System.Diagnostics;
+
+namespace KIKunstKirstenKlöckner.Data;
+
+public class ImageGenerator
+{
+    private readonly HttpClient _client = new();
+    private readonly BildInfoData _bildInfoData;
+
+    public ImageGenerator(IConfiguration config, BildInfoData bildInfoData)
+    {
+        _bildInfoData = bildInfoData;
+
+        string? inferenceApiKey = config.GetValue<string>("API:HF_Inference");
+
+        _client.DefaultRequestHeaders.Clear();
+        _client.DefaultRequestHeaders.Add("Authorization", $"Bearer {inferenceApiKey}");
+    }
+    
+    /// <summary>
+    /// Geneiert das Bild für den aktuellen <see cref="_imagePrompt"/>
+    /// </summary>
+    public async Task<string?> GenerateImageAsync(string prompt, string negativePromt, int? width, int? height, WunschInfoModel wunschInfo, bool isRetry = false)
+    {
+        var postData = new
+        {
+            inputs = prompt,
+            parameters = new 
+            {
+                negative_prompt = negativePromt, //"photorealistic, highly detailed, 8K, portrait",
+                width = width,
+                height = height
+            },
+            options = new
+            {
+                // Cache deaktivieren, damit Huggingface für den selben Prompt unterschiedliche Ergebnisse liefert
+                use_cache = false,
+                // Erst wenn wir bereits in einem retry sind warten wir implizit auf das Model. (ignoriert quasi 503-Fehler)
+                wait_for_model = true
+            }
+        };
+
+        JsonContent content = JsonContent.Create(postData);
+
+        try
+        {
+            //const string modelName = "Nacken/kkkk-sdxl-5000";
+            const string modelName = "Nacken/kkk-sdxl-18000";
+
+            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();
+
+                using Image image = await Image.LoadAsync(imageStream);
+
+                DateTime imageDate = DateTime.Now;
+                
+                BildInfoModel bildInfo = new()
+                {
+                    Dateiname = "PlaceHolder",
+                    Datum = imageDate,
+                    ImageModel = modelName,
+                    WunschId = wunschInfo.Id
+                };
+                
+                await _bildInfoData.AddBildInfoAsync(bildInfo);
+
+                string imgUrl = $"generated_images/Image_{bildInfo.Id}.jpg";
+
+                string mapPath = $"./wwwroot/{imgUrl}";
+                await image.SaveAsJpegAsync(mapPath);
+
+                bildInfo.Dateiname = imgUrl;
+                await _bildInfoData.UpdateBildInfoDateinameAsync(bildInfo);
+
+                return imgUrl;
+            }
+            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;
+        }
+    }
+}

KIKunstKirstenKlöckner/KIKunstKirstenKlöckner.csproj

@@ -20,4 +20,8 @@
     <PackageReference Include="SixLabors.ImageSharp" Version="3.0.1" />
   </ItemGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\DataAccess\DataAccess.csproj" />
+  </ItemGroup>
+
 </Project>

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -3,61 +3,85 @@
 @using OpenAI_API
 @using OpenAI_API.Chat
 @using OpenAI_API.Models
-@using System.Diagnostics
+@using DataAccess.Data
+@using DataAccess.Models
+@using KIKunstKirstenKlöckner.Data
 
 @inject IConfiguration Config
 @inject TooltipService TooltipService
+@inject NotificationService NotificationService
 @inject DialogService DialogService
 
+@* @inject AiArtPageData AiArtData; *@
+@inject WunschInfoData WunschInfoData;
+@inject ImageGenerator ImageGenerator;
+
 <PageTitle>AiArt</PageTitle>
 
-<section class="about_section layout_padding">
-<div class="container">
+<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+    <div class="container">
 
-    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
-        <h1>Wunschbilder von KI nur für dich</h1>
-        <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
-        <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
+    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Style="min-height:800px">
 
-        <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
-            <ChildContent>
-                <RadzenCard class="rz-mt-4">
-                    <RadzenStack Orientation="Orientation.Horizontal"
-                                 MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                                 MouseLeave="TooltipService.Close"
-                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                        <RadzenText>Temperature:</RadzenText>
-                        <RadzenSlider @bind-Value=@temperature TValue="float"
-                                      Step="0.1" Min="0.0m" Max="2.0m">
-                        </RadzenSlider>
-                        <RadzenText>@temperature</RadzenText>
-                    </RadzenStack>
+        <RadzenText TextStyle="TextStyle.H2">Dein Wunsch:</RadzenText>
+
+
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
+                <RadzenTextBox @bind-Value=@request Placeholder="..." />
+                <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImages(true))>Generieren</RadzenButton>
+        </RadzenStack>
+        
+        
+
+        <!--
+                <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
+                <ChildContent>
+                    <RadzenCard class="rz-mt-4">
+                        <RadzenStack Orientation="Orientation.Horizontal"
+                                     MouseEnter="@(args => ShowTemperatureTooltip(args))"
+                                     MouseLeave="TooltipService.Close"
+                                     AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                            <RadzenText>Temperature:</RadzenText>
+                            <RadzenSlider @bind-Value=@_temperature TValue="float"
+                                          Step="0.1" Min="0.0m" Max="2.0m">
+                            </RadzenSlider>
+                            <RadzenText>@_temperature</RadzenText>
+                        </RadzenStack>
+                        <RadzenStack Orientation="Orientation.Horizontal"
+                                        AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                            <RadzenText>Resolution:</RadzenText>
+                            <RadzenStack Orientation="Orientation.Horizontal">
+                            <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@width />
+                            x
+                            <RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@height />
+                            </RadzenStack>
+                        </RadzenStack>
+                        <RadzenStack Orientation="Orientation.Horizontal"
+                                     AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                            <RadzenCheckBox @bind-Value=@_useGpt4>
+                                Verwende Gibbidy 4
+                            </RadzenCheckBox>
+                        </RadzenStack>
+                    </RadzenCard>
+                </ChildContent>
+            </RadzenPanel>
+        -->
+
+
+
+
+        <RadzenStack Orientation="Orientation.Vertical" Visible=@_promptVisible>
+                <RadzenCard class="rz-mt-4" Style="max-width: 500px">
+                    <RadzenText>@_imagePrompt</RadzenText>
                 </RadzenCard>
-            </ChildContent>
-        </RadzenPanel>
 
-        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await DoStuff(true))>Generate</RadzenButton>
+                <RadzenText TextStyle="TextStyle.H4">Interpretation deines Wunsches:</RadzenText>
 
-        <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
-            <ChildContent>
-                <RadzenCard class="rz-mt-4">
-                    <RadzenStack Orientation="Orientation.Horizontal"
-                                 MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                                 MouseLeave="TooltipService.Close"
-                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                        <RadzenText>@_imagePromptEnglish</RadzenText>
-                    </RadzenStack>
+                <RadzenCard class="rz-mt-4" Style="width: 800px;">
+                    <RadzenText>@_imageIdea</RadzenText>
                 </RadzenCard>
-            </ChildContent>
-        </RadzenPanel>
-
-        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
-
-    
-
-        <RadzenCard class="rz-mt-4" Style="width: 800px;">
-            <RadzenText>@_imageDescription</RadzenText>
-        </RadzenCard>
+        </RadzenStack>
+        
     
     
     
@@ -69,9 +93,9 @@
 
         <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
         <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
-        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await DoStuff(false))>Generate</RadzenButton>
+        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await GenerateImages(false))>Generate</RadzenButton>
 
-        <RadzenCard>
+        <RadzenCard Visible="@_promptVisible">
             <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
                 <RadzenColumn Size="6">
                     <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" 
@@ -101,13 +125,18 @@
 </section>
 
 @code {
+    /// <summary>
+    /// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
+    /// </summary>
+    private bool _useGpt4;
+
     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 _promptVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
@@ -116,74 +145,40 @@
 
     enum ImageState
     {
-        //Hide = 0,
         FadeOut,
-        FadeIn,
-        //Show,
-    }
-
-    // Busy dialog from markup
-    async Task ShowBusyDialog()
-    {
-        await DialogService.OpenAsync("", ds =>
-            @<RadzenStack AlignItems="AlignItems.Center" Gap="2rem" Class="rz-p-12">
-                <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 });
+        FadeIn
     }
 
     async Task ShowImageDialog(string imageUrl)
     {
         var result = await DialogService.OpenAsync("", ds =>
-            @<div class="d-flex justify-content-center align-items-center" style="height:100%;">
-                <RadzenImage Path="@imageUrl"/>
+            @<div>
+            <RadzenImage Style="object-fit: contain; width: 100%; height:100%;" Path="@imageUrl"/>
             </div>, new DialogOptions() { CloseDialogOnOverlayClick = true });
     }
 
-    // Busy dialog from string
-    async Task BusyDialog(string message)
-    {
-        await DialogService.OpenAsync("", ds =>
-        {
-            RenderFragment content = b =>
-            {
-                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 />
-            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.
+            Gibt an, wie <em>kreativ</em> ChatGPT sein soll.<br/>
         </div>
     ,
         new() { Position = TooltipPosition.Bottom, Duration = null});
 
-    private string _imagePromptEnglish = "";
-    private string _imageDescription = "";
+    private string _imageIdea = "";
     private string _imagePrompt = "";
 
-    private float temperature = 0.9f; 
+    private float _temperature = 0.9f; 
+    private int? width = 1024; 
+    private int? height = 1024; 
     private string request = "";
     private string addons = "";
     private OpenAIAPI _openAiApi;
-    private Conversation converse;
+    private Conversation? _conversation;
 
     private string _basePrompt;
+    private string _ideaPrompt;
 
     private string _imageUrl;
 
@@ -192,262 +187,165 @@
     //    _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)
     {
         BusyMessage = newMessage;
         await InvokeAsync(StateHasChanged);
     }
 
-    private readonly HttpClient _client = new();
-
-    private string _inferenceApiKey = "";
     private string _openAiApiKey = "";
 
-    protected override Task OnInitializedAsync()
+    protected override async Task OnInitializedAsync()
     {
-        _inferenceApiKey = Config.GetValue<string>("API:HF_Inference");
         _openAiApiKey = Config.GetValue<string>("API:OpenAI");
 
         _openAiApi = new OpenAIAPI(_openAiApiKey);
 
-        var inferenceModelUrl = "https://api-inference.huggingface.co/models/Nacken/ki-kunst-kirsten-kloeckner-colab";
-        
-        //_client.BaseAddress = new Uri(inferenceModelUrl);
-
-        _client.DefaultRequestHeaders.Clear();
-        _client.DefaultRequestHeaders.Add("Authorization", $"Bearer {_inferenceApiKey}");
-
-        return base.OnInitializedAsync();
+        await base.OnInitializedAsync();
     }
 
-    /// <summary>
-    /// Geneiert das Bild für den aktuellen <see cref="_imagePrompt"/>
-    /// </summary>
-    public async Task GenerateImageAsync()
-    {
-        var postData = new
-        {
-            inputs = _imagePrompt
-        };
-
-        JsonContent content = JsonContent.Create(postData);
-
-        async Task FailedToDrawImage()
-        {
-            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)
-                await GenerateImageAsync();
-        }
-
-        try
-        {
-            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>
-    /// Geneiert das Bild für den aktuellen <see cref="_imagePrompt"/>
-    /// </summary>
-    public async Task<string?> GenerateImageAsync(string prompt, bool isRetry = false)
-    {
-        var postData = new
-        {
-            inputs = prompt,
-            options = new
-            {
-                // Cache deaktivieren, damit Huggingface für den selben Prompt unterschiedliche Ergebnisse liefert
-                use_cache = false,
-                // Erst wenn wir bereits in einem retry sind warten wir implizit auf das Model. (ignoriert quasi 503-Fehler)
-                wait_for_model = true
-            }
-        };
-
-        JsonContent content = JsonContent.Create(postData);
-
-        async Task<string?> FailedToDrawImage()
-        {
-            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)
-            {
-                return await GenerateImageAsync(prompt, true);
-            }
-
-            return null;
-        }
-
-        try
-        {
-            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_fffffff}.jpg";
-
-                string mapPath = $"./wwwroot/{imgUrl}";
-                await image.SaveAsJpegAsync(mapPath);
-
-                // Hier speichern wir die Daten in die 'info_texts.txt'-Datei
-                string infoTextsPath = Path.Combine(_environment.WebRootPath, "generated_images", "info_texts.txt");
-                string desc = _imageDescription.Replace("\r\n", "").Replace("\n", "").Replace("\r", "");
-                string newLine = $"{imgUrl}: {request}, {desc}\n";
-                await File.AppendAllTextAsync(infoTextsPath, newLine);
-
-                return imgUrl;
-            }
-            else
-            {
-                Console.WriteLine($"Image conversion failed: {response}");
-
-                if (Debugger.IsAttached)
-                    Debugger.Break();
-
-                return await FailedToDrawImage();
-            }
-        }
-        catch (Exception exception)
-        {
-            Console.WriteLine($"Image request failed: {exception}");
-
-            if (Debugger.IsAttached)
-                Debugger.Break();
-
-            return await FailedToDrawImage();
-        }
-
-        return null;
-    }
-
-    private async Task DoStuff(bool newPic)
+    private void ClearOldGeneration()
     {
+        // Bilder verbergen
         for (int i = 0; i < 4; i++)
             _imageStates[i] = ImageState.FadeOut;
 
+        _imageIdea = "";
+        _imagePrompt = "";
+    }
+
+    private async Task RequestImageIdeaAsync()
+    {
+        string ideaBasePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/idea_prompt.txt"}");
+
+        string requestImagePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"/wwwroot/test_prompt2.txt"}");
+
+        ChatRequest chatRequest = new ChatRequest
+        {
+            Temperature = _temperature,
+            Model = _useGpt4 ? Model.GPT4 : Model.ChatGPTTurbo
+        };
+
+        _conversation = _openAiApi.Chat.CreateConversation(chatRequest);
+
+        // Wunsch an GPT senden und Bild Idee anfordern
+        _conversation.AppendUserInput(ideaBasePrompt + " " + request);
+        _imageIdea = await _conversation.GetResponseFromChatbotAsync();
+
+        // Bild Promt anfordern
+        _conversation.AppendUserInput(requestImagePrompt);
+        _imagePrompt = await _conversation.GetResponseFromChatbotAsync();
+    }
+
+    /// <summary>
+    /// Generiert Bilder oder aktualisiert sie mit dem neuen Prompt.
+    /// </summary>
+    /// <param name="generateNewImage">Wenn <see langword="true"/>, werden neue Bilder generiert; sonst wird die vorhandene Idee bearbeitet.</param>
+    private async Task GenerateImages(bool generateNewImage)
+    {
         // Der Dialog blokiert so lange, wie der er offen ist, deshalb dürfen wir hier nicht warten, da wir sonst nie mit der Arbeit anfangen...
         //Task busyDialog = ShowBusyDialog();
         _progressVisible = true;
         _buttonVisible = false;
 
-        if (converse == null || newPic)
+        if (_conversation == null || generateNewImage)
         {
+            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
-                {
-                    Temperature = temperature,
-                    Model = Model.ChatGPTTurbo,
-                };
-
-            converse = _openAiApi.Chat.CreateConversation(chatRequest);
-            converse.AppendUserInput(_basePrompt + " " + request);
+            await RequestImageIdeaAsync();
         }
         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.";
+            throw new NotImplementedException("Verändern von Idees ist nicht implementiert");
+            // if (amountOfAddons > 0)
+            // {
+            //     amountOfAddons--;
+            //     _bothVisible = _buttonVisible && _addonsVisible;
+            //     await UpdateBusyMessage("Kirstens Assistent passt das Bild an deine Wünsche an...");
+            //     string addonsPrompt1 = "Erstelle einen neuen Prompt auf englisch mit den gleichen Restriktionen auf Basis des Alten mit folgender Anpassung: ";
+            //     string addonsPrompt2 = ". Denke daran nur den Prompt zu generieren und noch keine Beschreibung oder ähnliches.";
 
-                converse.AppendUserInput(addonsPrompt1 + addons + addonsPrompt2);
+            //     _conversation.AppendUserInput(addonsPrompt1 + addons + addonsPrompt2);
+            // }
+        }
+
+        _imagePrompt = "kkkk " + _imagePrompt + " kkkk Watercolor + ink on paper, Pen drawing, wet-on-wet technique, dry-on-dry technique, dabbing technique. ";
+
+        await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
+
+        WunschInfoModel wunschInfo = new()
+        {
+            BildBeschreibung = _imageIdea,
+            BildPrompt = _imagePrompt,
+            Datum = DateTime.Now,
+            GPTModel = _conversation.Model,
+            Wunsch = request
+        };
+
+        try
+        {
+            await WunschInfoData.AddWunschInfoAsync(wunschInfo);
+        }
+        catch (Exception e)
+        {
+            NotificationService.Notify(new NotificationMessage()
+            {
+                Summary = "Es ist ein Fehler aufgetreten, bitte versuche es erneut."
+            });
+
+            return;
+        }
+
+        int generatedImages = 0;
+
+        try
+        {
+            // Vier Bilder generieren
+            for (int i = 0; i < 4; i++)
+            {
+                _imageUrls[i] = await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);
+
+                // Kein Bild -> Fehler
+                if (_imageUrls[i] == null)
+                {
+                    bool? retry = await DialogService.Confirm(
+                        "Leider konnte das Bild nicht gemalt werden. Möchtest du es noch eimal versuchen?", 
+                        "Ups, ein Fehler ist aufgetreten...",
+                       new ConfirmOptions { OkButtonText = "Ja", CancelButtonText = "Nein" });
+
+                    if (retry == true)
+                    {
+                        await ImageGenerator.GenerateImageAsync(_imagePrompt, "", width, height, wunschInfo);
+                    }
+                }
+
+                generatedImages++;
+
+                _imageStates[i] = ImageState.FadeIn;
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+        catch (Exception e)
+        {
+            NotificationService.Notify(new NotificationMessage()
+                {
+                    Summary = "Es ist ein Fehler beim Erzeugen der Bilder aufgetreten, bitte versuche es erneut."
+                });
+
+            if (generatedImages == 0)
+            {
+                // TODO: Delete WunschInfo
             }
         }
 
-        _imagePromptEnglish = await converse.GetResponseFromChatbotAsync();
-        _imagePrompt = _imagePromptEnglish;
-        _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...");
-        
-        // Vier Bilder generieren
-        for (int i = 0; i < 4; i++)
-        {
-            _imageUrls[i] = await GenerateImageAsync(_imagePrompt);
-            _imageStates[i] = ImageState.FadeIn;
-            await InvokeAsync(StateHasChanged);
-        }
-        
         _progressVisible = false;
         _buttonVisible = true;
+        _promptVisible = true;
         if (amountOfAddons > 0)
         {
             _addonsVisible = true;
@@ -460,17 +358,5 @@
             _bothVisible = false;
         }
     }
-
-    private void NavigateToGallery()
-    {
-        NavigationManager.NavigateTo("/gallery");
-    }
-
-    [Inject]
-    private NavigationManager NavigationManager { get; set; }
-
-    [Inject]
-    private IWebHostEnvironment _environment { get; set; }
-
 }
 

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -1,150 +1,70 @@
 @page "/gallery"
 
+@using DataAccess.Data
+@using DataAccess.Models
+
+@inject DialogService DialogService;
+@inject BildInfoData BildInfoData;
+@inject WunschInfoData WunschInfoData;
+
 <style>
-    .image-grid {
-        background-color: white; /* Hintergrund der RadzenDataList weiß machen */
+    .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;
     }
 
-    .rz-data-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .image-grid-item {
-        margin: 5px;
-    }
-
-    .image-popup {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
-        z-index: 9999;
-    }
-
-    .image-popup-content {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        max-width: 800px;
-        max-height: 400px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        padding: 20px;
-        border-radius: 5px;
-        background-color: white; /* Weißer Hintergrund für den Inhalt */
-    }
-
-    .image-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .close-button {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-end;
+    /* Style, der angewendet wird, wenn über small-image gehovert wird. */
+    .small-image:hover {
+        transform: scale(1.1, 1.1);
+        z-index: 100;
     }
 </style>
 
-<div>
-    <RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
-        <Template Context="imagePath">
-            <div class="image-grid-item">
-                <RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
-                    <RadzenButton Click="@(args => ShowImageInfo(imagePath))">
-                        <RadzenImage Src="@imagePath" Style="width: 100%; height: 100%; object-fit: cover;" />
-                    </RadzenButton>
-                </RadzenCard>
-            </div>
-        </Template>
-    </RadzenDataList>
-
-    <div class="image-popup" style="@popupStyle">
-        <div class="image-popup-content">
-            <div class="image-info">
-                <RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
-                <p>@infoText</p>
-            </div>
-            <div class="close-button">
-                <RadzenButton Text="Close" Click="CloseImageInfo" />
-            </div>
-        </div>
-    </div>
-</div>
+<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<string> imagePaths = new List<string>();
-    string selectedImage;
-    string infoText = "Info Text";
-    string popupStyle = "display: none;";
+    IEnumerable<BildInfoModel>? _bildInfos;
 
     protected override async Task OnInitializedAsync()
     {
+        _bildInfos = await BildInfoData.GetAllBildInfosAsync();
+
         await base.OnInitializedAsync();
-
-        // Get the physical path to the folder
-        string folderPath = Path.Combine(_environment.WebRootPath, "generated_images");
-
-        if (Directory.Exists(folderPath))
-        {
-            // Load the image file names from the folder
-            var imageFiles = Directory.GetFiles(folderPath, "*.jpg");
-
-            // Get the relative paths to the images
-            imagePaths = imageFiles.Select(file => file.Replace(_environment.WebRootPath, "").Replace("\\", "/")).ToList();
-        }
     }
-
-    private async void ShowImageInfo(string imagePath)
+    
+    async Task ShowImageDialog(BildInfoModel bildInfo)
     {
-        selectedImage = imagePath;
-        popupStyle = "display: block;";
-        infoText = await GetInfoTextForImageAsync(imagePath);
-    }
+        WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
 
+        List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
 
-    private async Task<string> GetInfoTextForImageAsync(string imagePath)
-    {
-        // Bestimme den Ordnerpfad, in dem sich die Bilder und die info_texts.txt Datei befinden
-        string folderPath = Path.Combine(_environment.WebRootPath, "generated_images");
-
-        // Bestimme den Pfad zur info_texts.txt Datei
-        string infoTextsFilePath = Path.Combine(folderPath, "info_texts.txt");
-
-        // Überprüfe, ob die Datei existiert
-        if (!File.Exists(infoTextsFilePath))
-            return $"Kein Infotext für {imagePath} gefunden.";
-
-        // Lies alle Zeilen der Datei
-        var lines = await File.ReadAllLinesAsync(infoTextsFilePath);
-        string adaptedImagePath = imagePath.Substring(1) + ":";
-
-        // Durchsuche jede Zeile nach dem gegebenen imagePath
-        foreach (var line in lines)
-        {
-            if (line.StartsWith(adaptedImagePath))  // Überprüft, ob die Zeile mit dem Dateinamen des Bildes beginnt
-            {
-                // Trenne den Dateinamen und den Infotext und gib den Infotext zurück
-                return line.Split(new[] { ':' }, 2).LastOrDefault()?.Trim();
-            }
-        }
-
-        return $"Kein Infotext für {imagePath} gefunden.";
-    }
-
-    private void CloseImageInfo()
-    {
-        popupStyle = "display: none;";
+        var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
+            @<div>
+                <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
+                    <RadzenStack Orientation="Orientation.Horizontal">
+                        <RadzenStack Orientation="Orientation.Vertical">
+                            <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
+                        </RadzenStack>
+                        <RadzenText Text="@wunschInfo.BildBeschreibung"/>
+                    </RadzenStack>
+                    @foreach (var bild in bilderVomWunsch)
+                    {
+                        <RadzenImage class="small-image" Path="@bild.Dateiname" 
+                                     Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
+                    }
+                </RadzenStack>
+            </div>, 
+            new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
     }
 
     [Inject]

KIKunstKirstenKlöckner/Pages/Home.razor

@@ -6,7 +6,7 @@
   <div class="hero_area">
 
     <!-- slider section -->
-    <section class=" slider_section ">
+    <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
       <div class="container">
         <div class="row">
           <div class="col-md-6 ">
@@ -31,7 +31,7 @@
                   <div class="carousel-inner">
                     <div class="carousel-item active">
                       <div class="img-box">
-                        <img src="images/slider-img1.jpg" alt="">
+                        <img src="images/keks.jpg" alt="">
                       </div>
                     </div>
                     <div class="carousel-item">

KIKunstKirstenKlöckner/Pages/Projekt.razor

@@ -0,0 +1,137 @@
+@page "/projekt"
+
+
+
+<div class="hero_area">
+
+    <!-- slider section -->
+    <section class=" slider_section ">
+        <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">
+    <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">
+    <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 -->

KIKunstKirstenKlöckner/Pages/Wunschbilder.razor

@@ -5,7 +5,7 @@
 <div class="hero_area">
 
     <!-- slider section -->
-    <section class=" slider_section ">
+    <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten;">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 ">
@@ -20,38 +20,6 @@
 
                     </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>

KIKunstKirstenKlöckner/Program.cs

@@ -1,3 +1,6 @@
+using DataAccess.Data;
+using DataAccess.DbAccess;
+using KIKunstKirstenKl<EFBFBD>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

@@ -9,7 +9,7 @@
             <div class="container">
                 <nav class="navbar navbar-expand-lg custom_nav-container ">
                     <a class="navbar-brand" href="/">
-                        <img src="images/robot_painting.jpg" alt="">
+                        <img src="images/robot_painting_small.jpg" alt="">
                         <span>
                             KI-Wunschprogramm
                         </span>
@@ -24,19 +24,19 @@
                         <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">Home</span>
+                                    <span class="nav-link">Start</span>
                                 </NavLink>
                                 <NavLink class="nav-item" href="aiart" Match="NavLinkMatch.All">
-                                    <span class="nav-link">Bilder generieren</span>
+                                    <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">Über Kirsten Klöckner</span>
+                                    <span class="nav-link">Kirsten</span>
                                 </NavLink>
                                 <NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
-                                    <span class="nav-link">Galerier</span>
+                                    <span class="nav-link">Galerie</span>
                                 </NavLink>
                             </ul>
                         </div>
@@ -61,7 +61,7 @@
                             <a href="">
                                 <img src="images/location-white.png" alt="">
                                 <span>
-                                    Passages of Lorem Ipsum available
+                                    Kirsten Klöckners KI-Atelier
                                 </span>
                             </a>
                         </div>
@@ -69,7 +69,7 @@
                             <a href="">
                                 <img src="images/telephone-white.png" alt="">
                                 <span>
-                                    Call : +012334567890
+                                    +012334567890
                                 </span>
                             </a>
                         </div>
@@ -77,42 +77,32 @@
                             <a href="">
                                 <img src="images/envelope-white.png" alt="">
                                 <span>
-                                    demo@gmail.com
+                                    nackenbox@gmail.com
                                 </span>
                             </a>
                         </div>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-8 col-lg-9">
-                        <div class="info_form">
-                            <form action="">
-                                <input type="text" placeholder="Enter your email">
-                                <button>
-                                    subscribe
-                                </button>
-                            </form>
-                        </div>
-                    </div>
                     <div class="col-md-4 col-lg-3">
                         <div class="info_social">
                             <div>
-                                <a href="">
+                                <a href="https://www.facebook.com/kirsten.kloeckner">
                                     <img src="images/fb.png" alt="">
                                 </a>
                             </div>
                             <div>
-                                <a href="">
+                                <a href="https://twitter.com/kkbeutekunst">
                                     <img src="images/twitter.png" alt="">
                                 </a>
                             </div>
                             <div>
-                                <a href="">
+                                <a href="https://de.linkedin.com/in/kirsten-kl%C3%B6ckner-2a123393">
                                     <img src="images/linkedin.png" alt="">
                                 </a>
                             </div>
                             <div>
-                                <a href="">
+                                <a href="https://www.instagram.com/kirstenkloeckner/">
                                     <img src="images/instagram.png" alt="">
                                 </a>
                             </div>

KIKunstKirstenKlöckner/appsettings.Development.json

@@ -1,9 +1,12 @@
 {
-  "DetailedErrors": true,
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+    "DetailedErrors": true,
+    "Logging": {
+        "LogLevel": {
+            "Default": "Information",
+            "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

@@ -9,5 +9,8 @@
     "API": {
         "OpenAI": "<put OpenAI Key here>",
         "HF_Inference": "<put Hugging Face inference API Key here>"
+    },
+    "ConnectionStrings": {
+        "Default": "<put Connection String here>"
     }
 }

KIKunstKirstenKlöckner/wwwroot/css/style.css

@@ -134,7 +134,7 @@ a:focus {
 
 .navbar-brand img {
   margin-right: 5px;
-  width: 35px;
+  width: 150px;
 }
 
 .navbar-brand span {
@@ -216,6 +216,7 @@ a:focus {
   padding-bottom: 90px;
 }
 
+
 .slider_section .row {
   -webkit-box-align: center;
       -ms-flex-align: center;

KIKunstKirstenKlöckner/wwwroot/css/style.scss

@@ -153,19 +153,21 @@ a:focus {
 }
 
 .navbar-brand {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 
-  img {
-    margin-right: 5px;
-    width: 35px;
-  }
 
-  span {
-    font-size: 22px;
-    font-weight: 700;
-    color: $primary1;
-  }
+    img {
+        margin-right: 5px;
+        width: 70px;
+        height: 70px;
+    }
+
+    span {
+        font-size: 22px;
+        font-weight: 700;
+        color: $primary1;
+    }
 }
 
 .custom_nav-container {
@@ -230,91 +232,89 @@ a:focus {
 
 /* slider section */
 .slider_section {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  color: #3b3a3a;
-  padding-bottom: 90px;
-
-  .row {
+    flex: 1;
+    display: flex;
     align-items: center;
-  }
+    position: relative;
+    z-index: 2;
+    color: #3b3a3a;
+    padding-bottom: 90px;
 
-
-
-  .detail_box {
-    color: $black;
-
-    h1 {
-      text-transform: uppercase;
-      font-weight: bold;
+    .row {
+        align-items: center;
     }
 
-    p {
-      margin-top: 20px;
+    .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;
+        }
     }
 
-    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_container {
+        border: 7px solid #7b57b2;
+        border-radius: 100%;
+        overflow: hidden;
+
+        div#carouselExampleContarols {
+            width: 100%;
+            position: unset;
+        }
+
+        .img-box {
+
+            img {
+                width: 100%;
+            }
+        }
     }
 
-    .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-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);
-  }
+    .carousel-control-next {
+        background-image: url(../images/next.png);
+        background-color: $primary1;
+        transform: translate(-45px, 0);
+    }
 }
 
 // end slider section
 
+
 // service section
 
 .service_section {
@@ -509,6 +509,7 @@ a:focus {
     }
   }
 
+
   button {
     border: none;
     @include hero_btn($primary1, $white, 12px, 45px, 0px);

KIKunstKirstenKlöckner/wwwroot/idea_prompt.txt

@@ -0,0 +1,2 @@
+Gib mir eine kreative und wenn möglich tiefsinnige Idee, die nicht unbedingt mit Städten zu tun hat, für ein Kunstwerk.
+Der Titel 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. 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. Oftmals werden die Kernobjekte eines Werkes sehr detailliert dargestellt und etwas weniger abstrakt.
-
-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. Sie teilt die Titel ihrer Werke oft in einzelne Worte welche dann als jeweiliges Element Einzug in ihre Werke finden. (z.B. Schilderwald wird zu einem Bild aus Schildern in einem Wald).
-
-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: 

KIKunstKirstenKlöckner/wwwroot/test_prompt2.txt

@@ -1,16 +1,10 @@
-Du wirst gleich einen Titel f<>r ein Bild bekommen. Bitte versuch diesen Titel in eine Bildidee f<>r eine KI umzuwandeln. 
+Bitte generiere einen Englischen Prompt f<>r dieses Bild
 
-Hier sind Ideen, wie du den Titel umformen kannst: 
-
-"Interpretieren Sie den Titel tiefsinnig und mehrschichtig, finden Sie Symbole und tiefere Bedeutungen. Nutzen Sie pers<72>nliche oder gesellschaftliche Filter f<>r die Interpretation. Bringen Sie abstrakte Darstellungen, Symbole und Metaphern ein, die der Titel hervorruft. Bedenken Sie gesellschaftliche und kulturelle Themen sowie Themen wie Toleranz und Verantwortung. F<>gen Sie Humor und Ironie hinzu, hinterfragen Sie traditionelle Themen kritisch. Reflektieren Sie Ihre Emotionen und Gedanken, stellen Sie sicher, dass Ihr Kunstwerk eine Aussage trifft. Lassen Sie Interpretation und Assoziationen zu, erforschen Sie neue Kontexte, seien Sie offen f<>r <20>berraschungen und hinterfragen Sie das Gewohnte."
-
-Bitte generiere einen Englischen Prompt f<>r eine Bild KI basierend auf diesen vorherigen Herangehensweisen.
 Hier findest du Beispiele, wie der Promt aussehen soll: 
-"Portrait of an astronaut in space, detailed starry background, reflective helmet."
+"Painting of an astronaut in space, detailed starry background, reflective helmet."
 <EFBFBD>Painting of a floating island with giant clock gears, populated with mythical creatures.<2E>
-<EFBFBD>Landscape of a Japanese garden in autumn, with a bridge over a koi pond.<2E>
+<EFBFBD>Painting of a Japanese garden in autumn, with a bridge over a koi pond.<2E>
 <EFBFBD>Painting representing the sound of jazz music, using pale colors and erratic shapes.<2E>
-Bitte nutze unbedingt f<>r den Prompt maximal 20 W<>rter!
-Der Promt selber darf auf keinen Fall abstrakt sein, man muss durch den Promt ein genaues Bild vor Augen haben.
 
-Der Titel lautet: 
+Der Promt selber darf auf keinen Fall abstrakt sein, man muss durch den Promt ein genaues Bild vor Augen haben.
+Verwende dabei keine fotorealistischen Elemente, sondern Siloutten,Konturen und Formen. Es darf nicht zu viele Details enthalten.

KiKunstDatenbank/KiKunstDatenbank.refactorlog

@@ -0,0 +1,24 @@
+<?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>
+</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,6 @@
+CREATE PROCEDURE [dbo].[spBildInfo_GetAll]
+AS
+BEGIN
+    SELECT Id, Datum, Dateiname, ImageModel, WunschId
+    FROM [dbo].[BildInfo];
+END

KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql

@@ -0,0 +1,16 @@
+CREATE PROCEDURE [dbo].[spBildInfo_Insert]
+    @Id INT,
+    @Datum DATETIME2 , 
+    @Dateiname NCHAR(256) , 
+    @ImageModel NCHAR(32) , 
+    @WunschId INT 
+AS
+BEGIN
+    INSERT INTO [dbo].[BildInfo] (Datum, Dateiname, ImageModel, WunschId)
+	VALUES (@Datum,
+            @Dateiname,            
+            @ImageModel,
+            @WunschId);
+            
+    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

KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Get.sql

@@ -0,0 +1,8 @@
+CREATE PROCEDURE [dbo].[spWunschInfo_Get]
+    @Id INT
+AS
+BEGIN
+    SELECT Id, Wunsch, BildPrompt, BildBeschreibung, Datum, GPTModel
+    FROM [dbo].[WunschInfo]
+    WHERE Id = @Id;
+END

KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Insert.sql

@@ -0,0 +1,18 @@
+CREATE PROCEDURE [dbo].[spWunschInfo_Insert]
+    @Id INT, 
+    @Wunsch NVARCHAR(1024),
+	@BildPrompt NVARCHAR(MAX), 
+    @BildBeschreibung NVARCHAR(MAX),
+    @Datum DATETIME2,
+    @GPTModel NCHAR(32)
+AS
+BEGIN
+    INSERT INTO [dbo].[WunschInfo] (Wunsch, BildPrompt, BildBeschreibung, Datum, GPTModel)
+	VALUES (@Wunsch,
+            @BildPrompt,
+            @BildBeschreibung,
+            @Datum,
+            @GPTModel);
+            
+    SELECT Id FROM [dbo].[WunschInfo] WHERE Id = CAST(SCOPE_IDENTITY() AS INT);
+END

KiKunstDatenbank/dpo/Tables/BildInfo.sql

@@ -0,0 +1,8 @@
+CREATE TABLE [dbo].[BildInfo]
+(
+	[Id] INT NOT NULL PRIMARY KEY IDENTITY, 
+    [Datum] DATETIME2 NOT NULL, 
+    [Dateiname] NCHAR(256) NOT NULL,
+    [ImageModel] NCHAR(32) NOT NULL, 
+    [WunschId] INT NOT NULL
+)

KiKunstDatenbank/dpo/Tables/WunschInfo.sql

@@ -0,0 +1,9 @@
+CREATE TABLE [dbo].[WunschInfo]
+(
+	[Id] INT NOT NULL PRIMARY KEY IDENTITY,
+	[Wunsch]           NVARCHAR (1024) NOT NULL,
+	[BildPrompt]       NVARCHAR (MAX)  NOT NULL,
+	[BildBeschreibung] NVARCHAR (MAX)  NOT NULL,
+	[Datum]            DATETIME2 (7)   NOT NULL,
+	[GPTModel]         NCHAR (32)      NOT NULL
+)