From 25d097ac7d4d31c615b5c4ee4c3e088f744ea57d Mon Sep 17 00:00:00 2001
From: Dominik Chrastecky <dominik@chrastecky.cz>
Date: Thu, 28 Mar 2024 15:29:48 +0100
Subject: [PATCH] Add more descriptions

---
 .../toggle-checkbox.component.html            |  1 +
 .../toggle-checkbox.component.scss            |  1 +
 .../generate-image.component.html             | 28 ++++++++++++++-----
 src/assets/i18n/en.json                       |  9 +++++-
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/app/components/toggle-checkbox/toggle-checkbox.component.html b/src/app/components/toggle-checkbox/toggle-checkbox.component.html
index 3b377b9..8ef0055 100644
--- a/src/app/components/toggle-checkbox/toggle-checkbox.component.html
+++ b/src/app/components/toggle-checkbox/toggle-checkbox.component.html
@@ -2,4 +2,5 @@
   <input class="toggle-checkbox" type="checkbox" id="input{{random()}}" [checked]="value()" (change)="value.set(input.checked)" #input>
   <div class="toggle-switch"></div>
   <span class="toggle-label">{{description()}}</span>
+  <ng-content />
 </label>
diff --git a/src/app/components/toggle-checkbox/toggle-checkbox.component.scss b/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
index 8de7871..8320109 100644
--- a/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
+++ b/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
@@ -48,4 +48,5 @@
   margin-left: 5px;
   position: relative;
   top: 2px;
+  margin-right: 4px;
 }
diff --git a/src/app/pages/generate-image/generate-image.component.html b/src/app/pages/generate-image/generate-image.component.html
index b062f26..304ef79 100644
--- a/src/app/pages/generate-image/generate-image.component.html
+++ b/src/app/pages/generate-image/generate-image.component.html
@@ -210,27 +210,41 @@
         <div class="row">
           <div class="col-md-6">
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.karras' | transloco" formControlName="karras" />
+              <app-toggle-checkbox [description]="'app.generate.karras' | transloco" formControlName="karras">
+                <app-tooltip [text]="'app.generate.help.karras' | transloco" />
+              </app-toggle-checkbox>
             </div>
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.hires_fix' | transloco" formControlName="hiresFix" />
+              <app-toggle-checkbox [description]="'app.generate.hires_fix' | transloco" formControlName="hiresFix">
+                <app-tooltip [text]="'app.generate.help.hires_fix' | transloco" />
+              </app-toggle-checkbox>
             </div>
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.nsfw' | transloco" formControlName="nsfw" />
+              <app-toggle-checkbox [description]="'app.generate.nsfw' | transloco" formControlName="nsfw">
+                <app-tooltip [text]="'app.generate.help.nsfw' | transloco" />
+              </app-toggle-checkbox>
             </div>
           </div>
           <div class="col-md-6">
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.slow_workers' | transloco" formControlName="slowWorkers" />
+              <app-toggle-checkbox [description]="'app.generate.slow_workers' | transloco" formControlName="slowWorkers">
+                <app-tooltip [text]="'app.generate.help.slow_workers' | transloco" />
+              </app-toggle-checkbox>
             </div>
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.censor_nsfw' | transloco" formControlName="censorNsfw" />
+              <app-toggle-checkbox [description]="'app.generate.censor_nsfw' | transloco" formControlName="censorNsfw">
+                <app-tooltip [text]="'app.generate.help.censor_nsfw' | transloco" />
+              </app-toggle-checkbox>
             </div>
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.trusted_workers' | transloco" formControlName="trustedWorkers" />
+              <app-toggle-checkbox [description]="'app.generate.trusted_workers' | transloco" formControlName="trustedWorkers">
+                <app-tooltip [text]="'app.generate.help.trusted_workers' | transloco" />
+              </app-toggle-checkbox>
             </div>
             <div class="form-group">
-              <app-toggle-checkbox [description]="'app.generate.allow_downgrade' | transloco" formControlName="allowDowngrade" />
+              <app-toggle-checkbox [description]="'app.generate.allow_downgrade' | transloco" formControlName="allowDowngrade">
+                <app-tooltip [text]="'app.generate.help.allow_downgrade' | transloco" />
+              </app-toggle-checkbox>
             </div>
           </div>
         </div>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index f142c54..d5a04b8 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -224,5 +224,12 @@
   "app.generate.help.height": "The target height of the image, must be divisible by 64.",
   "app.generate.help.cfg_scale": "{{app.generate.cfg_scale}} controls how closely the AI follows your prompt. Lower values mean the AI is more creative, while higher values mean it will try to follow your prompt more closely.",
   "app.generate.help.steps": "{{app.generate.steps}} controls how many steps the AI takes to generate your image. In each step the image is generated according to your prompt while taking the image from the previous step into account. In simple terms, after each step it tries to improve the previous image to match your prompt more closely. Note that it can also go overboard and make the image worse. Around 20-30 steps is usually the lower threshold for a good image while going above 60 rarely makes sense.",
-  "app.generate.help.clip_skip": "{{app.generate.clip_skip}} controls how the AI interprets your prompt. In the background your text is converted to a numerical representation that the AI then works with. This parameters allows you to skip some layers, essentially making the prompt different from the point of view of the AI."
+  "app.generate.help.clip_skip": "{{app.generate.clip_skip}} controls how the AI interprets your prompt. In the background your text is converted to a numerical representation that the AI then works with. This parameters allows you to skip some layers, essentially making the prompt different from the point of view of the AI.",
+  "app.generate.help.karras": "{{app.generate.karras}} improves the sampler with a different noise generating function. I can't think of a simple explanation, sorry. Basically there's no reason to turn it off.",
+  "app.generate.help.nsfw": "If you check this, only workers that allow NSFW content will be able to pick up your request.",
+  "app.generate.help.slow_workers": "Toggle whether you want to include slow workers in your request. Costs more kudos if you don't.",
+  "app.generate.help.censor_nsfw": "Whether you want to censor NSFW images. Sometimes even SFW prompts may lead to NSFW results, this will attempt to censor them.",
+  "app.generate.help.trusted_workers": "When enabled, only users that are trusted can process your request. Generally not needed.",
+  "app.generate.help.allow_downgrade": "When enabled, your request can be downgraded to fit within the available criteria if you don't have enough kudos.",
+  "app.generate.help.hires_fix": "HiRes fix works by generating your image at a lower resolution and then upscaling it."
 }