From 30dc106d7511968f852f713b6d51e240c2377635 Mon Sep 17 00:00:00 2001
From: jmservera <8036360+jmservera@users.noreply.github.com>
Date: Tue, 11 Jun 2024 18:56:58 +0200
Subject: [PATCH] colorpets

---
 ai/semkerweb/.vscode/launch.json       |  3 +-
 ai/semkerweb/Colors/Colors.csproj      |  3 ++
 ai/semkerweb/Colors/Program.cs         | 54 +++++++++++++++++------
 ai/semkerweb/Colors/wwwroot/index.html | 60 ++++++++++++++++++++++++++
 ai/semkerweb/Colors/wwwroot/script.js  | 17 ++++++++
 5 files changed, 122 insertions(+), 15 deletions(-)
 create mode 100644 ai/semkerweb/Colors/wwwroot/index.html
 create mode 100644 ai/semkerweb/Colors/wwwroot/script.js

diff --git a/ai/semkerweb/.vscode/launch.json b/ai/semkerweb/.vscode/launch.json
index 10187ce..7bc704c 100644
--- a/ai/semkerweb/.vscode/launch.json
+++ b/ai/semkerweb/.vscode/launch.json
@@ -15,7 +15,8 @@
             "stopAtEntry": false,
             "serverReadyAction": {
                 "action": "openExternally",
-                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
+                "uriFormat": "%s/swagger"
             },
             "env": {
                 "ASPNETCORE_ENVIRONMENT": "Development"
diff --git a/ai/semkerweb/Colors/Colors.csproj b/ai/semkerweb/Colors/Colors.csproj
index 9069ad8..b3ebef7 100644
--- a/ai/semkerweb/Colors/Colors.csproj
+++ b/ai/semkerweb/Colors/Colors.csproj
@@ -12,4 +12,7 @@
     <PackageReference Include="Microsoft.SemanticKernel" Version="1.14.1" />
   </ItemGroup>
 
+  <PropertyGroup>
+    <NoWarn>SKEXP0010,SKEXP0001</NoWarn>
+  </PropertyGroup>
 </Project>
diff --git a/ai/semkerweb/Colors/Program.cs b/ai/semkerweb/Colors/Program.cs
index 6d6ad71..6298a4c 100644
--- a/ai/semkerweb/Colors/Program.cs
+++ b/ai/semkerweb/Colors/Program.cs
@@ -1,4 +1,6 @@
 using Microsoft.SemanticKernel;
+using Microsoft.SemanticKernel.TextToImage;
+using Microsoft.AspNetCore.Builder;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -6,6 +8,9 @@
 builder.Services.AddAzureOpenAIChatCompletion(Environment.GetEnvironmentVariable("OpenAIModel"),
                                                       endpoint: Environment.GetEnvironmentVariable("OpenAIEndpoint"),
                                                       apiKey: Environment.GetEnvironmentVariable("OpenAIApiKey"));
+builder.Services.AddAzureOpenAITextToImage(Environment.GetEnvironmentVariable("DallEModel"),
+                                           endpoint: Environment.GetEnvironmentVariable("OpenAIEndpoint"),
+                                           apiKey: Environment.GetEnvironmentVariable("OpenAIApiKey"));
 
 // Add services to the container.
 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
@@ -23,29 +28,50 @@
 
 app.UseHttpsRedirection();
 
+app.UseStaticFiles();
+
+app.Map("/", (HttpContext context) =>
+{
+    context.Response.Redirect("/index.html");
+});
+
 var summaries = new[]
 {
-    "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+    "a fluffy puppy",
+    "a coloured duck",
+    "a stray cat",
+    "a playful kitten",
+    "a loyal dog",
+    "a graceful swan",
+    "a curious rabbit",
+    "a majestic horse",
+    "a friendly parrot",
+    "a cuddly hamster"
 };
 
-app.MapGet("/weatherforecast", async (Kernel kernel) =>
+app.MapGet("/colorandpet", async (Kernel kernel) =>
 {
-    var temp=Random.Shared.Next(-20, 55);
-    var forecast =  
-        new WeatherForecast
+    var r=Random.Shared.Next(0, 255);
+    var g=Random.Shared.Next(0, 255);
+    var b=Random.Shared.Next(0, 255);
+    var c=(r+g+b)*10/(256*3);
+     
+    var summary=await kernel.InvokePromptAsync<string>($"Short description of a pet for the color rgb({r},{g},{b}). Generate animal, breed and name for it."); //summaries[c] //
+    var dallE = kernel.GetRequiredService<ITextToImageService>();
+    var img=await dallE.GenerateImageAsync(summary, 1024,1024,kernel);
+
+    return     new ColorAndPet
         (
-            DateOnly.FromDateTime(DateTime.Now.AddDays(1)),
-            temp,
-            await kernel.InvokePromptAsync<string>($"Short description of the weather at {temp} ºC")
+            $"rgb({r},{g},{b})",
+             summary,
+             img
         );
-    return forecast;
+    
 })
-.WithName("GetWeatherForecast")
+.WithName("ColorAndPet")
 .WithOpenApi();
 
 app.Run();
 
-record WeatherForecast(DateOnly Date, int TemperatureC, string? Summary)
-{
-    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-}
+record ColorAndPet( string rgb, string? Summary, string? ImageUrl=null);
+
diff --git a/ai/semkerweb/Colors/wwwroot/index.html b/ai/semkerweb/Colors/wwwroot/index.html
new file mode 100644
index 0000000..ec8fd1e
--- /dev/null
+++ b/ai/semkerweb/Colors/wwwroot/index.html
@@ -0,0 +1,60 @@
+<!-- wwwroot/index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Page</title>
+    <style>
+      .spinner {
+        border: 16px solid #f3f3f3;
+        border-top: 16px solid #3498db;
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      /* Add this CSS for the overlay */
+      .overlay {
+        display: none;
+        position: fixed;
+        z-index: 9999;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>    
+    <button id="myButton">Generate Colored Pet</button>
+        <div >
+            <img
+                id="myImage"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADjQH8z+X8OwAAAABJRU5ErkJggg=="
+                alt="Generated image will appear here"
+                style="width: 400px; height: 400px; margin: 10px 0px -5px 0px;border-radius: 10px 10px 0px 0px;"
+            />
+            <p id="myText" style="width: 400px; background-color: white; padding: 1em; margin: 0px 0px 10px 0px; box-sizing: border-box; border-radius: 0px 0px 10px 10px;"></p>
+
+        </div>
+    <div id="overlay" class="overlay">
+      <div id="spinner" class="spinner"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/ai/semkerweb/Colors/wwwroot/script.js b/ai/semkerweb/Colors/wwwroot/script.js
new file mode 100644
index 0000000..d310a2c
--- /dev/null
+++ b/ai/semkerweb/Colors/wwwroot/script.js
@@ -0,0 +1,17 @@
+// wwwroot/script.js
+document.getElementById('myButton').addEventListener('click', function() {
+    document.getElementById('overlay').style.display = 'block';
+    fetch('/colorandpet')
+        .then(response => response.json())
+        .then(data => {
+            document.body.style.backgroundColor = data.rgb;
+            document.getElementById('myImage').style.backgroundColor= "rgba(0, 0, 0, 0.5)";
+            document.getElementById('myImage').src = data.imageUrl;
+            document.getElementById('myText').textContent = data.summary;
+            document.getElementById('overlay').style.display = 'none';
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            document.getElementById('overlay').style.display = 'none';
+        });
+});
\ No newline at end of file