ciyidogan commited on
Commit
571d918
·
verified ·
1 Parent(s): af1aa86

Update flare-ui/src/app/dialogs/version-edit-dialog/version-edit-dialog.component.html

Browse files
flare-ui/src/app/dialogs/version-edit-dialog/version-edit-dialog.component.html CHANGED
@@ -1,6 +1,6 @@
1
  <mat-dialog-content class="version-management-container">
2
  <h2 mat-dialog-title>
3
- {{ project.name }} - Version Management
4
  <mat-chip-listbox class="title-chips">
5
  <mat-chip-option [disabled]="true">
6
  <mat-icon>layers</mat-icon>
@@ -12,9 +12,9 @@
12
  <div class="dialog-content">
13
  <!-- Version Selector -->
14
  <div class="version-selector">
15
- <mat-form-field class="version-select">
16
  <mat-label>Select Version</mat-label>
17
- <mat-select [(value)]="selectedVersion" (selectionChange)="onVersionChange($event.value)">
18
  <mat-option *ngFor="let version of versions" [value]="version">
19
  Version {{ version.no }} - {{ version.caption || 'No description' }}
20
  <span class="version-status" *ngIf="version.published">[Published]</span>
@@ -23,132 +23,132 @@
23
  </mat-form-field>
24
 
25
  <div class="version-actions">
26
- <button mat-raised-button color="primary" (click)="createVersion()">
27
  <mat-icon>add</mat-icon>
28
  New Version
29
  </button>
30
- <button mat-button (click)="copyVersion()" [disabled]="!selectedVersion">
31
- <mat-icon>content_copy</mat-icon>
32
- Copy
33
- </button>
34
  <button mat-button (click)="compareVersions()" [disabled]="versions.length < 2">
35
  <mat-icon>compare_arrows</mat-icon>
36
  Compare
37
  </button>
38
- <button mat-button color="warn" (click)="deleteVersion()"
39
- [disabled]="!selectedVersion || selectedVersion.published">
40
- <mat-icon>delete</mat-icon>
41
- Delete
42
- </button>
43
  </div>
44
  </div>
45
 
46
- <!-- Published Version Warning -->
 
 
47
  <div class="alert alert-warning" *ngIf="selectedVersion?.published">
48
- <mat-icon>warning</mat-icon>
49
- <span>This version is published and cannot be edited. Create a copy to make changes.</span>
50
- </div>
51
-
52
- <!-- Loading State -->
53
- <div class="loading-container" *ngIf="loading">
54
- <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
55
- <p>Loading version details...</p>
56
  </div>
57
 
58
  <!-- Version Editor -->
59
  <div class="version-editor" *ngIf="selectedVersion && !loading">
60
  <form [formGroup]="versionForm">
61
- <mat-tab-group>
62
  <!-- General Tab -->
63
  <mat-tab label="General">
64
  <div class="tab-content">
65
- <mat-form-field class="full-width">
66
- <mat-label>Version Caption</mat-label>
67
- <input matInput formControlName="caption" [readonly]="!canEdit">
68
- <mat-hint>Brief description of this version</mat-hint>
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </mat-form-field>
70
 
71
- <mat-form-field class="full-width">
72
- <mat-label>General Prompt</mat-label>
73
- <textarea matInput formControlName="prompt" rows="8" [readonly]="!canEdit"></textarea>
74
- <mat-hint>System prompt that defines the assistant's behavior</mat-hint>
 
 
 
 
 
75
  </mat-form-field>
76
 
77
- <mat-form-field class="full-width">
78
  <mat-label>Welcome Prompt</mat-label>
79
  <textarea matInput formControlName="welcome_prompt" rows="4" [readonly]="!canEdit"></textarea>
80
- <mat-hint>Initial greeting message (use {{variables.user_name}} for personalization)</mat-hint>
81
  </mat-form-field>
82
 
83
- <div class="metadata-info">
84
- <mat-chip-listbox>
85
- <mat-chip-option [disabled]="true">
86
- <mat-icon>schedule</mat-icon>
87
- Last updated: {{ selectedVersion.last_update_date | date:'short' }}
88
- </mat-chip-option>
89
- <mat-chip-option [disabled]="true" *ngIf="selectedVersion.last_update_user">
90
- <mat-icon>person</mat-icon>
91
- By: {{ selectedVersion.last_update_user }}
92
- </mat-chip-option>
93
- </mat-chip-listbox>
94
  </div>
95
  </div>
96
  </mat-tab>
97
 
98
- <!-- LLM Tab -->
99
  <mat-tab label="LLM">
100
- <div class="tab-content">
101
- <mat-form-field class="full-width">
102
- <mat-label>Model</mat-label>
103
- <mat-select formControlName="model" [disabled]="!canEdit">
104
- <mat-option value="gpt-3.5-turbo">GPT-3.5 Turbo</mat-option>
105
- <mat-option value="gpt-4">GPT-4</mat-option>
106
- <mat-option value="claude-2">Claude 2</mat-option>
107
- <mat-option value="llama-2">Llama 2</mat-option>
108
- </mat-select>
109
  </mat-form-field>
110
 
111
- <mat-expansion-panel>
112
- <mat-expansion-panel-header>
113
- <mat-panel-title>Generation Configuration</mat-panel-title>
114
- </mat-expansion-panel-header>
115
-
116
- <div class="generation-config" formGroupName="generation_config">
117
- <mat-form-field>
118
- <mat-label>Max Tokens</mat-label>
119
- <input matInput type="number" formControlName="max_new_tokens" [readonly]="!canEdit">
120
- </mat-form-field>
121
 
122
- <mat-form-field>
123
- <mat-label>Temperature</mat-label>
124
- <input matInput type="number" step="0.1" formControlName="temperature" [readonly]="!canEdit">
125
- </mat-form-field>
 
126
 
127
- <mat-form-field>
128
- <mat-label>Top P</mat-label>
129
- <input matInput type="number" step="0.1" formControlName="top_p" [readonly]="!canEdit">
130
- </mat-form-field>
 
131
 
132
- <mat-form-field>
133
- <mat-label>Top K</mat-label>
134
- <input matInput type="number" formControlName="top_k" [readonly]="!canEdit">
135
- </mat-form-field>
 
 
136
 
137
- <mat-checkbox formControlName="do_sample" [disabled]="!canEdit">
138
- Do Sample
139
- </mat-checkbox>
140
- </div>
141
- </mat-expansion-panel>
142
 
143
- <div class="fine-tune-section" formGroupName="fine_tune">
144
- <mat-checkbox formControlName="enabled" [disabled]="!canEdit">
145
- Enable Fine-tuning
146
  </mat-checkbox>
147
 
148
- <mat-form-field class="full-width" *ngIf="versionForm.get('fine_tune.enabled')?.value">
149
- <mat-label>Adapter Path</mat-label>
150
- <input matInput formControlName="adapter_path" [readonly]="!canEdit">
151
- <mat-hint>Path to LoRA adapter</mat-hint>
 
 
 
152
  </mat-form-field>
153
  </div>
154
  </div>
@@ -166,7 +166,7 @@
166
  </div>
167
 
168
  <!-- Example Language Selector -->
169
- <mat-form-field class="locale-selector">
170
  <mat-label>Example Language</mat-label>
171
  <mat-select [(value)]="selectedExampleLocale">
172
  <mat-option *ngFor="let locale of getAvailableLocales()" [value]="locale.code">
@@ -175,7 +175,7 @@
175
  </mat-select>
176
  </mat-form-field>
177
 
178
- <div class="intents-list">
179
  <mat-expansion-panel *ngFor="let intent of intents.controls; let i = index"
180
  [formGroupName]="i">
181
  <mat-expansion-panel-header>
@@ -238,22 +238,36 @@
238
  </div>
239
  </mat-expansion-panel>
240
  </div>
 
 
 
 
 
 
 
 
241
  </div>
242
  </mat-tab>
243
 
244
  <!-- Test Tab -->
245
  <mat-tab label="Test">
246
  <div class="tab-content">
247
- <mat-form-field class="full-width">
248
- <mat-label>Test Input</mat-label>
249
- <textarea matInput [(ngModel)]="testInput" rows="3"
250
- placeholder="Enter a message to test intent detection..."
251
- [ngModelOptions]="{standalone: true}"></textarea>
 
 
 
 
 
252
  </mat-form-field>
253
 
254
- <button mat-raised-button color="primary" (click)="testIntentDetection()"
255
- [disabled]="!testInput || testing">
256
- <mat-icon>science</mat-icon>
 
257
  {{ testing ? 'Testing...' : 'Test Intent Detection' }}
258
  </button>
259
 
 
1
  <mat-dialog-content class="version-management-container">
2
  <h2 mat-dialog-title>
3
+ Manage Versions - {{ project.name }}
4
  <mat-chip-listbox class="title-chips">
5
  <mat-chip-option [disabled]="true">
6
  <mat-icon>layers</mat-icon>
 
12
  <div class="dialog-content">
13
  <!-- Version Selector -->
14
  <div class="version-selector">
15
+ <mat-form-field appearance="outline" class="version-select">
16
  <mat-label>Select Version</mat-label>
17
+ <mat-select [(value)]="selectedVersion" (selectionChange)="loadVersion($event.value)">
18
  <mat-option *ngFor="let version of versions" [value]="version">
19
  Version {{ version.no }} - {{ version.caption || 'No description' }}
20
  <span class="version-status" *ngIf="version.published">[Published]</span>
 
23
  </mat-form-field>
24
 
25
  <div class="version-actions">
26
+ <button mat-raised-button color="primary" (click)="createVersion()" [disabled]="creating">
27
  <mat-icon>add</mat-icon>
28
  New Version
29
  </button>
 
 
 
 
30
  <button mat-button (click)="compareVersions()" [disabled]="versions.length < 2">
31
  <mat-icon>compare_arrows</mat-icon>
32
  Compare
33
  </button>
 
 
 
 
 
34
  </div>
35
  </div>
36
 
37
+ <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
38
+
39
+ <!-- Warning for published version -->
40
  <div class="alert alert-warning" *ngIf="selectedVersion?.published">
41
+ <mat-icon>info</mat-icon>
42
+ This version is published and cannot be edited. Create a new version or unpublish to make changes.
 
 
 
 
 
 
43
  </div>
44
 
45
  <!-- Version Editor -->
46
  <div class="version-editor" *ngIf="selectedVersion && !loading">
47
  <form [formGroup]="versionForm">
48
+ <mat-tab-group [(selectedIndex)]="selectedTabIndex" dynamicHeight>
49
  <!-- General Tab -->
50
  <mat-tab label="General">
51
  <div class="tab-content">
52
+ <div class="metadata-info">
53
+ <mat-chip-listbox>
54
+ <mat-chip-option>Version {{ selectedVersion.no }}</mat-chip-option>
55
+ <mat-chip-option *ngIf="selectedVersion.published" selected>Published</mat-chip-option>
56
+ <mat-chip-option *ngIf="!selectedVersion.published">Draft</mat-chip-option>
57
+ <mat-chip-option *ngIf="selectedVersion.last_update_date">
58
+ Last updated: {{ selectedVersion.last_update_date | date:'short' }}
59
+ </mat-chip-option>
60
+ <mat-chip-option *ngIf="selectedVersion.last_update_user">
61
+ By: {{ selectedVersion.last_update_user }}
62
+ </mat-chip-option>
63
+ </mat-chip-listbox>
64
+ </div>
65
+
66
+ <mat-form-field appearance="outline" class="full-width">
67
+ <mat-label>Caption</mat-label>
68
+ <input matInput formControlName="caption" placeholder="Version description" [readonly]="!canEdit">
69
  </mat-form-field>
70
 
71
+ <mat-form-field appearance="outline" class="full-width">
72
+ <mat-label>General System Prompt</mat-label>
73
+ <textarea matInput
74
+ class="code-textarea"
75
+ formControlName="general_prompt"
76
+ rows="10"
77
+ placeholder="Define the assistant's behavior and capabilities..."
78
+ [readonly]="!canEdit"></textarea>
79
+ <mat-hint>This prompt defines the overall behavior of your assistant</mat-hint>
80
  </mat-form-field>
81
 
82
+ <mat-form-field appearance="outline" class="full-width">
83
  <mat-label>Welcome Prompt</mat-label>
84
  <textarea matInput formControlName="welcome_prompt" rows="4" [readonly]="!canEdit"></textarea>
85
+ <mat-hint>Initial greeting message (use {{user_name}} for personalization)</mat-hint>
86
  </mat-form-field>
87
 
88
+ <div class="action-buttons">
89
+ <button mat-raised-button color="warn"
90
+ (click)="deleteVersion()"
91
+ [disabled]="selectedVersion.published"
92
+ *ngIf="!selectedVersion.published">
93
+ <mat-icon>delete</mat-icon>
94
+ Delete Version
95
+ </button>
 
 
 
96
  </div>
97
  </div>
98
  </mat-tab>
99
 
100
+ <!-- LLM Configuration Tab -->
101
  <mat-tab label="LLM">
102
+ <div class="tab-content" formGroupName="llm">
103
+ <mat-form-field appearance="outline" class="full-width">
104
+ <mat-label>Model Repository ID</mat-label>
105
+ <input matInput formControlName="repo_id"
106
+ placeholder="e.g., ytu-ce-cosmos/Turkish-Llama-8b-Instruct-v0.1"
107
+ [readonly]="!canEdit">
108
+ <mat-hint>HuggingFace model repository ID</mat-hint>
 
 
109
  </mat-form-field>
110
 
111
+ <h4>Generation Configuration</h4>
112
+ <div formGroupName="generation_config" class="generation-config">
113
+ <mat-form-field appearance="outline">
114
+ <mat-label>Max New Tokens</mat-label>
115
+ <input matInput type="number" formControlName="max_new_tokens" [readonly]="!canEdit">
116
+ <mat-hint>Maximum tokens to generate (1-2048)</mat-hint>
117
+ </mat-form-field>
 
 
 
118
 
119
+ <mat-form-field appearance="outline">
120
+ <mat-label>Temperature</mat-label>
121
+ <input matInput type="number" step="0.1" formControlName="temperature" [readonly]="!canEdit">
122
+ <mat-hint>Controls randomness (0-2)</mat-hint>
123
+ </mat-form-field>
124
 
125
+ <mat-form-field appearance="outline">
126
+ <mat-label>Top P</mat-label>
127
+ <input matInput type="number" step="0.1" formControlName="top_p" [readonly]="!canEdit">
128
+ <mat-hint>Nucleus sampling (0-1)</mat-hint>
129
+ </mat-form-field>
130
 
131
+ <mat-form-field appearance="outline">
132
+ <mat-label>Repetition Penalty</mat-label>
133
+ <input matInput type="number" step="0.1" formControlName="repetition_penalty" [readonly]="!canEdit">
134
+ <mat-hint>Penalty for repetition (1-2)</mat-hint>
135
+ </mat-form-field>
136
+ </div>
137
 
138
+ <mat-divider></mat-divider>
 
 
 
 
139
 
140
+ <div class="fine-tune-section">
141
+ <mat-checkbox formControlName="use_fine_tune" [disabled]="!canEdit">
142
+ Use Fine-Tuned Model
143
  </mat-checkbox>
144
 
145
+ <mat-form-field appearance="outline" class="full-width"
146
+ *ngIf="versionForm.get('llm.use_fine_tune')?.value">
147
+ <mat-label>Fine-Tune ZIP URL</mat-label>
148
+ <input matInput formControlName="fine_tune_zip"
149
+ placeholder="https://example.com/lora-adapter.zip"
150
+ [readonly]="!canEdit">
151
+ <mat-hint>URL to LoRA adapter ZIP file</mat-hint>
152
  </mat-form-field>
153
  </div>
154
  </div>
 
166
  </div>
167
 
168
  <!-- Example Language Selector -->
169
+ <mat-form-field appearance="outline" class="locale-selector">
170
  <mat-label>Example Language</mat-label>
171
  <mat-select [(value)]="selectedExampleLocale">
172
  <mat-option *ngFor="let locale of getAvailableLocales()" [value]="locale.code">
 
175
  </mat-select>
176
  </mat-form-field>
177
 
178
+ <div formArrayName="intents" class="intents-list">
179
  <mat-expansion-panel *ngFor="let intent of intents.controls; let i = index"
180
  [formGroupName]="i">
181
  <mat-expansion-panel-header>
 
238
  </div>
239
  </mat-expansion-panel>
240
  </div>
241
+
242
+ <div class="empty-state" *ngIf="intents.length === 0">
243
+ <mat-icon>psychology</mat-icon>
244
+ <p>No intents defined yet.</p>
245
+ <button mat-raised-button color="primary" (click)="addIntent()" [disabled]="!canEdit">
246
+ Add First Intent
247
+ </button>
248
+ </div>
249
  </div>
250
  </mat-tab>
251
 
252
  <!-- Test Tab -->
253
  <mat-tab label="Test">
254
  <div class="tab-content">
255
+ <h3>Test Intent Detection</h3>
256
+ <p>Enter a user message to test which intent would be detected.</p>
257
+
258
+ <mat-form-field appearance="outline" class="full-width">
259
+ <mat-label>User Message</mat-label>
260
+ <textarea matInput
261
+ [(ngModel)]="testUserMessage"
262
+ [ngModelOptions]="{standalone: true}"
263
+ rows="3"
264
+ placeholder="e.g., I want to book a flight from Istanbul to Ankara"></textarea>
265
  </mat-form-field>
266
 
267
+ <button mat-raised-button color="accent"
268
+ (click)="testIntentDetection()"
269
+ [disabled]="testing || !testUserMessage">
270
+ <mat-icon>play_arrow</mat-icon>
271
  {{ testing ? 'Testing...' : 'Test Intent Detection' }}
272
  </button>
273