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

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid } from '@ionic/angular/standalone';
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';

@Component({
  selector: 'app-name-generator',
  templateUrl: './name-generator.page.html',
  styleUrls: ['./name-generator.page.scss'],
  standalone: true,
  imports: [
    CommonModule, // 确保 CommonModule 已经导入
    FormsModule,
    IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons,
    IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid,
    // 引入fm-markdown-preview组件模块
    MarkdownPreviewModule
  ],
})
export class NameGeneratorPage implements OnInit {
  constructor() { }
  ngOnInit() { }

  selectedReaderGroup: string = '不限人群';

  selectReaderGroup(group: string) {
    this.selectedReaderGroup = group;
  }
  // 用户输入提示词
  type: string = "东方玄幻";
  typeInput(ev: any) {
    this.type = ev.detail.value;
  }

  // 用户输入提示词
  userPrompt: string = "年轻女子意外获时光之匙，穿梭古今阻止历史篡改，与时空守护者共斗邪恶势力，守护时间线安全。";
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }

  // 属性：组件内用于展示消息内容的变量
  responseMsg: any = "";

  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
  sendMessage() {
    console.log("create");

    let PromptTemplate = `
  您作为一名专业的${this.type}小说作者，请您根据用户提供的小说故事梗概和目标读者人群，给出多个小说书名。
  主要读者人群为：${this.selectedReaderGroup}
  以下是用户的口述：${this.userPrompt}

  示例：
  - 读者人群：男频小说
    - 故事梗概：年轻男子意外获得神秘力量，成为守护世界的英雄。
    - 书名建议：《英雄崛起》、《神秘力量》、《守护者》

  - 读者人群：女频小说
    - 故事梗概：年轻女子意外获时光之匙，穿梭古今阻止历史篡改，与时空守护者共斗邪恶势力，守护时间线安全。
    - 书名建议：《时光守护者》、《穿越时空》、《历史篡改者》

  请根据上述示例，为以下故事梗概和读者人群生成书名：
  `;

    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;
      }
    });
  }
  // 复制到剪贴板
  copyToClipboard() {
    const textarea = document.createElement('textarea');
    textarea.value = this.responseMsg;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('内容已复制到剪贴板');
  }

}