Pushibus mit ImageMaster3000

KIKunstKirstenKlöckner/KIKunstKirstenKlöckner.csproj

@@ -9,9 +9,14 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="HuggingFace" Version="0.2.3" />
     <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" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\NewFolder\" />
+  </ItemGroup>
+
 </Project>

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -8,6 +8,8 @@
 @inject TooltipService TooltipService
 @inject DialogService DialogService
 
+@inject IJSRuntime JSRuntime;
+
 <PageTitle>AiArt</PageTitle>
 
 <h1>Wunschbilder von KI nur für dich</h1>
@@ -28,6 +30,7 @@
     
     <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
     <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
+
     <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
         <ChildContent>
             <RadzenCard class="rz-mt-4">
@@ -45,16 +48,35 @@
         </ChildContent>
     </RadzenPanel>
 
-    <RadzenButton Disabled=@_progressVisible Click=@DoStuff>Generate</RadzenButton>
+    <RadzenButton Visible=@_buttonVisible Click=@DoStuff>Generate</RadzenButton>
-    
+
+    <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
+        <ChildContent>
+            <RadzenCard class="rz-mt-4">
+                <RadzenStack Orientation="Orientation.Horizontal"
+                             MouseEnter="@(args => ShowTemperatureTooltip(args))"
+                             MouseLeave="TooltipService.Close"
+                             AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                    <RadzenText>@_imagePrompt</RadzenText>
+                </RadzenStack>
+            </RadzenCard>
+        </ChildContent>
+    </RadzenPanel>
+
+    <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
+    <RadzenText>@_imageDescription</RadzenText>
+
     <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>
 
 </RadzenStack>
 
 @code {
 
     private bool _progressVisible = false;
+    private bool _buttonVisible = true;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
@@ -108,6 +130,8 @@
 
     private string _basePrompt;
 
+    private string _imageUrl;
+
     //protected override async Task OnInitializedAsync()
     //{
     //    _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
@@ -146,19 +170,24 @@
         BusyMessage = newMessage;
         await InvokeAsync(StateHasChanged);
     }
+    
+    public async Task GenerateImage()
+    {
+        //await JSRuntime.InvokeVoidAsync("DoSexyStuffBridge", _imagePrompt);
+        _imageUrl = await JSRuntime.InvokeAsync<string>("DoSexyStuffBridge", _imagePrompt);
+    }
 
     private async Task DoStuff()
     {
         // Der Dialog blokiert so lange, wie der er offen ist, deshalb dürfen wir hier nicht warten, da wir sonst nie mit der Arbeit anfangen...
         //Task busyDialog = ShowBusyDialog();
         _progressVisible = true;
+        _buttonVisible = false;
 
         await UpdateBusyMessage("Kirstens Assistent zerbricht sich über deine Idee den Kopf...");
 
         _basePrompt = await File.ReadAllTextAsync($"{Directory.GetCurrentDirectory()}{@"\wwwroot\prompt.txt"}");
-
+        
-        //await Task.Delay(1000);
-
         OpenAIAPI api = new OpenAIAPI("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");
 
         ChatRequest chatRequest = new ChatRequest
@@ -185,29 +214,22 @@
         _imageDescription = response.Substring(lineBreak);
 
         await UpdateBusyMessage("Kirstens Assistent hat eine Idee! Er wird sie nun malen...");
+        
+        Task makeImagesTask = GenerateImage();
 
-        // TODO: Hier bilder generieren
+        //CancellationTokenSource cancelFunnyMessages = new CancellationTokenSource();
-        //Task makeImagesTask = Task.Delay(10000);
-
-        CancellationTokenSource cancelFunnyMessages = new CancellationTokenSource();
-
-        Task funnyMessagesTask = FunnyMessageSwitcher_ImageGen(cancelFunnyMessages.Token);
-
 
+        //Task funnyMessagesTask = FunnyMessageSwitcher_ImageGen(cancelFunnyMessages.Token);
 
         // Wichtig, erst Bilder awaiten, dann die lustingen Sprüche, sonst warten wir ewig...
-        //await makeImagesTask;
+        await makeImagesTask;
 
-        cancelFunnyMessages.Cancel();
+        //cancelFunnyMessages.Cancel();
 
-        await funnyMessagesTask;
+        //await funnyMessagesTask;
-
-        //DialogService.Close();//
-
-        // Wir warten auf den Task des Dialogs nach dem Schließen, weil das funktioniert.
-        //await busyDialog;
 
         _progressVisible = false;
+        _buttonVisible = true;
         await InvokeAsync(StateHasChanged);
     }
 }

KIKunstKirstenKlöckner/Pages/_Host.cshtml

@@ -34,5 +34,25 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    
+    <script type="module" src="scripts/ImageMaster3000.js"></script>
+
+<script>
+        window.DoSexyStuffBridge = async function (prompt)
+        {
+            // Stellen Sie sicher, dass das Modul geladen und die Funktion verfügbar ist
+            if (typeof DoSexyStuff === "function")
+            {
+                return await DoSexyStuff(prompt);
+            }
+            else
+            {
+                console.error("Die Funktion DoSexyStuff ist nicht verfügbar.");
+                
+                return "Error";
+            }
+        }
+    </script>
+
 </body>
 </html>

KIKunstKirstenKlöckner/wwwroot/scripts/ImageMaster3000.js

@@ -0,0 +1,32 @@
+import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.1/+esm';
+import { createRepo, commit, deleteRepo, listFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.4/+esm";
+
+async function DoSexyStuff(prompt)
+{
+    const HF_ACCESS_TOKEN = "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";
+
+    const inference = new HfInference(HF_ACCESS_TOKEN);
+
+    const blob = await inference.textToImage({
+      //model: 'stabilityai/stable-diffusion-2',
+      model: 'Nacken/ki-kunst-kirsten-kloeckner-colab',
+      //inputs: 'award winning high resolution photo of a giant tortoise/((ladybird)) hybrid, [trending on artstation]',
+      inputs: prompt,
+      parameters: {
+        negative_prompt: 'blurry',
+      }
+    })
+    
+    const imageUrl = window.URL.createObjectURL(blob);
+
+    return imageUrl;
+
+    //window.open(imageUrl, '_blank');
+}
+
+// Exportiere die Funktion in den globalen Kontext
+window.DoSexyStuff = DoSexyStuff;
+
+function showAlert(message) {
+    alert(message);
+}