Browse Source

feat: ai agent gushi showcase

RyaneMax 8 months ago
parent
commit
4005d3fc00

+ 0 - 6
src/app/app-routing.module.ts

@@ -55,13 +55,7 @@ const routes: Routes = [
     path: 'aigc',
     loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
   },
- 
-
-
-
- 
 
-  
 
  
 ];

+ 1 - 0
src/app/tab1/tab1.page.html

@@ -50,6 +50,7 @@
       <ion-button expand="block" routerLink="/study/case-petmarket">展示:Pasre微服务-复杂列表</ion-button>
       <ion-button expand="block" routerLink="/tabs/tab2">示例:通讯录列表</ion-button>
       <ion-button expand="block" routerLink="/aigc/chat">示例:AI对话示例</ion-button>
+      <ion-button expand="block" routerLink="/aigc/agent/shige">智能体:诗词创作</ion-button>
     </ion-card-content>
   </ion-card>
 

+ 17 - 0
src/modules/aigc/agent/agent-shige/agent-shige-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AgentShigePage } from './agent-shige.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AgentShigePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AgentShigePageRoutingModule {}

+ 20 - 0
src/modules/aigc/agent/agent-shige/agent-shige.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AgentShigePageRoutingModule } from './agent-shige-routing.module';
+
+import { AgentShigePage } from './agent-shige.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AgentShigePageRoutingModule
+  ],
+  declarations: [AgentShigePage]
+})
+export class AgentShigePageModule {}

+ 41 - 0
src/modules/aigc/agent/agent-shige/agent-shige.page.html

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      诗词创作
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+    <ion-input placeholder="关键词" [(ngModel)]="shigeOptions.keywords"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input placeholder="创作灵感" [(ngModel)]="shigeOptions.content"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-select label="诗歌格律" placeholder="格律" [(ngModel)]="shigeOptions.type">
+      <ion-select-option value="不限制">不限制</ion-select-option>
+      <ion-select-option value="七言绝句">七言绝句</ion-select-option>
+      <ion-select-option value="五言律诗">五言律诗</ion-select-option>
+      <ion-select-option value="藏头诗">藏头诗</ion-select-option>
+      <ion-select-option value="宋词">藏头诗</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-select label="诗歌主题" placeholder="主题" [(ngModel)]="shigeOptions.theme">
+      <ion-select-option value="不限制">不限制</ion-select-option>
+      <ion-select-option [value]="item" *ngFor="let item of themeList">{{item}}</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-button expand="block" (click)="sendMessage()">发送</ion-button>
+
+  <ion-card *ngFor="let message of messageList">
+    <ion-card-header>
+      {{message?.role}}
+    </ion-card-header>
+    <ion-card-content>
+      {{ message?.content }}
+    </ion-card-content>
+  </ion-card>
+</ion-content>

+ 0 - 0
src/modules/aigc/agent/agent-shige/agent-shige.page.scss


+ 17 - 0
src/modules/aigc/agent/agent-shige/agent-shige.page.spec.ts

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

+ 91 - 0
src/modules/aigc/agent/agent-shige/agent-shige.page.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+// 引用FmodeChatCompletion类
+import { TestRxjsChatCompletion,TestRxjsChatMessage } from '../../chat/class-rxjs-chat-completion';
+import Parse from "parse";
+@Component({
+  selector: 'app-agent-shige',
+  templateUrl: './agent-shige.page.html',
+  styleUrls: ['./agent-shige.page.scss'],
+})
+export class AgentShigePage implements OnInit {
+  messageList:Array<TestRxjsChatMessage> = []
+  shigeOptions:any ={
+    content:"",
+    type:"不限制",
+    theme:"不限制",
+  }
+  themeList = ['羁旅思乡诗','爱情闺怨诗','咏史怀古诗','咏物言志诗','送别怀人诗','边塞征战诗','山水田园诗']
+
+  constructor() { 
+  }
+
+  ngOnInit() {
+  }
+  sendMessage(){
+    /*
+4. 风格:选择风格,例如“豪放”或“婉约”。
+5. 情感:描述诗中应表达的情感,例如“喜悦”、“忧愁”、“思念”等。
+
+    */
+    let GuhiPromoptTemplate = `
+你是一位古代诗人,擅长写作优美的诗词。请根据以下要求创作一首诗:
+1. 主题:${this.shigeOptions?.theme}。
+2. 格律:${this.shigeOptions?.type}。
+3. 关键词:${this.shigeOptions?.keywords}。
+4. 创意灵感:${this.shigeOptions?.content}。
+请根据以上要求创作一首优美的诗词。
+
+请开始创作,并按照以下格式返回
+题目:
+内容:
+简介:
+    `
+    this.messageList.push({
+      role:"user",
+      content: GuhiPromoptTemplate
+    })
+    
+    // messageList在competion内部,已经赋予了完整的message
+    // 下方暴露出来的可订阅内容,主要是用于关键字过滤,或者其他开发逻辑的续写
+    let resultStr = ""
+    let testChatCompletion = new TestRxjsChatCompletion(this.messageList);
+    testChatCompletion.createCompletionByStream().subscribe({
+        next: ({ content, cumulativeContent, done }) => {
+          resultStr = cumulativeContent
+            console.log(`Content: ${content}`);
+            console.log(`Cumulative Content: ${cumulativeContent}`);
+            if (done) {
+                console.log('Stream completed');
+            }
+        },
+        error: err => console.error(err),
+        complete: () => {
+          // 诗歌创建完成:正则表达式,匹配诗歌json内容
+          console.log("原文",resultStr)
+                    
+          let pattern = /题目:\s*(.*)\s*内容:\s*(.*)\s*简介:\s*(.*)/;
+          let match = resultStr.match(pattern);
+
+          if (match) {
+            let gushi:any = {}
+              gushi.title = match[1];
+              gushi.content = match[2];
+              gushi.intro = match[3];
+              gushi.source = "AI创作";
+              console.log(`题目: ${gushi.title}`);
+              console.log(`内容: ${gushi.content}`);
+              console.log(`简介: ${gushi.intro}`);
+              console.log(gushi);
+              let Shige = Parse.Object.extend("Shige");
+              let sg = new Shige();
+              sg.set(gushi);
+              sg.save();
+          } else {
+              console.log("未能匹配到任何内容");
+          }
+        }
+    });
+
+  }
+
+}

+ 4 - 0
src/modules/aigc/aigc-routing.module.ts

@@ -3,6 +3,10 @@ import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {path: 'chat', loadChildren: () => import('./chat/chat.module').then(mod => mod.ChatPageModule)},
+  {
+    path: 'agent/shige',
+    loadChildren: () => import('./agent/agent-shige/agent-shige.module').then( m => m.AgentShigePageModule)
+  },
 ];
 
 @NgModule({