flare / flare-ui /src /app /components /environment /environment.component.ts
ciyidogan's picture
Update flare-ui/src/app/components/environment/environment.component.ts
73c34b2 verified
raw
history blame
7.45 kB
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);
}
}