浏览代码

feat(novel-app): 添加短篇小说生成器功能

18460000105 3 月之前
父节点
当前提交
c6d2c8ed82

+ 3 - 3
novel-app/src/app/short-generator/short-generator.page.ts

@@ -77,7 +77,8 @@ export class ShortGeneratorPage implements OnInit {
     this.entryList = ev;
     let list =JSON.stringify(this.entryList) ;
     console.log(list);
-
+    this.entry = JSON.stringify(this.entryList); // 将 entryList 转换为字符串并存储在 entry 中
+  console.log(this.entry); // 输出 entry 的值
   }
   
   showEntryList() {
@@ -100,8 +101,7 @@ export class ShortGeneratorPage implements OnInit {
     console.log("create");
     console.log(JSON.stringify(this.entryList));
     console.log(this.titlel);
-    this.entry = JSON.stringify(this.entryList); // 将 entryList 转换为字符串并存储在 entry 中
-    console.log(this.entry); // 输出 entry 的值
+    console.log(this.entry)
     let PromptTemplate = `
     您作为一名专业的${this.style}作者,请您根据用户提供的标题${this.titlel},根据这个词条${this.entry}的内容,添加文章信息,并给出短篇小说大纲。
     

+ 7 - 4
novel-app/src/app/tab1/tab1.page.ts

@@ -1,3 +1,4 @@
+import { CloudUser } from './../lib/ncloud';
 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, IonFab, IonFabButton } from '@ionic/angular/standalone';
@@ -42,10 +43,10 @@ export class Tab1Page {
     private router: Router,
      private modalCtrl: ModalController,
     // private navCtrl: NavController,
-    private http: HttpClient// 注入 HttpClient
- 
+    private http: HttpClient// 注入 HttpClient,
+
   ) {
-   
+
     addIcons({ add });
   }
   navigateToPage() {
@@ -64,10 +65,12 @@ export class Tab1Page {
   ngOnInit() {
     this.loadDoctorList()
   }
-
   doctorList:Array<CloudObject> = []
   async loadDoctorList(){
+    let user = new CloudUser();
     let query = new CloudQuery("NovelCharacter");
+    query.equalTo("user",user?.id)
+    console.log("user",user.id)
     this.doctorList = await query.find()
   }
 

+ 28 - 0
novel-app/src/app/tab7/tab7.page.html

@@ -0,0 +1,28 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input>
+  <h1>要求</h1>
+  <ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮:执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>
+
+  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea>
+  
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说</ion-button>
+
+</ion-content>

+ 52 - 0
novel-app/src/app/tab7/tab7.page.scss

@@ -0,0 +1,52 @@
+ion-content {
+  --padding-top: 20px;
+  --padding-bottom: 20px;
+}
+
+ion-header {
+  background-color: #488aff;
+  color: white;
+}
+
+ion-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+ion-input,
+ion-textarea {
+  margin-bottom: 15px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+ion-input {
+  height: 40px;
+}
+
+ion-textarea {
+  min-height: 100px;
+}
+
+ion-button {
+  margin-top: 10px;
+  margin-bottom: 15px;
+  --background: #488aff;
+  --color: white;
+  --border-radius: 8px;
+}
+
+.generated-outline {
+  margin-top: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}

+ 17 - 0
novel-app/src/app/tab7/tab7.page.spec.ts

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

+ 186 - 0
novel-app/src/app/tab7/tab7.page.ts

@@ -0,0 +1,186 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+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, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tab7',
+  templateUrl: './tab7.page.html',
+  styleUrls: ['./tab7.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tab7Page implements OnInit {
+  constructor(private router: Router) { }
+
+  ngOnInit() { }
+
+  navigateToContentGenerator() {
+    this.router.navigate(['/content-generator'], { queryParams: { outline: this.generatedOutline } });
+  }
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "玄幻";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+
+
+  // 人物词条
+  entryList: Array<any> = []
+  list: any = [];
+  entry: string = ''; 
+  onEntryListChange(ev: any) {
+    this.entryList = ev;
+    let list =JSON.stringify(this.entryList) ;
+    console.log(list);
+
+  }
+  
+  showEntryList() {
+    console.log(JSON.stringify(this.entryList))
+    
+  }
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 生成的小说内容
+  generatedContent: string = "";
+
+  // 属性:组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法:实例化completion对象,传入消息数组,并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性,用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    console.log(JSON.stringify(this.entryList));
+    console.log(this.titlel);
+    this.entry = JSON.stringify(this.entryList); // 将 entryList 转换为字符串并存储在 entry 中
+    console.log(this.entry); // 输出 entry 的值
+    let PromptTemplate = `
+    您作为一名专业的${this.style}作者,请您根据用户提供的标题${this.titlel},根据这个词条${this.entry}的内容,添加文章信息,并给出短篇小说大纲。
+    
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+
+  sendOutline() {
+    console.log("create");
+
+    let PromptTemplate = `
+    根据短篇小说大纲${this.generatedOutline},生成一个短篇小说。
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态,则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说内容放入文本框中
+        this.generatedContent = this.responseMsg;
+      }
+    });
+  }
+
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])
+      
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            // name: `${this.name}`,
+            // age: `${this.age}`,
+            // gender: `${this.gender}`,
+            // desc: `${this.desc}`,
+            // user: this.currentUser.toPointer(),
+            title: `${this.titlel}`,
+            topic: `${this.style}`,
+            content2: `${this.generatedContent}`,
+            date: dateStr,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}