feat(novel-app): 添加智能体创建功能

novel-app/src/app/agent-create/agent-create.page.html

@@ -0,0 +1,52 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="backhome()" color="primary" >{{back}}</ion-button>
+    </ion-buttons>
+    <ion-title>创建智能体</ion-title>
+    <!-- <ion-progress-bar type="indeterminate"></ion-progress-bar> -->
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content [fullscreen]="true">
+  <div style="text-align: center; margin-top: 20px">
+    <img height="80px" [src]="currentUser.get('avatar')" alt="" style="border-radius: 50%;">
+    <p>智能体创建</p>
+  </div>
+  <div>
+    <ion-card>
+      <ion-list>
+        <ion-item>
+          <p style="width: 60px; font-weight: bolder;">名称：</p>
+          <!-- <ion-input label="输入你想了解的科普信息" placeholder="Enter text"></ion-input> -->
+          <ion-input  [value]="name" placeholder="输入名称" (ionInput)="nameInput($event)"></ion-input>
+        </ion-item>
+        <ion-item>
+          <p style="width: 60px; font-weight: bolder;">年龄：</p>
+          <ion-input  [value]="age" placeholder="输入年龄" (ionInput)="ageInput($event)"></ion-input>
+        </ion-item>
+        <ion-item>
+          <p style="width: 60px;  font-weight: bolder;">性别：</p>
+          <ion-select
+            aria-label="性别"
+            placeholder="选择性别"
+            (ionChange)="genderChange($event)"
+            (ionCancel)="genderCancel()"
+            (ionDismiss)="genderDismiss()"
+          >
+            <ion-select-option value="男">男</ion-select-option>
+            <ion-select-option value="女">女</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item style="height: auto;">
+            <p style="width:120px;font-weight: bolder;">设定描述：</p>
+            <ion-textarea [value]="desc" placeholder="示例：" (ionInput)="descInput($event)" autoGrow="true"></ion-textarea> 
+        </ion-item>
+      </ion-list>
+    </ion-card>
+  </div>
+  <ion-button (click)="createAgent()" expand="block" color="primary" >创建智能体</ion-button>
+  
+
+</ion-content>

novel-app/src/app/agent-create/agent-create.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AgentCreatePage } from './agent-create.page';
+
+describe('AgentCreatePage', () => {
+  let component: AgentCreatePage;
+  let fixture: ComponentFixture<AgentCreatePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AgentCreatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

novel-app/src/app/agent-create/agent-create.page.ts

@@ -0,0 +1,125 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-agent-create',
+  templateUrl: './agent-create.page.html',
+  styleUrls: ['./agent-create.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
+    IonIcon,IonCard,IonCardHeader,IonCardTitle,
+    IonCardSubtitle,IonCardContent, IonThumbnail, IonItem,IonList,CommonModule,IonLabel,
+    IonAvatar, IonSelect, IonSelectOption,IonButtons,IonProgressBar,
+    IonText, IonCardHeader, IonCardSubtitle,]
+})
+export class AgentCreatePage implements OnInit {
+
+  currentUser: CloudUser;
+  constructor(
+    private modalCtrl:ModalController,
+    private router:Router,
+    private alertController: AlertController
+  ) {
+   this.currentUser = new CloudUser();
+  // 示例任务，自己生成图片后请存储新的ID 
+  
+
+  }
+ images:Array<string> = []
+  back:string = "<";
+
+  backhome() {
+    this.router.navigate(['/tab1']);
+  }
+  ngOnInit() {
+
+  }
+  name: string = ''
+  nameInput(e:any) {
+    this.name = e.detail.value;
+    console.log(this.name);
+  }
+  age: number = 25
+  ageInput(e:any) {
+    this.age = e.detail.value;
+    console.log(this.age);
+  }
+  gender: string = 'male'
+  genderChange(e:any) {
+    console.log('ionChange fired with value: ' + e.detail.value);
+    this.gender = e.detail.value;
+  }
+  genderCancel(){
+
+  }
+  genderDismiss(){
+
+  }
+  // 描述
+  desc: string = ''
+  descInput(e:any) {
+    this.desc = e.detail.value;
+    console.log(this.desc);
+  }
+  
+  PictureDescResult:string = `` // 画面描述结果
+
+  // 创建医生
+  async createAgent() {
+  
+   
+    localStorage.setItem("company","E4KpGvTEto")
+
+    let consult = new CloudObject("NovelCharacter")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+    let ACL:any = {
+      "*":{read:true,write:true}
+    }
+    if(this.currentUser?.id){
+      ACL[this.currentUser?.id] = {read:true,write:true}
+    }
+
+    
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+       
+      ])
+ 
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        this.PictureDescResult = message.content
+        if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
+              // 图片生成
+            let PicturePrompt = ``
+            let options:DalleOptions = {prompt:PicturePrompt}
+                  consult.set({
+                    name:`${this.name}`,
+                    age:`${this.age}`,
+                    gender:`${this.gender}`,
+                    desc:`${this.desc}`,
+                    user:this.currentUser.toPointer(),
+                    ACL:ACL,
+                  })
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+ 
+  
+  }
+  
+
+
+
+
+
+}

novel-app/src/app/app.routes.ts

@@ -51,11 +51,20 @@ export const routes: Routes = [
   {
     path: 'tab1',
     loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)
+  },
+  {
+    path: 'agent-create',
+    loadComponent: () => import('./agent-create/agent-create.page').then( m => m.AgentCreatePage)
+  },
+  {
+    path: 'atest',
+    loadComponent: () => import('./atest/atest.page').then( m => m.AtestPage)
   }
 
 
 
 
+
 ];
 
 

novel-app/src/app/atest/atest.page.html

@@ -0,0 +1,31 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="backhome()" color="primary" >{{back}}</ion-button>
+    </ion-buttons>
+    <ion-title>创建智能体</ion-title>
+    <!-- <ion-progress-bar type="indeterminate"></ion-progress-bar> -->
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content [fullscreen]="true">
+  <div style="text-align: center; margin-top: 20px">
+    <img height="80px" [src]="currentUser.get('avatar')" alt="" style="border-radius: 50%;">
+    <p>智能体创建</p>
+  </div>
+  <div>
+    <ion-card>
+      <ion-list>
+        <ion-item>
+          <p style="width: 60px; font-weight: bolder;">名称：</p>
+          <!-- <ion-input label="输入你想了解的科普信息" placeholder="Enter text"></ion-input> -->
+          <ion-input  [value]="name" placeholder="输入名称" (ionInput)="nameInput($event)"></ion-input>
+        </ion-item>  
+      </ion-list>
+    </ion-card>
+  </div>
+  <ion-button (click)="createAgent()" expand="block" color="primary" >创建智能体</ion-button>
+  
+
+</ion-content>

novel-app/src/app/atest/atest.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtestPage } from './atest.page';
+
+describe('AtestPage', () => {
+  let component: AtestPage;
+  let fixture: ComponentFixture<AtestPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AtestPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

novel-app/src/app/atest/atest.page.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-atest',
+  templateUrl: './atest.page.html',
+  styleUrls: ['./atest.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
+    IonIcon,IonCard,IonCardHeader,IonCardTitle,
+    IonCardSubtitle,IonCardContent, IonThumbnail, IonItem,IonList,CommonModule,IonLabel,
+    IonAvatar, IonSelect, IonSelectOption,IonButtons,IonProgressBar,
+    IonText, IonCardHeader, IonCardSubtitle,]
+})
+export class AtestPage implements OnInit {
+
+  currentUser: CloudUser;
+  constructor(
+    private modalCtrl:ModalController,
+    private router:Router,
+    private alertController: AlertController
+  ) {
+   this.currentUser = new CloudUser();
+  // 示例任务，自己生成图片后请存储新的ID 
+  this.imagineWork = new ImagineWork("");
+  this.imagineWork.fetchTask().then(work=>{
+    if(work){
+      this.imagineWork.id = work.id
+    }
+    this.images = this.imagineWork?.images || '../../assets/image/头像示例.png';
+  })
+  this.loadAgentData()
+  }
+ images:Array<string> = []
+  back:string = "<";
+
+  backhome() {
+    this.router.navigate(['/tab1']);
+  }
+  ngOnInit() {
+
+  }
+  name: string = ''
+  nameInput(e:any) {
+    this.name = e.detail.value;
+    console.log(this.name);
+  }
+  age: number = 25
+  ageInput(e:any) {
+    this.age = e.detail.value;
+    console.log(this.age);
+  }
+  gender: string = 'male'
+  genderChange(e:any) {
+    console.log('ionChange fired with value: ' + e.detail.value);
+    this.gender = e.detail.value;
+  }
+  genderCancel(){
+
+  }
+  genderDismiss(){
+
+  }
+  // 描述
+  desc: string = ''
+  descInput(e:any) {
+    this.desc = e.detail.value;
+    console.log(this.desc);
+  }
+  imagineWork:ImagineWork
+  PictureDescResult:string = `` // 画面描述结果
+
+  // 创建医生
+  async createAgent() {
+    const alert = await this.alertController.create({
+      header: '温馨提示',
+      subHeader: 'Tips',
+      message: '把信息填写完整哦~',
+      buttons: ['好的'],
+    });
+    if (this.name == '' || this.age == 0 || this.gender == '' || this.desc == '') {
+      //await alert.present();
+      return;
+    } 
+    localStorage.setItem("company","E4KpGvTEto")
+
+    let consult = new CloudObject("NovelCharacter")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+    let ACL:any = {
+      "*":{read:true,write:true}
+    }
+    if(this.currentUser?.id){
+      ACL[this.currentUser?.id] = {read:true,write:true}
+    }
+
+ 
+      
+ 
+ 
+  
+  }
+  
+  agentList: Array<CloudObject> = [];
+  async loadAgentData() {
+    let query = new CloudQuery("test")
+    this.agentList = await query.find()
+    console.log(this.agentList);
+  }
+
+
+
+}

novel-app/src/app/tab1/tab1.page.html

@@ -23,4 +23,9 @@
     </ion-card-content>
   </ion-card>
 </div>
+<ion-fab vertical="bottom" horizontal="center" slot="fixed">
+  <ion-fab-button (click)="navigateToPage()">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
 </ion-content>

novel-app/src/app/tab1/tab1.page.scss

@@ -133,4 +133,10 @@ ion-thumbnail {
         color: #333;
       }
     }
+  }
+  ion-fab {
+    position: fixed;
+    bottom: 16px; /* 距离底部的距离 */
+    left: 50%;
+    transform: translateX(-50%); /* 水平居中 */
   }

novel-app/src/app/tab1/tab1.page.ts

@@ -1,6 +1,6 @@
 import { FmodeChat, FmodeChatMessage, openChatPanelModal, ChatPanelOptions } from 'fmode-ng';
 import { Component } from '@angular/core';
-import { IonCardHeader, IonHeader, IonToolbar, IonTitle, IonContent, IonTabButton, IonSearchbar, IonLabel, IonItem, IonList, NavController, IonCard, IonCardTitle, IonCardSubtitle, IonCardContent, IonThumbnail } from '@ionic/angular/standalone';
+import { IonCardHeader, IonHeader, IonToolbar, IonTitle, IonContent, IonTabButton, IonSearchbar, IonLabel, IonItem, IonList, NavController, IonCard, IonCardTitle, IonCardSubtitle, IonCardContent, IonThumbnail, IonFab, IonFabButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonButton } from '@ionic/angular/standalone';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -9,9 +9,10 @@ import { CommonModule } from '@angular/common';
 import { ModalController } from '@ionic/angular/standalone';
 import { HttpClient } from '@angular/common/http';
 import { addIcons } from 'ionicons';
+import { add } from 'ionicons/icons';
 import { documentText, chatbubbles, person, calendar, newspaper,
    medkit,clipboard, podium, videocam, people } from 'ionicons/icons';
-import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { CloudObject, CloudQuery } from '../lib/ncloud';
 addIcons({ documentText, chatbubbles, person, calendar, newspaper,
    medkit,clipboard, podium, videocam, people
  });
@@ -23,17 +24,25 @@ addIcons({ documentText, chatbubbles, person, calendar, newspaper,
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonTabButton, IonButton,
     IonIcon,IonSearchbar,IonLabel,IonItem,IonList,CommonModule,IonCard,IonCardHeader,IonCardTitle,IonCardSubtitle,
-    IonCardContent, IonThumbnail, 
+    IonCardContent, IonThumbnail, IonFab,IonFabButton,IonIcon
   ],
 })
 export class Tab1Page {
+  
 
   constructor(
     private router: Router,
      private modalCtrl: ModalController,
     // private navCtrl: NavController,
-    private http: HttpClient // 注入 HttpClient
-  ) {}
+    private http: HttpClient// 注入 HttpClient
+ 
+  ) {
+   
+    addIcons({ add });
+  }
+  navigateToPage() {
+    this.router.navigate(['/atest']); // 替换为目标页面的路由
+  }
   /**
    * Go to the ai page
    */