20222670105/novel-app/src/app/short-generator/short-generator.page.ts

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-short-generator',
  templateUrl: './short-generator.page.html',
  styleUrls: ['./short-generator.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,MarkdownPreviewModule
  ],
})
export class ShortGeneratorPage implements OnInit {
  constructor(private router: Router) { 
    this.currentUser = new CloudUser();
  }

  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;
  }

  currentUser: CloudUser;
  // 人物词条
  entryList: Array<any> = []
  list: any = [];
  entry: string = ''; 
  onEntryListChange(ev: any) {
    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() {
    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)
    let PromptTemplate = `
    请你作为一名专业的小说创作者，请您根据用户提供的标题${this.titlel}，用户的要求要求${this.style}，根据这个词条${JSON.stringify(this.entryList)}的内容，给出短篇小说大纲，大纲需要清晰的主题：大纲应明确小说的主题和中心思想，能够引导整个故事的发展。

    完整的情节结构：大纲需要包含故事的主要情节，包括开端、发展、高潮和结局，确保情节的连贯性和逻辑性。
    
    角色发展：大纲中应明确主要角色的性格特点、动机和成长轨迹，展示他们在故事中的变化和发展。
    
    冲突与张力：描述主要冲突和障碍，这些冲突是推动情节发展的关键因素，能够增加故事的紧张感和吸引力。
    
    场景设置：大纲应包括主要场景和背景信息，帮助读者理解故事发生的环境和氛围。
    
    时间线：提供一个清晰的时间线，说明故事的时间进程，包括重要事件的发生顺序。
    
    关键事件：标出故事中的关键事件和转折点，这些事件通常是推动情节发展的重要节点。
    
    叙述视角：确定故事的叙述视角（第一人称、第三人称等），并在大纲中保持一致性。
    
    节奏与结构：考虑故事的节奏，安排好各个部分的长度和强度，使整体结构合理平衡。
    
    开放性与灵活性：虽然大纲需要有一定的框架，但也应留有空间以便在创作过程中进行调整和修改，保持灵活性。
    
    `;
    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({
            
            user: this.currentUser.toPointer(),
            username: this.currentUser.data["username"],
            title: `${this.titlel}`,
            required: `${this.style}`,
            content2: `${this.generatedContent}`,
            entry: `${this.entry}`,
            outline: `${this.generatedOutline}`,
            date: dateStr,
            category: `短篇小说` 
          });
                  consult.save();
                  console.log(consult);
        }
      })
  }
}