Merge branch 'main' of https://gitfrieds.nackenbox.xyz/Gottfried/KI-Kunst-Kirsten-Kloeckner
This commit is contained in:
Simon Lübeß
commit
8295be40f0
|
|
@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
|
|||
# Visual Studio Version 17
|
||||
VisualStudioVersion = 17.6.33829.357
|
||||
MinimumVisualStudioVersion = 10.0.40219.1
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "KIKunstKirstenKlöckner", "KIKunstKirstenKlöckner\KIKunstKirstenKlöckner.csproj", "{0085541E-50D4-42A5-9BFD-6CE402FB8B26}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "KIKunstKirstenKlöckner\KIKunstKirstenKlöckner.csproj", "{0085541E-50D4-42A5-9BFD-6CE402FB8B26}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
namespace KIKunstKirstenKlöckner.Data;
|
||||
|
||||
public class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
|
||||
public int TemperatureC { get; set; }
|
||||
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
|
||||
public string? Summary { get; set; }
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
namespace KIKunstKirstenKlöckner.Data;
|
||||
|
||||
public class WeatherForecastService
|
||||
{
|
||||
private static readonly string[] Summaries = new[]
|
||||
{
|
||||
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
|
||||
};
|
||||
|
||||
public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
|
||||
{
|
||||
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
|
||||
}).ToArray());
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = "";
|
||||
|
|
@ -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; }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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++;
|
||||
}
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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; }
|
||||
}
|
||||
|
|
@ -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?" />
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
using KIKunstKirstenKlöckner.Data;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Radzen;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
|
@ -8,7 +5,6 @@ var builder = WebApplication.CreateBuilder(args);
|
|||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSingleton<WeatherForecastService>();
|
||||
builder.Services.AddScoped<TooltipService>();
|
||||
builder.Services.AddScoped<DialogService>();
|
||||
builder.Services.AddScoped<NotificationService>();
|
||||
|
|
|
|||
|
|
@ -3,14 +3,13 @@
|
|||
<PageTitle>KIKunstKirstenKlöckner</PageTitle>
|
||||
|
||||
<div class="page">
|
||||
@*
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
<NavMenu />
|
||||
</div>
|
||||
*@
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="alert alert-secondary mt-4">
|
||||
<span class="oi oi-pencil me-2" aria-hidden="true"></span>
|
||||
<strong>@Title</strong>
|
||||
|
||||
<span class="text-nowrap">
|
||||
Please take our
|
||||
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186158">brief survey</a>
|
||||
</span>
|
||||
and tell us what you think.
|
||||
</div>
|
||||
|
||||
@code {
|
||||
// Demonstrates how a parent component can supply parameters
|
||||
[Parameter]
|
||||
public string? Title { get; set; }
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
Kunststil und Techniken: Kirsten Klöckner ist eine Künstlerin, die sich auf Aquarell- und Tusche-Materialien spezialisiert hat. Diese Techniken erfordern ein hohes Maß an Geschick und Präzision, da sie sowohl transparente als auch deckende Effekte erzeugen kann. Die Verwendung von Papier als Untergrund ermöglicht es ihr, mit verschiedenen Strukturen und Texturen zu experimentieren. Die Vielfalt der Techniken, die sie beherrscht - wie Federzeichnung, Pinselzeichnung, Nass-in-Nass-Technik, Trocken-auf-Trocken-Technik und Lasur - ermöglicht es ihr, ihre künstlerische Vision in unterschiedlichen Ausdrucksformen zu realisieren.
|
||||
|
||||
Themen und Motive: Klöckners Kunst zeigt eine breite Palette von Themen und Motiven. Ihre Werke enthalten oft Naturmotive wie Schafe, Pferde und Blumen, die eine Verbindung zur Natur und zum Landleben nahelegen. Gleichzeitig widmet sie sich aber auch gesellschaftlichen und politischen Anliegen, wie zum Beispiel Gastfreundschaft, Verantwortung, Klimaschutz und kritischen Reflektionen über den Alltag. Die Vielfalt der Themen zeigt, dass sie eine Künstlerin ist, die sich für viele Facetten des Lebens interessiert und ihre Kunst als Ausdrucksmittel für verschiedene Gedanken und Gefühle nutzt.
|
||||
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.
|
||||
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.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue