Merge branch 'main' of https://gitfrieds.nackenbox.xyz/Gottfried/KI-Kunst-Kirsten-Kloeckner

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -1,4 +1,6 @@
+@page "/"
 @page "/aiart"
+
 @using OpenAI_API
 @using OpenAI_API.Chat
 @using OpenAI_API.Models
@@ -12,8 +14,7 @@
 <h1>Wunschbilder von KI nur für dich</h1>
 
 <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
-    
-    <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
+    <RadzenButton Text="Zur Gallery" Click="@NavigateToGallery" />    <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
     <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
 
     <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
@@ -42,14 +43,22 @@
                              MouseEnter="@(args => ShowTemperatureTooltip(args))"
                              MouseLeave="TooltipService.Close"
                              AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                    <RadzenText>@_imagePrompt</RadzenText>
+                    <RadzenText>@_imagePromptEnglish</RadzenText>
                 </RadzenStack>
             </RadzenCard>
         </ChildContent>
     </RadzenPanel>
 
     <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
-    <RadzenText>@_imageDescription</RadzenText>
+
+    
+
+        <RadzenCard class="rz-mt-4" Style="width: 800px;">
+            <RadzenText>@_imageDescription</RadzenText>
+        </RadzenCard>
+    
+    
+    
 
     <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
     <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
@@ -57,7 +66,7 @@
     <RadzenImage Path=@_imageUrl></RadzenImage>
 
     <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
-    <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="Mehr Farben" />
+    <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
     <RadzenButton Visible=@_bothVisible Click=@(async ()=> await DoStuff(false))>Generate</RadzenButton>
 
     <RadzenCard>
@@ -160,8 +169,9 @@
     ,
         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.";
+    private string _imagePromptEnglish = "\"Painting of a soccer match with the Hamburger SV team scoring multiple goals, vibrant colors and dynamic brushstrokes.\"";
     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.";
+    private string _imagePrompt = "";
 
     private float temperature = 0.9f; 
     private string request = "";
@@ -225,7 +235,7 @@
 
         _client.DefaultRequestHeaders.Clear();
         _client.DefaultRequestHeaders.Add("Authorization", $"Bearer {API_TOKEN}");
-        
+
         return base.OnInitializedAsync();
     }
 
@@ -285,7 +295,7 @@
 
             if (Debugger.IsAttached)
                 Debugger.Break();
-                
+
             await FailedToDrawImage();
         }
     }
@@ -405,7 +415,8 @@
             }
         }
 
-        _imagePrompt = await converse.GetResponseFromChatbotAsync();
+        _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();
@@ -435,5 +446,13 @@
         }
     }
 
+    private void NavigateToGallery()
+    {
+        NavigationManager.NavigateTo("/gallery");
+    }
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; }
+
 }
 

KIKunstKirstenKlöckner/Pages/Counter.razor

@@ -1,18 +0,0 @@
-@page "/counter"
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}

KIKunstKirstenKlöckner/Pages/FetchData.razor

@@ -1,47 +0,0 @@
-@page "/fetchdata"
-@using KIKunstKirstenKlöckner.Data
-@inject WeatherForecastService ForecastService
-
-<PageTitle>Weather forecast</PageTitle>
-
-<h1>Weather forecast</h1>
-
-<p>This component demonstrates fetching data from a service.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
-    }
-}

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -0,0 +1,120 @@
+@page "/gallery"
+
+<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>
+
+<style>
+    .image-grid {
+        background-color: white; /* Hintergrund der RadzenDataList weiß machen */
+    }
+
+    .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>
+
+@code {
+    List<string> imagePaths = new List<string>();
+    string selectedImage;
+    string infoText = "Info Text";
+    string popupStyle = "display: none;";
+
+    protected override async Task OnInitializedAsync()
+    {
+        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 void ShowImageInfo(string imagePath)
+    {
+        selectedImage = imagePath;
+        infoText = "Info Text"; // Hier kannst du den gewünschten Infotext setzen
+        popupStyle = "display: block;";
+    }
+
+    private void CloseImageInfo()
+    {
+        popupStyle = "display: none;";
+    }
+
+    [Inject]
+    private IWebHostEnvironment _environment { get; set; }
+}

KIKunstKirstenKlöckner/Pages/Index.razor

@@ -1,9 +0,0 @@
-@page "/"
-
-<PageTitle>Index</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
-
-<SurveyPrompt Title="How is Blazor working for you?" />