Spaces:
Running
Running
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 }}
|
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)="
|
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 |
-
|
|
|
|
|
47 |
<div class="alert alert-warning" *ngIf="selectedVersion?.published">
|
48 |
-
<mat-icon>
|
49 |
-
|
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 |
-
<
|
66 |
-
<mat-
|
67 |
-
|
68 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
69 |
</mat-form-field>
|
70 |
|
71 |
-
<mat-form-field class="full-width">
|
72 |
-
<mat-label>General Prompt</mat-label>
|
73 |
-
<textarea matInput
|
74 |
-
|
|
|
|
|
|
|
|
|
|
|
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 {{
|
81 |
</mat-form-field>
|
82 |
|
83 |
-
<div class="
|
84 |
-
<mat-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
</mat-
|
89 |
-
|
90 |
-
|
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 |
-
<
|
104 |
-
|
105 |
-
|
106 |
-
|
107 |
-
<mat-option value="llama-2">Llama 2</mat-option>
|
108 |
-
</mat-select>
|
109 |
</mat-form-field>
|
110 |
|
111 |
-
<
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
<mat-label>Max Tokens</mat-label>
|
119 |
-
<input matInput type="number" formControlName="max_new_tokens" [readonly]="!canEdit">
|
120 |
-
</mat-form-field>
|
121 |
|
122 |
-
|
123 |
-
|
124 |
-
|
125 |
-
</mat-
|
|
|
126 |
|
127 |
-
|
128 |
-
|
129 |
-
|
130 |
-
</mat-
|
|
|
131 |
|
132 |
-
|
133 |
-
|
134 |
-
|
135 |
-
</mat-
|
|
|
|
|
136 |
|
137 |
-
|
138 |
-
Do Sample
|
139 |
-
</mat-checkbox>
|
140 |
-
</div>
|
141 |
-
</mat-expansion-panel>
|
142 |
|
143 |
-
<div class="fine-tune-section"
|
144 |
-
<mat-checkbox formControlName="
|
145 |
-
|
146 |
</mat-checkbox>
|
147 |
|
148 |
-
<mat-form-field class="full-width"
|
149 |
-
|
150 |
-
<
|
151 |
-
<
|
|
|
|
|
|
|
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 |
-
<
|
248 |
-
|
249 |
-
|
250 |
-
|
251 |
-
|
|
|
|
|
|
|
|
|
|
|
252 |
</mat-form-field>
|
253 |
|
254 |
-
<button mat-raised-button color="
|
255 |
-
|
256 |
-
|
|
|
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 |
|