Update flare-ui/src/app/components/environment/environment.component.ts

flare-ui/src/app/components/environment/environment.component.ts

@@ -10,6 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSliderModule } from '@angular/material/slider';
 import { ApiService, Environment } from '../../services/api.service';
 import { EnvironmentService } from '../../services/environment.service';
 
@@ -27,7 +28,8 @@ import { EnvironmentService } from '../../services/environment.service';
     MatIconModule,
     MatProgressSpinnerModule,
     MatSnackBarModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatSliderModule
   ],
   template: `
     <div class="environment-container">
@@ -178,6 +180,121 @@ import { EnvironmentService } from '../../services/environment.service';
                 <mat-icon matPrefix>key</mat-icon>
                 <mat-hint>{{ getSTTKeyHint() }}</mat-hint>
               </mat-form-field>
+
+              <!-- STT Settings Panel -->
+              <mat-expansion-panel class="stt-settings-panel" *ngIf="environment.stt_engine !== 'no_stt'">
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <mat-icon>settings_voice</mat-icon>
+                    STT Settings
+                  </mat-panel-title>
+                  <mat-panel-description>
+                    Advanced speech recognition settings
+                  </mat-panel-description>
+                </mat-expansion-panel-header>
+                
+                <div class="stt-settings-content">
+                  <!-- Language -->
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Language</mat-label>
+                    <mat-select
+                      name="sttLanguage"
+                      [(ngModel)]="environment.stt_settings.language"
+                      [disabled]="loading"
+                    >
+                      <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
+                      <mat-option value="en-US">English US (en-US)</mat-option>
+                      <mat-option value="en-GB">English UK (en-GB)</mat-option>
+                      <mat-option value="de-DE">German (de-DE)</mat-option>
+                      <mat-option value="fr-FR">French (fr-FR)</mat-option>
+                      <mat-option value="es-ES">Spanish (es-ES)</mat-option>
+                    </mat-select>
+                    <mat-icon matPrefix>language</mat-icon>
+                  </mat-form-field>
+              
+                  <!-- Model -->
+                  <mat-form-field appearance="outline" class="full-width" *ngIf="environment.stt_engine === 'google'">
+                    <mat-label>Recognition Model</mat-label>
+                    <mat-select
+                      name="sttModel"
+                      [(ngModel)]="environment.stt_settings.model"
+                      [disabled]="loading"
+                    >
+                      <mat-option value="latest_long">Latest Long (Best for long audio)</mat-option>
+                      <mat-option value="latest_short">Latest Short (Best for short audio)</mat-option>
+                      <mat-option value="command_and_search">Command and Search</mat-option>
+                      <mat-option value="phone_call">Phone Call</mat-option>
+                      <mat-option value="video">Video</mat-option>
+                    </mat-select>
+                    <mat-icon matPrefix>model_training</mat-icon>
+                  </mat-form-field>
+              
+                  <!-- Speech Timeout -->
+                  <div class="slider-field">
+                    <label>Speech Timeout: {{ environment.stt_settings.speech_timeout_ms }}ms</label>
+                    <mat-slider
+                      [min]="500"
+                      [max]="5000"
+                      [step]="100"
+                      [discrete]="true"
+                      [displayWith]="formatMilliseconds"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.speech_timeout_ms">
+                    </mat-slider>
+                    <mat-hint>Silence duration to end speech detection</mat-hint>
+                  </div>
+              
+                  <!-- VAD Sensitivity -->
+                  <div class="slider-field">
+                    <label>Voice Activity Detection Sensitivity: {{ environment.stt_settings.vad_sensitivity }}</label>
+                    <mat-slider
+                      [min]="0"
+                      [max]="1"
+                      [step]="0.1"
+                      [discrete]="true"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.vad_sensitivity">
+                    </mat-slider>
+                    <mat-hint>Higher values = more sensitive</mat-hint>
+                  </div>
+              
+                  <!-- Noise Reduction Level -->
+                  <div class="slider-field">
+                    <label>Noise Reduction Level: {{ environment.stt_settings.noise_reduction_level }}</label>
+                    <mat-slider
+                      [min]="0"
+                      [max]="3"
+                      [step]="1"
+                      [discrete]="true"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.noise_reduction_level">
+                    </mat-slider>
+                    <mat-hint>0 = Off, 3 = Maximum</mat-hint>
+                  </div>
+              
+                  <!-- Checkboxes -->
+                  <div class="checkbox-group">
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.use_enhanced"
+                      [disabled]="loading"
+                      *ngIf="environment.stt_engine === 'google'">
+                      Use Enhanced Model
+                    </mat-checkbox>
+                    
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.enable_punctuation"
+                      [disabled]="loading">
+                      Enable Automatic Punctuation
+                    </mat-checkbox>
+                    
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.interim_results"
+                      [disabled]="loading">
+                      Show Interim Results
+                    </mat-checkbox>
+                  </div>
+                </div>
+              </mat-expansion-panel>
             </div>
 
             <mat-expansion-panel class="prompt-panel">
@@ -336,6 +453,59 @@ import { EnvironmentService } from '../../services/environment.service';
         }
       }
     }
+    
+    .stt-settings-panel {
+      margin-bottom: 20px;
+      margin-top: 10px;
+      
+      mat-expansion-panel-header {
+        mat-panel-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          mat-icon {
+            color: #666;
+          }
+        }
+      }
+    }
+    
+    .stt-settings-content {
+      padding-top: 16px;
+    }
+    
+    .slider-field {
+      margin-bottom: 24px;
+      
+      label {
+        display: block;
+        margin-bottom: 8px;
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 14px;
+      }
+      
+      mat-slider {
+        width: 100%;
+      }
+      
+      mat-hint {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.6);
+        margin-top: 4px;
+      }
+    }
+    
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 16px;
+      
+      mat-checkbox {
+        margin-bottom: 0;
+      }
+    }
 
     ::ng-deep {
       .mat-mdc-form-field-icon-prefix {