Skip to content

Commit a4cebfa

Browse files
mythzmythz
committed
improve seed handling and FileUploads
1 parent 23f5476 commit a4cebfa

5 files changed

Lines changed: 64 additions & 91 deletions

File tree

‎MyApp/wwwroot/css/app.css‎

Lines changed: 17 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -798,9 +798,6 @@
798798
.mb-8 {
799799
margin-bottom: calc(var(--spacing) * 8);
800800
}
801-
.mb-10 {
802-
margin-bottom: calc(var(--spacing) * 10);
803-
}
804801
.mb-12 {
805802
margin-bottom: calc(var(--spacing) * 12);
806803
}
@@ -945,10 +942,22 @@
945942
width: calc(var(--spacing) * 24);
946943
height: calc(var(--spacing) * 24);
947944
}
945+
.size-28 {
946+
width: calc(var(--spacing) * 28);
947+
height: calc(var(--spacing) * 28);
948+
}
949+
.size-40 {
950+
width: calc(var(--spacing) * 40);
951+
height: calc(var(--spacing) * 40);
952+
}
948953
.size-48 {
949954
width: calc(var(--spacing) * 48);
950955
height: calc(var(--spacing) * 48);
951956
}
957+
.size-56 {
958+
width: calc(var(--spacing) * 56);
959+
height: calc(var(--spacing) * 56);
960+
}
952961
.size-64 {
953962
width: calc(var(--spacing) * 64);
954963
height: calc(var(--spacing) * 64);
@@ -1399,9 +1408,6 @@
13991408
.columns-1 {
14001409
columns: 1;
14011410
}
1402-
.columns-2 {
1403-
columns: 2;
1404-
}
14051411
.break-inside-avoid {
14061412
break-inside: avoid;
14071413
}
@@ -1730,12 +1736,6 @@
17301736
--tw-border-style: none;
17311737
border-style: none;
17321738
}
1733-
.border-accent-2 {
1734-
border-color: #EAEAEA;
1735-
}
1736-
.border-black {
1737-
border-color: var(--color-black);
1738-
}
17391739
.border-blue-300 {
17401740
border-color: var(--color-blue-300);
17411741
}
@@ -1817,15 +1817,9 @@
18171817
.border-zinc-100 {
18181818
border-color: var(--color-zinc-100);
18191819
}
1820-
.bg-accent-1 {
1821-
background-color: #FAFAFA;
1822-
}
18231820
.bg-amber-100 {
18241821
background-color: var(--color-amber-100);
18251822
}
1826-
.bg-black {
1827-
background-color: var(--color-black);
1828-
}
18291823
.bg-black\/20 {
18301824
background-color: color-mix(in srgb, #000 20%, transparent);
18311825
@supports (color: color-mix(in lab, red, red)) {
@@ -2266,9 +2260,6 @@
22662260
.px-8 {
22672261
padding-inline: calc(var(--spacing) * 8);
22682262
}
2269-
.px-12 {
2270-
padding-inline: calc(var(--spacing) * 12);
2271-
}
22722263
.py-0\.5 {
22732264
padding-block: calc(var(--spacing) * 0.5);
22742265
}
@@ -2867,10 +2858,6 @@
28672858
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
28682859
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
28692860
}
2870-
.ring {
2871-
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, hsl(var(--ring)));
2872-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2873-
}
28742861
.ring-0 {
28752862
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, hsl(var(--ring)));
28762863
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3592,13 +3579,6 @@
35923579
}
35933580
}
35943581
}
3595-
.hover\:bg-white {
3596-
&:hover {
3597-
@media (hover: hover) {
3598-
background-color: var(--color-white);
3599-
}
3600-
}
3601-
}
36023582
.hover\:bg-yellow-50 {
36033583
&:hover {
36043584
@media (hover: hover) {
@@ -3629,13 +3609,6 @@
36293609
}
36303610
}
36313611
}
3632-
.hover\:text-black {
3633-
&:hover {
3634-
@media (hover: hover) {
3635-
color: var(--color-black);
3636-
}
3637-
}
3638-
}
36393612
.hover\:text-blue-300 {
36403613
&:hover {
36413614
@media (hover: hover) {
@@ -4545,15 +4518,6 @@
45454518
justify-content: center;
45464519
}
45474520
}
4548-
.sm\:space-x-12 {
4549-
@media (width >= 40rem) {
4550-
:where(& > :not(:last-child)) {
4551-
--tw-space-x-reverse: 0;
4552-
margin-inline-start: calc(calc(var(--spacing) * 12) * var(--tw-space-x-reverse));
4553-
margin-inline-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-x-reverse)));
4554-
}
4555-
}
4556-
}
45574521
.sm\:overflow-hidden {
45584522
@media (width >= 40rem) {
45594523
overflow: hidden;
@@ -4963,11 +4927,6 @@
49634927
margin-inline: calc(var(--spacing) * -8);
49644928
}
49654929
}
4966-
.lg\:mb-0 {
4967-
@media (width >= 64rem) {
4968-
margin-bottom: calc(var(--spacing) * 0);
4969-
}
4970-
}
49714930
.lg\:block {
49724931
@media (width >= 64rem) {
49734932
display: block;
@@ -4999,11 +4958,6 @@
49994958
height: calc(var(--spacing) * 12);
50004959
}
50014960
}
5002-
.lg\:w-1\/2 {
5003-
@media (width >= 64rem) {
5004-
width: calc(1/2 * 100%);
5005-
}
5006-
}
50074961
.lg\:w-72 {
50084962
@media (width >= 64rem) {
50094963
width: calc(var(--spacing) * 72);
@@ -5099,11 +5053,6 @@
50995053
padding-top: calc(var(--spacing) * 24);
51005054
}
51015055
}
5102-
.lg\:pr-4 {
5103-
@media (width >= 64rem) {
5104-
padding-right: calc(var(--spacing) * 4);
5105-
}
5106-
}
51075056
.lg\:pr-8 {
51085057
@media (width >= 64rem) {
51095058
padding-right: calc(var(--spacing) * 8);
@@ -5114,21 +5063,11 @@
51145063
padding-bottom: calc(var(--spacing) * 28);
51155064
}
51165065
}
5117-
.lg\:pl-4 {
5118-
@media (width >= 64rem) {
5119-
padding-left: calc(var(--spacing) * 4);
5120-
}
5121-
}
51225066
.lg\:pl-72 {
51235067
@media (width >= 64rem) {
51245068
padding-left: calc(var(--spacing) * 72);
51255069
}
51265070
}
5127-
.lg\:text-left {
5128-
@media (width >= 64rem) {
5129-
text-align: left;
5130-
}
5131-
}
51325071
.lg\:text-6xl {
51335072
@media (width >= 64rem) {
51345073
font-size: var(--text-6xl);
@@ -5867,6 +5806,11 @@
58675806
color: var(--color-gray-600);
58685807
}
58695808
}
5809+
.dark\:text-gray-700 {
5810+
&:where(.dark, .dark *) {
5811+
color: var(--color-gray-700);
5812+
}
5813+
}
58705814
.dark\:text-green-100 {
58715815
&:where(.dark, .dark *) {
58725816
color: var(--color-green-100);
@@ -6363,15 +6307,6 @@
63636307
}
63646308
}
63656309
}
6366-
.dark\:hover\:bg-gray-200 {
6367-
&:where(.dark, .dark *) {
6368-
&:hover {
6369-
@media (hover: hover) {
6370-
background-color: var(--color-gray-200);
6371-
}
6372-
}
6373-
}
6374-
}
63756310
.dark\:hover\:bg-gray-500 {
63766311
&:where(.dark, .dark *) {
63776312
&:hover {

‎MyApp/wwwroot/pages/Generate.mjs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import {
1212
getRandomInt,
1313
humanifyNumber,
1414
getPriorityLevel,
15-
formatDuration,
16-
formatDate,
15+
formatDuration,
16+
formatDate,
17+
getNextSeedValue,
1718
} from "./lib/utils.mjs"
1819
import WorkflowSelector from "./components/WorkflowSelector.mjs"
1920
import WorkflowPrompt from "./components/WorkflowPrompt.mjs"
@@ -309,12 +310,12 @@ export default {
309310
function regenSeedsIfNeeded(force) {
310311
if ('seed' in workflowArgs.value && (force || store.usedSeeds.includes(`${workflowArgs.value.seed}`))) {
311312
const old = workflowArgs.value.seed
312-
workflowArgs.value.seed = getRandomInt(0, Number.MAX_SAFE_INTEGER)
313+
workflowArgs.value.seed = getNextSeedValue(selectedWorkflow.value)
313314
console.log(`seed ${old} already used, replaced with ${workflowArgs.value.seed}`)
314315
}
315316
if ('noise_seed' in workflowArgs.value && (force || store.usedSeeds.includes(`${workflowArgs.value.noise_seed}`))) {
316317
const old = workflowArgs.value.noise_seed
317-
workflowArgs.value.noise_seed = getRandomInt(0, Number.MAX_SAFE_INTEGER)
318+
workflowArgs.value.noise_seed = getNextSeedValue(selectedWorkflow.value)
318319
console.log(`noise_seed ${old} already used, replaced with ${workflowArgs.value.noise_seed}`)
319320
}
320321
}

‎MyApp/wwwroot/pages/components/FileUpload.mjs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
@drop.prevent="handleDrop"
2525
>
2626
<slot v-if="$slots.default"></slot>
27-
<div v-else class="flex flex-col items-center justify-center">
27+
<div v-else-if="multiple || !src" class="flex flex-col items-center justify-center">
2828
<slot v-if="$slots.icon" name="icon"></slot>
2929
<svg v-else class="size-12 mb-3 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3030
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
@@ -52,9 +52,12 @@ export default {
5252
5353
<div v-if="!multiple">
5454
<div v-if="src" class="absolute top-8 left-8 shrink-0 cursor-pointer" :title="!isDataUri(src) ? src : ''">
55-
<img @click="openFile" :class="['size-48', imgCls(src)]" :alt="'Current ' + (useLabel??'')"
55+
<img @click="openFile" :class="['size-40', imgCls(src)]" :alt="'Current ' + (useLabel??'')"
5656
:src="fallbackSrc || assetsPathResolver(src)"
5757
@error="onError">
58+
<div v-if="fileList[0]?.fileName" class="text-center text-xl text-black font-bold overflow-hidden overflow-ellipsis whitespace-nowrap" :title="fileList[0]?.fileName">
59+
{{fileList[0]?.fileName}}
60+
</div>
5861
</div>
5962
</div>
6063

‎MyApp/wwwroot/pages/components/WorkflowPrompt.mjs‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { ref, computed } from "vue"
2-
import { WorkflowGroups, toJsonObject, toJsonArray, acceptedImages, acceptedVideos, acceptedAudios } from "../lib/utils.mjs"
32
import FileUpload from "./FileUpload.mjs"
3+
import {
4+
WorkflowGroups, toJsonObject, toJsonArray, acceptedImages, acceptedVideos, acceptedAudios,
5+
getNextSeedValue,
6+
} from "../lib/utils.mjs"
47

58
export default {
69
components: {
@@ -148,7 +151,7 @@ export default {
148151
class="flex justify-center border-gray-300 dark:border-gray-600 border-dashed relative flex flex-col items-center justify-center w-full h-64 border-2 rounded-lg bg-gray-50 dark:bg-gray-700">
149152
<CloseButton @click="$router.push({ query: {} }); delete workflowArgs.image" />
150153
<img :src="'/artifacts/' + (workflowArgs.image || $route.query.image)" alt=""
151-
class="size-48 aspect-square object-cover rounded-lg">
154+
class="size-28 aspect-square object-cover rounded-lg">
152155
<input type="hidden" :value="workflowArgs.image || $route.query.image">
153156
</div>
154157
<FileUpload v-else ref="refImage" id="image" required
@@ -210,7 +213,19 @@ export default {
210213
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
211214
<div v-for="input in advancedInputs" class="flex flex-col space-y-1" :class="input.type === 'String' && input.multiline ? 'col-span-2 row-span-2' : ''">
212215
<label :for="input.name" class="text-sm font-medium text-gray-700 dark:text-gray-300" :class="input.tooltip ? 'cursor-help' : ''" :title="input.tooltip">{{input.label}}</label>
213-
<textarea v-if="input.type === 'String' && input.multiline" spellcheck="false"
216+
<div v-if="input.name.endsWith('seed')" class="flex items-center gap-1">
217+
<input v-else-if="input.type === 'String'" spellcheck="false"
218+
v-model="workflowArgs[input.name]"
219+
:id="input.name"
220+
type="text"
221+
:placeholder="input.placeholder || ''"
222+
class="w-32 px-3 py-2 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
223+
<button type="button" @click="workflowArgs[input.name] = getNextSeedValue(selectedWorkflow)"
224+
title="Generate new Random Seed">
225+
<svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" viewBox="0 0 24 24"><path fill="currentColor" d="m13.146 11.05l-.174-1.992l2.374-.208a5 5 0 1 0 .82 6.173l2.002.5a7 7 0 1 1-1.315-7.996l-.245-2.803L18.6 4.55l.523 5.977z"/></svg>
226+
</button>
227+
</div>
228+
<textarea v-else-if="input.type === 'String' && input.multiline" spellcheck="false"
214229
:id="input.name" :name="input.name" rows="5" :placeholder="input.placeholder || ''"
215230
v-model="workflowArgs[input.name]"
216231
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
@@ -349,6 +364,7 @@ export default {
349364
setArgs,
350365
setPrefs,
351366
resetPositivePrompt,
367+
getNextSeedValue,
352368
WorkflowGroups,
353369
}
354370
}

‎MyApp/wwwroot/pages/lib/utils.mjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,24 @@ export function getRandomInt(min, max) {
222222
return Math.floor(Math.random() * (max - min + 1)) + min;
223223
}
224224

225+
export function getMaxSeedValue(workflow) {
226+
const maxSizes = [Number.MAX_SAFE_INTEGER]
227+
if (workflow?.info.inputs) {
228+
for (const input of workflow.info.inputs) {
229+
if (input.name === 'seed' || input.name === 'noise_seed') {
230+
if (input.max) {
231+
maxSizes.push(input.max)
232+
}
233+
}
234+
}
235+
}
236+
return Math.min(...maxSizes)
237+
}
238+
239+
export function getNextSeedValue(workflow) {
240+
return getRandomInt(0, getMaxSeedValue(workflow))
241+
}
242+
225243
export function getRatingDisplay(artifact) {
226244
// Check for direct rating first, then predicted rating
227245
if (artifact.rating) {

0 commit comments

Comments
 (0)