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

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

@@ -113,6 +113,70 @@ import { EnvironmentService } from '../../services/environment.service';
               }
             </mat-form-field>
 
+            <!-- TTS Configuration -->
+            <div class="engine-row">
+              <mat-form-field appearance="outline" class="engine-field">
+                <mat-label>TTS Engine</mat-label>
+                <mat-select
+                  name="ttsEngine"
+                  [(ngModel)]="environment.tts_engine"
+                  (selectionChange)="onTTSEngineChange()"
+                  [disabled]="loading"
+                >
+                  <mat-option value="no_tts">No TTS</mat-option>
+                  <mat-option value="elevenlabs">ElevenLabs</mat-option>
+                  <mat-option value="blaze">Blaze (Coming Soon)</mat-option>
+                </mat-select>
+                <mat-icon matPrefix>record_voice_over</mat-icon>
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="api-key-field">
+                <mat-label>TTS API Key</mat-label>
+                <input
+                  matInput
+                  type="password"
+                  name="ttsApiKey"
+                  [(ngModel)]="environment.tts_engine_api_key"
+                  [disabled]="loading || environment.tts_engine === 'no_tts'"
+                  [required]="environment.tts_engine !== 'no_tts'"
+                  placeholder="Enter TTS API key"
+                >
+                <mat-icon matPrefix>key</mat-icon>
+              </mat-form-field>
+            </div>
+
+            <!-- STT Configuration -->
+            <div class="engine-row">
+              <mat-form-field appearance="outline" class="engine-field">
+                <mat-label>STT Engine</mat-label>
+                <mat-select
+                  name="sttEngine"
+                  [(ngModel)]="environment.stt_engine"
+                  (selectionChange)="onSTTEngineChange()"
+                  [disabled]="loading"
+                >
+                  <mat-option value="no_stt">No STT</mat-option>
+                  <mat-option value="elevenlabs">ElevenLabs</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>
+                <input
+                  matInput
+                  type="password"
+                  name="sttApiKey"
+                  [(ngModel)]="environment.stt_engine_api_key"
+                  [disabled]="loading || environment.stt_engine === 'no_stt'"
+                  [required]="environment.stt_engine !== 'no_stt'"
+                  placeholder="Enter STT API key"
+                >
+                <mat-icon matPrefix>key</mat-icon>
+              </mat-form-field>
+            </div>
+
             <mat-expansion-panel class="prompt-panel">
               <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -218,6 +282,21 @@ import { EnvironmentService } from '../../services/environment.service';
       margin-bottom: 20px;
     }
 
+    .engine-row {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+      margin-bottom: 20px;
+
+      .engine-field {
+        flex: 1;
+      }
+
+      .api-key-field {
+        flex: 1.5;
+      }
+    }
+
     .prompt-panel {
       margin-bottom: 20px;
       
@@ -276,7 +355,11 @@ export class EnvironmentComponent implements OnInit {
     work_mode: 'hfcloud',
     cloud_token: '',
     spark_endpoint: '',
-    internal_prompt: ''
+    internal_prompt: '',
+    tts_engine: 'no_tts',
+    tts_engine_api_key: '',
+    stt_engine: 'no_stt',
+    stt_engine_api_key: ''
   };
 
   loading = true;
@@ -339,6 +422,18 @@ export class EnvironmentComponent implements OnInit {
     }
   }
 
+  onTTSEngineChange() {
+    if (this.environment.tts_engine === 'no_tts') {
+      this.environment.tts_engine_api_key = '';
+    }
+  }
+
+  onSTTEngineChange() {
+    if (this.environment.stt_engine === 'no_stt') {
+      this.environment.stt_engine_api_key = '';
+    }
+  }
+
   save() {
     this.saving = true;