File size: 7,451 Bytes
beae7f4
 
 
 
 
 
 
 
 
 
 
 
fcaa111
8cc837e
0a13b97
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fcaa111
8cc837e
 
beae7f4
4048d52
 
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0a13b97
99cbdb5
 
 
65380e4
 
 
 
 
 
 
 
 
 
8cc837e
65380e4
beae7f4
 
 
 
 
 
 
 
 
 
 
 
f68b441
0a13b97
 
 
 
 
65380e4
 
 
f68b441
 
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99cbdb5
 
 
 
beae7f4
 
99cbdb5
 
 
 
73c34b2
 
 
99cbdb5
 
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8cc837e
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
8cc837e
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
8cc837e
 
b8de5e3
 
 
8cc837e
beae7f4
 
65380e4
 
 
 
99cbdb5
 
65380e4
beae7f4
65380e4
beae7f4
 
65380e4
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8cc837e
beae7f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b93905
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
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 { MatCheckboxModule } from '@angular/material/checkbox';
import { ApiService, Environment, STTSettings, TTSSettings } from '../../services/api.service';
import { EnvironmentService } from '../../services/environment.service';

@Component({
  selector: 'app-environment',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatButtonModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatExpansionModule,
    MatSliderModule,
    MatCheckboxModule
  ],
  templateUrl: './environment.component.html',
  styleUrls: ['./environment.component.scss']
})
export class EnvironmentComponent implements OnInit {
  private apiService = inject(ApiService);
  private snackBar = inject(MatSnackBar);
  private environmentService = inject(EnvironmentService);

  environment: Environment = {
    work_mode: 'hfcloud',
    cloud_token: '',
    spark_endpoint: '',
    internal_prompt: '',
    tts_engine: 'no_tts',
    tts_engine_api_key: '',
    stt_engine: 'no_stt',
    stt_engine_api_key: ''
  };

  ttsSettings: TTSSettings = {
    use_ssml: false
  };
  
  // Separate STT settings object with defaults
  sttSettings: STTSettings = {
    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
  };

  loading = true;
  saving = false;

  ngOnInit() {
    this.loadEnvironment();
  }

  loadEnvironment() {
    this.loading = true;
    this.apiService.getEnvironment().subscribe({
      next: (env) => {
        this.environment = env;
        
        // Load TTS settings or use defaults
        if (env.tts_settings) {
          this.ttsSettings = { ...this.ttsSettings, ...env.tts_settings };
        }

        // Load STT settings or use defaults
        if (env.stt_settings) {
          this.sttSettings = { ...this.sttSettings, ...env.stt_settings };
        }
        
        this.loading = false;
      },
      error: (err) => {
        this.snackBar.open('Failed to load environment configuration', 'Close', {
          duration: 5000,
          panelClass: 'error-snackbar'
        });
        this.loading = false;
      }
    });
  }

  getTokenLabel(): string {
    switch(this.environment.work_mode) {
      case 'gpt4o':
      case 'gpt4o-mini':
        return 'OpenAI API Key';
      case 'hfcloud':
      case 'cloud':
        return 'Cloud Token';
      default:
        return 'Cloud Token';
    }
  }

  getTokenPlaceholder(): string {
    switch(this.environment.work_mode) {
      case 'gpt4o':
      case 'gpt4o-mini':
        return 'Enter OpenAI API key (sk-...)';
      case 'hfcloud':
      case 'cloud':
        return 'Enter cloud token';
      default:
        return 'Enter cloud token';
    }
  }

  isGPTMode(): boolean {
    return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
  }

  onWorkModeChange() {
    if (this.environment.work_mode === 'on-premise') {
      this.environment.cloud_token = '';
    }
  }

  onTTSEngineChange() {
    if (this.environment.tts_engine === 'no_tts') {
      this.environment.tts_engine_api_key = '';
      this.ttsSettings.use_ssml = false;
    } else if (!this.isTTSProviderSSMLCapable()) {
      // SSML desteklemiyorsa kapat
      this.ttsSettings.use_ssml = false;
    }
  }
  
  isTTSProviderSSMLCapable(): boolean {
    // SSML destekleyen provider'lar
    const ssmlProviders = ['google', 'azure', 'amazon'];
    if (!this.environment.tts_engine) {
      return false;
    }
    return ssmlProviders.includes(this.environment.tts_engine);
  }

  onSTTEngineChange() {
    if (this.environment.stt_engine === 'no_stt') {
      this.environment.stt_engine_api_key = '';
    }
  }

  getSTTKeyLabel(): string {
    switch(this.environment.stt_engine) {
      case 'google':
        return 'Google Credentials Path';
      case 'azure':
        return 'Azure Subscription Key';
      case 'amazon':
        return 'AWS Access Key';
      case 'flicker':
        return 'Flicker API Key';
      default:
        return 'STT API Key';
    }
  }

  getSTTKeyPlaceholder(): string {
    switch(this.environment.stt_engine) {
      case 'google':
        return 'Path to Google credentials JSON file';
      case 'azure':
        return 'Enter Azure subscription key';
      case 'amazon':
        return 'Enter AWS access key';
      case 'flicker':
        return 'Enter Flicker API key';
      default:
        return 'Enter STT API key';
    }
  }

  getSTTKeyHint(): string {
    switch(this.environment.stt_engine) {
      case 'google':
        return 'Path to service account JSON file for Google Cloud';
      case 'azure':
        return 'Subscription key from Azure portal';
      case 'amazon':
        return 'AWS IAM access key with Transcribe permissions';
      case 'flicker':
        return 'API key from Flicker dashboard';
      default:
        return '';
    }
  }

  formatMilliseconds(value: number): string {
    return `${value}ms`;
  }

  save() {
    this.saving = true;
    
    // Include STT settings in the save
    const saveData = {
      ...this.environment,
      stt_settings: this.sttSettings,
      tts_settings: this.ttsSettings
    };
  
    this.apiService.updateEnvironment(saveData).subscribe({
      next: () => {
        // Environment service'i güncelle
        this.environmentService.updateEnvironment(saveData);
        
        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
    });
    
    // TODO: Implement actual connection test
    setTimeout(() => {
      this.snackBar.open('Connection successful!', 'Close', {
        duration: 3000
      });
    }, 2000);
  }

  reloadFromSpark() {
    if (this.isGPTMode()) {
      return;
    }

    this.snackBar.open('Reloading configuration from Spark...', undefined, {
      duration: 2000
    });
    
    setTimeout(() => {
      this.loadEnvironment();
      this.snackBar.open('Configuration reloaded', 'Close', {
        duration: 3000
      });
    }, 1000);
  }
}