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
leszekhanusz · Sep 22, 2022 · b650cae · b650cae
1 parent c148ac2
commit b650cae
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 37 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,4 +12,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
   },
+  rules: {
+    "vue/no-mutating-props": "off",
+  },
 };
diff --git a/src/backends/gradio/stable-diffusion-automatic1111.json b/src/backends/gradio/stable-diffusion-automatic1111.json
@@ -8,6 +8,60 @@
   "type": "gradio",
   "fn_index": 10,
   "handle_output": "automatic1111",
+  "layout": [
+    {
+      "type": "input",
+      "id": "batch_count"
+    },
+    {
+      "type": "input",
+      "id": "batch_size"
+    },
+    {
+      "type": "input",
+      "id": "nb_steps"
+    },
+    {
+      "type": "input",
+      "id": "sampling_method"
+    },
+    {
+      "type": "input",
+      "id": "reverse_prompt"
+    },
+    {
+      "type": "input",
+      "id": "guidance_scale"
+    },
+    {
+      "type": "input",
+      "id": "seed"
+    },
+    {
+      "type": "input",
+      "id": "width"
+    },
+    {
+      "type": "input",
+      "id": "height"
+    },
+    {
+      "type": "input",
+      "id": "restore_faces"
+    },
+    {
+      "type": "input",
+      "id": "tiling"
+    },
+    {
+      "type": "input",
+      "id": "enable_hr"
+    },
+    {
+      "type": "input",
+      "id": "strength"
+    }
+  ],
   "inputs": [
     {
       "label": "Prompt",

diff --git a/src/components/LayoutComponent.vue b/src/components/LayoutComponent.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ModelParameter from "@/components/ModelParameter.vue";
+import { useBackendStore } from "@/stores/backend";
+
+const backend = useBackendStore();
+
+/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
+const props = defineProps({
+  component: Object,
+});
+</script>
+
+<template lang="pug">
+template(v-if="component.type==='input'")
+  ModelParameter(:input="backend.findInput(component.id)")
+</template>
diff --git a/src/components/ModelParameter.vue b/src/components/ModelParameter.vue
@@ -0,0 +1,43 @@
+<script setup>
+import Dropdown from "primevue/dropdown";
+import InputNumber from "primevue/inputnumber";
+import ModelParameterSlider from "@/components/ModelParameterSlider.vue";
+import InputSwitch from "primevue/inputswitch";
+import InputText from "primevue/inputtext";
+
+/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
+const props = defineProps({
+  input: Object,
+});
+</script>
+
+<template lang="pug">
+.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")
+  template(v-if="input.type === 'int' || input.type === 'float'")
+    ModelParameterSlider(:input="input")
+  template(v-if="input.type == 'text' || input.type == 'choice' || input.type == 'bigint'")
+    label(:for="'input_' + input.id" class="col-12 lg:col-4 justify-content-center lg:justify-content-end")
+      | {{ input.label }}
+    div(class="col-12 lg:col-6 lg:col-offset-1")
+      template(v-if="input.type == 'text'")
+        InputText.min-w-full(type="text", :id="'input_' + input.id", v-model="input.value")
+      template(v-if="input.type == 'choice'")
+        Dropdown(v-model="input.value" :options="input.validation.options" class="w-full lg:w-min")
+      template(v-if="input.type == 'bigint'")
+        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")
+  template(v-if="input.type == 'boolean'")
+    label(:for="'input_' + input.id" class="col-6 lg:col-4 justify-content-center lg:justify-content-end")
+      | {{ input.label }}
+    div(class="col-6 lg:col-6 lg:col-offset-1")
+      template(v-if="input.type == 'boolean'")
+        InputSwitch(v-model="input.value")
+</template>
+
+<style scoped>
+.field {
+  margin-bottom: 0.5rem;
+}
+.field > label {
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/components/ModelParameterSlider.vue b/src/components/ModelParameterSlider.vue
@@ -0,0 +1,27 @@
+<script setup>
+import InputSlider from "@/components/InputSlider.vue";
+
+/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "props" }]*/
+const props = defineProps({
+  input: Object,
+});
+</script>
+
+<template lang="pug">
+label(:for="'input_' + input.id" class="col-10 lg:col-4 justify-content-center lg:justify-content-end")
+  | {{ input.label }}
+  span(class="inline lg:hidden") : {{input.value}}
+label(class="col-1 col-offset-1 hidden lg:block")
+  | {{input.value}}
+div(class="col-12 lg:col-5")
+  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")
+</template>
+
+<style scoped>
+.field {
+  margin-bottom: 0.5rem;
+}
+.field > label {
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/components/ModelParameters.vue b/src/components/ModelParameters.vue
@@ -1,42 +1,19 @@
 <script setup>
-import Dropdown from "primevue/dropdown";
-import InputNumber from "primevue/inputnumber";
-import InputSlider from "@/components/InputSlider.vue";
-import InputSwitch from "primevue/inputswitch";
-import InputText from "primevue/inputtext";
+import ModelParameter from "@/components/ModelParameter.vue";
+import LayoutComponent from "@/components/LayoutComponent.vue";
 import { useBackendStore } from "@/stores/backend";
 
 const backend = useBackendStore();
 </script>
 
 <template lang="pug">
 template(v-if="backend.current")
-  template(v-for="input in backend.current.inputs")
-    .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")
-      template(v-if="input.type === 'int' || input.type === 'float'")
-        label(:for="'input_' + input.id" class="col-10 lg:col-4 justify-content-center lg:justify-content-end")
-          | {{ input.label }}
-          span(class="inline lg:hidden") : {{input.value}}
-        label(class="col-1 col-offset-1 hidden lg:block")
-          | {{input.value}}
-        div(class="col-12 lg:col-5")
-          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")
-      template(v-if="input.type == 'text' || input.type == 'choice' || input.type == 'bigint'")
-        label(:for="'input_' + input.id" class="col-12 lg:col-4 justify-content-center lg:justify-content-end")
-          | {{ input.label }}
-        div(class="col-12 lg:col-6 lg:col-offset-1")
-          template(v-if="input.type == 'text'")
-            InputText.min-w-full(type="text", :id="'input_' + input.id", v-model="input.value")
-          template(v-if="input.type == 'choice'")
-            Dropdown(v-model="input.value" :options="input.validation.options" class="w-full lg:w-min")
-          template(v-if="input.type == 'bigint'")
-            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")
-      template(v-if="input.type == 'boolean'")
-        label(:for="'input_' + input.id" class="col-6 lg:col-4 justify-content-center lg:justify-content-end")
-          | {{ input.label }}
-        div(class="col-6 lg:col-6 lg:col-offset-1")
-          template(v-if="input.type == 'boolean'")
-            InputSwitch(v-model="input.value")
+  template(v-if="backend.current.layout")
+    template(v-for="component in backend.current.layout" :key="component.id")
+      LayoutComponent(:component="component")
+  template(v-else)
+    template(v-for="input in backend.current.inputs" :key="input.id")
+      ModelParameter(:input="input")
 </template>
 
 <style scoped>
@@ -49,10 +26,4 @@ template(v-if="backend.current")
 :deep() .p-inputnumber-input {
   padding: 0.15rem 0.75rem;
 }
-.field {
-  margin-bottom: 0.5rem;
-}
-.field > label {
-  margin-bottom: 0;
-}
 </style>