Skip to content

Commit b650cae

Browse files
leszekhanuszleszekhanusz
committed
Allow to modify the layout of the inputs
Note: the eslint rule 'vue/no-mutating-props' has been disabled. See vuejs/eslint-plugin-vue#1371
1 parent c148ac2 commit b650cae

File tree

6 files changed

+151
-37
lines changed

6 files changed

+151
-37
lines changed

‎.eslintrc.cjs

+3
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,7 @@ module.exports = {
1212
parserOptions: {
1313
ecmaVersion: "latest",
1414
},
15+
rules: {
16+
"vue/no-mutating-props": "off",
17+
},
1518
};

‎src/backends/gradio/stable-diffusion-automatic1111.json

+54
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,60 @@
88
"type": "gradio",
99
"fn_index": 10,
1010
"handle_output": "automatic1111",
11+
"layout": [
12+
{
13+
"type": "input",
14+
"id": "batch_count"
15+
},
16+
{
17+
"type": "input",
18+
"id": "batch_size"
19+
},
20+
{
21+
"type": "input",
22+
"id": "nb_steps"
23+
},
24+
{
25+
"type": "input",
26+
"id": "sampling_method"
27+
},
28+
{
29+
"type": "input",
30+
"id": "reverse_prompt"
31+
},
32+
{
33+
"type": "input",
34+
"id": "guidance_scale"
35+
},
36+
{
37+
"type": "input",
38+
"id": "seed"
39+
},
40+
{
41+
"type": "input",
42+
"id": "width"
43+
},
44+
{
45+
"type": "input",
46+
"id": "height"
47+
},
48+
{
49+
"type": "input",
50+
"id": "restore_faces"
51+
},
52+
{
53+
"type": "input",
54+
"id": "tiling"
55+
},
56+
{
57+
"type": "input",
58+
"id": "enable_hr"
59+
},
60+
{
61+
"type": "input",
62+
"id": "strength"
63+
}
64+
],
1165
"inputs": [
1266
{
1367
"label": "Prompt",

‎src/components/LayoutComponent.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup>
2+
import ModelParameter from "@/components/ModelParameter.vue";
3+
import { useBackendStore } from "@/stores/backend";
4+
5+
const backend = useBackendStore();
6+
7+
/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
8+
const props = defineProps({
9+
component: Object,
10+
});
11+
</script>
12+
13+
<template lang="pug">
14+
template(v-if="component.type==='input'")
15+
ModelParameter(:input="backend.findInput(component.id)")
16+
</template>

‎src/components/ModelParameter.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import Dropdown from "primevue/dropdown";
3+
import InputNumber from "primevue/inputnumber";
4+
import ModelParameterSlider from "@/components/ModelParameterSlider.vue";
5+
import InputSwitch from "primevue/inputswitch";
6+
import InputText from "primevue/inputtext";
7+
8+
/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
9+
const props = defineProps({
10+
input: Object,
11+
});
12+
</script>
13+
14+
<template lang="pug">
15+
.field.grid(v-if="input.visible!==false && input.id !== 'prompt' && input.id !== 'access_code' && input.type!=='image' && input.type!=='image_mask'", :title="input.description" class="justify-content-center")
16+
template(v-if="input.type === 'int' || input.type === 'float'")
17+
ModelParameterSlider(:input="input")
18+
template(v-if="input.type == 'text' || input.type == 'choice' || input.type == 'bigint'")
19+
label(:for="'input_' + input.id" class="col-12 lg:col-4 justify-content-center lg:justify-content-end")
20+
| {{ input.label }}
21+
div(class="col-12 lg:col-6 lg:col-offset-1")
22+
template(v-if="input.type == 'text'")
23+
InputText.min-w-full(type="text", :id="'input_' + input.id", v-model="input.value")
24+
template(v-if="input.type == 'choice'")
25+
Dropdown(v-model="input.value" :options="input.validation.options" class="w-full lg:w-min")
26+
template(v-if="input.type == 'bigint'")
27+
InputNumber.flex(mode="decimal" showButtons v-model="input.value" :min="input.validation.min" :max="input.validation.max" :step="input.step ? input.step: 1" :title="input.description" :useGrouping="false")
28+
template(v-if="input.type == 'boolean'")
29+
label(:for="'input_' + input.id" class="col-6 lg:col-4 justify-content-center lg:justify-content-end")
30+
| {{ input.label }}
31+
div(class="col-6 lg:col-6 lg:col-offset-1")
32+
template(v-if="input.type == 'boolean'")
33+
InputSwitch(v-model="input.value")
34+
</template>
35+
36+
<style scoped>
37+
.field {
38+
margin-bottom: 0.5rem;
39+
}
40+
.field > label {
41+
margin-bottom: 0;
42+
}
43+
</style>

‎src/components/ModelParameterSlider.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup>
2+
import InputSlider from "@/components/InputSlider.vue";
3+
4+
/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
5+
const props = defineProps({
6+
input: Object,
7+
});
8+
</script>
9+
10+
<template lang="pug">
11+
label(:for="'input_' + input.id" class="col-10 lg:col-4 justify-content-center lg:justify-content-end")
12+
| {{ input.label }}
13+
span(class="inline lg:hidden") : {{input.value}}
14+
label(class="col-1 col-offset-1 hidden lg:block")
15+
| {{input.value}}
16+
div(class="col-12 lg:col-5")
17+
InputSlider(:label="input.label" v-model="input.value" :min="input.validation.min" :max="input.validation.max" :step="input.step ? input.step: 1" :title="input.description")
18+
</template>
19+
20+
<style scoped>
21+
.field {
22+
margin-bottom: 0.5rem;
23+
}
24+
.field > label {
25+
margin-bottom: 0;
26+
}
27+
</style>

‎src/components/ModelParameters.vue

+8-37
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,19 @@
11
<script setup>
2-
import Dropdown from "primevue/dropdown";
3-
import InputNumber from "primevue/inputnumber";
4-
import InputSlider from "@/components/InputSlider.vue";
5-
import InputSwitch from "primevue/inputswitch";
6-
import InputText from "primevue/inputtext";
2+
import ModelParameter from "@/components/ModelParameter.vue";
3+
import LayoutComponent from "@/components/LayoutComponent.vue";
74
import { useBackendStore } from "@/stores/backend";
85
96
const backend = useBackendStore();
107
</script>
118

129
<template lang="pug">
1310
template(v-if="backend.current")
14-
template(v-for="input in backend.current.inputs")
15-
.field.grid(v-if="input.visible!==false && input.id !== 'prompt' && input.id !== 'access_code' && input.type!=='image' && input.type!=='image_mask'", :key="input.id" :title="input.description" class="justify-content-center")
16-
template(v-if="input.type === 'int' || input.type === 'float'")
17-
label(:for="'input_' + input.id" class="col-10 lg:col-4 justify-content-center lg:justify-content-end")
18-
| {{ input.label }}
19-
span(class="inline lg:hidden") : {{input.value}}
20-
label(class="col-1 col-offset-1 hidden lg:block")
21-
| {{input.value}}
22-
div(class="col-12 lg:col-5")
23-
InputSlider(:label="input.label" v-model="input.value" :min="input.validation.min" :max="input.validation.max" :step="input.step ? input.step: 1" :title="input.description")
24-
template(v-if="input.type == 'text' || input.type == 'choice' || input.type == 'bigint'")
25-
label(:for="'input_' + input.id" class="col-12 lg:col-4 justify-content-center lg:justify-content-end")
26-
| {{ input.label }}
27-
div(class="col-12 lg:col-6 lg:col-offset-1")
28-
template(v-if="input.type == 'text'")
29-
InputText.min-w-full(type="text", :id="'input_' + input.id", v-model="input.value")
30-
template(v-if="input.type == 'choice'")
31-
Dropdown(v-model="input.value" :options="input.validation.options" class="w-full lg:w-min")
32-
template(v-if="input.type == 'bigint'")
33-
InputNumber.flex(mode="decimal" showButtons v-model="input.value" :min="input.validation.min" :max="input.validation.max" :step="input.step ? input.step: 1" :title="input.description" :useGrouping="false")
34-
template(v-if="input.type == 'boolean'")
35-
label(:for="'input_' + input.id" class="col-6 lg:col-4 justify-content-center lg:justify-content-end")
36-
| {{ input.label }}
37-
div(class="col-6 lg:col-6 lg:col-offset-1")
38-
template(v-if="input.type == 'boolean'")
39-
InputSwitch(v-model="input.value")
11+
template(v-if="backend.current.layout")
12+
template(v-for="component in backend.current.layout" :key="component.id")
13+
LayoutComponent(:component="component")
14+
template(v-else)
15+
template(v-for="input in backend.current.inputs" :key="input.id")
16+
ModelParameter(:input="input")
4017
</template>
4118

4219
<style scoped>
@@ -49,10 +26,4 @@ template(v-if="backend.current")
4926
:deep() .p-inputnumber-input {
5027
padding: 0.15rem 0.75rem;
5128
}
52-
.field {
53-
margin-bottom: 0.5rem;
54-
}
55-
.field > label {
56-
margin-bottom: 0;
57-
}
5829
</style>

0 commit comments

Comments
 (0)