From 6b1c9e76b127d2ab82a3fad63b5c3c987ad10d5a Mon Sep 17 00:00:00 2001
From: Dominik Chrastecky <dominik@chrastecky.cz>
Date: Wed, 27 Mar 2024 22:34:16 +0100
Subject: [PATCH] Feat: Add slider with value

---
 .../slider-with-value.component.html          |  4 ++
 .../slider-with-value.component.scss          |  9 +++
 .../slider-with-value.component.ts            | 64 +++++++++++++++++++
 .../generate-image.component.html             | 32 +++++-----
 .../generate-image.component.ts               |  4 +-
 5 files changed, 95 insertions(+), 18 deletions(-)
 create mode 100644 src/app/components/slider-with-value/slider-with-value.component.html
 create mode 100644 src/app/components/slider-with-value/slider-with-value.component.scss
 create mode 100644 src/app/components/slider-with-value/slider-with-value.component.ts

diff --git a/src/app/components/slider-with-value/slider-with-value.component.html b/src/app/components/slider-with-value/slider-with-value.component.html
new file mode 100644
index 0000000..c64cde9
--- /dev/null
+++ b/src/app/components/slider-with-value/slider-with-value.component.html
@@ -0,0 +1,4 @@
+<div class="flex">
+  <input type="range" [min]="min()" [max]="max()" [step]="step()" [value]="value()" (input)="value.set(Number(input1.value))" class="form-control" [id]="inputId()" #input1 />
+  <input type="number" [min]="min()" [max]="max()" [step]="step()"  class="form-control" [value]="value()" (input)="value.set(Number(input2.value))" #input2 />
+</div>
diff --git a/src/app/components/slider-with-value/slider-with-value.component.scss b/src/app/components/slider-with-value/slider-with-value.component.scss
new file mode 100644
index 0000000..7eb920f
--- /dev/null
+++ b/src/app/components/slider-with-value/slider-with-value.component.scss
@@ -0,0 +1,9 @@
+div > input {
+  &:first-child {
+    flex: 85% 1 1;
+    margin-right: 1vw;
+  }
+  &:last-child {
+    flex: 15% 1 1;
+  }
+}
diff --git a/src/app/components/slider-with-value/slider-with-value.component.ts b/src/app/components/slider-with-value/slider-with-value.component.ts
new file mode 100644
index 0000000..bbc9a6b
--- /dev/null
+++ b/src/app/components/slider-with-value/slider-with-value.component.ts
@@ -0,0 +1,64 @@
+import {Component, effect, input, signal, WritableSignal} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
+import {OnChange, OnTouched} from "../../types/value-accessor";
+
+@Component({
+  selector: 'app-slider-with-value',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './slider-with-value.component.html',
+  styleUrl: './slider-with-value.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: SliderWithValueComponent,
+    },
+  ]
+})
+export class SliderWithValueComponent implements ControlValueAccessor {
+  protected readonly Number = Number;
+
+  private onChange: WritableSignal<OnChange<number> | null> = signal(null);
+  private onTouched: WritableSignal<OnTouched | null> = signal(null);
+
+  public inputId = input<string>();
+  public required = input(false);
+  public min = input<number | null>(null);
+  public max = input<number | null>(null);
+  public step = input<number | null>(null);
+
+  public disabled = signal(false);
+
+  public value = signal(0);
+
+  constructor() {
+    effect(() => {
+      if (this.onChange() === null) {
+        return;
+      }
+      (this.onChange()!)(this.value());
+      if (this.onTouched() !== null) {
+        (this.onTouched()!)();
+      }
+    });
+  }
+
+  public registerOnChange(fn: OnChange<number>): void {
+    this.onChange.set(fn);
+  }
+
+  public registerOnTouched(fn: OnTouched): void {
+    this.onTouched.set(fn);
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  public writeValue(obj: number): void {
+    this.value.set(obj);
+  }
+}
diff --git a/src/app/pages/generate-image/generate-image.component.html b/src/app/pages/generate-image/generate-image.component.html
index 1eee10c..797610e 100644
--- a/src/app/pages/generate-image/generate-image.component.html
+++ b/src/app/pages/generate-image/generate-image.component.html
@@ -147,9 +147,9 @@
         </div>
         @if (form.value.faceFixers?.length) {
           <div class="form-group">
-            <label for="inputFaceFixerStrength">{{ 'app.generate.face_fixer_strength' | transloco }}
-              ({{ form.controls.faceFixerStrength.value! | formatNumber:2 }})</label>
-            <input type="range" min="0" max="1" step="0.01" formControlName="faceFixerStrength" class="form-control" id="inputFaceFixerStrength"/>
+            <!--suppress XmlInvalidId -->
+            <label for="inputFaceFixerStrength">{{ 'app.generate.face_fixer_strength' | transloco }}</label>
+            <app-slider-with-value [min]="0" [max]="1" [step]="0.01" formControlName="faceFixerStrength" inputId="inputFaceFixerStrength" />
           </div>
         }
         <div class="form-group">
@@ -186,28 +186,26 @@
           <app-effective-value [value]="modifiedOptions()?.height" [original]="form.value.height" />
         </div>
         <div class="form-group">
-          <label for="inputDenoisingStrength">{{ 'app.generate.denoising_strength' | transloco }}
-            ({{ form.controls.denoisingStrength.value! | formatNumber:2 }})</label>
-          <input type="range" min="0.01" max="1" step="0.01" formControlName="denoisingStrength" class="form-control"
-                 id="inputDenoisingStrength"/>
+          <!--suppress XmlInvalidId -->
+          <label for="inputDenoisingStrength">{{ 'app.generate.denoising_strength' | transloco }})</label>
+          <app-slider-with-value [min]="0.01" [max]="1" [step]="0.01" formControlName="denoisingStrength" inputId="inputDenoisingStrength" />
         </div>
         <div class="form-group">
-          <label for="inputCfgScale">{{ 'app.generate.cfg_scale' | transloco }}
-            ({{ form.controls.cfgScale.value! | formatNumber:1 }})</label>
-          <input type="range" min="0" max="100" step="0.5" formControlName="cfgScale" class="form-control"
-                 id="inputCfgScale"/>
+          <!--suppress XmlInvalidId -->
+          <label for="inputCfgScale">{{ 'app.generate.cfg_scale' | transloco }}</label>
+          <app-slider-with-value [min]="0" [max]="100" [step]="0.5" formControlName="cfgScale" inputId="inputCfgScale" />
           <app-effective-value [value]="modifiedOptions()?.cfgScale" [original]="form.value.cfgScale" />
         </div>
         <div class="form-group">
-          <label for="inputSteps">{{ 'app.generate.steps' | transloco }}
-            ({{ form.controls.steps.value! | formatNumber }})</label>
-          <input type="range" min="1" max="500" step="1" formControlName="steps" class="form-control" id="inputSteps"/>
+          <!--suppress XmlInvalidId -->
+          <label for="inputSteps">{{ 'app.generate.steps' | transloco }}</label>
+          <app-slider-with-value [min]="1" [max]="500" [step]="1" formControlName="steps" inputId="inputSteps" />
           <app-effective-value [value]="modifiedOptions()?.steps" [original]="form.value.steps" />
         </div>
         <div class="form-group">
-          <label for="inputClipSkip">{{ 'app.generate.clip_skip' | transloco }}
-            ({{ form.controls.clipSkip.value! | formatNumber }})</label>
-          <input type="range" min="1" max="12" step="1" formControlName="clipSkip" class="form-control" id="inputClipSkip"/>
+          <!--suppress XmlInvalidId -->
+          <label for="inputClipSkip">{{ 'app.generate.clip_skip' | transloco }}</label>
+          <app-slider-with-value [min]="1" [max]="12" [step]="1" formControlName="clipSkip" inputId="inputClipSkip" />
         </div>
         <div class="row">
           <div class="col-md-6">
diff --git a/src/app/pages/generate-image/generate-image.component.ts b/src/app/pages/generate-image/generate-image.component.ts
index 42b3df3..41d9891 100644
--- a/src/app/pages/generate-image/generate-image.component.ts
+++ b/src/app/pages/generate-image/generate-image.component.ts
@@ -62,6 +62,7 @@ import {getFaceFixers, getGenericPostProcessors, getUpscalers} from "../../helpe
 import _ from 'lodash';
 import {BaselineModel} from "../../types/sd-repo/baseline-model";
 import {AutoGrowDirective} from "../../directives/auto-grow.directive";
+import {SliderWithValueComponent} from "../../components/slider-with-value/slider-with-value.component";
 
 interface Result {
   width: number;
@@ -103,7 +104,8 @@ interface Result {
     LoraTextRowComponent,
     IsFaceFixerPipe,
     IsUpscalerPipe,
-    AutoGrowDirective
+    AutoGrowDirective,
+    SliderWithValueComponent
   ],
   templateUrl: './generate-image.component.html',
   styleUrl: './generate-image.component.scss'