Skip to content
This repository was archived by the owner on Nov 27, 2024. It is now read-only.

Commit 4288f94

Browse files
saddam213saddam213
committed
UnobtrusiveAjax, Modal support added
1 parent 0d6527c commit 4288f94

File tree

15 files changed

+1108
-9
lines changed

15 files changed

+1108
-9
lines changed

‎OnnxStack.WebUI/Extensions.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Microsoft.AspNetCore.Mvc.Rendering;
2+
3+
namespace OnnxStack.WebUI
4+
{
5+
public static class Extensions
6+
{
7+
public static MvcForm AjaxBeginFormModal(this IHtmlHelper htmlHelper, string handler)
8+
{
9+
return htmlHelper.AjaxBeginForm(new AjaxOptions
10+
{
11+
Url = $"?handler={handler}",
12+
HttpMethod = "POST",
13+
UpdateTargetId = "simplemodal-data",
14+
InsertionMode = InsertionMode.Replace
15+
});
16+
}
17+
18+
public static MvcForm AjaxBeginFormModal(this IHtmlHelper htmlHelper, string page, string handler)
19+
{
20+
return htmlHelper.AjaxBeginForm(new AjaxOptions
21+
{
22+
Url = $"{page}?handler={handler}",
23+
HttpMethod = "POST",
24+
UpdateTargetId = "simplemodal-data",
25+
InsertionMode = InsertionMode.Replace
26+
});
27+
}
28+
}
29+
}

‎OnnxStack.WebUI/Hubs/StableDiffusionHub.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ private async Task<bool> SaveOptionsFile(FileInfoResult fileInfo, TextToImageOpt
175175
private FileInfoResult CreateFileInfo(PromptOptions promptOptions, SchedulerOptions schedulerOptions)
176176
{
177177
var rand = Path.GetFileNameWithoutExtension(Path.GetRandomFileName());
178-
var output = $"{schedulerOptions.Seed}_{promptOptions.SchedulerType}_{rand}";
178+
var output = $"{schedulerOptions.Seed}-{rand}";
179179
var outputImage = $"{output}.png";
180180
var outputImageUrl = CreateOutputUrl("TextToImage", outputImage);
181181
var outputImageFile = UrlToPhysicalPath(outputImageUrl);

‎OnnxStack.WebUI/Models/ModalResult.cs‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Newtonsoft.Json;
3+
4+
namespace OnnxStack.Web.Models
5+
{
6+
public class ModalResult : ActionResult
7+
{
8+
public ModalResult()
9+
{
10+
}
11+
12+
public ModalResult(object data)
13+
{
14+
JsonData = JsonConvert.SerializeObject(data);
15+
}
16+
17+
public string JsonData { get; set; }
18+
19+
20+
public override async Task ExecuteResultAsync(ActionContext context)
21+
{
22+
var response = context.HttpContext.Response;
23+
response.ContentType = "text/html";
24+
if (!string.IsNullOrEmpty(JsonData))
25+
{
26+
await response.WriteAsync(@"<script>(function () { $.modal.close(" + JsonData + "); })();</script>");
27+
}
28+
else
29+
{
30+
await response.WriteAsync(@"<script>(function () { $.modal.close(); })();</script>");
31+
}
32+
}
33+
34+
public static ModalResult Close()
35+
{
36+
return new ModalResult();
37+
}
38+
39+
public static ModalResult Close(object result)
40+
{
41+
return new ModalResult(result);
42+
}
43+
44+
public static ModalResult Success(string message = "")
45+
{
46+
return new ModalResult(new { Success = true, Messsage = message });
47+
}
48+
49+
public static ModalResult Error(string message = "")
50+
{
51+
return new ModalResult(new { Success = false, Messsage = message });
52+
}
53+
}
54+
}

‎OnnxStack.WebUI/Models/UploadImageModel.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
using System.ComponentModel.DataAnnotations;
2+
3+
namespace OnnxStack.Web.Models
4+
{
5+
public class UploadImageModel
6+
{
7+
public int Width { get; set; }
8+
public int Height { get; set; }
9+
10+
[Required]
11+
public string ImageBase64 { get; set; }
12+
}
13+
}

‎OnnxStack.WebUI/OnnxStack.WebUI.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
</PropertyGroup>
99

1010
<ItemGroup>
11+
<PackageReference Include="AspNetCore.Unobtrusive.Ajax" Version="2.0.0" />
1112
<PackageReference Include="Microsoft.ML.OnnxRuntime.DirectML" Version="1.16.0" />
1213
<PackageReference Include="System.Linq.Async" Version="6.0.1" />
1314
</ItemGroup>

‎OnnxStack.WebUI/Pages/Shared/_Layout.cshtml‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
88
<link rel="stylesheet" href="~/css/fontawesome.css" />
99
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
11+
<script src="~/lib/jquery/dist/jquery.min.js"></script>
1012
</head>
1113
<body>
1214
<header>
@@ -41,11 +43,17 @@
4143
</div>
4244
</footer>
4345

44-
<script src="~/lib/jquery/dist/jquery.min.js"></script>
46+
@{
47+
await Html.RenderPartialAsync("_SharedTemplates");
48+
}
49+
50+
4551
<script src="~/lib/jquery.unobtrusive-ajax.min.js"></script>
4652
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
4753
<script src="~/lib/mustache/mustache.js"></script>
4854
<script src="~/lib/signalr/signalr.min.js"></script>
55+
<script src="~/lib/modal.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
4957
<script src="~/js/site.js" asp-append-version="true"></script>
5058

5159
@await RenderSectionAsync("Scripts", required: false)

‎OnnxStack.WebUI/Pages/Shared/_Modal.cshtml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div id="modal">
2+
@RenderBody()
3+
</div>

‎OnnxStack.WebUI/Pages/Shared/_SharedTemplates.cshtml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script id="modalConfirmTemplate" type="text/html">
2+
<div class="modalform modal-dialog modal" tabindex="-1" role="dialog">
3+
<div class="modal-dialog" role="document">
4+
<div class="modal-content">
5+
<div class="modal-header">
6+
<h5 class="modal-title">{{Header}}</h5>
7+
<a class="simplemodal-close" aria-label="Close">
8+
<span aria-hidden="true">&times;</span>
9+
</a>
10+
</div>
11+
<div class="modal-body">
12+
<p>{{Body}}</p>
13+
</div>
14+
<div class="modal-footer btn-group">
15+
<a class="btn btn-outline-success simplemodal-yes">{{ButtonYes}}</a>
16+
<a class="btn btn-outline-secondary simplemodal-no">{{ButtonNo}}</a>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</script>
22+
23+
<script id="modalNotifyTemplate" type="text/html">
24+
<div class="modalform modal-dialog modal" data-easein="bounce" tabindex="-1" role="dialog">
25+
<div class="modal-dialog" role="document">
26+
<div class="modal-content">
27+
<div class="modal-header">
28+
<h5 class="modal-title">{{Header}}</h5>
29+
<a class="simplemodal-close">
30+
<span aria-hidden="true">&times;</span>
31+
</a>
32+
</div>
33+
<div class="modal-body">
34+
<p>{{Body}}</p>
35+
</div>
36+
<div class="modal-footer btn-group">
37+
<a class="btn btn-outline-primary simplemodal-close">{{Button}}</a>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</script>
43+

‎OnnxStack.WebUI/Pages/StableDiffusion/Index.cshtml.cs‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
using Microsoft.AspNetCore.Mvc.RazorPages;
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
using OnnxStack.Web.Models;
24

35
namespace OnnxStack.WebUI.Pages.StableDiffusion
46
{
@@ -16,5 +18,28 @@ public void OnGet()
1618
{
1719

1820
}
21+
22+
23+
public ActionResult OnGetUploadImage(int width, int height)
24+
{
25+
return Partial("UploadImageModal", new UploadImageModel
26+
{
27+
Width = width,
28+
Height = height
29+
});
30+
}
31+
32+
public ActionResult OnPostUploadImage(UploadImageModel model)
33+
{
34+
if (!ModelState.IsValid)
35+
return Partial("UploadImageModal", model);
36+
37+
//save base64 image to file
38+
System.IO.File.WriteAllBytes("image.png", Convert.FromBase64String(model.ImageBase64.Split(',')[1]));
39+
40+
//return CloseModal(object);
41+
//return CloseModalError("Error Message");
42+
return ModalResult.Success();
43+
}
1944
}
2045
}

‎OnnxStack.WebUI/Pages/StableDiffusion/TextToImage.cshtml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
font-size: smaller !important
1313
}
1414
</style>
15-
15+
@Html.AntiForgeryToken()
1616

1717
<div class="d-flex flex-row h-100 pt-1 pb-1">
1818
<div class="d-flex flex-fill">
1919

2020
@* Controls *@
21-
<div class="d-flex flex-column w-100 me-2 p-2 border border-1" style="max-width:600px">
21+
<div class="d-flex flex-column w-100 me-2 p-2 border border-1" style="max-width:480px">
2222

2323
<h4 class="pb-0 mb-0">Text To Image</h4>
2424
<small>Text to image transforms textual descriptions into visual content</small>
@@ -115,7 +115,7 @@
115115

116116
<script id="progressResultTemplate" type="text/html">
117117
<div class="output-progress d-flex flex-column border border-1 p-1" style="min-width:256px;">
118-
<div style="overflow:hidden;">
118+
<div style="overflow:hidden;text-align:center">
119119
<img width="{{width}}" height="{{height}}" src="~/images/placeholder.jpg" />
120120
</div>
121121
<div class="d-flex flex-column pt-2">
@@ -376,6 +376,11 @@
376376
}).trigger("input");
377377
378378
379+
$("#modal-controller").on("click", async function () {
380+
const width = getWidth();
381+
const height = getHeight();
382+
const result = await openModalGet(`/StableDiffusion?handler=UploadImage&Width=${width}&Height=${height}`);
383+
});
379384
380385
381386
// Map signalr functions

0 commit comments

Comments
 (0)