Add diffusion information to result output

saddam213 · saddam213 · commit 58df7198dee7 · 2023-10-07T10:35:25.000+13:00
diff --git a/OnnxStack.Console/Examples/StableDebug.cs b/OnnxStack.Console/Examples/StableDebug.cs
@@ -35,7 +35,7 @@ public async Task RunAsync()
                 {
                     Prompt = prompt,
                     NegativePrompt = negativePrompt,
-                    SchedulerType = SchedulerType.LMSScheduler
+                    SchedulerType = SchedulerType.LMS
                 };
 
                 var schedulerOptions = new SchedulerOptions
diff --git a/OnnxStack.StableDiffusion/Enums/SchedulerType.cs b/OnnxStack.StableDiffusion/Enums/SchedulerType.cs
@@ -1,9 +1,16 @@
-﻿namespace OnnxStack.StableDiffusion.Enums
+﻿using System.ComponentModel.DataAnnotations;
+
+namespace OnnxStack.StableDiffusion.Enums
 {
     public enum SchedulerType
     {
-        LMSScheduler = 0,
-        EulerAncestralScheduler = 1,
-        DDPMScheduler = 3
+        [Display(Name = "LMS")]
+        LMS = 0,
+
+        [Display(Name = "Euler Ancestral")]
+        EulerAncestral = 1,
+
+        [Display(Name = "DDPM")]
+        DDPM = 3
     }
 }
diff --git a/OnnxStack.StableDiffusion/Services/SchedulerService.cs b/OnnxStack.StableDiffusion/Services/SchedulerService.cs
@@ -242,9 +242,9 @@ private static IScheduler GetScheduler(PromptOptions prompt, SchedulerOptions op
         {
             return prompt.SchedulerType switch
             {
-                SchedulerType.LMSScheduler => new LMSScheduler(options),
-                SchedulerType.EulerAncestralScheduler => new EulerAncestralScheduler(options),
-                SchedulerType.DDPMScheduler => new DDPMScheduler(options),
+                SchedulerType.LMS => new LMSScheduler(options),
+                SchedulerType.EulerAncestral => new EulerAncestralScheduler(options),
+                SchedulerType.DDPM => new DDPMScheduler(options),
                 _ => default
             };
         }
diff --git a/OnnxStack.WebUI/Extensions.cs b/OnnxStack.WebUI/Extensions.cs
@@ -2,8 +2,8 @@
 
 namespace OnnxStack.WebUI
 {
-	public static class Extensions
-	{
+    public static class Extensions
+    {
         public static MvcForm AjaxBeginFormModal(this IHtmlHelper htmlHelper, string handler)
         {
             return htmlHelper.AjaxBeginForm(new AjaxOptions
@@ -16,14 +16,14 @@ public static MvcForm AjaxBeginFormModal(this IHtmlHelper htmlHelper, string han
         }
 
         public static MvcForm AjaxBeginFormModal(this IHtmlHelper htmlHelper, string page, string handler)
-		{
-			return htmlHelper.AjaxBeginForm(new AjaxOptions
-			{
-				Url = $"{page}?handler={handler}",
-				HttpMethod = "POST",
-				UpdateTargetId = "simplemodal-data",
-				InsertionMode = InsertionMode.Replace
-			});
-		}
-	}
+        {
+            return htmlHelper.AjaxBeginForm(new AjaxOptions
+            {
+                Url = $"{page}?handler={handler}",
+                HttpMethod = "POST",
+                UpdateTargetId = "simplemodal-data",
+                InsertionMode = InsertionMode.Replace
+            });
+        }
+    }
 }
diff --git a/OnnxStack.WebUI/Hubs/StableDiffusionHub.cs b/OnnxStack.WebUI/Hubs/StableDiffusionHub.cs
@@ -2,6 +2,7 @@
 using OnnxStack.StableDiffusion.Common;
 using OnnxStack.StableDiffusion.Config;
 using OnnxStack.WebUI.Models;
+using System.Diagnostics;
 using System.Runtime.CompilerServices;
 using System.Text.Json;
 using System.Text.Json.Serialization;
@@ -83,6 +84,7 @@ public async IAsyncEnumerable<TextToImageResult> OnExecuteTextToImage(TextToImag
         /// <returns></returns>
         private async Task<TextToImageResult> GenerateTextToImageResult(TextToImageOptions options, CancellationToken cancellationToken)
         {
+            var timestamp = Stopwatch.GetTimestamp();
             options.Seed = GenerateSeed(options.Seed);
             var promptOptions = new PromptOptions
             {
@@ -102,14 +104,16 @@ private async Task<TextToImageResult> GenerateTextToImageResult(TextToImageOptio
                 InitialNoiseLevel = options.InitialNoiseLevel
             };
 
+           
             var fileInfo = CreateFileInfo(promptOptions, schedulerOptions);
             if (!await SaveOptionsFile(fileInfo, options))
                 return null;
 
             if (!await RunStableDiffusion(promptOptions, schedulerOptions, fileInfo, cancellationToken))
                 return null;
 
-            return new TextToImageResult(fileInfo.OutputImage, fileInfo.OutputImageUrl, options, fileInfo.OutputOptionsUrl);
+            var elapsed = (int)Stopwatch.GetElapsedTime(timestamp).TotalSeconds;
+            return new TextToImageResult(fileInfo.OutputImage, fileInfo.OutputImageUrl, options, fileInfo.OutputOptionsUrl, elapsed);
         }
 
 
@@ -241,6 +245,6 @@ private string CreateOutputUrl(string folder, string file)
     }
 
     public record ProgressResult(int Progress, int Total);
-    public record TextToImageResult(string OutputImage, string OutputImageUrl, TextToImageOptions OutputOptions, string OutputOptionsUrl);
+    public record TextToImageResult(string OutputImage, string OutputImageUrl, TextToImageOptions OutputOptions, string OutputOptionsUrl, int Elapsed);
     public record FileInfoResult(string OutputImage, string OutputImageUrl, string OutputImageFile, string OutputOptions, string OutputOptionsUrl, string OutputOptionsFile);
 }
diff --git a/OnnxStack.WebUI/Pages/StableDiffusion/TextToImage.cshtml b/OnnxStack.WebUI/Pages/StableDiffusion/TextToImage.cshtml
@@ -11,6 +11,13 @@
         resize: none;
         font-size: smaller !important
     }
+
+    .result-info{
+        font-style: italic;
+        padding-right: 3px;
+        opacity: 0.6;
+        font-size:x-small;
+    }
 </style>
 @Html.AntiForgeryToken()
 
@@ -135,19 +142,35 @@
         <div style="overflow:hidden;text-align:center">
             <img id="img-result" width="{{width}}" height="{{height}}" src="{{outputImageUrl}}" />
         </div>
-         <div class="d-flex flex-column pt-2">
-            <div class="progress">
-                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Completed</div>
-            </div>
+         <div class="d-flex flex-row flex-wrap-reverse justify-content-around pt-2" style="max-width:{{width}}px">
+          <div class="d-flex flex-row align-items-center">
+              <small class="result-info">Scheduler:</small>
+              <span>{{outputOptions.schedulerType}}</span>
+          </div>
+           <div class="d-flex flex-row align-items-center">
+              <small class="result-info">Steps:</small>
+              <span>{{outputOptions.inferenceSteps}}</span>
+          </div>
+           <div class="d-flex flex-row align-items-center">
+              <small class="result-info">Guidance:</small>
+              <span>{{outputOptions.guidanceScale}}</span>
+          </div>
+           <div class="d-flex flex-row align-items-center">
+              <small class="result-info">Seed:</small>
+              <span>{{outputOptions.seed}}</span>
+          </div>
+           <div class="d-flex flex-row align-items-center">
+              <small class="result-info">Elapsed:</small>
+              <span>{{elapsed}}s</span>
+          </div>
         </div>
         <div class="d-flex flex-row gap-2 pt-2">
             <div class="btn-group dropend w-100">
-                <a class="btn btn-sm btn-success w-100" href="{{outputImageUrl}}" download="{{OutputImage}}">Download</a>
+                <a class="btn btn-sm btn-success w-100" href="{{outputImageUrl}}" download="{{outputImage}}">Download</a>
                 <button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split w-25" data-bs-toggle="dropdown" aria-expanded="false">
-
                 </button>
                 <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" href="{{outputImageUrl}}" download="{{OutputImage}}">Download PNG</a></li>
+                    <li><a class="dropdown-item" href="{{outputImageUrl}}" download="{{outputImage}}">Download PNG</a></li>
                     <li><a class="dropdown-item" href="{{outputOptionsUrl}}" download="{{OutputOptions}}">Download JSON</a></li>
                 </ul>
             </div>
diff --git a/OnnxStack.WebUI/Pages/StableDiffusion/UploadImageModal.cshtml b/OnnxStack.WebUI/Pages/StableDiffusion/UploadImageModal.cshtml
@@ -6,7 +6,7 @@
 @using (Html.AjaxBeginFormModal("Index", "UploadImage"))
 {
     @Html.AntiForgeryToken()
-    <div class="modal-dialog" role="document" >
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Example Modal</h5>
@@ -18,10 +18,10 @@
                 @Html.HiddenFor(m => m.Width)
                 @Html.HiddenFor(m => m.Height)
                 @Html.HiddenFor(m => m.ImageBase64)
-                <div id="uploadImageContainer" >
+                <div id="uploadImageContainer">
                 </div>
                 <div class="d-flex flex-row gap-1">
-                    <input id="ImageFile" type="file" class="form-control w-100" />
+                    <input id="ImageFile" name="ImageFile" type="file" class="form-control w-100" />
                     <button id="btn-crop" type="button" class="btn btn-info w-50" disabled>Crop Image</button>
                 </div>
                 @Html.ValidationMessageFor(m => m.ImageBase64, "", new { @class = "text-danger" })
@@ -36,29 +36,27 @@
             var uploadImageHeight = +$('#Height').val();
             var uploadImageInput = $('#ImageFile');
             var uploadImageContainer = $('#uploadImageContainer');
-            var scaleFactor = uploadImageHeight >= 512 || uploadImageWidth >= 512 ? 0.8 : 1;
+            var uploadScaleFactor = scaleFactor(uploadImageHeight);
 
             var croppie = uploadImageContainer.croppie({
                 url: '/images/placeholder.jpg',
                 viewport: {
-                    width: uploadImageWidth * scaleFactor, // Set your desired width
-                    height: uploadImageHeight * scaleFactor, // Set your desired height
-                    type: 'square' // You can use 'square', 'circle', or 'rectangle'
+                    width: uploadImageWidth * uploadScaleFactor,
+                    height: uploadImageHeight * uploadScaleFactor,
+                    type: uploadImageWidth == uploadImageHeight ? 'square' : 'rectangle'
                 },
                 boundary: {
-                    width: (uploadImageWidth + 50) * scaleFactor, // Set the width of the boundary container
-                    height: (uploadImageHeight + 50) * scaleFactor // Set the height of the boundary container
+                    width: (uploadImageWidth + 50) * uploadScaleFactor,
+                    height: (uploadImageHeight + 50) * uploadScaleFactor
                 }
             });
 
-
             uploadImageInput.on('change', function (e) {
                 $('#btn-crop, #submit').attr('disabled', 'disabled');
                 const files = e.target.files;
                 if (files.length > 0) {
                     const reader = new FileReader();
                     reader.onload = function (e) {
-                        // Set the image source for Croppie
                         croppie.croppie('bind', {
                             url: e.target.result
                         });
@@ -74,7 +72,6 @@
                     $('#submit').removeAttr('disabled');
                 });
             });
-
         </script>
     </div>
 }
diff --git a/OnnxStack.WebUI/Program.cs b/OnnxStack.WebUI/Program.cs
@@ -1,6 +1,8 @@
 using OnnxStack.Web.Hubs;
 using OnnxStack.Core;
 using AspNetCore.Unobtrusive.Ajax;
+using MathNet.Numerics;
+using System.Text.Json.Serialization;
 
 namespace OnnxStack.WebUI
 {
@@ -13,7 +15,11 @@ public static void Main(string[] args)
             // Add services to the container.
             builder.Services.AddRazorPages();
             builder.Services.AddUnobtrusiveAjax();
-            builder.Services.AddSignalR();
+            builder.Services.AddSignalR()
+                .AddJsonProtocol(options =>
+                {
+                    options.PayloadSerializerOptions.Converters.Add(new JsonStringEnumConverter());
+                });
 
             builder.Services.AddOnnxStackStableDiffusion();
 
diff --git a/OnnxStack.WebUI/wwwroot/css/site.css b/OnnxStack.WebUI/wwwroot/css/site.css
@@ -95,7 +95,10 @@ button.accept-policy {
 
 
 .modal-dialog {
-    display: block;
+    margin-top: 40px !important;
+    margin-left: auto;
+    margin-right: auto;
+    display: table;
 }
 
 .simplemodal-overlay{
diff --git a/OnnxStack.WebUI/wwwroot/js/site.js b/OnnxStack.WebUI/wwwroot/js/site.js
@@ -31,6 +31,39 @@ const getJson = (url, vars) => {
 	});
 }
 
+
+const scaleFactor = (value) => {
+	if (value == 512) {
+		return 0.75;
+	}
+	else if (value == 576) {
+		return 0.7;
+	}
+	else if (value == 640) {
+		return 0.65;
+	}
+	else if (value == 704) {
+		return 0.6;
+	}
+	else if (value == 768) {
+		return 0.55;
+	}
+	else if (value == 832) {
+		return 0.5;
+	}
+	else if (value == 896) {
+		return 0.45;
+	}
+	else if (value == 960) {
+		return 0.4;
+	}
+	else if (value == 1024) {
+		return 0.35;
+	}
+	return 1;
+}
+
+
 const Enums = {
 	ProcessResult: Object.freeze({
 		Progress: 0,

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ public async Task RunAsync()`
`35`	`35`	`{`
`36`	`36`	`Prompt = prompt,`
`37`	`37`	`NegativePrompt = negativePrompt,`
`38`		`- SchedulerType = SchedulerType.LMSScheduler`
	`38`	`+ SchedulerType = SchedulerType.LMS`
`39`	`39`	`};`
`40`	`40`
`41`	`41`	`var schedulerOptions = new SchedulerOptions`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,16 @@`
`1`		`-namespace OnnxStack.StableDiffusion.Enums`
	`1`	`+using System.ComponentModel.DataAnnotations;`
	`2`	`+`
	`3`	`+namespace OnnxStack.StableDiffusion.Enums`
`2`	`4`	`{`
`3`	`5`	`public enum SchedulerType`
`4`	`6`	`{`
`5`		`- LMSScheduler = 0,`
`6`		`- EulerAncestralScheduler = 1,`
`7`		`- DDPMScheduler = 3`
	`7`	`+ [Display(Name = "LMS")]`
	`8`	`+ LMS = 0,`
	`9`	`+`
	`10`	`+ [Display(Name = "Euler Ancestral")]`
	`11`	`+ EulerAncestral = 1,`
	`12`	`+`
	`13`	`+ [Display(Name = "DDPM")]`
	`14`	`+ DDPM = 3`
`8`	`15`	`}`
`9`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -242,9 +242,9 @@ private static IScheduler GetScheduler(PromptOptions prompt, SchedulerOptions op`
`242`	`242`	`{`
`243`	`243`	`return prompt.SchedulerType switch`
`244`	`244`	`{`
`245`		`- SchedulerType.LMSScheduler => new LMSScheduler(options),`
`246`		`- SchedulerType.EulerAncestralScheduler => new EulerAncestralScheduler(options),`
`247`		`- SchedulerType.DDPMScheduler => new DDPMScheduler(options),`
	`245`	`+ SchedulerType.LMS => new LMSScheduler(options),`
	`246`	`+ SchedulerType.EulerAncestral => new EulerAncestralScheduler(options),`
	`247`	`+ SchedulerType.DDPM => new DDPMScheduler(options),`
`248`	`248`	`_ => default`
`249`	`249`	`};`
`250`	`250`	`}`
Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,10 @@ button.accept-policy {`
`95`	`95`
`96`	`96`
`97`	`97`	`.modal-dialog {`
`98`		`- display: block;`
	`98`	`+ margin-top: 40px !important;`
	`99`	`+ margin-left: auto;`
	`100`	`+ margin-right: auto;`
	`101`	`+ display: table;`
`99`	`102`	`}`
`100`	`103`
`101`	`104`	`.simplemodal-overlay{`