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

    <div class="environment-container">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            <mat-icon>settings</mat-icon>
            Environment Configuration
          </mat-card-title>
        </mat-card-header>
        
        <mat-card-content>
          @if (isGPTMode()) {
            <mat-card class="info-card">
              <mat-card-content>
                <mat-icon>info</mat-icon>
                <div>
                  <strong>{{ environment.work_mode === 'gpt4o' ? 'GPT-4o' : 'GPT-4o Mini' }} Mode</strong>
                  <p>This mode uses OpenAI's API which has usage-based pricing.</p>
                  <p>Approximate cost: {{ environment.work_mode === 'gpt4o' ? '$0.01-0.03' : '$0.001-0.003' }} per conversation turn.</p>
                </div>
              </mat-card-content>
            </mat-card>
          }

          <form (ngSubmit)="save()" #envForm="ngForm">
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Work Mode</mat-label>
              <mat-select
                name="workMode"
                [(ngModel)]="environment.work_mode"
                (selectionChange)="onWorkModeChange()"
                required
                [disabled]="loading"
              >
                <mat-option value="hfcloud">HF Cloud</mat-option>
                <mat-option value="cloud">Cloud</mat-option>
                <mat-option value="on-premise">On-Premise</mat-option>
                <mat-option value="gpt4o">GPT-4o</mat-option>
                <mat-option value="gpt4o-mini">GPT-4o Mini</mat-option>
              </mat-select>
              <mat-icon matPrefix>cloud</mat-icon>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ getTokenLabel() }}</mat-label>
              <input
                matInput
                type="password"
                name="cloudToken"
                [(ngModel)]="environment.cloud_token"
                [disabled]="loading || environment.work_mode === 'on-premise'"
                [placeholder]="getTokenPlaceholder()"
              >
              <mat-icon matPrefix>vpn_key</mat-icon>
              <mat-hint>{{ isGPTMode() ? 'Required for OpenAI API access' : 'Required for HF Cloud and Cloud modes' }}</mat-hint>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Spark Endpoint</mat-label>
              <input
                matInput
                type="url"
                name="sparkEndpoint"
                [(ngModel)]="environment.spark_endpoint"
                [required]="!isGPTMode()"
                [disabled]="loading || isGPTMode()"
                placeholder="https://spark-service.example.com"
              >
              <mat-icon matPrefix>link</mat-icon>
              <button
                mat-icon-button
                matSuffix
                type="button"
                (click)="testConnection()"
                [disabled]="loading || !environment.spark_endpoint || isGPTMode()"
                matTooltip="Test Connection"
              >
                <mat-icon>wifi_tethering</mat-icon>
              </button>
              @if (isGPTMode()) {
                <mat-hint>Not required for GPT mode</mat-hint>
              }
            </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>              

              <mat-checkbox 
                name="ttsUseSSML"
                [(ngModel)]="ttsSettings.use_ssml"
                [disabled]="loading || !isTTSProviderSSMLCapable()"
                *ngIf="environment.tts_engine !== 'no_tts'">
                Use SSML
              </mat-checkbox>
              <mat-hint *ngIf="isTTSProviderSSMLCapable() && environment.tts_engine !== 'no_tts'">
                SSML provides better control over pronunciation, pauses, and emphasis
              </mat-hint>

            </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="google">Google Cloud Speech</mat-option>
                  <mat-option value="azure">Azure Speech (Coming Soon)</mat-option>
                  <mat-option value="amazon">Amazon Transcribe (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>{{ getSTTKeyLabel() }}</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]="getSTTKeyPlaceholder()"
                >
                <mat-icon matPrefix>key</mat-icon>
                <mat-hint>{{ getSTTKeyHint() }}</mat-hint>
              </mat-form-field>
            </div>

            <div>
              <!-- STT Settings Panel -->
              <mat-expansion-panel class="stt-settings-panel" *ngIf="environment.stt_engine !== 'no_stt'">
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    <mat-icon>settings_voice</mat-icon>
                    STT Settings
                  </mat-panel-title>
                  <mat-panel-description>
                    Advanced speech recognition settings
                  </mat-panel-description>
                </mat-expansion-panel-header>
                
                <div class="stt-settings-content">
                  <!-- Language -->
                  <mat-form-field appearance="outline" class="full-width">
                    <mat-label>Language</mat-label>
                    <mat-select
                      name="sttLanguage"
                      [(ngModel)]="sttSettings.language"
                      [disabled]="loading"
                    >
                      <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
                      <mat-option value="en-US">English US (en-US)</mat-option>
                      <mat-option value="en-GB">English UK (en-GB)</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>
              
                  <!-- Model -->
                  <mat-form-field appearance="outline" class="full-width" *ngIf="environment.stt_engine === 'google'">
                    <mat-label>Recognition Model</mat-label>
                    <mat-select
                      name="sttModel"
                      [(ngModel)]="sttSettings.model"
                      [disabled]="loading"
                    >
                      <mat-option value="latest_long">Latest Long (Best for long audio)</mat-option>
                      <mat-option value="latest_short">Latest Short (Best for short audio)</mat-option>
                      <mat-option value="command_and_search">Command and Search</mat-option>
                      <mat-option value="phone_call">Phone Call</mat-option>
                      <mat-option value="video">Video</mat-option>
                    </mat-select>
                    <mat-icon matPrefix>model_training</mat-icon>
                  </mat-form-field>
              
                  <!-- Speech Timeout -->
                  <div class="slider-field">
                    <label>Speech Timeout: {{ sttSettings.speech_timeout_ms }}ms</label>
                    <mat-slider
                      [min]="500"
                      [max]="5000"
                      [step]="100"
                      [discrete]="true"
                      [displayWith]="formatMilliseconds"
                    >
                      <input matSliderThumb 
                             name="sttSpeechTimeout"
                             [(ngModel)]="sttSettings.speech_timeout_ms">
                    </mat-slider>
                    <mat-hint>Silence duration to end speech detection</mat-hint>
                  </div>
                  
                  <!-- VAD Sensitivity -->
                  <div class="slider-field">
                    <label>Voice Activity Detection Sensitivity: {{ sttSettings.vad_sensitivity }}</label>
                    <mat-slider
                      [min]="0"
                      [max]="1"
                      [step]="0.1"
                      [discrete]="true"
                    >
                      <input matSliderThumb 
                             name="sttVadSensitivity"
                             [(ngModel)]="sttSettings.vad_sensitivity">
                    </mat-slider>
                    <mat-hint>Higher values = more sensitive</mat-hint>
                  </div>
                  
                  <!-- Noise Reduction Level -->
                  <div class="slider-field">
                    <label>Noise Reduction Level: {{ sttSettings.noise_reduction_level }}</label>
                    <mat-slider
                      [min]="0"
                      [max]="3"
                      [step]="1"
                      [discrete]="true"
                    >
                      <input matSliderThumb 
                             name="sttNoiseReduction"
                             [(ngModel)]="sttSettings.noise_reduction_level">
                    </mat-slider>
                    <mat-hint>0 = Off, 3 = Maximum</mat-hint>
                  </div>
              
                  <!-- Checkboxes -->
                  <div class="checkbox-group">
                    <mat-checkbox 
                      name="sttUseEnhanced"
                      [(ngModel)]="sttSettings.use_enhanced"
                      [disabled]="loading"
                      *ngIf="environment.stt_engine === 'google'">
                      Use Enhanced Model
                    </mat-checkbox>
                    
                    <mat-checkbox 
                      name="sttEnablePunctuation"
                      [(ngModel)]="sttSettings.enable_punctuation"
                      [disabled]="loading">
                      Enable Automatic Punctuation
                    </mat-checkbox>
                    
                    <mat-checkbox 
                      name="sttInterimResults"
                      [(ngModel)]="sttSettings.interim_results"
                      [disabled]="loading">
                      Show Interim Results
                    </mat-checkbox>
                  </div>
                </div>
              </mat-expansion-panel>
            </div>

            <mat-expansion-panel class="prompt-panel">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <mat-icon>psychology</mat-icon>
                  Internal System Prompt
                </mat-panel-title>
                <mat-panel-description>
                  Advanced configuration for LLM
                </mat-panel-description>
              </mat-expansion-panel-header>
              
              <mat-form-field appearance="outline" class="full-width">
                <mat-label>Internal Prompt</mat-label>
                <textarea
                  matInput
                  name="internalPrompt"
                  [(ngModel)]="environment.internal_prompt"
                  [disabled]="loading"
                  rows="10"
                  placeholder="Enter internal system prompt..."
                ></textarea>
                <mat-hint>This prompt will be prepended to all project prompts</mat-hint>
              </mat-form-field>
            </mat-expansion-panel>

            <div class="form-actions">
              <button
                mat-raised-button
                color="primary"
                type="submit"
                [disabled]="loading || !envForm.valid || saving"
              >
                @if (saving) {
                  <mat-spinner diameter="20"></mat-spinner>
                  Saving...
                } @else {
                  <mat-icon>save</mat-icon>
                  Save
                }
              </button>
              
              <button
                mat-raised-button
                type="button"
                (click)="reloadFromSpark()"
                [disabled]="loading || isGPTMode()"
              >
                <mat-icon>refresh</mat-icon>
                Reload from Spark
              </button>
            </div>
          </form>
        </mat-card-content>
      </mat-card>
    </div>