Skip to content

Commit d0dc488

Browse files
mythzmythz
committed
Add initial working TextToImage UI
1 parent d30d41c commit d0dc488

File tree

9 files changed

+713
-125
lines changed

9 files changed

+713
-125
lines changed

‎AiServer.ServiceInterface/AppData.cs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,9 +154,10 @@ public MediaModel GetMediaModelByApiModel(MediaProvider provider, string apiMode
154154
throw HttpError.NotFound($"{apiModel} is not a supported model for {provider.Name} ({provider.MediaType?.Id})");
155155
}
156156

157-
public string? GetQualifiedMediaModel(MediaProvider provider, string apiModel)
157+
public string? GetQualifiedMediaModel(ModelType modelType, string apiModel)
158158
{
159-
foreach (var mediaModel in MediaModels)
159+
foreach (var mediaModel in MediaModels
160+
.Where(x => x.ModelType == modelType))
160161
{
161162
foreach (var entry in mediaModel.ApiModels)
162163
{

‎AiServer.ServiceInterface/GenerationServices.cs

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,15 @@ public async Task<object> Any(GetJobStatus request)
5555

5656
public object Any(ActiveMediaModels request)
5757
{
58-
var imageModels = appData.MediaModels
59-
.Where(x => x.ModelType == ModelType.TextToImage)
60-
.Select(x => x.Id);
61-
6258
var activeModels = appData.MediaProviders
59+
.OrderByDescending(x => x.Priority)
60+
.ThenBy(x => x.Id)
61+
.ThenBy(x => x.Name)
6362
.SelectMany(x =>
64-
x.Models.Select(m => appData.GetQualifiedMediaModel(x, m)))
63+
x.Models.Select(m => appData.GetQualifiedMediaModel(ModelType.TextToImage, m)))
6564
.Where(x => x != null)
6665
.Select(x => x!) // Non-null assertion after filtering out null values
67-
.Distinct()
68-
.OrderBy(x => x);
66+
.Distinct();
6967

7068
return new StringsResponse
7169
{

‎AiServer.ServiceModel/Generations.cs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ public class ActiveMediaModels : IGet, IReturn<StringsResponse> {}
1212
[Tag("AI")]
1313
[Api("Convert speech to text")]
1414
[Description("Transcribe audio content to text")]
15+
[SystemJson(UseSystemJson.Response)]
1516
public class SpeechToText : IGeneration, IReturn<GenerationResponse>
1617
{
1718
[ApiMember(Description = "The audio stream containing the speech to be transcribed")]
@@ -33,6 +34,7 @@ public class SpeechToText : IGeneration, IReturn<GenerationResponse>
3334
[Tag("AI")]
3435
[Api("Convert text to speech")]
3536
[Description("Generate speech audio from text input")]
37+
[SystemJson(UseSystemJson.Response)]
3638
public class TextToSpeech : IGeneration, IReturn<GenerationResponse>
3739
{
3840
[ApiMember(Description = "The text to be converted to speech")]
@@ -58,6 +60,7 @@ public class TextToSpeech : IGeneration, IReturn<GenerationResponse>
5860
[Tag("AI")]
5961
[Api("Generate image from text description")]
6062
[Description("Create an image based on a text prompt")]
63+
[SystemJson(UseSystemJson.Response)]
6164
public class TextToImage : IGeneration, IReturn<GenerationResponse>
6265
{
6366
[ApiMember(Description = "The main prompt describing the desired image")]
@@ -108,6 +111,7 @@ public class TextToImage : IGeneration, IReturn<GenerationResponse>
108111
[Tag("AI")]
109112
[Api("Generate image from another image")]
110113
[Description("Create a new image based on an existing image and a text prompt")]
114+
[SystemJson(UseSystemJson.Response)]
111115
public class ImageToImage : IGeneration, IReturn<GenerationResponse>
112116
{
113117
[ApiMember(Description = "The image to use as input")]
@@ -155,6 +159,7 @@ public class ImageToImage : IGeneration, IReturn<GenerationResponse>
155159
[Tag("AI")]
156160
[Api("Upscale an image")]
157161
[Description("Increase the resolution and quality of an input image")]
162+
[SystemJson(UseSystemJson.Response)]
158163
public class ImageUpscale : IGeneration, IReturn<GenerationResponse>
159164
{
160165
[ApiMember(Description = "The image to upscale")]
@@ -181,6 +186,7 @@ public class ImageUpscale : IGeneration, IReturn<GenerationResponse>
181186
[Tag("AI")]
182187
[Api("Generate image with masked area")]
183188
[Description("Create a new image by applying a mask to an existing image and generating content for the masked area")]
189+
[SystemJson(UseSystemJson.Response)]
184190
public class ImageWithMask : IGeneration, IReturn<GenerationResponse>
185191
{
186192
[ApiMember(Description = "Prompt describing the desired output in the masked area")]
@@ -229,6 +235,7 @@ public class ImageWithMask : IGeneration, IReturn<GenerationResponse>
229235
[Tag("AI")]
230236
[Api("Convert image to text")]
231237
[Description("Extract text content from an image")]
238+
[SystemJson(UseSystemJson.Response)]
232239
public class ImageToText : IGeneration, IReturn<GenerationResponse>
233240
{
234241
[ApiMember(Description = "The image to convert to text")]

‎AiServer/wwwroot/css/app.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -987,6 +987,14 @@ select{
987987
grid-column: span 6 / span 6;
988988
}
989989

990+
.col-span-2 {
991+
grid-column: span 2 / span 2;
992+
}
993+
994+
.row-span-2 {
995+
grid-row: span 2 / span 2;
996+
}
997+
990998
.-m-2\.5 {
991999
margin: -0.625rem;
9921000
}
@@ -1189,6 +1197,26 @@ select{
11891197
margin-top: auto;
11901198
}
11911199

1200+
.mb-32 {
1201+
margin-bottom: 8rem;
1202+
}
1203+
1204+
.mt-1\.5 {
1205+
margin-top: 0.375rem;
1206+
}
1207+
1208+
.mt-20 {
1209+
margin-top: 5rem;
1210+
}
1211+
1212+
.ml-8 {
1213+
margin-left: 2rem;
1214+
}
1215+
1216+
.mb-20 {
1217+
margin-bottom: 5rem;
1218+
}
1219+
11921220
.block {
11931221
display: block;
11941222
}
@@ -1381,6 +1409,10 @@ select{
13811409
width: 100vw;
13821410
}
13831411

1412+
.w-7 {
1413+
width: 1.75rem;
1414+
}
1415+
13841416
.min-w-0 {
13851417
min-width: 0px;
13861418
}
@@ -1980,6 +2012,11 @@ select{
19802012
border-color: rgb(250 204 21 / var(--tw-border-opacity));
19812013
}
19822014

2015+
.border-yellow-300 {
2016+
--tw-border-opacity: 1;
2017+
border-color: rgb(253 224 71 / var(--tw-border-opacity));
2018+
}
2019+
19832020
.bg-\[\#f4f4f4\] {
19842021
--tw-bg-opacity: 1;
19852022
background-color: rgb(244 244 244 / var(--tw-bg-opacity));
@@ -2166,16 +2203,35 @@ select{
21662203
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
21672204
}
21682205

2206+
.bg-\[radial-gradient\(ellipse_at_center\2c _var\(--tw-gradient-stops\)\)\] {
2207+
background-image: radial-gradient(ellipse at center, var(--tw-gradient-stops));
2208+
}
2209+
21692210
.from-\[\#ff80b5\] {
21702211
--tw-gradient-from: #ff80b5 var(--tw-gradient-from-position);
21712212
--tw-gradient-to: rgb(255 128 181 / 0) var(--tw-gradient-to-position);
21722213
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
21732214
}
21742215

2216+
.from-gray-700 {
2217+
--tw-gradient-from: #374151 var(--tw-gradient-from-position);
2218+
--tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
2219+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
2220+
}
2221+
2222+
.via-gray-900 {
2223+
--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
2224+
--tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);
2225+
}
2226+
21752227
.to-\[\#9089fc\] {
21762228
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
21772229
}
21782230

2231+
.to-black {
2232+
--tw-gradient-to: #000 var(--tw-gradient-to-position);
2233+
}
2234+
21792235
.fill-gray-300 {
21802236
fill: #d1d5db;
21812237
}
@@ -2816,10 +2872,19 @@ select{
28162872
color: rgb(161 98 7 / var(--tw-text-opacity));
28172873
}
28182874

2875+
.text-zinc-100 {
2876+
--tw-text-opacity: 1;
2877+
color: rgb(244 244 245 / var(--tw-text-opacity));
2878+
}
2879+
28192880
.underline {
28202881
text-decoration-line: underline;
28212882
}
28222883

2884+
.underline-offset-4 {
2885+
text-underline-offset: 4px;
2886+
}
2887+
28232888
.placeholder-red-300::-moz-placeholder {
28242889
--tw-placeholder-opacity: 1;
28252890
color: rgb(252 165 165 / var(--tw-placeholder-opacity));
@@ -2966,6 +3031,11 @@ select{
29663031
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
29673032
}
29683033

3034+
.drop-shadow {
3035+
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
3036+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3037+
}
3038+
29693039
.\!invert {
29703040
--tw-invert: invert(100%) !important;
29713041
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
@@ -3318,6 +3388,10 @@ select{
33183388
color: rgb(7 89 133 / var(--tw-text-opacity));
33193389
}
33203390

3391+
.hover\:underline:hover {
3392+
text-decoration-line: underline;
3393+
}
3394+
33213395
.hover\:opacity-70:hover {
33223396
opacity: 0.7;
33233397
}
@@ -3565,6 +3639,10 @@ select{
35653639
opacity: 1;
35663640
}
35673641

3642+
.group:hover .group-hover\:visible {
3643+
visibility: visible;
3644+
}
3645+
35683646
.group:hover .group-hover\:inline {
35693647
display: inline;
35703648
}
@@ -3583,6 +3661,10 @@ select{
35833661
opacity: 1;
35843662
}
35853663

3664+
.group:hover .group-hover\:opacity-40 {
3665+
opacity: 0.4;
3666+
}
3667+
35863668
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
35873669
--tw-divide-opacity: 1;
35883670
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
@@ -4082,6 +4164,10 @@ select{
40824164
margin-top: 4rem;
40834165
}
40844166

4167+
.sm\:mb-1 {
4168+
margin-bottom: 0.25rem;
4169+
}
4170+
40854171
.sm\:block {
40864172
display: block;
40874173
}
@@ -4114,6 +4200,10 @@ select{
41144200
width: 100%;
41154201
}
41164202

4203+
.sm\:w-72 {
4204+
width: 18rem;
4205+
}
4206+
41174207
.sm\:max-w-3xl {
41184208
max-width: 48rem;
41194209
}
@@ -4126,6 +4216,10 @@ select{
41264216
max-width: 65ch;
41274217
}
41284218

4219+
.sm\:max-w-sm {
4220+
max-width: 24rem;
4221+
}
4222+
41294223
.sm\:translate-y-0 {
41304224
--tw-translate-y: 0px;
41314225
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4151,6 +4245,10 @@ select{
41514245
grid-template-columns: repeat(3, minmax(0, 1fr));
41524246
}
41534247

4248+
.sm\:grid-cols-4 {
4249+
grid-template-columns: repeat(4, minmax(0, 1fr));
4250+
}
4251+
41544252
.sm\:flex-row-reverse {
41554253
flex-direction: row-reverse;
41564254
}
@@ -4190,6 +4288,10 @@ select{
41904288
border-top-right-radius: 0px;
41914289
}
41924290

4291+
.sm\:border-2 {
4292+
border-width: 2px;
4293+
}
4294+
41934295
.sm\:p-0 {
41944296
padding: 0px;
41954297
}
@@ -4208,6 +4310,11 @@ select{
42084310
padding-right: 1.5rem;
42094311
}
42104312

4313+
.sm\:px-2 {
4314+
padding-left: 0.5rem;
4315+
padding-right: 0.5rem;
4316+
}
4317+
42114318
.sm\:pb-0 {
42124319
padding-bottom: 0px;
42134320
}
@@ -4224,6 +4331,10 @@ select{
42244331
padding-right: 1.5rem;
42254332
}
42264333

4334+
.sm\:pb-2 {
4335+
padding-bottom: 0.5rem;
4336+
}
4337+
42274338
.sm\:text-left {
42284339
text-align: left;
42294340
}
@@ -4264,6 +4375,14 @@ select{
42644375
width: 18rem;
42654376
}
42664377

4378+
.md\:w-80 {
4379+
width: 20rem;
4380+
}
4381+
4382+
.md\:w-96 {
4383+
width: 24rem;
4384+
}
4385+
42674386
.md\:max-w-3xl {
42684387
max-width: 48rem;
42694388
}
@@ -4454,6 +4573,10 @@ select{
44544573
grid-template-columns: repeat(4, minmax(0, 1fr));
44554574
}
44564575

4576+
.xl\:grid-cols-5 {
4577+
grid-template-columns: repeat(5, minmax(0, 1fr));
4578+
}
4579+
44574580
.xl\:px-5 {
44584581
padding-left: 1.25rem;
44594582
padding-right: 1.25rem;

0 commit comments

Comments
 (0)