20222670105/novel-app/src/app/character-generator/character-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-character-generator',
  templateUrl: './character-generator.page.html',
  styleUrls: ['./character-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 CharacterGeneratorPage implements OnInit {

  constructor() { }
  ngOnInit() { }

  types = [
    '重生', '都市', '穿越', '玄幻', '系统文', '搞笑轻松', '历史古代', '武侠', '奇幻仙侠', '修仙', '末日求生', '东方玄幻', '异能', '科幻末世', '规则怪谈', '悬疑脑洞', '异世大陆', '种田文', '悬疑推理', '无脑爽文', '战神赘婿', '克苏鲁', '穿书'
  ];

  selectedType: string = '重生';

  selectType(type: string) {
    this.selectedType = type;
  }

  gender = [
    '男', '女'
  ];

  selectedGender: string = '男'; // 修改默认值

  selectGender(gender: string) {
    this.selectedGender = gender;
  }

  userPrompt: string = "一个高中生，来自一个神秘的学校。";
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }

  responseMsg: any = "";
  isComplete: boolean = false;

  sendMessage() {
    console.log("create");

    let PromptTemplate = `
    您作为一名专业的${this.selectedType}小说作者，请您根据用户提供的期望描述，给出一个性别为${this.selectedGender}、符合${this.selectedType}类型特点的人物描述。
    以下是用户的期望描述：${this.userPrompt}
  `;

    // 添加系统角色提示
    let systemPrompt = `
    你是一名专业的小说作者，擅长各种类型的小说创作。请根据用户提供的信息，生成一个符合特定类型特点的人物描述。
  `;

    let completion = new FmodeChatCompletion([
      { role: "system", content: systemPrompt },
      { role: "user", content: PromptTemplate }
    ]);
    completion.sendCompletion().subscribe((message: any) => {
      console.log(message.content);
      this.responseMsg = message.content;
      if (message?.complete) {
        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('内容已复制到剪贴板');
  }
}