diff options
author | 2024-11-29 17:32:22 +0800 | |
---|---|---|
committer | 2024-11-29 17:32:27 +0800 | |
commit | e5de10348e38a4cac9f70da856ab7c6941bfc347 (patch) | |
tree | 4aa7bc3808b54653f4a8f068a1903094b38d574b /usecaseui-portal/src/app/views/maas/build | |
parent | 35d38716bfb367497f563bc4081109f6053c43af (diff) |
add maas knowledge base, Knowledge Assistant, application and update link
Issue-ID: USECASEUI-844
Change-Id: I1dc2b4bc12f364d017b24b2752acfef63e27ad94
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/build')
10 files changed, 695 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html new file mode 100644 index 00000000..71ef1b40 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html @@ -0,0 +1,19 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" > + <app-description-info [data]="data"></app-description-info> +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less new file mode 100644 index 00000000..139597f9 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less @@ -0,0 +1,2 @@ + + diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts new file mode 100644 index 00000000..f9e16435 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts @@ -0,0 +1,74 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +@Component({ + selector: 'app-application-detail', + templateUrl: './application-detail.component.html', + styleUrls: ['./application-detail.component.less'] +}) +export class ApplicationDetailComponent implements OnInit { + + constructor() { } + + @Input() showModel: boolean; + _applicationDetail; + data: Array<{ label: string, value: string }> = []; + @Input() + set applicationDetail(v: any) { + if (!v) { + return; + } + this.data = [ + { + label: 'Application Name', value: v.applicationName + }, + { + label: 'Application Description', value: v.applicationDescription + }, + { + label: 'Application Type', value: v.applicationType + }, + { + label: 'Operator', value: v.operatorName + }, + { + label: 'MaaS', value: v.maaSPlatformName + }, + { + label: 'Large Model', value: v.largeModelName + }, + { + label: 'Knowledge Base', value: v.knowledgeBaseName + }, + { + label: 'Prompt', value: v.prompt + }, + { + label: 'Temperature', value: v.temperature + }, + { + label: 'Top_p', value: v.top_p + }, + { + label: 'Opening Remarks', value: v.openingRemarks + } + ] + this._applicationDetail = v; + }; + get applicationDetail() { + return this._applicationDetail; + } + @Output() modalOpreation = new EventEmitter(); + + ngOnInit() {} + + handleCancel(): void { + this.showModel = false; + this.modalOpreation.emit(); + } + + handleOk(): void { + this.showModel = false; + this.modalOpreation.emit(); + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.html b/usecaseui-portal/src/app/views/maas/build/application-management.component.html new file mode 100644 index 00000000..64a0823d --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.html @@ -0,0 +1,61 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<div class="content"> + <p class="title"> + Application List + <button nz-button nzType="primary" class="add" (click)="inputIntentModuleShow()"> + {{"i18nTextDefine_Create" | translate}} </button> + </p> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + [nzShowPagination]="false" + > + <thead> + <tr> + <th nzWidth="9%" style="font-size: 20px;">No</th> + <th nzWidth="12%" style="font-size: 20px;">Application Name</th> + <th nzWidth="13%" style="font-size: 20px;">Application Description</th> + <th nzWidth="11%" style="font-size: 20px;">Application Type</th> + <th nzWidth="11%" style="font-size: 20px;">Operator</th> + <th nzWidth="11%" style="font-size: 20px;">MaaS</th> + <th nzWidth="11%" style="font-size: 20px;">Knowledge Base</th> + <th nzWidth="11%" style="font-size: 20px;">Large Model</th> + <th nzWidth="11%" style="font-size: 20px;">{{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let data of basicTable.data; let i = index"> + <td>{{i+1}}</td> + <td>{{data.applicationName}}</td> + <td>{{data.applicationDescription}}</td> + <td>{{data.applicationType}}</td> + <td>{{data.operatorName}}</td> + <td>{{data.maaSPlatformName}}</td> + <td>{{data.knowledgeBaseName}}</td> + <td>{{data.largeModelName}}</td> + <td> + <i class="anticon anticon-menu-fold" (click)="displayApplicationDetails(data)"></i> + <i class="anticon anticon-delete" (click)="deleteIntentList(data)"></i> + <i class="anticon anticon-link" (click)="navigateToDetail(data)"></i> + </td> + </tr> + </tbody> + </nz-table> +</div> +<app-input-application-management *ngIf="intentModuleShow" [showModel]="intentModuleShow" (modalOpreation)="inputIntentModuleClose($event)"></app-input-application-management> +<app-application-detail *ngIf="applicationShow" [showModel]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.less b/usecaseui-portal/src/app/views/maas/build/application-management.component.less new file mode 100644 index 00000000..8e882a27 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.less @@ -0,0 +1,127 @@ +:host{ + display: block; +} +.content { + padding: 40px; + min-height: 937px; + height: 100vh; + .title{ + font-size: 30px; + color: #3C4F8C; + margin-bottom: 0.5em; + .add{ + float: right; + margin-top: 7px; + } + } + .anticon-edit,.anticon-delete,.anticon-menu-fold{ + font-size: 18px; + margin-right: 10px; + cursor: pointer; + } +} + +.intent-management-modal{ + .add-expectation-container:after{ + content: ''; + display: block; + clear: both; + } + p{ + position: relative; + } + .ant-input{ + width: 300px; + } + .title{ + height: 32px; + line-height: 32px; + margin-bottom: 15px; + .add{ + float: right; + } + } + .required{ + color: #ff0000; + } + .intent-required{ + display: none; + } + .intent-error{ + position: absolute; + color: #ff0000; + top: 32px; + left: 110px; + } + .anticon-edit,.anticon-delete,.anticon-menu-fold{ + font-size: 18px; + margin-right: 10px; + cursor: pointer; + } +} +.intent-table{ + margin-bottom: 15px; + ::ng-deep ant-modal-body{ + height: 300 !important; + overflow-y: auto !important; + } +} +.target-div{ + float: left; + width: 100%; +} +.expectation-p{ + position: relative; + float: left; + width: 50%; + .left{ + float: left; + width: 40%; + height: 32px; + line-height: 32px; + text-align: right; + padding-right: 2%; + } + .ant-input{ + float: left; + width: 58%; + } + .ant-select{ + width: 58%; + } +} +.w50{ + width: 50%; +} +.condition-type{ + float: left; + width: 100%; + [nz-radio] { + display: block; + height: 32px; + line-height: 32px; + margin-left: 15%; + .ant-input{ + width: 60%; + } + } + .ant-radio-group{ + width: 50%; + } +} +.intent-condition-div{ + width: 100%; + float: left; +} +.condition-operator-div{ + margin-left: 50px; +} +.container{ + display: flex; + align-items: center; + width: 700px; +} +.container angular2-date-picker{ + margin-right: 10px; + margin-left: 10px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts new file mode 100644 index 00000000..bc684cc9 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts @@ -0,0 +1,90 @@ +import { Component, OnInit } from '@angular/core'; +import { IntentManagementService } from '../../../core/services/intentManagement.service' +import {NzMessageService} from "ng-zorro-antd"; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-application-management', + templateUrl: './application-management.component.html', + styleUrls: ['./application-management.component.less'] +}) +export class ApplicationManagementComponent implements OnInit { + + constructor( + private myhttp: IntentManagementService, + private message: NzMessageService, + private router: Router + ) { } + + ngOnInit() { + this.getAllApplicationData() + } + + listOfData: any[] = []; + + intentModuleShow: boolean = false; + applicationShow: boolean = false; + editIntentTableList: Object={}; + currentIndex: number=-1; + getAllApplicationData():void{ + this.myhttp.getAllApplication() + .subscribe( + (data) => { + this.listOfData=data.result_body + }, + (err) => { + this.message.error('Failed to obtain application data'); + } + ) + } + + inputIntentModuleShow(): void { + this.intentModuleShow = true; + } + inputIntentModuleClose($event: any): void { + this.intentModuleShow = false; + + if ($event.cancel) { + return; + } + this.getAllApplicationData() + } + editIntentList(): void { + this.intentModuleShow = true + } + deleteIntentList(data): void{ + this.myhttp.deleteApplicationById(data.applicationId).subscribe((data) => { + this.getAllApplicationData() + if(data.result_header.result_code===200){ + this.message.success('Deleted successfully'); + }else{ + this.message.error(data.result_header.result_message); + } + }, (err) => { + this.message.error('Deletion failed'); + }); + } + + navigateToDetail(data):void { + this.router.navigate(['maas/use'], { queryParams: { id: data.applicationId, name: data.applicationName } }); + } + + applicationDetailClose(): void { + this.applicationShow = false; + } + + applicationDetail: Object={}; + displayApplicationDetails(data): void { + this.applicationShow = true; + this.myhttp.getApplicationById(data.applicationId) + .subscribe( + (data) => { + this.applicationDetail=data.result_body; + console.log(data.result_body); + }, + (err) => { + this.message.error('Failed to obtain knowledge base data'); + } + ) + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application.type.ts b/usecaseui-portal/src/app/views/maas/build/application.type.ts new file mode 100644 index 00000000..0b0693b4 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/application.type.ts @@ -0,0 +1,19 @@ +export type application = { + "applicationId": string, + "applicationName": string, + "applicationDescription": string, + "applicationType": string, + "operatorId": string, + "operatorName": string, + "maasPlatformId": string, + "maasPlatformName": string, + "knowledgeBaseName": string, + "knowledgeBaseId": string, + "largeModelName": string, + "largeModelId": string, + "prompt": string, + "temperature": number, + "top_p": number, + "openingRemarks": string +} + diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html new file mode 100644 index 00000000..286dc1dc --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html @@ -0,0 +1,124 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> + <div> + <div class="form-item"> + <label class="item-label"> Application Name:</label> + <div class="item"> + <input nz-input [(ngModel)]="applicationName"> + </div> + </div> + <div class="form-item"> + <label class="item-label"> Application Description:</label> + <div class="item"> + <textarea nz-input [(ngModel)]="applicationDescription"></textarea> + </div> + </div> + <div class="form-item"> + <label class="item-label"> Application Type:</label> + <div class="item"> + <nz-select class="nz-select-container" [(ngModel)]="applicationType"> + <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option> + </nz-select> + </div> + </div> + <div class="form-item"> + <label class="item-label"> Operator Name:</label> + <div class="item"> + <nz-select class="nz-select-container" nzPlaceHolder="Select Operator" + [(ngModel)]="selectedOperator" (ngModelChange)="handleOperatorChange($event)"> + <nz-option *ngFor="let operator of operators" [nzValue]="operator" + [nzLabel]="operator.operatorName"></nz-option> + </nz-select> + </div> + + </div> + <div class="form-item"> + <label class="item-label"> MaaS Platform Name:</label> + <div class="item"> + <nz-select class="nz-select-container" nzPlaceHolder="Select MaaS" + [(ngModel)]="selectedPlatform" (ngModelChange)="handleMaasChange($event)"> + <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform" + [nzLabel]="platform.maaSPlatformName"></nz-option> + </nz-select> + </div> + + </div> + <div class="form-item"> + <label class="item-label"> Model:</label> + <div class="item"> + <nz-select class="nz-select-container" nzPlaceHolder="Select Model" + [(ngModel)]="selectedModel"> + <nz-option *ngFor="let model of filteredModels" [nzValue]="model" + [nzLabel]="model.modelName"></nz-option> + </nz-select> + </div> + + </div> + <div class="form-item"> + <label class="item-label"> KnowLedge Base:</label> + <div class="item"> + <nz-select class="nz-select-container" nzPlaceHolder="Select Knowledge Base" + [(ngModel)]="selectKnowledgeBase"> + <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase" + [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option> + </nz-select> + </div> + </div> + <div class="form-item"> + <label class="item-label"> Prompt:</label> + <div class="item"> + <textarea nz-input [(ngModel)]=prompt></textarea> + </div> + </div> + <div class="form-item"> + <label class="item-label"> Opening Remarks:</label> + <div class="item"> + <textarea nz-input [(ngModel)]=openingRemarks></textarea> + </div> + </div> + <div class="form-item"> + <label class="item-label">temperature:</label> + <div class="item"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="temperature"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" + [(ngModel)]="temperature"></nz-input-number> + </div> + </nz-row> + </div> + </div> + <div class="form-item"> + <label class="item-label">top_p:</label> + <div class="item"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="top_p"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" + [(ngModel)]="top_p"></nz-input-number> + </div> + </nz-row> + </div> + </div> + </div> +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less new file mode 100644 index 00000000..e8e3fca4 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less @@ -0,0 +1,44 @@ +// .ant-select { +// width: 200px; +// } + +// .ant-input { +// width: 300px; +// } + +.input-wrapper { + display: flex; + align-items: center; + gap: 50px; +} + +.item-label { + display: inline-block; + width: 30%; + margin-right: 8px; + line-height: 36px; +} + +.item { + display: flex; + width: 70%; +} + +.form-item { + display: flex; + width: 100%; + margin-bottom: 16px; +} + +.slider-input-container { + width: 100%; +} + +.nz-input-number-container { + margin-left: 16px; + width: 120px; +} + +.nz-select-container { + width: 300px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts new file mode 100644 index 00000000..71688d4e --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts @@ -0,0 +1,135 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Util } from '../../../../shared/utils/utils'; +import {NzMessageService} from "ng-zorro-antd"; +import { HttpClient,HttpHeaders } from '@angular/common/http'; + +@Component({ + selector: 'app-input-application-management', + templateUrl: './input-application-management.component.html', + styleUrls: ['./input-application-management.component.less'] +}) +export class InputApplicationManagementComponent implements OnInit { + title = 'Add Application'; + constructor( + private Util: Util, + private message: NzMessageService, + private http: HttpClient + ) { } + + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + + maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll'; + knowBaseUrl = "/api/usecaseui-llm-adaptation/v1/knowledgeBase/queryByMaaSId/"; + createApplicationUrl = "/api/usecaseui-llm-adaptation/v1/application/create"; + + applicationName = ""; + applicationDescription = ""; + applicationType = "Knowledge Assistant"; + operators: any[] = []; + selectedOperator: any = null; + filteredPlatforms: any[] = []; + selectedPlatform: any = null; + filteredModels: any[] = []; + selectedModel: any = null; + knowledgeBases: any[] =[]; + selectKnowledgeBase: any = null; + modelDefaultValue = ""; + temperature = 3; + top_p = 3; + prompt =""; + openingRemarks = ""; + ngOnInit() { + this.fetchOperators(); + } + + fetchOperators(): void { + this.http.get<any>(this.maasUrl).subscribe( + (response) => { + this.operators = response.result_body; + }, + () => { + this.message.error('Failed to fetch operators'); + } + ); + } + + handleOperatorChange(value: any): void { + if (value) { + this.filteredPlatforms = value.maaSPlatformList; + } else { + this.filteredPlatforms = []; + } + this.selectedPlatform = null; + this.selectedModel = null; + this.selectKnowledgeBase = null; + } + + handleMaasChange(value: any): void { + if (value) { + this.filteredModels = value.modelList; + console.log(this.filteredModels); + this.fetchKnowledgeBase(value); + } else { + this.filteredModels = []; + } + this.selectedModel = null; + this.selectKnowledgeBase = null; + } + + fetchKnowledgeBase(value): void { + this.http.get<any>(this.knowBaseUrl+value.maaSPlatformId).subscribe( + (response) => { + this.knowledgeBases = response.result_body; + }, + (error) => { + this.message.error('Failed to fetch knowledge base'); + } + ); + } + + handleCancel(): void { + this.showModel = false; + this.modalOpreation.emit({ "cancel": true }); + } + handleOk(): void { + this.createApplication(); + } + + createApplication(){ + const requestBody = { + applicationName: this.applicationName, + applicationDescription: this.applicationDescription, + applicationType: this.applicationType, + operatorName: this.selectedOperator.operatorName, + operatorId: this.selectedOperator.operatorId, + maaSPlatformId: this.selectedPlatform.maaSPlatformId, + maaSPlatformName: this.selectedPlatform.maaSPlatformName, + knowledgeBaseId: this.selectKnowledgeBase.knowledgeBaseId, + knowledgeBaseName: this.selectKnowledgeBase.knowledgeBaseName, + largeModelId: this.selectedModel.modelId, + largeModelName: this.selectedModel.modelName, + prompt: this.prompt, + temperature: this.temperature, + top_p: this.top_p, + openingRemarks: this.openingRemarks + }; + console.log(requestBody); + this.http.post<any>(this.createApplicationUrl, requestBody).subscribe( + (response) => { + this.showModel = false; + this.modalOpreation.emit({ "cancel": false }); + const resultHeader = {}; + if(response.result_header.result_code===200){ + this.message.success('Created successfully'); + }else{ + this.message.error(response.result_header.result_message); + } + }, + (err) => { + this.showModel = false; + this.message.error('Created failed'); + } + ) + } +}
\ No newline at end of file |