diff options
| author |   kaixiliu <liukaixi@chinamobile.com> | 2024-04-10 15:14:17 +0800 |
|---|---|---|
| committer | kaixiliu <liukaixi@chinamobile.com> | 2024-04-10 15:14:37 +0800 |
| commit | fdefcecfc6d983f5e7e6d3a60a13dcfadc7a7721 (patch) | |
| tree | fb636710ee5a67dc396e751fbdc419e41805ac25 /usecaseui-portal/src/app/views | |
| parent | fe3dc03b0422f7504acd650151fdcec521fdd4a6 (diff) | |
Add a large model page
Issue-ID: USECASEUI-834
Change-Id: Ie589e0eb9c263ed1ec92119470ea46f4a936041b
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views')
3 files changed, 147 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/robot/robot.component.html b/usecaseui-portal/src/app/views/robot/robot.component.html new file mode 100644 index 00000000..38363a8a --- /dev/null +++ b/usecaseui-portal/src/app/views/robot/robot.component.html @@ -0,0 +1,21 @@ +<body > +<div class="chat-container"> + <div *ngFor="let chat of chatHistory"> + <div class="question"> + <img src="assets/images/user.png"> + <span>{{ chat.question }}</span> + </div> + <br> + <div class="answer"><img src="assets/images/answer.png"> + <span>{{ chat.answer }}</span> + </div> + <br> + </div> +</div> +<div class="input-wrapper"> + <textarea nz-tooltip nz-input [nzAutosize]="{ minRows: 2, maxRows: 2 }" [(ngModel)]="question" class="text-input"></textarea> + <i class="icon" (click)="submitQuestion()"> + <img src="assets/images/send.png"> + </i> +</div> +</body>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/robot/robot.component.less b/usecaseui-portal/src/app/views/robot/robot.component.less new file mode 100644 index 00000000..be02efd8 --- /dev/null +++ b/usecaseui-portal/src/app/views/robot/robot.component.less @@ -0,0 +1,91 @@ +body { + background-color: #e6e6fa; + width: 100%; + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; +} +.chat-container { + margin: 20px 0; + padding: 0 100px; +} +.question { + display: flex; +} +.record-input{ + margin-left: 10px; + resize: none; +} +.question span { + background-color: white; + font-size: 16px; + margin-left: 10px; + padding: 10px; + border-radius: 8px; +} +.question img { + width: 28px; + height: 28px; +} + +.answer { + display: flex; +} +.answer span{ + background-color: white; + font-size: 16px; + margin-left: 10px; + padding: 10px; + border-radius: 8px; + white-space: pre-line; +} +.answer img { + width: 28px; + height: 28px; +} + +.chat-input { + margin-top: 30px; + padding-left: 1100px; +} + +.input-wrapper { + display: flex; + justify-content: space-around; + width: e("calc(100% - 240px)"); + margin: 0 100px; + margin-left: 138px; + padding: 10px; + background: #fff; + border-radius: 8px; + border: 2px solid #8a2be2; +} + +.text-input { + width: e("calc(100% - 50px)"); + background-color: white; + color: black; + text-align: left; + border: 0; + resize: none; + + &:focus { + border: 0 !important; + box-shadow: none; + } +} + +.icon { + width: 50px; + height: 50px; + cursor: pointer; + + >img { + width: 35px; + height: 31px; + margin-top: 15px; + margin-left: 15px; + } +} diff --git a/usecaseui-portal/src/app/views/robot/robot.component.ts b/usecaseui-portal/src/app/views/robot/robot.component.ts new file mode 100644 index 00000000..5304e876 --- /dev/null +++ b/usecaseui-portal/src/app/views/robot/robot.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { HttpClient } from '@angular/common/http'; + +@Component({ + selector: 'app-robot', + templateUrl: './robot.component.html', + styleUrls: ['./robot.component.less'] +}) +export class RobotComponent implements OnInit { + + question: string; + communicationMessage: string; + chatHistory: { question: string, answer: string }[] = []; + apiUrl = '/api/usecaseui-llm-adaptation/v1/getHelper'; + + constructor( + private http: HttpClient, + private message: NzMessageService + ) { } + ngOnInit() {} + + submitQuestion() { + this.http.post<any>(this.apiUrl,this.question,{ responseType: 'text' as 'json'}).subscribe((data) => { + if(data==''){ + this.chatHistory.push({ question: this.question, answer: 'network error' }); + }else{ + this.chatHistory.push({ question: this.question, answer: data }); + } + this.question = ''; + }, error => { + this.message.error('error'); + }); + } +} |