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

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

@@ -29,7 +29,10 @@ import { EnvironmentService } from '../../services/environment.service';
     MatIconModule,
     MatProgressSpinnerModule,
     MatSnackBarModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatSliderModule,
+    MatTooltipModule,
+    MatCheckboxModule
   ],
   template: `
     <div class="environment-container">
@@ -158,14 +161,17 @@ import { EnvironmentService } from '../../services/environment.service';
                   [disabled]="loading"
                 >
                   <mat-option value="no_stt">No STT</mat-option>
-                  <mat-option value="elevenlabs">ElevenLabs</mat-option>
+                  <mat-option value="google">Google Cloud Speech-to-Text</mat-option>
+                  <mat-option value="azure">Azure Speech Services (Coming Soon)</mat-option>
+                  <mat-option value="amazon">Amazon Transcribe (Coming Soon)</mat-option>
+                  <mat-option value="gpt4o_realtime">GPT-4o Realtime (Coming Soon)</mat-option>
                   <mat-option value="flicker">Flicker (Coming Soon)</mat-option>
                 </mat-select>
                 <mat-icon matPrefix>mic</mat-icon>
               </mat-form-field>
 
               <mat-form-field appearance="outline" class="api-key-field">
-                <mat-label>STT API Key</mat-label>
+                <mat-label>STT API Key / Credentials</mat-label>
                 <input
                   matInput
                   type="password"
@@ -173,12 +179,140 @@ import { EnvironmentService } from '../../services/environment.service';
                   [(ngModel)]="environment.stt_engine_api_key"
                   [disabled]="loading || environment.stt_engine === 'no_stt'"
                   [required]="environment.stt_engine !== 'no_stt'"
-                  placeholder="Enter STT API key"
+                  [placeholder]="getSTTKeyPlaceholder()"
                 >
                 <mat-icon matPrefix>key</mat-icon>
+                <button mat-icon-button matSuffix 
+                        *ngIf="environment.stt_engine === 'google'"
+                        (click)="fileInput.click()"
+                        [disabled]="loading"
+                        matTooltip="Upload Google credentials JSON">
+                  <mat-icon>upload_file</mat-icon>
+                </button>
+                <input #fileInput type="file" accept=".json" 
+                       style="display: none"
+                       (change)="onSTTCredentialsFileSelected($event)">
               </mat-form-field>
             </div>
 
+            <!-- STT Settings Panel -->
+            <mat-expansion-panel class="stt-settings-panel" 
+                                 *ngIf="environment.stt_engine !== 'no_stt'"
+                                 [expanded]="sttSettingsExpanded">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>settings_voice</mat-icon>
+                  STT Advanced Settings
+                </mat-panel-title>
+                <mat-panel-description>
+                  Configure speech recognition parameters
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              
+              <div class="stt-settings-grid">
+                <mat-form-field appearance="outline">
+                  <mat-label>Speech Timeout (ms)</mat-label>
+                  <input matInput type="number" 
+                         name="speechTimeout"
+                         [(ngModel)]="environment.stt_settings!.speech_timeout_ms"
+                         min="500" max="5000" step="100"
+                         [disabled]="loading">
+                  <mat-icon matPrefix>timer</mat-icon>
+                  <mat-hint>Silence duration to end speech (500-5000ms)</mat-hint>
+                </mat-form-field>
+                
+                <mat-form-field appearance="outline">
+                  <mat-label>Noise Reduction Level</mat-label>
+                  <mat-select name="noiseReduction"
+                              [(ngModel)]="environment.stt_settings!.noise_reduction_level"
+                              [disabled]="loading">
+                    <mat-option [value]="0">Off</mat-option>
+                    <mat-option [value]="1">Low</mat-option>
+                    <mat-option [value]="2">Medium</mat-option>
+                    <mat-option [value]="3">High</mat-option>
+                  </mat-select>
+                  <mat-icon matPrefix>noise_aware</mat-icon>
+                </mat-form-field>
+                
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>VAD Sensitivity</mat-label>
+                  <mat-slider min="0" max="1" step="0.1" 
+                              [discrete]="true"
+                              [displayWith]="formatVAD">
+                    <input matSliderThumb
+                           name="vadSensitivity"
+                           [(ngModel)]="environment.stt_settings!.vad_sensitivity"
+                           [disabled]="loading">
+                  </mat-slider>
+                  <mat-icon matPrefix>graphic_eq</mat-icon>
+                  <mat-hint>Voice activity detection sensitivity (0=low, 1=high)</mat-hint>
+                </mat-form-field>
+                
+                <mat-form-field appearance="outline">
+                  <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 (en-US)</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>
+                
+                <mat-form-field appearance="outline" 
+                                *ngIf="environment.stt_engine === 'google'">
+                  <mat-label>Model</mat-label>
+                  <mat-select name="sttModel"
+                              [(ngModel)]="environment.stt_settings!.model"
+                              [disabled]="loading">
+                    <mat-option value="latest_long">Latest Long (Best for conversations)</mat-option>
+                    <mat-option value="command_and_search">Command & Search (Short queries)</mat-option>
+                    <mat-option value="phone_call">Phone Call (Telephony)</mat-option>
+                    <mat-option value="video">Video (Multiple speakers)</mat-option>
+                  </mat-select>
+                  <mat-icon matPrefix>model_training</mat-icon>
+                </mat-form-field>
+                
+                <div class="checkbox-group">
+                  <mat-checkbox name="useEnhanced"
+                                [(ngModel)]="environment.stt_settings!.use_enhanced"
+                                [disabled]="loading || environment.stt_engine !== 'google'">
+                    Use Enhanced Model
+                    <mat-icon matTooltip="Better accuracy but higher cost" class="info-icon">info</mat-icon>
+                  </mat-checkbox>
+                  
+                  <mat-checkbox name="enablePunctuation"
+                                [(ngModel)]="environment.stt_settings!.enable_punctuation"
+                                [disabled]="loading">
+                    Automatic Punctuation
+                  </mat-checkbox>
+                  
+                  <mat-checkbox name="interimResults"
+                                [(ngModel)]="environment.stt_settings!.interim_results"
+                                [disabled]="loading">
+                    Show Interim Results
+                  </mat-checkbox>
+                </div>
+              </div>
+              
+              <div class="stt-info-card" *ngIf="environment.stt_engine === 'google'">
+                <mat-icon>info</mat-icon>
+                <div>
+                  <strong>Google Cloud Setup Required:</strong>
+                  <ol>
+                    <li>Create a Google Cloud project</li>
+                    <li>Enable Speech-to-Text API</li>
+                    <li>Create service account & download JSON key</li>
+                    <li>Upload JSON key file as STT API Key</li>
+                  </ol>
+                  <p class="cost-info">Cost: ~$0.024/minute (standard), ~$0.036/minute (enhanced)</p>
+                </div>
+              </div>
+            </mat-expansion-panel>            
+
             <mat-expansion-panel class="prompt-panel">
               <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -336,6 +470,64 @@ import { EnvironmentService } from '../../services/environment.service';
       }
     }
 
+    .stt-settings-panel {
+      margin-bottom: 20px;
+      
+      .stt-settings-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        
+        .full-width {
+          grid-column: 1 / -1;
+        }
+        
+        .checkbox-group {
+          grid-column: 1 / -1;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          
+          mat-checkbox {
+            display: flex;
+            align-items: center;
+            
+            .info-icon {
+              font-size: 18px;
+              margin-left: 8px;
+              color: #666;
+              cursor: help;
+            }
+          }
+        }
+      }
+      
+      .stt-info-card {
+        margin-top: 16px;
+        padding: 16px;
+        background-color: #e3f2fd;
+        border-radius: 4px;
+        display: flex;
+        gap: 16px;
+        
+        mat-icon {
+          color: #1976d2;
+          flex-shrink: 0;
+        }
+        
+        ol {
+          margin: 8px 0;
+          padding-left: 20px;
+        }
+        
+        .cost-info {
+          margin-top: 8px;
+          font-size: 14px;
+          color: #666;
+        }
+      }
+    }
+
     ::ng-deep {
       .mat-mdc-form-field-icon-prefix {
         padding-right: 12px;
@@ -364,21 +556,45 @@ export class EnvironmentComponent implements OnInit {
     tts_engine: 'no_tts',
     tts_engine_api_key: '',
     stt_engine: 'no_stt',
-    stt_engine_api_key: ''
+    stt_engine_api_key: '',
+    stt_settings: {
+      speech_timeout_ms: 2000,
+      noise_reduction_level: 2,
+      vad_sensitivity: 0.5,
+      language: 'tr-TR',
+      model: 'latest_long',
+      use_enhanced: true,
+      enable_punctuation: true,
+      interim_results: true
+    }    
   };
 
+  sttSettingsExpanded = false;
   loading = true;
   saving = false;
 
   ngOnInit() {
     this.loadEnvironment();
   }
-
+  
   loadEnvironment() {
     this.loading = true;
     this.apiService.getEnvironment().subscribe({
       next: (env) => {
         this.environment = env;
+        // Ensure STT settings exist
+        if (!this.environment.stt_settings) {
+          this.environment.stt_settings = {
+            speech_timeout_ms: 2000,
+            noise_reduction_level: 2,
+            vad_sensitivity: 0.5,
+            language: 'tr-TR',
+            model: 'latest_long',
+            use_enhanced: true,
+            enable_punctuation: true,
+            interim_results: true
+          };
+        }
         this.loading = false;
       },
       error: (err) => {
@@ -432,13 +648,59 @@ export class EnvironmentComponent implements OnInit {
       this.environment.tts_engine_api_key = '';
     }
   }
-
+  
   onSTTEngineChange() {
     if (this.environment.stt_engine === 'no_stt') {
       this.environment.stt_engine_api_key = '';
+      this.sttSettingsExpanded = false;
+    } else {
+      this.sttSettingsExpanded = true;
     }
   }
 
+  formatVAD(value: number): string {
+    return value.toFixed(1);
+  }
+  
+  getSTTKeyPlaceholder(): string {
+    switch(this.environment.stt_engine) {
+      case 'google':
+        return 'Google service account JSON content';
+      case 'azure':
+        return 'Azure subscription key';
+      case 'amazon':
+        return 'AWS access key';
+      case 'gpt4o_realtime':
+        return 'OpenAI API key';
+      default:
+        return 'Enter API key';
+    }
+  }
+  
+  onSTTCredentialsFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file && file.type === 'application/json') {
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        try {
+          // Validate it's a valid JSON
+          const jsonContent = JSON.parse(e.target.result);
+          // Store the entire JSON content as the API key
+          this.environment.stt_engine_api_key = e.target.result;
+          this.snackBar.open('Google credentials loaded successfully', 'Close', {
+            duration: 3000
+          });
+        } catch (error) {
+          this.snackBar.open('Invalid JSON file', 'Close', {
+            duration: 3000,
+            panelClass: 'error-snackbar'
+          });
+        }
+      };
+      reader.readAsText(file);
+    }
+  }
+  
   save() {
     this.saving = true;