diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/build')
11 files changed, 413 insertions, 371 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 index 71ef1b40..0827f477 100644 --- 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 @@ -13,7 +13,38 @@ See the License for the specific language governing permissions and limitations under the License. --> -<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" +<nz-modal [(nzVisible)]="showModal" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" > - <app-description-info [data]="data"></app-description-info> + <app-descriptions> + <app-descriptions-item nzTitle="Application Name">{{applicationDetail.applicationName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Application Type">{{applicationDetail.applicationType}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Operator">{{applicationDetail.operatorName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="MaaS"> + {{applicationDetail.maaSPlatformName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Large Model"> + {{applicationDetail.largeModelName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Knowledge Base"> + {{applicationDetail.knowledgeBaseName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Prompt"> + {{applicationDetail.prompt}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Temperature"> + {{applicationDetail.temperature}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Top_p"> + {{applicationDetail.top_p}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Opening Remarks"> + {{applicationDetail.openingRemarks}} + </app-descriptions-item> + <app-descriptions-item [nzSpan]="3" + nzTitle="Application Description">{{applicationDetail.applicationDescription}} + </app-descriptions-item> +</app-descriptions> </nz-modal>
\ No newline at end of file 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 index f9e16435..653ce6a9 100644 --- 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 @@ -1,4 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Application } from '../application.type'; @Component({ selector: 'app-application-detail', @@ -6,68 +7,20 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; 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; - } + @Input() showModal: boolean; + @Input() applicationDetail: Application; @Output() modalOpreation = new EventEmitter(); + constructor() { } ngOnInit() {} handleCancel(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit(); } handleOk(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit(); } 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 index 64a0823d..6496270a 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-management.component.html +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.html @@ -17,11 +17,11 @@ <div class="content"> <p class="title"> Application List - <button nz-button nzType="primary" class="add" (click)="inputIntentModuleShow()"> + <button nz-button nzType="primary" class="add" (click)="create()"> {{"i18nTextDefine_Create" | translate}} </button> </p> <nz-table - #basicTable [nzData]="listOfData" + #basicTable [nzData]="data" [nzFrontPagination]="false" [nzShowPagination]="false" > @@ -50,12 +50,12 @@ <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-delete" (click)="delete(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 +<app-create-application-management *ngIf="createModalShow" [showModal]="createModalShow" (modalOpreation)="createModalClose($event)"></app-create-application-management> +<app-application-detail *ngIf="applicationShow" [showModal]="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 index 8e882a27..beefd0f9 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-management.component.less +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.less @@ -19,6 +19,9 @@ margin-right: 10px; cursor: pointer; } + .anticon { + user-select: none; + } } .intent-management-modal{ 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 index bc684cc9..61471de4 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { IntentManagementService } from '../../../core/services/intentManagement.service' -import {NzMessageService} from "ng-zorro-antd"; +import { NzMessageService } from "ng-zorro-antd"; import { Router } from '@angular/router'; +import { MaasService } from '@src/app/core/services/maas.service'; +import { Application } from './application.type'; @Component({ selector: 'app-application-management', @@ -9,82 +10,76 @@ import { Router } from '@angular/router'; styleUrls: ['./application-management.component.less'] }) export class ApplicationManagementComponent implements OnInit { + data: Application[] = []; + createModalShow = false; + applicationShow = false; + applicationDetail: Object = {}; constructor( - private myhttp: IntentManagementService, + private myhttp: MaasService, 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'); - } - ) + getAllApplicationData(): void { + this.myhttp.getAllApplication() + .subscribe( + (data) => { + this.data = data.result_body + }, + () => { + this.message.error('Failed to obtain application data'); + } + ) } - inputIntentModuleShow(): void { - this.intentModuleShow = true; + create(): void { + this.createModalShow = true; } - inputIntentModuleClose($event: any): void { - this.intentModuleShow = false; + createModalClose($event: any): void { + this.createModalShow = false; if ($event.cancel) { - return; + return; } this.getAllApplicationData() } - editIntentList(): void { - this.intentModuleShow = true - } - deleteIntentList(data): void{ + + delete(data): void { this.myhttp.deleteApplicationById(data.applicationId).subscribe((data) => { this.getAllApplicationData() - if(data.result_header.result_code===200){ + if (data.result_header.result_code === 200) { this.message.success('Deleted successfully'); - }else{ + } else { this.message.error(data.result_header.result_message); } - }, (err) => { + }, () => { this.message.error('Deletion failed'); - }); + }); } - navigateToDetail(data):void { + navigateToDetail(data): void { this.router.navigate(['maas/use'], { queryParams: { id: data.applicationId, name: data.applicationName } }); } - applicationDetailClose(): void { + 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'); - } - ) + displayApplicationDetails(data): void { + this.applicationShow = true; + this.myhttp.getApplicationById(data.applicationId) + .subscribe( + (data) => { + this.applicationDetail = data.result_body; + }, + () => { + 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 index 0b0693b4..e3224e7c 100644 --- a/usecaseui-portal/src/app/views/maas/build/application.type.ts +++ b/usecaseui-portal/src/app/views/maas/build/application.type.ts @@ -1,12 +1,12 @@ -export type application = { - "applicationId": string, +export type Application = { + "applicationId"?: string, "applicationName": string, "applicationDescription": string, "applicationType": string, "operatorId": string, "operatorName": string, - "maasPlatformId": string, - "maasPlatformName": string, + "maaSPlatformId": string, + "maaSPlatformName": string, "knowledgeBaseName": string, "knowledgeBaseId": string, "largeModelName": string, diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html new file mode 100644 index 00000000..c7c9b216 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html @@ -0,0 +1,149 @@ +<!-- + 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)]="showModal" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> + <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Application Name</nz-form-label> + <nz-form-control [nzSpan]="12"> + <input type="text" nz-input formControlName="name"> + <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors"> + Please input application name! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="description">Application Description</nz-form-label> + <nz-form-control [nzSpan]="12"> + <textarea rows="2" nz-input formControlName="description"></textarea> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="applicationType" nzRequired>Application Type</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="applicationType" + nzPlaceHolder="Select Application Type" formControlName="applicationType"> + <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('applicationType').dirty && validateForm.get('applicationType').errors"> + Please select application type! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectedOperator" nzRequired>Operator Name</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="selectedOperator" + nzPlaceHolder="Select Operator" formControlName="selectedOperator" + (ngModelChange)="handleOperatorChange($event)"> + <nz-option *ngFor="let operator of operators" [nzValue]="operator" + [nzLabel]="operator.operatorName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectedOperator').dirty && validateForm.get('selectedOperator').errors"> + Please select operator! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectedPlatform" nzRequired>MaaS Platform Name</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="selectedPlatform" + nzPlaceHolder="Select Platform" formControlName="selectedPlatform" + (ngModelChange)="handleMaasChange($event)"> + <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform" + [nzLabel]="platform.maaSPlatformName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectedPlatform').dirty && validateForm.get('selectedPlatform').errors"> + Please select maas platform! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectedModel" nzRequired>Model</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="selectedModel" + nzPlaceHolder="Select Model" formControlName="selectedModel"> + <nz-option *ngFor="let model of filteredModels" [nzValue]="model" [nzLabel]="model.modelName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectedModel').dirty && validateForm.get('selectedModel').errors"> + Please select model! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectKnowledgeBase" nzRequired>KnowLedge Base</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="selectKnowledgeBase" + nzPlaceHolder="Select KnowLedge Base" formControlName="selectKnowledgeBase"> + <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase" + [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectKnowledgeBase').dirty && validateForm.get('selectKnowledgeBase').errors"> + Please select knowLedge base! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="prompt">Prompt</nz-form-label> + <nz-form-control [nzSpan]="12"> + <textarea rows="2" nz-input formControlName="prompt"></textarea> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="openingRemarks">Opening Remarks</nz-form-label> + <nz-form-control [nzSpan]="12"> + <textarea rows="2" nz-input formControlName="openingRemarks"></textarea> + </nz-form-control> + </nz-form-item> + + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="temperature" nzRequired>temperature</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" (nzOnAfterChange)="handleTemperatureSliderChange($event)" formControlName="temperatureSlider" [nzDefaultValue]="temperature"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" + formControlName="temperature" + (ngModelChange)="handleTemperatureInputChange($event)" + ></nz-input-number> + </div> + </nz-row> + <nz-form-explain *ngIf="validateForm.get('temperature').dirty && validateForm.get('temperature').errors"> + Please input temperature! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="top_p" nzRequired>top_p</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" (nzOnAfterChange)="toppSliderChange($event)" [nzStep]="1" formControlName="top_pSlider" [nzDefaultValue]="top_p"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" formControlName="top_p" (ngModelChange)="toppInputChange($event)"></nz-input-number> + </div> + </nz-row> + <nz-form-explain *ngIf="validateForm.get('top_p').dirty && validateForm.get('top_p').errors"> + Please input top_p! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + </form> +</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/create-application-management/create-application-management.component.less index e8e3fca4..e8e3fca4 100644 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts new file mode 100644 index 00000000..1bbef527 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts @@ -0,0 +1,170 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from "ng-zorro-antd"; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MaasService } from '@src/app/core/services/maas.service'; + +@Component({ + selector: 'app-create-application-management', + templateUrl: './create-application-management.component.html', + styleUrls: ['./create-application-management.component.less'] +}) +export class CreateApplicationManagementComponent implements OnInit { + title = 'Add Application'; + validateForm: FormGroup; + @Input() showModal: boolean; + @Output() modalOpreation = new EventEmitter(); + operators: any[] = []; + filteredPlatforms: any[] = []; + filteredModels: any[] = []; + knowledgeBases: any[] = []; + temperature = 3; + top_p = 3; + + constructor( + private myhttp: MaasService, + private message: NzMessageService, + private fb: FormBuilder + ) { } + + ngOnInit() { + this.fetchOperators(); + this.initFormData(); + } + + initFormData() { + this.validateForm = this.fb.group({ + name: [null, [Validators.required]], + description: [null], + applicationType: [null, [Validators.required]], + selectedOperator: [null, [Validators.required]], + selectedPlatform: [null, [Validators.required]], + selectedModel: [null, [Validators.required]], + selectKnowledgeBase: [null, [Validators.required]], + prompt: [null], + openingRemarks: [null], + temperature: [3, [Validators.required]], + temperatureSlider: [3], + top_p: [3, [Validators.required]], + top_pSlider: [3] + }); + } + + fetchOperators(): void { + this.myhttp.getOperators().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.validateForm.get('selectedPlatform').setValue(null); + this.validateForm.get('selectedModel').setValue(null); + this.validateForm.get('selectKnowledgeBase').setValue(null); + } + + handleMaasChange(value: any): void { + if (value) { + this.filteredModels = value.modelList; + this.fetchKnowledgeBase(value); + } else { + this.filteredModels = []; + } + this.validateForm.get('selectedModel').setValue(null); + this.validateForm.get('selectKnowledgeBase').setValue(null); + } + + fetchKnowledgeBase(value): void { + this.myhttp.fetchKnowledgeBaseByMaasId(value.maaSPlatformId).subscribe( + (response) => { + this.knowledgeBases = response.result_body; + }, + () => { + this.message.error('Failed to fetch knowledge base'); + } + ); + } + + handleCancel(): void { + this.showModal = false; + this.modalOpreation.emit({ "cancel": true }); + } + + handleOk() { + this.submitForm(); + if (this.validateForm.invalid) { + this.showModal = true; + return; + } + this.myhttp.createApplication(this.constructBody()).subscribe( + (response) => { + this.showModal = false; + this.modalOpreation.emit({ "cancel": false }); + if (response.result_header.result_code === 200) { + this.message.success('Created successfully'); + } else { + this.message.error(response.result_header.result_message); + } + }, + () => { + this.showModal = false; + this.message.error('Created failed'); + } + ) + } + constructBody() { + const requestBody = { + applicationName: this.validateForm.value.name, + applicationDescription: this.validateForm.value.description, + applicationType: this.validateForm.value.applicationType, + operatorName: this.validateForm.value.selectedOperator.operatorName, + operatorId: this.validateForm.value.selectedOperator.operatorId, + maaSPlatformId: this.validateForm.value.selectedPlatform.maaSPlatformId, + maaSPlatformName: this.validateForm.value.selectedPlatform.maaSPlatformName, + knowledgeBaseId: this.validateForm.value.selectKnowledgeBase.knowledgeBaseId, + knowledgeBaseName: this.validateForm.value.selectKnowledgeBase.knowledgeBaseName, + largeModelId: this.validateForm.value.selectedModel.modelId, + largeModelName: this.validateForm.value.selectedModel.modelName, + prompt: this.validateForm.value.prompt, + temperature: this.validateForm.value.temperature, + top_p: this.validateForm.value.top_p, + openingRemarks: this.validateForm.value.openingRemarks + } + return requestBody; +} + + submitForm(): void { + for (let i in this.validateForm.controls) { + this.validateForm.controls[i].markAsDirty(); + this.validateForm.controls[i].updateValueAndValidity(); + } + } + + handleTemperatureSliderChange(event: number): void { + this.validateForm.controls.temperature.setValue(event); + } + + handleTemperatureInputChange(event: number): void { + this.validateForm.controls.temperatureSlider.setValue(event); + } + + handletoppChange(event: number): void { + this.validateForm.controls.top_p.setValue(event); + } + + toppSliderChange(event: number): void { + this.validateForm.controls.top_p.setValue(event); + } + + toppInputChange(event: number): void { + this.validateForm.controls.top_pSlider.setValue(event); + } +}
\ No newline at end of file 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 deleted file mode 100644 index 286dc1dc..00000000 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html +++ /dev/null @@ -1,124 +0,0 @@ -<!-- - 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.ts b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts deleted file mode 100644 index 71688d4e..00000000 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts +++ /dev/null @@ -1,135 +0,0 @@ -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 |