Compare commits
14 Commits
538445760e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 2d21bd86c2 | |||
| 76bb1fa40f | |||
| 0f738b2264 | |||
| 134d9399f7 | |||
| 4bf485d523 | |||
| ddc65799f5 | |||
| 3406748c66 | |||
| d8726fbc59 | |||
| 8504d79a3d | |||
| 98810ad1fc | |||
| 3fb4ab3934 | |||
| 74fe4ca4a1 | |||
| a4e6cc4518 | |||
| 5d8d3f1f2f |
4
.editorconfig
Normal file
4
.editorconfig
Normal file
@ -0,0 +1,4 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
13
.idea/.idea.KIKunstKirstenKlöckner/.idea/.gitignore
generated
vendored
Normal file
13
.idea/.idea.KIKunstKirstenKlöckner/.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Rider ignored files
|
||||
/modules.xml
|
||||
/.idea.KIKunstKirstenKlöckner.iml
|
||||
/contentModel.xml
|
||||
/projectSettingsUpdater.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
1
.idea/.idea.KIKunstKirstenKlöckner/.idea/.name
generated
Normal file
1
.idea/.idea.KIKunstKirstenKlöckner/.idea/.name
generated
Normal file
@ -0,0 +1 @@
|
||||
KIKunstKirstenKlöckner
|
||||
19
.idea/.idea.KIKunstKirstenKlöckner/.idea/dataSources.xml
generated
Normal file
19
.idea/.idea.KIKunstKirstenKlöckner/.idea/dataSources.xml
generated
Normal file
@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
|
||||
<data-source source="LOCAL" name="Nackenserver" uuid="2da1b5f0-41db-4b4f-adbd-3ec21fc94746">
|
||||
<driver-ref>sqlserver.jb</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>com.jetbrains.jdbc.sqlserver.SqlServerDriver</jdbc-driver>
|
||||
<jdbc-url>Server=127.0.0.1,1433;Database=KiKunst</jdbc-url>
|
||||
<working-dir>$ProjectFileDir$</working-dir>
|
||||
</data-source>
|
||||
<data-source source="LOCAL" name="KiKunstDatenbank@85.215.58.36" uuid="df248d03-0de1-4e34-86bf-d38047939693">
|
||||
<driver-ref>sqlserver.jb</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>com.jetbrains.jdbc.sqlserver.SqlServerDriver</jdbc-driver>
|
||||
<jdbc-url>Server=85.215.58.36;Database=KiKunstDatenbank</jdbc-url>
|
||||
<working-dir>$ProjectFileDir$</working-dir>
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/.idea.KIKunstKirstenKlöckner/.idea/encodings.xml
generated
Normal file
6
.idea/.idea.KIKunstKirstenKlöckner/.idea/encodings.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding">
|
||||
<file url="file://$PROJECT_DIR$/KIKunstKirstenKlöckner/Program.cs" charset="windows-1252" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/.idea.KIKunstKirstenKlöckner/.idea/indexLayout.xml
generated
Normal file
8
.idea/.idea.KIKunstKirstenKlöckner/.idea/indexLayout.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="UserContentModel">
|
||||
<attachedFolders />
|
||||
<explicitIncludes />
|
||||
<explicitExcludes />
|
||||
</component>
|
||||
</project>
|
||||
38
.idea/.idea.KIKunstKirstenKlöckner/.idea/sqlDataSources.xml
generated
Normal file
38
.idea/.idea.KIKunstKirstenKlöckner/.idea/sqlDataSources.xml
generated
Normal file
@ -0,0 +1,38 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="SqlDataSourceStorage">
|
||||
<option name="dataSources">
|
||||
<list>
|
||||
<State>
|
||||
<option name="id" value="01ff5a47-63ce-4ef8-aed7-c9f2f9f5c726" />
|
||||
<option name="name" value="KiKunstDatenbank" />
|
||||
<option name="dbmsName" value="MSSQL" />
|
||||
<option name="urls">
|
||||
<array>
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/BildInfo.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/WunschInfo.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Insert.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_UpdateFileName.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_GetAll.sql" />
|
||||
<option value="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Get.sql" />
|
||||
</array>
|
||||
</option>
|
||||
<option name="remarks" value="Database Project" />
|
||||
<option name="outPath" value="$PROJECT_DIR$/KiKunstDatenbank" />
|
||||
<option name="codeStyleName" value="Visual Studio Database Project" />
|
||||
<option name="outLayout" value="File per object by schema.groovy" />
|
||||
<option name="scriptOptions">
|
||||
<map>
|
||||
<entry key="ConstraintContext" value="CONSTRAINT_IN_TABLE" />
|
||||
<entry key="MsVsDdlCompatibility" value="1" />
|
||||
<entry key="QualifyWithSchema" value="ALWAYS" />
|
||||
<entry key="Reformat" value="1" />
|
||||
<entry key="UseSemicolon" value="1" />
|
||||
</map>
|
||||
</option>
|
||||
</State>
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
||||
12
.idea/.idea.KIKunstKirstenKlöckner/.idea/sqldialects.xml
generated
Normal file
12
.idea/.idea.KIKunstKirstenKlöckner/.idea/sqldialects.xml
generated
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="SqlDialectMappings">
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_GetAll.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_Insert.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spBildInfo_UpdateFileName.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Get.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/StoredProcedures/spWunschInfo_Insert.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/BildInfo.sql" dialect="TSQL" />
|
||||
<file url="file://$PROJECT_DIR$/KiKunstDatenbank/dpo/Tables/WunschInfo.sql" dialect="TSQL" />
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/.idea.KIKunstKirstenKlöckner/.idea/vcs.xml
generated
Normal file
6
.idea/.idea.KIKunstKirstenKlöckner/.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@ -1,15 +1,16 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net7.0</TargetFramework>
|
||||
<TargetFramework>net8.0</TargetFramework>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<Nullable>enable</Nullable>
|
||||
<LangVersion>12</LangVersion>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Dapper" Version="2.1.4" />
|
||||
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="7.0.0" />
|
||||
<PackageReference Include="System.Data.SqlClient" Version="4.8.5" />
|
||||
<PackageReference Include="Dapper" Version="2.1.35" />
|
||||
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
|
||||
<PackageReference Include="System.Data.SqlClient" Version="4.8.6" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
|
||||
EndProject
|
||||
Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
@using OpenAI_API
|
||||
@using OpenAI_API.Chat
|
||||
@using OpenAI_API.Models
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@using KIKunstKirstenKlöckner.Data
|
||||
|
||||
|
||||
@inject IConfiguration Config
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
@ -6,7 +16,54 @@
|
||||
<NotFound>
|
||||
<PageTitle>Not found</PageTitle>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<p role="alert">Sorry, there's nothing at this address.</p>
|
||||
<p style="text-align:center;" role="alert">@_text</p>
|
||||
@* @_mus *@
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
|
||||
@code {
|
||||
private MarkupString _mus = new MarkupString();
|
||||
private string _text = "";
|
||||
private OpenAIAPI _openAiApi;
|
||||
private Conversation? _conversation;
|
||||
private string _openAiApiKey = "";
|
||||
private string _urlPath;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var uri = new Uri(NavigationManager.Uri);
|
||||
_urlPath = uri.AbsolutePath; // Dies gibt den Pfadteil der URL zurück
|
||||
|
||||
// Optional: Entfernen Sie den führenden Schrägstrich, falls vorhanden
|
||||
if (_urlPath.StartsWith("/"))
|
||||
{
|
||||
_urlPath = _urlPath.Substring(1);
|
||||
}
|
||||
|
||||
_openAiApiKey = Config.GetValue<string>("API:OpenAI");
|
||||
|
||||
_openAiApi = new OpenAIAPI(_openAiApiKey);
|
||||
|
||||
//string ideaBasePrompt = "Stelle dir vor du bist ein berliner Bösewicht und ich gehe auf deine Internetseite, die sich mit der generierung von Wunschbildern mittels KI beschäftigt, und bemerke, dass es die Seite nicht gibt. Denke dir eine witzige und unterschwellige Beleidigung für diesen Sachverhalt gerichtet an mich aus. Ich würde mich freuen, wenn du etwas ausfallender mir gegenüber werden könntest. Antworte mit Berliner Schnauze. Die Seite die ich versucht habe zu erreichen, ist: " + _urlPath;
|
||||
string ideaBasePrompt = "Stelle dir vor du bist ein berliner Bösewicht und ich gehe auf deine Internetseite und bemerke, dass es die Seite nicht gibt. Denke dir eine witzige und unterschwellige Beleidigung für diesen Sachverhalt gerichtet an mich aus. Ich würde mich freuen, wenn du etwas ausfallender mir gegenüber werden könntest. Antworte mit Berliner Schnauze. Die Seite die ich versucht habe zu erreichen, ist: " + _urlPath;
|
||||
//string ideaBasePrompt = "Stelle dir vor jemand geht auf eine Seite einer Internetseite und bemerkt, dass es die Seite nicht gibt. Denke dir eine witzige idee als html code aus, um der Person zu präsentieren, dass die seite nicht existiert. Es soll unterschwellig beleidigend sein aber niemanden offensichtlich beleidigen. sei kreativ und denke daran, nur html und css zu generieren. Der css teil soll im html teil schon drin sein. Die seite die nicht gefunden wurde ist: " + _urlPath;
|
||||
|
||||
ChatRequest chatRequest = new ChatRequest
|
||||
{
|
||||
Temperature = 0.9,
|
||||
Model = Model.ChatGPTTurbo //ChatGPT.GPT4Turbo
|
||||
};
|
||||
|
||||
_conversation = _openAiApi.Chat.CreateConversation(chatRequest);
|
||||
|
||||
// Wunsch an GPT senden und Bild Idee anfordern
|
||||
_conversation.AppendUserInput(ideaBasePrompt);
|
||||
_text = await _conversation.GetResponseFromChatbotAsync();
|
||||
_mus = new MarkupString(_text);
|
||||
StateHasChanged();
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,5 +4,6 @@ namespace KIKunstKirstenKlöckner.Data;
|
||||
|
||||
public class ChatGPT
|
||||
{
|
||||
public static Model GPT4Turbo => new Model("gpt-4-1106-preview") { OwnedBy = "openai" };
|
||||
public static Model GPT4Turbo => new Model("gpt-4-turbo") { OwnedBy = "openai" };
|
||||
public static Model GPT4o => new Model("gpt-4o") { OwnedBy = "openai" };
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
using DataAccess.Data;
|
||||
using DataAccess.Models;
|
||||
using Radzen;
|
||||
using System.Diagnostics;
|
||||
using SixLabors.ImageSharp;
|
||||
|
||||
namespace KIKunstKirstenKlöckner.Data;
|
||||
|
||||
|
||||
23
KIKunstKirstenKlöckner/Extensions/ListExtension.cs
Normal file
23
KIKunstKirstenKlöckner/Extensions/ListExtension.cs
Normal file
@ -0,0 +1,23 @@
|
||||
namespace KIKunstKirstenKlöckner.Extensions
|
||||
{
|
||||
public static class ListExtension
|
||||
{
|
||||
public static IEnumerable<T> PickRandom<T>(this List<T> list, int n)
|
||||
{
|
||||
if (list.Count == 0)
|
||||
{
|
||||
yield break;
|
||||
}
|
||||
if (n <= 0)
|
||||
{
|
||||
throw new ArgumentException("n must be greater than 0: ", nameof(n));
|
||||
}
|
||||
|
||||
for (int i = 0; i < n; i++)
|
||||
{
|
||||
int index = Random.Shared.Next(list.Count);
|
||||
yield return list[index];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,22 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net7.0</TargetFramework>
|
||||
<TargetFramework>net8.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<UserSecretsId>c1bf616d-d992-465d-91b1-995a57ba483d</UserSecretsId>
|
||||
<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
|
||||
<LangVersion>12</LangVersion>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.18.1" />
|
||||
<PackageReference Include="OpenAI" Version="1.7.2" />
|
||||
<PackageReference Include="Radzen.Blazor" Version="4.14.4" />
|
||||
<PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.21.0" />
|
||||
<PackageReference Include="OpenAI" Version="1.11.0" />
|
||||
<PackageReference Include="Radzen.Blazor" Version="4.33.1" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="wwwroot\NewFolder\" />
|
||||
<PackageReference Include="SixLabors.ImageSharp" Version="3.0.1" />
|
||||
<PackageReference Include="SixLabors.ImageSharp" Version="3.1.4" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@ -6,22 +6,114 @@
|
||||
@using DataAccess.Data
|
||||
@using DataAccess.Models
|
||||
@using KIKunstKirstenKlöckner.Data
|
||||
@using KIKunstKirstenKlöckner.Extensions
|
||||
@using System.Diagnostics
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@inject IConfiguration Config
|
||||
@inject TooltipService TooltipService
|
||||
@inject NotificationService NotificationService
|
||||
@inject DialogService DialogService
|
||||
|
||||
@inject WunschInfoData WunschInfoData;
|
||||
@inject ImageGenerator ImageGenerator;
|
||||
@inject BildInfoData BildInfoData;
|
||||
@inject WunschInfoData WunschInfoData;
|
||||
|
||||
<PageTitle>AiArt</PageTitle>
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
<div class="container">
|
||||
<style>
|
||||
.invisible-rectangle {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
||||
.invisible-rectangle-small {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<PageTitle>Wunschbild Generator</PageTitle>
|
||||
|
||||
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
|
||||
<div class="hero_area hero-area-visible">
|
||||
|
||||
<!-- slider section -->
|
||||
<section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Hier werden <br>
|
||||
deine Wünsche <br>
|
||||
Wirklichkeit
|
||||
</h1>
|
||||
<p>
|
||||
Weiter unten findest du meinen Assistenten. Gebe ihm deinen Wunsch und er wird sich etwas tolles dazu überlegen. Es lohnt sich geduldig zu sein. <br>
|
||||
Scrolle einfach nach unten!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
@if (_allBildInfos != null)
|
||||
{
|
||||
@foreach (var bildInfo in _allBildInfos)
|
||||
{
|
||||
if (_indexForCarusell == 0)
|
||||
{
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="@bildInfo.Dateiname"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="@bildInfo.Dateiname"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
_indexForCarusell++;
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<div class="invisible-rectangle-small"></div>
|
||||
|
||||
<!-- start entry section -->
|
||||
<section id="entrySection" class="section-animate-left" @ref="animatedEntrySection">
|
||||
<div class="container">
|
||||
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
||||
<h1>Wunschbilder von KI nur für dich</h1>
|
||||
<RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
|
||||
<RadzenTextBox @bind-Value=@_userIdea Placeholder="Dein Wunsch"/>
|
||||
@ -49,92 +141,177 @@
|
||||
<RadzenNumeric ShowUpDown = "false" TValue = "int?" @bind-Value=@_imageHeight />
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
<RadzenStack Orientation="Orientation.Horizontal"
|
||||
AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
||||
<RadzenCheckBox @bind-Value=@_useGpt4Turbo Name="UseGPT4"/>
|
||||
<RadzenLabel Text="Verwende GPT 4 Turbo" Component="UseGPT4" Style="margin-left: 8px; vertical-align: middle;" />
|
||||
</RadzenStack>
|
||||
<RadzenRadioButtonList @bind-Value=@_usedGptModel TValue="GptModel" class="mb-5">
|
||||
<Items>
|
||||
<RadzenRadioButtonListItem Text="GPT-3.5 Turbo" Value="GptModel.Gpt3_5_turbo"
|
||||
MouseEnter="@(args => ShowTooltip("Schnell aber nicht sonderlich clever.", args))"
|
||||
MouseLeave="TooltipService.Close">
|
||||
</RadzenRadioButtonListItem>
|
||||
<RadzenRadioButtonListItem Text="GPT-4 Turbo" Value="GptModel.Gpt4_turbo"
|
||||
MouseEnter="@(args => ShowTooltip("Etwas langsamer, aber recht klug.", args))"
|
||||
MouseLeave="TooltipService.Close">
|
||||
</RadzenRadioButtonListItem>
|
||||
<RadzenRadioButtonListItem Text="GPT-4o" Value="GptModel.Gpt4o"
|
||||
MouseEnter="@(args => ShowTooltip("Schnell, gut und günstig. Warum gibt es überhaupt eine Auswahlmöglichkeit?", args))"
|
||||
MouseLeave="TooltipService.Close">
|
||||
</RadzenRadioButtonListItem>
|
||||
</Items>
|
||||
</RadzenRadioButtonList>
|
||||
@* <RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" class="mb-5"> *@
|
||||
<RadzenRadioButtonList Data="@_imageModels" @bind-Value=@_selectedImageModel TValue="ModelInfo" TextProperty="Name" ValueProperty="" class="mb-5">
|
||||
<Items>
|
||||
<RadzenRadioButtonListItem Text="Zufällig" Value="@null" TValue="ModelInfo"/>
|
||||
<RadzenRadioButtonListItem Text="Zufällig" Value="@null" TValue="ModelInfo"
|
||||
MouseEnter="@(args => ShowTooltip("Für jedes Bild wird zufällig ein Generator ausgewählt.", args))"
|
||||
MouseLeave="TooltipService.Close"/>
|
||||
</Items>
|
||||
</RadzenRadioButtonList>
|
||||
</RadzenCard>
|
||||
</ChildContent>
|
||||
</RadzenPanel>
|
||||
</RadzenPanel>
|
||||
|
||||
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
|
||||
<RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
|
||||
</RadzenStack>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end entry section -->
|
||||
|
||||
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
|
||||
<!-- start image section -->
|
||||
<section id="imageSection">
|
||||
<div class="container">
|
||||
@if (_imageSectionVisible)
|
||||
{
|
||||
<section id="imageSection">
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
||||
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
|
||||
|
||||
<RadzenCard class="rz-mt-4" Style="width: 800px;">
|
||||
<RadzenText>@_imageIdea</RadzenText>
|
||||
</RadzenCard>
|
||||
<RadzenCard class="rz-mt-4" Style="width: 800px;">
|
||||
<RadzenText>@_imageIdea</RadzenText>
|
||||
</RadzenCard>
|
||||
|
||||
<RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
|
||||
<RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
|
||||
|
||||
<RadzenImage Path=@_imageUrl></RadzenImage>
|
||||
|
||||
<RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
|
||||
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
|
||||
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
|
||||
|
||||
<RadzenCard>
|
||||
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
|
||||
Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
|
||||
Click="() => ShowImageDialog(_imageUrls[0])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[0]
|
||||
<br />
|
||||
Model: @_bildInfos[0]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
|
||||
Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
|
||||
Click="() => ShowImageDialog(_imageUrls[1])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[1]
|
||||
<br />
|
||||
Model: @_bildInfos[1]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
|
||||
Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
|
||||
Click="() => ShowImageDialog(_imageUrls[2])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[2]
|
||||
<br />
|
||||
Model: @_bildInfos[2]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
|
||||
Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
|
||||
Click="() => ShowImageDialog(_imageUrls[3])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[3]
|
||||
<br />
|
||||
Model: @_bildInfos[3]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenCard>
|
||||
</RadzenStack>
|
||||
</section>
|
||||
}
|
||||
@if (!_imageSectionVisible)
|
||||
{
|
||||
<div class="invisible-rectangle"></div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<!-- end image section -->
|
||||
|
||||
<RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
|
||||
<RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
|
||||
|
||||
<RadzenImage Path=@_imageUrl></RadzenImage>
|
||||
|
||||
<RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
|
||||
<RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
|
||||
<RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
|
||||
|
||||
<RadzenCard>
|
||||
<RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
|
||||
Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
|
||||
Click="() => ShowImageDialog(_imageUrls[0])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[0]
|
||||
<br/>
|
||||
Model: @_bildInfos[0]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
|
||||
Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
|
||||
Click="() => ShowImageDialog(_imageUrls[1])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[1]
|
||||
<br />
|
||||
Model: @_bildInfos[1]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
|
||||
Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
|
||||
Click="() => ShowImageDialog(_imageUrls[2])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[2]
|
||||
<br />
|
||||
Model: @_bildInfos[2]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="6">
|
||||
<FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
|
||||
Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
|
||||
Click="() => ShowImageDialog(_imageUrls[3])" />
|
||||
<RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
|
||||
@_imagePromts[3]
|
||||
<br/>
|
||||
Model: @_bildInfos[3]?.ImageModel
|
||||
</RadzenPanel>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenCard>
|
||||
|
||||
</RadzenStack>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@code {
|
||||
// Animation stuff
|
||||
private int _indexForCarusell = 0;
|
||||
private ElementReference animatedEntrySection;
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
private Func<Task> removeScrollListener;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedEntrySection);
|
||||
|
||||
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
|
||||
"initHeroAreaScrollAnimation"
|
||||
);
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
|
||||
private bool isDisposed = false;
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (!isDisposed)
|
||||
{
|
||||
if (removeScrollListener != null)
|
||||
{
|
||||
await removeScrollListener.Invoke();
|
||||
}
|
||||
isDisposed = true;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnGenerateButtonClickAsync()
|
||||
{
|
||||
_imageSectionVisible = true;
|
||||
StateHasChanged();
|
||||
await Task.Delay(100);
|
||||
await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
|
||||
await GenerateImagesAsync();
|
||||
}
|
||||
|
||||
IEnumerable<BildInfoModel>? _allBildInfos;
|
||||
|
||||
enum GptModel
|
||||
{
|
||||
Gpt3_5_turbo,
|
||||
Gpt4_turbo,
|
||||
Gpt4o
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
|
||||
/// Das ChatGPT Model, das zur Erzeugung der Idee und Bild-Promts verwendet wird.
|
||||
/// </summary>
|
||||
private bool _useGpt4Turbo;
|
||||
private GptModel _usedGptModel = GptModel.Gpt3_5_turbo;
|
||||
|
||||
private int maxAddons = 2;
|
||||
private int amountOfAddons = 0; // wird später geändert
|
||||
@ -142,6 +319,7 @@
|
||||
private bool _buttonVisible = true;
|
||||
private bool _addonsVisible = false;
|
||||
private bool _bothVisible = false;
|
||||
private bool _imageSectionVisible = false;
|
||||
|
||||
public string BusyMessage { get; set; } = "Initial Message";
|
||||
|
||||
@ -173,6 +351,11 @@
|
||||
,
|
||||
new() { Position = TooltipPosition.Bottom, Duration = null});
|
||||
|
||||
void ShowTooltip(string text, ElementReference elementReference) => TooltipService.Open(elementReference, ds =>
|
||||
@<div>@text</div>
|
||||
,
|
||||
new() { Position = TooltipPosition.Bottom, Duration = null});
|
||||
|
||||
private string _imageIdea = "";
|
||||
|
||||
private float _temperature = 0.9f;
|
||||
@ -211,6 +394,9 @@
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList().PickRandom(10);
|
||||
//await InvokeAsync(StateHasChanged);
|
||||
|
||||
_openAiApiKey = Config.GetValue<string>("API:OpenAI");
|
||||
|
||||
_openAiApi = new OpenAIAPI(_openAiApiKey);
|
||||
@ -247,7 +433,13 @@
|
||||
ChatRequest chatRequest = new ChatRequest
|
||||
{
|
||||
Temperature = _temperature,
|
||||
Model = _useGpt4Turbo ? ChatGPT.GPT4Turbo : Model.ChatGPTTurbo
|
||||
Model = _usedGptModel switch
|
||||
{
|
||||
GptModel.Gpt3_5_turbo => Model.ChatGPTTurbo,
|
||||
GptModel.Gpt4_turbo => ChatGPT.GPT4Turbo,
|
||||
GptModel.Gpt4o => ChatGPT.GPT4o,
|
||||
_ => throw new ArgumentOutOfRangeException()
|
||||
}
|
||||
};
|
||||
|
||||
_conversation = _openAiApi.Chat.CreateConversation(chatRequest);
|
||||
|
||||
@ -33,40 +33,67 @@
|
||||
</RadzenDataList>
|
||||
|
||||
@code {
|
||||
IEnumerable<BildInfoModel>? _bildInfos;
|
||||
List<BildInfoModel>? _bildInfos;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_bildInfos = await BildInfoData.GetAllBildInfosAsync();
|
||||
_bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
|
||||
async Task ShowImageDialog(BildInfoModel bildInfo)
|
||||
{
|
||||
WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
|
||||
int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));
|
||||
|
||||
List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
|
||||
async Task ButtonLeft()
|
||||
{
|
||||
listIndex = (listIndex != 0) ? listIndex - 1 : 0;
|
||||
bildInfo = _bildInfos[listIndex];
|
||||
wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
DialogService.Refresh();
|
||||
}
|
||||
|
||||
async Task ButtonRight()
|
||||
{
|
||||
listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
|
||||
bildInfo = _bildInfos[listIndex];
|
||||
wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
DialogService.Refresh();
|
||||
}
|
||||
|
||||
|
||||
var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
|
||||
@<div>
|
||||
@<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"/>
|
||||
<RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
|
||||
<div>
|
||||
<RadzenStack Orientation="Orientation.Vertical">
|
||||
<RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
|
||||
</RadzenStack>
|
||||
<RadzenText Text="@wunschInfo.BildBeschreibung" />
|
||||
</div>
|
||||
<RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
|
||||
</RadzenStack>
|
||||
@foreach (var bild in bilderVomWunsch)
|
||||
{
|
||||
<RadzenImage class="small-image" Path="@bild.Dateiname"
|
||||
Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
|
||||
<RadzenImage class="small-image" Path="@bild.Dateiname"
|
||||
Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
|
||||
}
|
||||
</RadzenStack>
|
||||
</div>,
|
||||
</div>
|
||||
,
|
||||
new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
|
||||
}
|
||||
|
||||
|
||||
[Inject]
|
||||
private IWebHostEnvironment _environment { get; set; }
|
||||
}
|
||||
|
||||
@ -1,151 +1,191 @@
|
||||
|
||||
@page "/"
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@implements IAsyncDisposable
|
||||
|
||||
@* linear-gradient(to bottom, #ffffff 0%, transparent 1%, transparent 99.5%, #f3f0f6 100%)
|
||||
*@
|
||||
|
||||
<div class="hero_area">
|
||||
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
|
||||
<!-- 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 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Wo Wünsche <br>
|
||||
Wirklichkeit <br>
|
||||
werden
|
||||
</h1>
|
||||
<p>
|
||||
Willkommen auf meiner Webseite, wo Kunst und Technologie sich treffen. Ich freue mich, euch "Meine Wunschprogramm-Assistentin" vorzustellen, ein Projekt, das mir am Herzen liegt und das meine künstlerische Reise in eine aufregende neue Richtung führt.
|
||||
</p>
|
||||
<a href="/aiart" class="">
|
||||
Probier es aus!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="images/keks.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
<div class="hero_area hero-area-visible">
|
||||
|
||||
<!-- slider section -->
|
||||
<section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); border-image: url('images/0000.png') 30 / 19px repeat; border-image-slice: 0 0 100% 0; border-image-width: 0 0 100px 0; background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Wo Wünsche <br>
|
||||
Wirklichkeit <br>
|
||||
werden
|
||||
</h1>
|
||||
<p>
|
||||
Willkommen auf meiner Webseite, wo Kunst und Technologie sich treffen. Ich freue mich, euch "Meine Wunschprogramm-Assistentin" vorzustellen, ein Projekt, das mir am Herzen liegt und das meine künstlerische Reise in eine aufregende neue Richtung führt.
|
||||
</p>
|
||||
<a href="/aiart" class="">
|
||||
Probier es aus!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="images/keks.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
<!-- end slider section -->
|
||||
|
||||
|
||||
@* <!-- explaining section -->
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about4.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Seit Jahren habe ich Wünsche in Aquarelle verwandelt, sie humorvoll und ironisch interpretiert und ihnen eine neue Dimension gegeben. Jetzt habe ich einen mutigen Schritt gemacht und Künstliche Intelligenz (KI) als meine persönliche Assistentin in dieses kreative Unterfangen einbezogen.
|
||||
Auf meiner Webseite Wunschprogramm.ai könnt ihr nun eure Wünsche äußern, die von meiner Wunschprogramm-Assistentin umgesetzt werden. Egal, ob es sich um einen „Happy End“, „Anerkennung“, „Ein Sportwagen“ oder „Sanfter Tod“ handelt, ich interpretiere eure Wünsche fantasievoll und gebe ihnen eine neue inhaltliche Dimension. Die „Wunschprogramm-Assistentin“ generiert in wenigen Momenten ein Bild, das ihr bestellen könnt. Wenn euch die Bilder gefallen, könnt ihr sie als hochwertigen Kunstdruck bestellen, und ich werde sie für euch als Originale handsignieren.
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Seit Jahren habe ich Wünsche in Aquarelle verwandelt, sie humorvoll und ironisch interpretiert und ihnen eine neue Dimension gegeben. Jetzt habe ich einen mutigen Schritt gemacht und Künstliche Intelligenz (KI) als meine persönliche Assistentin in dieses kreative Unterfangen einbezogen.
|
||||
Auf meiner Webseite Wunschprogramm.ai könnt ihr nun eure Wünsche äußern, die von meiner Wunschprogramm-Assistentin umgesetzt werden. Egal, ob es sich um einen „Happy End“, „Anerkennung“, „Ein Sportwagen“ oder „Sanfter Tod“ handelt, ich interpretiere eure Wünsche fantasievoll und gebe ihnen eine neue inhaltliche Dimension. Die „Wunschprogramm-Assistentin“ generiert in wenigen Momenten ein Bild, das ihr bestellen könnt. Wenn euch die Bilder gefallen, könnt ihr sie als hochwertigen Kunstdruck bestellen, und ich werde sie für euch als Originale handsignieren.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Auch politische Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier oder Katarina Barley sowie show-Promis wie Micaela Schäfer und Carlo von Tiedemann haben mir bereits ihre Wünsche anvertraut, und ich lade euch ein, dasselbe zu tun. Es ist eine Gelegenheit, Teil eines kreativen Dialogs zu werden, der über die traditionellen Grenzen der Kunst hinausgeht.
|
||||
Auf dieser Webseite findet ihr alle Informationen über mein bisheriges Wunschprogramm, über meinen künstlerischen Werdegang und über die Entstehung und Realisierung dieses Projektes. "Meine Wunschprogramm-Assistentin" ist mehr als nur ein Projekt; es ist eine Erkundung dessen, was Kunst sein kann, wenn sie mit der Technologie von heute verknüpft wird. Ich lade euch ein, diese Reise mit mir zu teilen, eure Wünsche zu äußern und zu sehen, wie sie in Kunst verwandelt werden.
|
||||
Besucht Wunschprogramm.ai und entdeckt, was möglich ist, wenn Wünsche, Kunst und Technologie aufeinandertreffen. Ich freue mich darauf, eure Wünsche in Kunst zu verwandeln.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about1.jpg" alt="" />
|
||||
</section>
|
||||
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Auch politische Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier oder Katarina Barley sowie show-Promis wie Micaela Schäfer und Carlo von Tiedemann haben mir bereits ihre Wünsche anvertraut, und ich lade euch ein, dasselbe zu tun. Es ist eine Gelegenheit, Teil eines kreativen Dialogs zu werden, der über die traditionellen Grenzen der Kunst hinausgeht.
|
||||
Auf dieser Webseite findet ihr alle Informationen über mein bisheriges Wunschprogramm, über meinen künstlerischen Werdegang und über die Entstehung und Realisierung dieses Projektes. "Meine Wunschprogramm-Assistentin" ist mehr als nur ein Projekt; es ist eine Erkundung dessen, was Kunst sein kann, wenn sie mit der Technologie von heute verknüpft wird. Ich lade euch ein, diese Reise mit mir zu teilen, eure Wünsche zu äußern und zu sehen, wie sie in Kunst verwandelt werden.
|
||||
Besucht Wunschprogramm.ai und entdeckt, was möglich ist, wenn Wünsche, Kunst und Technologie aufeinandertreffen. Ich freue mich darauf, eure Wünsche in Kunst zu verwandeln.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box b2">
|
||||
<img src="images/about2.jpg" alt="" />
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end about section -->
|
||||
<!-- end about section -->
|
||||
</section>
|
||||
|
||||
|
||||
@code {
|
||||
private ElementReference animatedAboutSection1;
|
||||
private ElementReference animatedAboutSection2;
|
||||
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
|
||||
private Func<Task> removeScrollListener;
|
||||
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedAboutSection1);
|
||||
animatedElements.Add(animatedAboutSection2);
|
||||
|
||||
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
|
||||
"initHeroAreaScrollAnimation"
|
||||
);
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
|
||||
private bool isDisposed = false;
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (!isDisposed)
|
||||
{
|
||||
if (removeScrollListener != null)
|
||||
{
|
||||
await removeScrollListener.Invoke();
|
||||
}
|
||||
isDisposed = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,139 +1,183 @@
|
||||
@page "/kirstenkloeckner"
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
|
||||
<div class="hero_area">
|
||||
<div class="hero_area hero-area-visible">
|
||||
|
||||
<!-- slider section -->
|
||||
<section class=" slider_section" style="background-image: url('images/36GefleckteKatze2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Wer ist <br>
|
||||
Kirsten <br>
|
||||
Klöckner?
|
||||
</h1>
|
||||
<p>
|
||||
Kirsten Klöckner, geboren 1962 in Braunschweig, hat die deutsche Kunstszene mit ihren humorvollen und hintergründigen Arbeiten bereichert.
|
||||
</p>
|
||||
<!-- slider section -->
|
||||
<section class=" slider_section" style="background-image: url('images/36GefleckteKatze2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Wer ist <br>
|
||||
Kirsten <br>
|
||||
Klöckner?
|
||||
</h1>
|
||||
<p>
|
||||
Kirsten Klöckner, geboren 1962 in Braunschweig, hat die deutsche Kunstszene mit ihren humorvollen und hintergründigen Arbeiten bereichert.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="images/Kirsten_draussen.png" alt="">
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="images/Kirsten_draussen.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- about section -->
|
||||
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about4.jpg" alt="" />
|
||||
</div>
|
||||
<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 class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Ihre kreative Reise begann mit einem Studium der Bildhauerei an der Kunstakademie Münster, wo sie von 1983 bis 1986 unter der Leitung von Reiner Ruthenbeck studierte. Nach ihrem Studium zog sie nach Düsseldorf, um dort bis 2001 zu leben und zu arbeiten. Berlin wurde 2002 ihr neues Zuhause, ein Ort, der ihr die Konzentration auf ihre Kunst ermöglichte.
|
||||
Klöckner's künstlerische Ausbildung war geprägt von einer tiefen Leidenschaft für die Bildhauerei. Ihre Zeit in Münster legte den Grundstein für eine Karriere, die sich durch Vielseitigkeit und Kreativität auszeichnet. Nach ihrem Umzug nach Düsseldorf begann sie, ihre künstlerische Stimme zu finden, und Berlin bot ihr schließlich die Plattform, um sich voll und ganz auf ihre Kunst zu konzentrieren.
|
||||
Ihr Werk ist vielseitig und reicht von Bildhauerei über Malerei bis hin zur Verlagsarbeit. Seit den 1990er Jahren produziert sie Multiples, kleine Objekte in begrenzter Auflagenzahl, die am Rand des Kunstmarkts gehandelt, geliebt und verschenkt werden. Ihr "Wunschbilder-Programm" ist ein zentrales Thema, in dem sie Wünsche ihrer Mitmenschen humorvoll und ironisch in Aquarellen umsetzt.
|
||||
Im Laufe ihrer Karriere hat Kirsten Klöckner zahlreiche bemerkenswerte Ausstellungen gehabt, darunter "Science fiction, Teil 1: der Plan" (1992), "Eingemachtes" (1997), "Aquarelle + Multiples" (2004), und "Wunschbilder" (2015). Ihre Werke wurden in der Akademie der Künste in Berlin und in großen Galerien bundesweit ausgestellt. Sie hat auch an vielen Gruppenausstellungen teilgenommen, die ihre Vielseitigkeit und ihren Einfluss in der Kunstszene unterstreichen.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Ihre Kunst ist in renommierten Sammlungen wie dem Kunstmuseum Düsseldorf, der Sammlung Falckenberg in Hamburg und der Kunstsammlung der Landesbank Baden-Württemberg in Stuttgart vertreten. Klöckner hat auch eine beeindruckende Liste von Veröffentlichungen, darunter "Heimatmelodie" (1989) und "Musenbesuch - BeuteKunst II" (2013), die einen tieferen Einblick in ihre kreativen Prozesse bieten.
|
||||
Als "eine der humorvollsten" Künstlerinnen von Klaus Staeck, dem Präsidenten der Berliner Akademie der Künste, bezeichnet, wird Kirsten Klöckner sowohl von der Kunstgemeinschaft als auch von der breiten Öffentlichkeit geschätzt und anerkannt. Ihre kreative Zusammenarbeit mit APROTO - Aktionen und Projekte pro Toleranz - hat besondere Aufmerksamkeit erregt. Das „Toleranz-Virus“, ein Aquarell und eine Skulptur von Kirsten Klöckner, wurde umgesetzt, um Toleranz in schwierigen Zeiten zu fördern. Das Aquarell und die Skulptur werden als APROTO-Toleranzpreis verliehen.
|
||||
Kirsten Klöckner's Reise durch die Kunstwelt ist eine, die von Humor, Intelligenz und einem unermüdlichen Streben nach kreativem Ausdruck geprägt ist. Ihre Werke und ihr Einfluss auf die Kunstszene zeugen von der Bedeutung und dem Wert ihrer Arbeit, und ihre fortwährende Innovation und ihr Engagement für Toleranz und Verständnis machen sie zu einer herausragenden Figur in der zeitgenössischen Kunst.
|
||||
|
||||
|
||||
<!-- 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="" />
|
||||
</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 class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Ihre kreative Reise begann mit einem Studium der Bildhauerei an der Kunstakademie Münster, wo sie von 1983 bis 1986 unter der Leitung von Reiner Ruthenbeck studierte. Nach ihrem Studium zog sie nach Düsseldorf, um dort bis 2001 zu leben und zu arbeiten. Berlin wurde 2002 ihr neues Zuhause, ein Ort, der ihr die Konzentration auf ihre Kunst ermöglichte.
|
||||
Klöckner's künstlerische Ausbildung war geprägt von einer tiefen Leidenschaft für die Bildhauerei. Ihre Zeit in Münster legte den Grundstein für eine Karriere, die sich durch Vielseitigkeit und Kreativität auszeichnet. Nach ihrem Umzug nach Düsseldorf begann sie, ihre künstlerische Stimme zu finden, und Berlin bot ihr schließlich die Plattform, um sich voll und ganz auf ihre Kunst zu konzentrieren.
|
||||
Ihr Werk ist vielseitig und reicht von Bildhauerei über Malerei bis hin zur Verlagsarbeit. Seit den 1990er Jahren produziert sie Multiples, kleine Objekte in begrenzter Auflagenzahl, die am Rand des Kunstmarkts gehandelt, geliebt und verschenkt werden. Ihr "Wunschbilder-Programm" ist ein zentrales Thema, in dem sie Wünsche ihrer Mitmenschen humorvoll und ironisch in Aquarellen umsetzt.
|
||||
Im Laufe ihrer Karriere hat Kirsten Klöckner zahlreiche bemerkenswerte Ausstellungen gehabt, darunter "Science fiction, Teil 1: der Plan" (1992), "Eingemachtes" (1997), "Aquarelle + Multiples" (2004), und "Wunschbilder" (2015). Ihre Werke wurden in der Akademie der Künste in Berlin und in großen Galerien bundesweit ausgestellt. Sie hat auch an vielen Gruppenausstellungen teilgenommen, die ihre Vielseitigkeit und ihren Einfluss in der Kunstszene unterstreichen.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end about section -->
|
||||
</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>
|
||||
Ihre Kunst ist in renommierten Sammlungen wie dem Kunstmuseum Düsseldorf, der Sammlung Falckenberg in Hamburg und der Kunstsammlung der Landesbank Baden-Württemberg in Stuttgart vertreten. Klöckner hat auch eine beeindruckende Liste von Veröffentlichungen, darunter "Heimatmelodie" (1989) und "Musenbesuch - BeuteKunst II" (2013), die einen tieferen Einblick in ihre kreativen Prozesse bieten.
|
||||
Als "eine der humorvollsten" Künstlerinnen von Klaus Staeck, dem Präsidenten der Berliner Akademie der Künste, bezeichnet, wird Kirsten Klöckner sowohl von der Kunstgemeinschaft als auch von der breiten Öffentlichkeit geschätzt und anerkannt. Ihre kreative Zusammenarbeit mit APROTO - Aktionen und Projekte pro Toleranz - hat besondere Aufmerksamkeit erregt. Das „Toleranz-Virus“, ein Aquarell und eine Skulptur von Kirsten Klöckner, wurde umgesetzt, um Toleranz in schwierigen Zeiten zu fördern. Das Aquarell und die Skulptur werden als APROTO-Toleranzpreis verliehen.
|
||||
Kirsten Klöckner's Reise durch die Kunstwelt ist eine, die von Humor, Intelligenz und einem unermüdlichen Streben nach kreativem Ausdruck geprägt ist. Ihre Werke und ihr Einfluss auf die Kunstszene zeugen von der Bedeutung und dem Wert ihrer Arbeit, und ihre fortwährende Innovation und ihr Engagement für Toleranz und Verständnis machen sie zu einer herausragenden Figur in der zeitgenössischen Kunst.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about1.jpg" alt="" />
|
||||
</div>
|
||||
<div class="img-box b2">
|
||||
<img src="images/about2.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
@code {
|
||||
private ElementReference animatedAboutSection1;
|
||||
private ElementReference animatedAboutSection2;
|
||||
|
||||
</div>
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end about section -->
|
||||
private Func<Task> removeScrollListener;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedAboutSection1);
|
||||
animatedElements.Add(animatedAboutSection2);
|
||||
|
||||
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
|
||||
"initHeroAreaScrollAnimation"
|
||||
);
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
|
||||
private bool isDisposed = false;
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (!isDisposed)
|
||||
{
|
||||
if (removeScrollListener != null)
|
||||
{
|
||||
await removeScrollListener.Invoke();
|
||||
}
|
||||
isDisposed = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,137 +1,181 @@
|
||||
@page "/projekt"
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
|
||||
<div class="hero_area">
|
||||
<div class="hero_area hero-area-visible">
|
||||
|
||||
<!-- 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>
|
||||
<!-- slider section -->
|
||||
<section class="slider_section" style="background-image: url('images/3Umsatz2014.png'); background-size: cover; background-repeat: no-repeat;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Das <br>
|
||||
Projekt <br>
|
||||
</h1>
|
||||
<p>
|
||||
Zusammentreffen von Talent, Technologie und sozialer Verantwortung: Die Entstehung eines einzigartigen Projekts
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- about section -->
|
||||
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about4.jpg" alt="" />
|
||||
</div>
|
||||
<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 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>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Die Idee zu diesem innovativen Projekt stammt von dem Journalisten Till-Matthias Jürgens. In enger Abstimmung mit den IT-Studenten und der Künstlerin Kirsten Klöckner überwacht er die Gesamtkonzeption und stellt sicher, dass das Projekt in Bewegung bleibt, sich anpasst und innovativ bleibt.
|
||||
Die technische Umsetzung liegt in den fähigen Händen von Jan Kaminski, Meiko Remiorz, Simon Lübeß und Timm Kleipsties, KI-Studenten der Leibniz-Universität in Hannover. Sie arbeiten kontinuierlich an der Entwicklung des KI-Modells und seiner Daten-Einspeisung. Jan Kaminski, der auch für die grafische Umsetzung der Webseite verantwortlich ist, fungiert als kommunikative Schnittstelle und sorgt dafür, dass die technische und kreative Seite des Projekts nahtlos zusammenarbeiten.
|
||||
Das Projekt "Wunschprogramm-Assistentin" ist mehr als nur eine künstlerische Unternehmung; es ist ein Zusammentreffen von Talent, Technologie und sozialer Verantwortung. Es zeigt, wie Kunst, Wissenschaft und Gemeinschaft zusammenarbeiten können, um etwas zu schaffen, das sowohl schön als auch bedeutungsvoll ist. Es ist ein Beweis dafür, dass die Grenzen zwischen diesen Bereichen nicht festgelegt sind und dass durch Zusammenarbeit und Innovation neue Wege beschritten werden können. Es ist ein aufregender Blick in die Zukunft der Kunst, eine Zukunft, die jetzt stattfindet, und ein Projekt, das sich in einem ständigen Prozess der Entdeckung und Erneuerung befindet.
|
||||
|
||||
|
||||
<!-- 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="" />
|
||||
</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 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>
|
||||
</section>
|
||||
<!-- end about section -->
|
||||
</section>
|
||||
|
||||
|
||||
@code {
|
||||
private ElementReference animatedAboutSection1;
|
||||
private ElementReference animatedAboutSection2;
|
||||
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
private Func<Task> removeScrollListener;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedAboutSection1);
|
||||
animatedElements.Add(animatedAboutSection2);
|
||||
|
||||
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
|
||||
"initHeroAreaScrollAnimation"
|
||||
);
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
|
||||
private bool isDisposed = false;
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (!isDisposed)
|
||||
{
|
||||
if (removeScrollListener != null)
|
||||
{
|
||||
await removeScrollListener.Invoke();
|
||||
}
|
||||
isDisposed = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,105 +1,144 @@
|
||||
@page "/wunschprogramm"
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
|
||||
|
||||
<div class="hero_area">
|
||||
<div class="hero_area hero-area-visible">
|
||||
|
||||
<!-- slider section -->
|
||||
<section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:hard-light ;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Das <br>
|
||||
Wunschprogramm
|
||||
</h1>
|
||||
<p>
|
||||
Ich mache mich zur Komplizin der Wünschenden.
|
||||
</p>
|
||||
<!-- slider section -->
|
||||
<section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:hard-light ;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Das <br>
|
||||
Wunschprogramm
|
||||
</h1>
|
||||
<p>
|
||||
Ich mache mich zur Komplizin der Wünschenden.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
|
||||
<!-- about section -->
|
||||
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about4.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Das Wunschprogramm von Kirsten Klöckner ist eine Reise in die Welt der Wünsche, eine faszinierende Verschmelzung von Kunst und menschlicher Sehnsucht. In einer Zeit, in der Kunst oft mit hohen Erwartungen konfrontiert ist, stellt Klöckner die Frage: Was, wenn Kunst auch Wünsche erfüllen könnte? Mit ihrem einzigartigen „Wunschbilder-Programm“ tut sie genau das.
|
||||
Kirsten Klöckner hat sich auf die humorvolle und ironische Umwandlung von Wünschen ihrer Mitmenschen in Aquarelle spezialisiert. Sie interpretiert die Wünsche fantasievoll, gibt ihnen Substanz und verwandelt sie in Kunstwerke. Egal, ob es sich um einfache oder komplizierte Wünsche, kleine oder riesige, alberne oder ernsthafte Wünsche handelt, sie nimmt sie alle an und macht sie zu einem Teil ihres kreativen Prozesses. Selbst prominente Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier und Showpromis wie Micaela Schäfer haben ihre Wünsche anvertraut.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
In ihren eigenen Worten beschreibt Klöckner das Wunschprogramm als eine Möglichkeit, sich etwas zu wünschen, in einer Welt, in der die Kunst oft schwer beschäftigt ist. „Ich lebe in einer Zeit, in der das Wünschen hilft“, sagt sie und fügt hinzu: „Ich mache mich zur Komplizin der Wünschenden.“
|
||||
Das „Wunschprogramm“ von Kirsten Klöckner ist mehr als nur eine künstlerische Technik. Es ist eine Einladung, über unsere Wünsche nachzudenken und sie in die Welt der Kunst zu bringen. Es ist eine Möglichkeit, unsere tiefsten Sehnsüchte und Träume in einer Form zu sehen, die sowohl schön als auch nachdenklich ist. Es ist eine Erinnerung daran, dass die Kunst immer noch die Kraft hat, uns zu überraschen, zu inspirieren und uns etwas zu wünschen.
|
||||
Die Kunst des Wünschens, wie sie von Klöckner praktiziert wird, ist ein lebendiger Dialog zwischen dem Künstler und dem Betrachter, eine Möglichkeit, die oft flüchtigen Gedanken und Sehnsüchte in etwas Greifbares und Bleibendes zu verwandeln. Es ist eine Reise, die uns alle einlädt, Teilnehmer und Zeugen der Transformation von Wünschen in Kunst zu sein, und es ist ein Beweis dafür, dass Kunst immer noch die Macht hat, uns auf unerwartete und wunderbare Weise zu berühren.
|
||||
|
||||
|
||||
|
||||
<!-- 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="" />
|
||||
</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 class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Was ist der Wunschprogramm-Assistent?
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
Das Wunschprogramm von Kirsten Klöckner ist eine Reise in die Welt der Wünsche, eine faszinierende Verschmelzung von Kunst und menschlicher Sehnsucht. In einer Zeit, in der Kunst oft mit hohen Erwartungen konfrontiert ist, stellt Klöckner die Frage: Was, wenn Kunst auch Wünsche erfüllen könnte? Mit ihrem einzigartigen „Wunschbilder-Programm“ tut sie genau das.
|
||||
Kirsten Klöckner hat sich auf die humorvolle und ironische Umwandlung von Wünschen ihrer Mitmenschen in Aquarelle spezialisiert. Sie interpretiert die Wünsche fantasievoll, gibt ihnen Substanz und verwandelt sie in Kunstwerke. Egal, ob es sich um einfache oder komplizierte Wünsche, kleine oder riesige, alberne oder ernsthafte Wünsche handelt, sie nimmt sie alle an und macht sie zu einem Teil ihres kreativen Prozesses. Selbst prominente Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier und Showpromis wie Micaela Schäfer haben ihre Wünsche anvertraut.
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<p>
|
||||
In ihren eigenen Worten beschreibt Klöckner das Wunschprogramm als eine Möglichkeit, sich etwas zu wünschen, in einer Welt, in der die Kunst oft schwer beschäftigt ist. „Ich lebe in einer Zeit, in der das Wünschen hilft“, sagt sie und fügt hinzu: „Ich mache mich zur Komplizin der Wünschenden.“
|
||||
Das „Wunschprogramm“ von Kirsten Klöckner ist mehr als nur eine künstlerische Technik. Es ist eine Einladung, über unsere Wünsche nachzudenken und sie in die Welt der Kunst zu bringen. Es ist eine Möglichkeit, unsere tiefsten Sehnsüchte und Träume in einer Form zu sehen, die sowohl schön als auch nachdenklich ist. Es ist eine Erinnerung daran, dass die Kunst immer noch die Kraft hat, uns zu überraschen, zu inspirieren und uns etwas zu wünschen.
|
||||
Die Kunst des Wünschens, wie sie von Klöckner praktiziert wird, ist ein lebendiger Dialog zwischen dem Künstler und dem Betrachter, eine Möglichkeit, die oft flüchtigen Gedanken und Sehnsüchte in etwas Greifbares und Bleibendes zu verwandeln. Es ist eine Reise, die uns alle einlädt, Teilnehmer und Zeugen der Transformation von Wünschen in Kunst zu sein, und es ist ein Beweis dafür, dass Kunst immer noch die Macht hat, uns auf unerwartete und wunderbare Weise zu berühren.
|
||||
|
||||
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about1.jpg" alt="" />
|
||||
</div>
|
||||
<div class="img-box b2">
|
||||
<img src="images/about2.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<!-- end about section -->
|
||||
</section>
|
||||
|
||||
|
||||
@code {
|
||||
private ElementReference animatedAboutSection1;
|
||||
private ElementReference animatedAboutSection2;
|
||||
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
private Func<Task> removeScrollListener;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedAboutSection1);
|
||||
animatedElements.Add(animatedAboutSection2);
|
||||
|
||||
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
|
||||
"initHeroAreaScrollAnimation"
|
||||
);
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
|
||||
private bool isDisposed = false;
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (!isDisposed)
|
||||
{
|
||||
if (removeScrollListener != null)
|
||||
{
|
||||
await removeScrollListener.Invoke();
|
||||
}
|
||||
isDisposed = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -42,6 +42,8 @@
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
<!-- responsive style -->
|
||||
<link href="css/responsive.css" rel="stylesheet" />
|
||||
<!-- animations style -->
|
||||
<link href="css/animations.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -63,6 +65,7 @@
|
||||
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/animator.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
using DataAccess.Data;
|
||||
using DataAccess.DbAccess;
|
||||
using KIKunstKirstenKl<EFBFBD>ckner.Data;
|
||||
using KIKunstKirstenKlöckner.Data;
|
||||
using Radzen;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
@ -35,6 +35,9 @@
|
||||
<NavLink class="nav-item" href="kirstenkloeckner" Match="NavLinkMatch.All">
|
||||
<span class="nav-link">Kirsten</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="projekt" Match="NavLinkMatch.All">
|
||||
<span class="nav-link">Projekt</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
|
||||
<span class="nav-link">Galerie</span>
|
||||
</NavLink>
|
||||
|
||||
63
KIKunstKirstenKlöckner/wwwroot/css/animations.css
Normal file
63
KIKunstKirstenKlöckner/wwwroot/css/animations.css
Normal file
@ -0,0 +1,63 @@
|
||||
.text-animate {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
.text-animate.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-animate-left {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
left: -100%;
|
||||
transition: left 2s ease-in-out, opacity 2s ease-in-out;
|
||||
}
|
||||
|
||||
.image-animate-left.visible {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-animate-left {
|
||||
width: 100% margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
left: -100%;
|
||||
transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-animate-left.visible {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-animate-right {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-animate-right.visible {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-area-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-area-hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
|
||||
}
|
||||
@ -75,11 +75,11 @@ body {
|
||||
|
||||
/*header section*/
|
||||
.hero_area {
|
||||
height: 98vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #eae6f5;
|
||||
height: 98vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #eae6f5;
|
||||
}
|
||||
|
||||
.sub_page {
|
||||
|
||||
BIN
KIKunstKirstenKlöckner/wwwroot/images/0000.png
Normal file
BIN
KIKunstKirstenKlöckner/wwwroot/images/0000.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png
Normal file
BIN
KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
BIN
KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg
Normal file
BIN
KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
52
KIKunstKirstenKlöckner/wwwroot/js/animator.js
Normal file
52
KIKunstKirstenKlöckner/wwwroot/js/animator.js
Normal file
@ -0,0 +1,52 @@
|
||||
function initScrollAnimations(elements) {
|
||||
function checkVisibility(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return rect.top < window.innerHeight && rect.bottom >= 0;
|
||||
}
|
||||
|
||||
function animateElements() {
|
||||
elements.forEach(element => {
|
||||
if (checkVisibility(element)) {
|
||||
element.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', animateElements);
|
||||
|
||||
animateElements();
|
||||
}
|
||||
|
||||
|
||||
function scrollToElement(elementId) {
|
||||
var element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initHeroAreaScrollAnimation(scrollToElementId) {
|
||||
const heroArea = document.querySelector('.hero_area');
|
||||
const heroAreaHeight = heroArea.offsetHeight;
|
||||
const threshold = heroAreaHeight / 1.75;
|
||||
|
||||
function onScroll() {
|
||||
if (window.scrollY > threshold) {
|
||||
heroArea.classList.remove('hero-area-visible');
|
||||
heroArea.classList.add('hero-area-hidden');
|
||||
} else {
|
||||
heroArea.classList.remove('hero-area-hidden');
|
||||
heroArea.classList.add('hero-area-visible');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
|
||||
// Rückgabe einer Funktion zum Entfernen des Event-Listeners
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
7
global.json
Normal file
7
global.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"sdk": {
|
||||
"version": "8.0.0",
|
||||
"rollForward": "latestMajor",
|
||||
"allowPrerelease": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user