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

Commit 145ff24

Browse files
saddam213saddam213
committed
TextToImage WebUI process completed
1 parent 396b210 commit 145ff24

File tree

9 files changed

+593
-458
lines changed

9 files changed

+593
-458
lines changed

‎OnnxStack.StableDiffusion/Config/SchedulerOptions.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ public class SchedulerOptions
5353
/// <summary>
5454
/// Gets or sets the initial noise level for Image 2 Image
5555
/// </summary>
56-
public float InitialNoiseLevel { get; set; } = 1f;
56+
public float InitialNoiseLevel { get; set; } = 0f;
5757

5858
public int TrainTimesteps { get; set; } = 1000;
5959
public float BetaStart { get; set; } = 0.00085f;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>@ViewData["Title"] - OnnxStack.WebUI</title>
6+
<title>@ViewData["Title"] - OnnxStack</title>
77
<link rel="stylesheet" href="~/lib/bootstrap/dist/default.css" id="themeStylesheet" />
88
<link rel="stylesheet" href="~/css/fontawesome.css" />
99
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
@@ -14,7 +14,7 @@
1414
<header>
1515
<nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow bg-primary" data-bs-theme="dark">
1616
<div class="container-fluid">
17-
<a class="navbar-brand" asp-area="" asp-page="/Index">OnnxStack.WebUI</a>
17+
<a class="navbar-brand" asp-area="" asp-page="/Index">OnnxStack</a>
1818
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
1919
aria-expanded="false" aria-label="Toggle navigation">
2020
<span class="navbar-toggler-icon"></span>
@@ -55,7 +55,7 @@
5555

5656
<footer class=" border-dark border-top footer text-muted">
5757
<div class="container-fluid">
58-
&copy; 2023 - OnnxStack.Web
58+
&copy; 2023 - OnnxStack
5959
</div>
6060
</footer>
6161

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@using OnnxStack.StableDiffusion.Config;
2+
@using OnnxStack.StableDiffusion.Enums;
3+
@model PromptOptions
4+
@{
5+
}
6+
7+
@* Prompt Parameters *@
8+
<form id="PromptParameters" class="" autocomplete="off">
9+
<div class="d-flex flex-column flex-grow-0 gap-2 p-1 w-100">
10+
<div class="d-flex flex-column">
11+
<small>Prompt</small>
12+
@Html.TextAreaFor(m => m.Prompt, new { @class = "form-control form-control-sm p-1", @rows = 3 })
13+
@Html.ValidationMessageFor(m => m.Prompt, "", new { @class = "text-danger" })
14+
</div>
15+
<div class="d-flex flex-column">
16+
<small>Negative Prompt</small>
17+
@Html.TextAreaFor(m => m.NegativePrompt, new { @class = "form-control form-control-sm", @rows = 2 })
18+
@Html.ValidationMessageFor(m => m.NegativePrompt, "", new { @class = "text-danger" })
19+
</div>
20+
<div class="w-100">
21+
<small>Scheduler</small>
22+
@Html.DropDownListFor( m => m.SchedulerType,Html.GetEnumSelectList<SchedulerType>(), new { @class = "form-control form-select-sm"})
23+
</div>
24+
</div>
25+
</form>

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@using OnnxStack.StableDiffusion.Config;
2+
@using OnnxStack.StableDiffusion.Enums;
3+
@model SchedulerOptions
4+
@{
5+
var ValidSizes = new List<int> { 64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024 };
6+
}
7+
8+
@* Scheduler Parameters *@
9+
<form id="SchedulerParameters" class="h-100" autocomplete="off">
10+
11+
<div class="d-flex flex-column flex-grow-1 pt-3">
12+
<ul class="nav nav-tabs" id="tab-settings" role="tablist">
13+
<li class="nav-item" role="presentation">
14+
<button class="nav-link active" id="options-tab" data-bs-toggle="tab" data-bs-target="#options" type="button" role="tab" aria-controls="options" aria-selected="true">
15+
Options
16+
</button>
17+
</li>
18+
<li class="nav-item" role="presentation">
19+
<button class="nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced" type="button" role="tab" aria-controls="advanced" aria-selected="false">
20+
Advanced
21+
</button>
22+
</li>
23+
</ul>
24+
<div class="tab-content" id="tab-settings-content">
25+
26+
@* Basic Options *@
27+
<div class="tab-pane fade show active" id="options" role="tabpanel" aria-labelledby="options-tab">
28+
29+
<div class="d-flex flex-column w-100 gap-2 p-1">
30+
<div class="d-flex flex-row gap-2">
31+
32+
<div class="w-100">
33+
<small>Seed <i>(0 = Random)</i></small>
34+
@Html.TextBoxFor( m => m.Seed, new { @class = "form-control form-control-sm"})
35+
</div>
36+
<div class="w-50">
37+
<small>Width</small>
38+
@Html.DropDownListFor( m => m.Width, new SelectList(ValidSizes), new { @class = "form-control form-select-sm"})
39+
</div>
40+
<div class="w-50">
41+
<small>Height</small>
42+
@Html.DropDownListFor( m => m.Height, new SelectList(ValidSizes), new { @class = "form-control form-select-sm"})
43+
</div>
44+
45+
</div>
46+
47+
<div class="d-flex flex-row gap-2">
48+
<div class="d-flex flex-column mb-2 w-100">
49+
<small>Steps</small>
50+
<div class="d-flex flex-row slider-container">
51+
@Html.TextBoxFor(m => m.InferenceSteps, new { @type="range", @class = "slider", min="4", max="100", step="1" })
52+
<label>0</label>
53+
</div>
54+
</div>
55+
<div class="d-flex flex-column mb-2 w-100">
56+
<small>Guidance</small>
57+
<div class="d-flex flex-row slider-container">
58+
@Html.TextBoxFor(m => m.GuidanceScale, new { @type="range", @class = "slider", min="0", max="40", step="0.1" })
59+
<label>0</label>
60+
</div>
61+
</div>
62+
</div>
63+
64+
65+
<div class="image2image-control">
66+
<div class="d-flex flex-row gap-2">
67+
<div class="d-flex flex-column mb-2 w-100">
68+
<small>Initial Noise</small>
69+
<div class="d-flex flex-row slider-container">
70+
@Html.TextBoxFor(m => m.InitialNoiseLevel, new { @type="range", @class = "slider", min="-1", max="1", step="0.1" })
71+
<label>0</label>
72+
</div>
73+
</div>
74+
<div class="d-flex flex-column mb-2 w-100">
75+
<small>Strength</small>
76+
<div class="d-flex flex-row slider-container">
77+
@Html.TextBoxFor(m => m.Strength, new { @type="range", @class = "slider", min="0", max="1", step="0.01" })
78+
<label>0</label>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
84+
85+
86+
</div>
87+
</div>
88+
89+
@* Advanced Options *@
90+
<div class="tab-pane fade" id="advanced" role="tabpanel" aria-labelledby="advanced-tab">
91+
<div class="d-flex flex-column w-100 gap-2 p-1">
92+
93+
<div class="d-flex flex-row align-items-center gap-2">
94+
<div class="w-100">
95+
<small>TrainTimesteps</small>
96+
@Html.TextBoxFor( m => m.TrainTimesteps, new { @class = "form-control form-control-sm"})
97+
</div>
98+
99+
<div class="w-100">
100+
<small>Timestep Spacing</small>
101+
@Html.DropDownListFor( m => m.TimestepSpacing, Html.GetEnumSelectList<TimestepSpacingType>(), new { @class = "form-control form-select-sm"})
102+
</div>
103+
<div class="w-100">
104+
<small>StepsOffset</small>
105+
@Html.TextBoxFor( m => m.StepsOffset, new { @class = "form-control form-control-sm"})
106+
</div>
107+
<div class="w-100">
108+
<div class="d-flex flex-row align-items-center mt-3">
109+
<input type="checkbox" asp-for="@Model.UseKarrasSigmas" />
110+
<small class="ms-1">Karras Sigmas</small>
111+
</div>
112+
</div>
113+
114+
</div>
115+
116+
<div class="d-flex flex-row align-items-center gap-2">
117+
<div class="w-100">
118+
<small>BetaSchedule</small>
119+
@Html.DropDownListFor( m => m.BetaSchedule, Html.GetEnumSelectList<BetaScheduleType>(), new { @class = "form-control form-select-sm"})
120+
</div>
121+
<div class="w-100">
122+
<small>BetaStart</small>
123+
@Html.TextBoxFor( m => m.BetaStart, new { @class = "form-control form-control-sm"})
124+
</div>
125+
<div class="w-100">
126+
<small>BetaEnd</small>
127+
@Html.TextBoxFor( m => m.BetaEnd, new { @class = "form-control form-control-sm"})
128+
</div>
129+
<div class="w-100">
130+
<small>MaximumBeta</small>
131+
@Html.TextBoxFor( m => m.MaximumBeta, new { @class = "form-control form-control-sm"})
132+
</div>
133+
</div>
134+
135+
<div class="d-flex flex-row align-items-center gap-2">
136+
137+
<div class="w-100">
138+
<small>Variance</small>
139+
@Html.DropDownListFor( m => m.VarianceType, Html.GetEnumSelectList<VarianceType>(), new { @class = "form-control form-select-sm"})
140+
</div>
141+
<div class="w-100">
142+
<small>Prediction</small>
143+
@Html.DropDownListFor( m => m.PredictionType, Html.GetEnumSelectList<PredictionType>(), new { @class = "form-control form-select-sm"})
144+
</div>
145+
<div class="w-100">
146+
<small>AlphaTransform</small>
147+
@Html.DropDownListFor( m => m.AlphaTransformType, Html.GetEnumSelectList<AlphaTransformType>(), new { @class = "form-control form-select-sm"})
148+
</div>
149+
<div class="w-100">
150+
<div class="d-flex flex-row align-items-center mt-3">
151+
<input type="checkbox" asp-for="@Model.Thresholding" />
152+
<small class="ms-1">Thresholding</small>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<div class="d-flex flex-row align-items-center gap-2">
158+
<div class="w-100">
159+
<small>ClipSampleRange</small>
160+
<input type="text" asp-for="@Model.ClipSampleRange" class="form-control form-control-sm" />
161+
</div>
162+
<div class="w-100">
163+
<div class="d-flex flex-row align-items-center mt-3">
164+
<input type="checkbox" asp-for="@Model.ClipSample" />
165+
<small class="ms-1">ClipSample</small>
166+
</div>
167+
</div>
168+
<div class="w-100">
169+
</div>
170+
<div class="w-100">
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
177+
</div>
178+
179+
</form>

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

Lines changed: 99 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,105 @@
11
<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>
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>
2121
</script>
2222

2323
<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>
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>
4242
</script>
4343

44+
45+
46+
<script id="historyProgressTemplate" type="text/html">
47+
<div class="output-progress d-flex flex-column border border-1 border-dark p-1">
48+
<div style="overflow:hidden;text-align:center">
49+
<div class="image-container">
50+
<img width="{{width}}" height="{{height}}" />
51+
</div>
52+
</div>
53+
<div class="d-flex flex-column pt-2">
54+
<div class="progress">
55+
<div class="progress-result progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
56+
</div>
57+
</div>
58+
<div class="d-flex flex-row gap-2 pt-2">
59+
<button type="button" class="btn btn-sm btn-success w-100" disabled>Download</button>
60+
<button type="button" class="btn btn-sm btn-info w-100" disabled>Image To Image</button>
61+
</div>
62+
</div>
63+
</script>
64+
65+
<script id="historyOutputTemplate" type="text/html">
66+
<div class="d-flex flex-column border border-1 border-dark p-1" >
67+
<div class="d-flex align-items-center justify-content-center" style="overflow:hidden;text-align:center;min-width:256px;min-height:256px;" >
68+
<img id="img-result" width="{{width}}" height="{{height}}" src="{{imageUrl}}" alt="{{imageName}}" />
69+
</div>
70+
<div class="d-flex flex-row flex-wrap-reverse text-wrap justify-content-around pt-2" style="max-width:240px">
71+
<div class="d-flex flex-row align-items-center">
72+
<small class="result-info">Scheduler:</small>
73+
<span>{{blueprint.prompt.schedulerType}}</span>
74+
</div>
75+
<div class="d-flex flex-row align-items-center">
76+
<small class="result-info">Steps:</small>
77+
<span>{{blueprint.options.inferenceSteps}}</span>
78+
</div>
79+
<div class="d-flex flex-row align-items-center">
80+
<small class="result-info">Guidance:</small>
81+
<span>{{blueprint.options.guidanceScale}}</span>
82+
</div>
83+
<div class="d-flex flex-row align-items-center">
84+
<small class="result-info">Seed:</small>
85+
<span class="seed-host">{{blueprint.options.seed}}</span>
86+
</div>
87+
<div class="d-flex flex-row align-items-center">
88+
<small class="result-info">Elapsed:</small>
89+
<span>{{elapsed}}s</span>
90+
</div>
91+
</div>
92+
<div class="d-flex flex-row gap-2 pt-2">
93+
<div class="btn-group dropend w-100">
94+
<a class="btn btn-sm btn-success w-100" href="{{imageUrl}}" download="{{imageName}}">Download</a>
95+
<button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split w-25" data-bs-toggle="dropdown" aria-expanded="false">
96+
</button>
97+
<ul class="dropdown-menu">
98+
<li><a class="dropdown-item" href="{{imageUrl}}" download="{{imageName}}">Download PNG</a></li>
99+
<li><a class="dropdown-item" href="{{blueprintUrl}}" download="{{blueprintName}}">Download JSON</a></li>
100+
</ul>
101+
</div>
102+
<button type="button" class="btn btn-sm btn-info w-100" disabled>Image To Image</button>
103+
</div>
104+
</div>
105+
</script>

0 commit comments

Comments
 (0)