tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Add authentication for Ollama model

pull/14014/head
ArtemDzhereleiko 8 months ago
committed by Dmytro Skarzhynets
parent
fae206a944
commit
329534df61
No known key found for this signature in database GPG Key ID: 2B51652F224037DF
4 changed files with 153 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
  2. 67
      ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
  3. 11
      ui-ngx/src/app/shared/models/ai-model.models.ts
  4. 16
      ui-ngx/src/assets/locale/locale.constant-en_US.json

87
ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
View File

@ -55,31 +55,34 @@
</mat-option>
</mat-select>
</mat-form-field>
<div formGroupName="providerConfig" class="tb-form-panel no-border no-padding">
<div formGroupName="providerConfig" class="tb-form-panel no-border no-padding no-gap">
@if (providerFieldsList.includes('personalAccessToken')) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.personal-access-token</mat-label>
<input type="password" required matInput formControlName="personalAccessToken" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('personalAccessToken').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('required') ||
aiModelForms.get('configuration.providerConfig.personalAccessToken').hasError('pattern')">
{{ 'ai-models.personal-access-token-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('projectId')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.project-id</mat-label>
<input matInput required formControlName="projectId">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('projectId').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.projectId').hasError('required') ||
aiModelForms.get('configuration.providerConfig.projectId').hasError('pattern')">
{{ 'ai-models.project-id-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('location')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.location</mat-label>
<input matInput required formControlName="location">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('location').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.location').hasError('required') ||
aiModelForms.get('configuration.providerConfig.location').hasError('pattern')">
{{ 'ai-models.location-required' | translate }}
</mat-error>
</mat-form-field>
@ -98,16 +101,17 @@
</tb-file-input>
}
@if (providerFieldsList.includes('endpoint')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.endpoint</mat-label>
<input required matInput formControlName="endpoint">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('endpoint').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.endpoint').hasError('required') ||
aiModelForms.get('configuration.providerConfig.endpoint').hasError('pattern')">
{{ 'ai-models.endpoint-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('serviceVersion')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.service-version</mat-label>
<input matInput formControlName="serviceVersion">
</mat-form-field>
@ -117,25 +121,28 @@
<mat-label translate>ai-models.api-key</mat-label>
<input type="password" required matInput formControlName="apiKey" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('apiKey').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.apiKey').hasError('required') ||
aiModelForms.get('configuration.providerConfig.apiKey').hasError('pattern')">
{{ 'ai-models.api-key-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('region')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.region</mat-label>
<input required matInput formControlName="region">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('region').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.region').hasError('required') ||
aiModelForms.get('configuration.providerConfig.region').hasError('pattern')">
{{ 'ai-models.region-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('accessKeyId')) {
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.access-key-id</mat-label>
<input required matInput formControlName="accessKeyId">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('accessKeyId').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('required') ||
aiModelForms.get('configuration.providerConfig.accessKeyId').hasError('pattern')">
{{ 'ai-models.access-key-id-required' | translate }}
</mat-error>
</mat-form-field>
@ -145,7 +152,8 @@
<mat-label translate>ai-models.secret-access-key</mat-label>
<input type="password" required matInput formControlName="secretAccessKey" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('secretAccessKey').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('required') ||
aiModelForms.get('configuration.providerConfig.secretAccessKey').hasError('pattern')">
{{ 'ai-models.secret-access-key-required' | translate }}
</mat-error>
</mat-form-field>
@ -154,11 +162,58 @@
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.baseurl</mat-label>
<input required matInput formControlName="baseUrl">
<mat-error *ngIf="aiModelForms.get('configuration').get('providerConfig').get('baseUrl').hasError('required')">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
{{ 'ai-models.baseurl-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (provider === aiProvider.OLLAMA) {
<div class="tb-form-panel stroked no-gap no-padding-bottom mb-4" formGroupName="auth">
<div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
<div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ authenticationHint }}">
{{ 'ai-models.authentication' | translate }}
</div>
<tb-toggle-select formControlName="type">
<tb-toggle-option [value]="AuthenticationType.NONE">{{ 'ai-models.authentication-type.none' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="AuthenticationType.BASIC">{{ 'ai-models.authentication-type.basic' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="AuthenticationType.TOKEN">{{ 'ai-models.authentication-type.token' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div class="tb-form-panel no-padding no-border no-gap padding-top">
@if (aiModelForms.get('configuration.providerConfig.auth.type').value === AuthenticationType.BASIC) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.username</mat-label>
<input required matInput formControlName="username">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.username').hasError('required') ||
aiModelForms.get('configuration.providerConfig.auth.username').hasError('pattern')">
{{ 'ai-models.username-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.password</mat-label>
<input type="password" required matInput formControlName="password" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.password').hasError('required') ||
aiModelForms.get('configuration.providerConfig.auth.password').hasError('pattern')">
{{ 'ai-models.password-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (aiModelForms.get('configuration.providerConfig.auth.type').value === AuthenticationType.TOKEN) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.token</mat-label>
<input type="password" required matInput formControlName="token" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.auth.token').hasError('required') ||
aiModelForms.get('configuration.providerConfig.auth.token').hasError('pattern')">
{{ 'ai-models.token-required' | translate }}
</mat-error>
</mat-form-field>
}
</div>
</div>
}
</div>
</section>
</section>

67
ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
View File

@ -30,6 +30,7 @@ import {
AiModelMap,
AiProvider,
AiProviderTranslations,
AuthenticationType,
ModelType,
ProviderFieldsAllList
} from '@shared/models/ai-model.models';
@ -37,6 +38,7 @@ import { AiModelService } from '@core/http/ai-model.service';
import { CheckConnectivityDialogComponent } from '@home/components/ai-model/check-connectivity-dialog.component';
import { map } from 'rxjs/operators';
import { deepTrim } from '@core/utils';
import { TranslateService } from '@ngx-translate/core';
export interface AIModelDialogData {
AIModel?: AiModel;
@ -62,18 +64,23 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
providerMap: AiProvider[] = Object.keys(AiProvider) as AiProvider[];
providerTranslationMap = AiProviderTranslations;
AuthenticationType = AuthenticationType;
provider: AiProvider = AiProvider.OPENAI;
aiModelForms: FormGroup;
isAdd = false;
authenticationHint: string;
constructor(protected store: Store<AppState>,
protected router: Router,
protected dialogRef: MatDialogRef<AIModelDialogComponent, AiModel>,
@Inject(MAT_DIALOG_DATA) public data: AIModelDialogData,
private fb: FormBuilder,
private aiModelService: AiModelService,
private translate: TranslateService,
private dialog: MatDialog) {
super(store, router, dialogRef);
@ -89,18 +96,24 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
configuration: this.fb.group({
provider: [this.provider, []],
providerConfig: this.fb.group({
apiKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.apiKey : '', [Validators.required]],
personalAccessToken: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.personalAccessToken : '', [Validators.required]],
endpoint: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.endpoint : '', [Validators.required]],
apiKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.apiKey : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
personalAccessToken: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.personalAccessToken : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
endpoint: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.endpoint : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
serviceVersion: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.serviceVersion : ''],
projectId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.projectId : '', [Validators.required]],
location: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.location : '', [Validators.required]],
projectId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.projectId : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
location: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.location : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
serviceAccountKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.serviceAccountKey : '', [Validators.required]],
fileName: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.fileName : '', [Validators.required]],
region: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.region : '', [Validators.required]],
accessKeyId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.accessKeyId : '', [Validators.required]],
secretAccessKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.secretAccessKey : '', [Validators.required]],
baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : '', [Validators.required]],
region: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.region : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
accessKeyId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.accessKeyId : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
secretAccessKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.secretAccessKey : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
auth: this.fb.group({
type: [this.data.AIModel?.configuration?.providerConfig?.auth?.type ?? AuthenticationType.NONE],
username: [this.data.AIModel?.configuration?.providerConfig?.auth?.username ?? '', [Validators.required, Validators.pattern(/.*\S.*/)]],
password: [this.data.AIModel?.configuration?.providerConfig?.auth?.password ?? '', [Validators.required, Validators.pattern(/.*\S.*/)]],
token: [this.data.AIModel?.configuration?.providerConfig?.auth?.token ?? '', [Validators.required, Validators.pattern(/.*\S.*/)]]
})
}),
modelId: [this.data.AIModel ? this.data.AIModel.configuration?.modelId : '', [Validators.required]],
temperature: [this.data.AIModel ? this.data.AIModel.configuration?.temperature : null, [Validators.min(0)]],
@ -120,7 +133,23 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
this.aiModelForms.get('configuration.modelId').reset('');
this.aiModelForms.get('configuration.providerConfig').reset({});
this.updateValidation(provider);
})
});
this.aiModelForms.get('configuration.providerConfig.auth.type').valueChanges.pipe(
takeUntilDestroyed()
).subscribe((type: AuthenticationType) => {
this.getAuthenticationHint(type);
this.aiModelForms.get('configuration.providerConfig.auth.username').disable();
this.aiModelForms.get('configuration.providerConfig.auth.password').disable();
this.aiModelForms.get('configuration.providerConfig.auth.token').disable();
if (type === AuthenticationType.BASIC) {
this.aiModelForms.get('configuration.providerConfig.auth.username').enable();
this.aiModelForms.get('configuration.providerConfig.auth.password').enable();
}
if (type === AuthenticationType.TOKEN) {
this.aiModelForms.get('configuration.providerConfig.auth.token').enable();
}
});
this.updateValidation(this.provider);
}
@ -132,6 +161,16 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
);
}
private getAuthenticationHint(type: AuthenticationType) {
if (type === AuthenticationType.BASIC) {
this.authenticationHint = this.translate.instant('ai-models.authentication-basic-hint');
} else if (type === AuthenticationType.TOKEN) {
this.authenticationHint = this.translate.instant('ai-models.authentication-token-hint');
} else {
this.authenticationHint = null;
}
}
private updateValidation(provider: AiProvider) {
ProviderFieldsAllList.forEach(key => {
if (AiModelMap.get(provider).providerFieldsList.includes(key)) {
@ -139,7 +178,13 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
} else {
this.aiModelForms.get('configuration.providerConfig').get(key).disable();
}
})
});
if (provider === AiProvider.OLLAMA) {
this.aiModelForms.get('configuration.providerConfig.auth').enable();
this.aiModelForms.get('configuration.providerConfig.auth.type').patchValue(this.data.AIModel?.configuration?.providerConfig?.auth?.type ?? AuthenticationType.NONE, {emitEvent: true});
} else {
this.aiModelForms.get('configuration.providerConfig.auth').disable();
}
}
get providerFieldsList(): string[] {

11
ui-ngx/src/app/shared/models/ai-model.models.ts
View File

@ -35,6 +35,12 @@ export interface AiModel extends Omit<BaseData<AiModelId>, 'label'>, HasTenantId
accessKeyId?: string;
secretAccessKey?: string;
baseUrl?: string;
auth?: {
type: AuthenticationType;
username?: string;
password?: string;
token?: string
}
};
modelId: string;
temperature?: number;
@ -242,3 +248,8 @@ export interface CheckConnectivityResult {
status: string;
errorDetails: string;
}
export enum AuthenticationType {
NONE = 'NONE',
BASIC = 'BASIC',
TOKEN = 'TOKEN'
}

16
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -1169,7 +1169,21 @@
"check-connectivity-failed": "Test request failed",
"no-model-matching": "No models matching '{{entity}}' were found.",
"model-required": "Model is required.",
"no-model-text": "No models found."
"no-model-text": "No models found.",
"authentication": "Authentication",
"authentication-basic-hint": "Uses standard HTTP Basic authentication. The username and password will be combined, Base64-encoded, and sent in an \"Authorization\" header with each request to the Ollama server.",
"authentication-token-hint": "Uses Bearer token authentication. The provided token will be sent directly in an \"Authorization\" eader with each request to the Ollama server.",
"authentication-type": {
"none": "None",
"basic": "Basic",
"token": "Token"
},
"username": "Username",
"username-required": "Username is required.",
"password": "Password",
"password-required": "Password is required.",
"token": "Token",
"token-required": "Token is required."
},
"confirm-on-exit": {
"message": "You have unsaved changes. Are you sure you want to leave this page?",

Write Preview
Loading…
Cancel
Save