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

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

@@ -22,6 +22,7 @@ import { EnvironmentService } from '../../services/environment.service';
   imports: [
     CommonModule,
     FormsModule,
+    ReactiveFormsModule, // Bunu ekle
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
@@ -564,24 +565,16 @@ export class EnvironmentComponent implements OnInit {
   private fb = inject(FormBuilder);
 
   environmentForm!: FormGroup;
-  sttSettingsForm!: FormGroup;
-
-  sttSettingsExpanded = false;
   loading = true;
   saving = false;
+  sttSettingsExpanded = false;
 
   ngOnInit() {
-    this.initializeForms();
+    this.initializeForm();
     this.loadEnvironment();
   }
 
-  ngAfterViewInit() {
-    console.log('EnvironmentComponent ngAfterViewInit');
-    console.log('Current environment:', this.environment);
-    console.log('STT settings:', this.environment.stt_settings);
-  }
-
-  initializeForms() {
+  initializeForm() {
     this.environmentForm = this.fb.group({
       work_mode: ['hfcloud'],
       cloud_token: [''],
@@ -590,44 +583,29 @@ 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: this.fb.group({
+        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.sttSettingsForm = this.fb.group({
-      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]
+    // STT engine değişikliklerini dinle
+    this.environmentForm.get('stt_engine')?.valueChanges.subscribe(value => {
+      this.onSTTEngineChange(value);
     });
   }
-  
-  get sttSettings(): STTSettings {
-    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
-      };
-    }
-    return this.environment.stt_settings;
-  }
-  
+
   loadEnvironment() {
     this.loading = true;
     this.apiService.getEnvironment().subscribe({
       next: (env) => {
-        this.environment = env;
-        
-        // Form'ları güncelle
         this.environmentForm.patchValue({
           work_mode: env.work_mode,
           cloud_token: env.cloud_token,
@@ -640,7 +618,7 @@ export class EnvironmentComponent implements OnInit {
         });
 
         if (env.stt_settings) {
-          this.sttSettingsForm.patchValue(env.stt_settings);
+          this.environmentForm.get('stt_settings')?.patchValue(env.stt_settings);
         }
         
         this.loading = false;
@@ -655,15 +633,66 @@ export class EnvironmentComponent implements OnInit {
     });
   }
 
-  get environment(): Environment {
-    return {
-      ...this.environmentForm.value,
-      stt_settings: this.sttSettingsForm.value
-    };
+  onSTTEngineChange(value: string) {
+    if (value === 'no_stt') {
+      this.environmentForm.patchValue({ stt_engine_api_key: '' });
+      this.sttSettingsExpanded = false;
+    } else {
+      this.sttSettingsExpanded = true;
+    }
   }
 
-  set environment(value: Environment) {
-    // Form update için kullanılmıyor, sadece compat için
+  save() {
+    if (this.environmentForm.invalid) {
+      return;
+    }
+
+    this.saving = true;
+    const formValue = this.environmentForm.value;
+
+    this.apiService.updateEnvironment(formValue).subscribe({
+      next: () => {
+        this.environmentService.updateEnvironment(formValue);
+        this.snackBar.open('Environment configuration saved successfully', 'Close', {
+          duration: 3000
+        });
+        this.saving = false;
+      },
+      error: (err) => {
+        this.snackBar.open(
+          err.error?.detail || 'Failed to save configuration', 
+          'Close', 
+          { duration: 5000, panelClass: 'error-snackbar' }
+        );
+        this.saving = false;
+      }
+    });
+  }
+
+  // Diğer metodlar
+  isGPTMode(): boolean {
+    const workMode = this.environmentForm.get('work_mode')?.value;
+    return workMode === 'gpt4o' || workMode === 'gpt4o-mini';
+  }
+
+  formatVAD(value: number): string {
+    return value.toFixed(1);
+  }
+
+  getSTTKeyPlaceholder(): string {
+    const sttEngine = this.environmentForm.get('stt_engine')?.value;
+    switch(sttEngine) {
+      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) {
@@ -672,15 +701,12 @@ export class EnvironmentComponent implements OnInit {
       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;
+          JSON.parse(e.target.result); // Validate JSON
+          this.environmentForm.patchValue({ stt_engine_api_key: e.target.result });
           this.snackBar.open('Google credentials loaded successfully', 'Close', {
             duration: 3000
           });
         } catch (error) {
-          console.error('JSON parse error:', error);
           this.snackBar.open('Invalid JSON file', 'Close', {
             duration: 3000,
             panelClass: 'error-snackbar'
@@ -690,6 +716,17 @@ export class EnvironmentComponent implements OnInit {
       reader.readAsText(file);
     }
   }
+
+  get environment(): Environment {
+    return {
+      ...this.environmentForm.value,
+      stt_settings: this.sttSettingsForm.value
+    };
+  }
+
+  set environment(value: Environment) {
+    // Form update için kullanılmıyor, sadece compat için
+  }
     
   updateSTTSetting(key: string, value: any) {
     if (!this.environment.stt_settings) {
@@ -793,30 +830,6 @@ export class EnvironmentComponent implements OnInit {
     }
   }
   
-  save() {
-    this.saving = true;
-  
-    this.apiService.updateEnvironment(this.environment).subscribe({
-      next: () => {
-        // Environment service'i güncelle
-        this.environmentService.updateEnvironment(this.environment);
-        
-        this.snackBar.open('Environment configuration saved successfully', 'Close', {
-          duration: 3000
-        });
-        this.saving = false;
-      },
-      error: (err) => {
-        this.snackBar.open(
-          err.error?.detail || 'Failed to save configuration', 
-          'Close', 
-          { duration: 5000, panelClass: 'error-snackbar' }
-        );
-        this.saving = false;
-      }
-    });
-  }
-
   testConnection() {
     this.snackBar.open('Testing connection to Spark endpoint...', undefined, {
       duration: 2000