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

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

@@ -0,0 +1,320 @@
+    <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>
+            </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>
+
+              <!-- 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)]="environment.stt_settings.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)]="environment.stt_settings.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: {{ environment.stt_settings.speech_timeout_ms }}ms</label>
+                    <mat-slider
+                      [min]="500"
+                      [max]="5000"
+                      [step]="100"
+                      [discrete]="true"
+                      [displayWith]="formatMilliseconds"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.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: {{ environment.stt_settings.vad_sensitivity }}</label>
+                    <mat-slider
+                      [min]="0"
+                      [max]="1"
+                      [step]="0.1"
+                      [discrete]="true"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.vad_sensitivity">
+                    </mat-slider>
+                    <mat-hint>Higher values = more sensitive</mat-hint>
+                  </div>
+              
+                  <!-- Noise Reduction Level -->
+                  <div class="slider-field">
+                    <label>Noise Reduction Level: {{ environment.stt_settings.noise_reduction_level }}</label>
+                    <mat-slider
+                      [min]="0"
+                      [max]="3"
+                      [step]="1"
+                      [discrete]="true"
+                    >
+                      <input matSliderThumb [(ngModel)]="environment.stt_settings.noise_reduction_level">
+                    </mat-slider>
+                    <mat-hint>0 = Off, 3 = Maximum</mat-hint>
+                  </div>
+              
+                  <!-- Checkboxes -->
+                  <div class="checkbox-group">
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.use_enhanced"
+                      [disabled]="loading"
+                      *ngIf="environment.stt_engine === 'google'">
+                      Use Enhanced Model
+                    </mat-checkbox>
+                    
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.enable_punctuation"
+                      [disabled]="loading">
+                      Enable Automatic Punctuation
+                    </mat-checkbox>
+                    
+                    <mat-checkbox 
+                      [(ngModel)]="environment.stt_settings.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>