103 lines
3.1 KiB
Plaintext
103 lines
3.1 KiB
Plaintext
@page "/kids"
|
|
@using BLAIzor.Services
|
|
@inject IJSRuntime JS
|
|
@inject OpenAIApiService openAiApiService
|
|
|
|
<elevenlabs-convai agent-id="agent_01jw0srrwcet1sbxgajbkrmmxc"
|
|
dynamic-variables='{"user_name": "Beni", "user_likes": "kocsik, Super Mario, dinoszauruszok"}'>
|
|
</elevenlabs-convai>
|
|
|
|
<style>
|
|
.illustration {
|
|
max-width: 80vw;
|
|
border-radius: 20px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
function initTools() {
|
|
const widget = document.querySelector('elevenlabs-convai');
|
|
console.log("🎙️ Widget element:", widget);
|
|
if (widget) {
|
|
widget.addEventListener('elevenlabs-convai:call', (event) => {
|
|
event.detail.config.clientTools = {
|
|
displayIllustration: async ({ illustrationPrompt }) => {
|
|
console.log("🖼️ Calling Blazor with:", illustrationPrompt);
|
|
await DotNet.invokeMethodAsync('BLAIzor', 'OnNewIllustrationPrompt', illustrationPrompt);
|
|
}
|
|
};
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
|
|
|
|
<div class="page" style="height: 100vh; background-image: url('images/kids_bg.png'); background-attachment: fixed; background-size: cover; background-position: center">
|
|
<NavMenu MenuString="@Menu" OnMenuClicked=@MenuClick></NavMenu>
|
|
<main>
|
|
<article class="content container text-center" style="position: relative; z-index: 4;">
|
|
<PageTitle>Kids</PageTitle>
|
|
|
|
@if (ImageUrl is not null)
|
|
{
|
|
<div class="mt-5">
|
|
<img class="illustration" src="@ImageUrl"/>
|
|
</div>
|
|
}
|
|
@if (IsLoading)
|
|
{
|
|
<p>🎨 Kép készül... kis türelmet kérek!</p>
|
|
}
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
@code {
|
|
private string Menu = "Tanulás, Gyakorlás, Tesztelés, Vizsgázás";
|
|
|
|
private string? ImageUrl;
|
|
private bool IsLoading = false;
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
// Hook the static bridge to this instance
|
|
IllustrationBridge.OnPromptReceived = async (prompt) =>
|
|
{
|
|
await GenerateImageFromPrompt(prompt);
|
|
};
|
|
}
|
|
|
|
private async Task GenerateImageFromPrompt(string prompt)
|
|
{
|
|
Console.WriteLine($"[Component] Generating image for: {prompt}");
|
|
IsLoading = true;
|
|
ImageUrl = null;
|
|
StateHasChanged();
|
|
|
|
ImageUrl = await openAiApiService.GenerateImageAsync(prompt + ", watercolor, amazing colors");
|
|
|
|
IsLoading = false;
|
|
StateHasChanged();
|
|
}
|
|
|
|
public void MenuClick(string menuName)
|
|
{
|
|
// Optional: handle menu actions
|
|
}
|
|
|
|
protected override void OnAfterRender(bool firstRender)
|
|
{
|
|
if (firstRender)
|
|
{
|
|
JS.InvokeVoidAsync("initTools");
|
|
}
|
|
}
|
|
}
|