Gottfried
/
KI-Kunst-Kirsten-Kloeckner
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases Wiki Activity

noch mehr tolle sachen. TODO Das runde ding rechts funktioniert noch nicht wie es soll.

This commit is contained in:
klappstuhl24 2023-11-17 01:35:14 +01:00
parent 8504d79a3d
commit d8726fbc59
1 changed files with 155 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
KIKunstKirstenKlöckner/Pages/AiArt.razor
View File

@ -14,15 +14,102 @@
@inject NotificationService NotificationService
@inject DialogService DialogService
@inject WunschInfoData WunschInfoData;
@inject ImageGenerator ImageGenerator;
@inject BildInfoData BildInfoData;
@inject WunschInfoData WunschInfoData;
@implements IAsyncDisposable
<style>
.invisible-rectangle {
width: 100%;
height: 600px;
opacity: 0;
background-color: transparent;
pointer-events: none;
}
.invisible-rectangle-small {
width: 100%;
height: 100px;
opacity: 0;
background-color: transparent;
pointer-events: none;
}
</style>
<PageTitle>AiArt</PageTitle>
<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">
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
<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" alt="" />
</div>
</div>
}
<div class="carousel-item">
<div class="img-box">
<img src="@bildInfo.Dateiname" alt=""/>
</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"/>
@ -63,10 +150,17 @@
</RadzenRadioButtonList>
</RadzenCard>
</ChildContent>
</RadzenPanel>
</RadzenPanel>
<RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
</RadzenStack>
</div>
</section>
<!-- end entry section -->
<!-- start image section -->
<section id="imageSection">
<div class="container">
@if (_imageSectionVisible)
{
<section id="imageSection">
@ -133,12 +227,63 @@
</RadzenStack>
</section>
}
@if (!_imageSectionVisible)
{
<div class="invisible-rectangle"></div>
}
</div>
</section>
<!-- end image section -->
</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();
}
List<BildInfoModel>? _allBildInfos;
/// <summary>
/// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
/// </summary>
@ -165,15 +310,6 @@
FadeIn
}
private async Task OnGenerateButtonClickAsync()
{
_imageSectionVisible = true;
StateHasChanged();
await Task.Delay(100);
await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
await GenerateImagesAsync();
}
async Task ShowImageDialog(string imageUrl)
{
var result = await DialogService.OpenAsync("", ds =>
@ -229,6 +365,9 @@
protected override async Task OnInitializedAsync()
{
_allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
StateHasChanged();
_openAiApiKey = Config.GetValue<string>("API:OpenAI");
_openAiApi = new OpenAIAPI(_openAiApiKey);