fix:update short-generator

novel-app/src/app/app.routes.ts

@@ -1,63 +1,67 @@
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
-import { IonicRouteStrategy } from '@ionic/angular';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'story-generator',
-    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
-  },
-  {
-    path: 'toolbox',
-    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
-  },
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'register',
-    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
-  },
-  {
-    path: 'login',
-    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
-  },
-  {
-    path: 'short-generator',
-    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
-  },
-  {
-    path: 'short-novel',
-    loadComponent: () => import('./short-novel/short-novel.page').then(m => m.ShortNovelPage)
-  },
-  {
-    path: 'character',
-    loadComponent: () => import('./character/character.page').then( m => m.CharacterPage)
-  },
-  {
-    path: 'character-creator',
-    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
+import { IonicRouteStrategy } from '@ionic/angular';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'story-generator',
+    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
+  },
+  {
+    path: 'toolbox',
+    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
+  },
+  {
+    path: 'short-generator',
+    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
+  },
+  {
+    path: 'short-novel',
+    loadComponent: () => import('./short-novel/short-novel.page').then(m => m.ShortNovelPage)
+  },
+  {
+    path: 'character',
+    loadComponent: () => import('./character/character.page').then( m => m.CharacterPage)
+  },
+  {
+    path: 'character-creator',
+    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
+  },
  {
+    path: 'content-generator',
+    loadComponent: () => import('./content-generator/content-generator.page').then( m => m.ContentGeneratorPage)
   }
 
-
-
-];
-
-
-
-
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
-  exports: [RouterModule],
-  providers: [
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
-  ],
-})
-export class AppRoutingModule { }
+
+
+
+];
+
+
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
+  exports: [RouterModule],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+})
+export class AppRoutingModule { }

novel-app/src/app/content-generator/README.md

@@ -0,0 +1,2 @@
+# 短篇小说生成页面
+- 能够根据短篇小说大纲生成短篇小说

novel-app/src/app/content-generator/content-generator.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>content-generator</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">content-generator</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-textarea [(ngModel)]="generatedContent" placeholder="生成的小说内容" autoGrow="true" readonly></ion-textarea>
+</ion-content>

novel-app/src/app/content-generator/content-generator.page.spec.ts

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

novel-app/src/app/content-generator/content-generator.page.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonBackButton, IonButtons } from '@ionic/angular/standalone';
+import { ActivatedRoute } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+
+@Component({
+  selector: 'app-content-generator',
+  templateUrl: './content-generator.page.html',
+  styleUrls: ['./content-generator.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonBackButton, IonButtons, CommonModule, FormsModule]
+})
+export class ContentGeneratorPage implements OnInit {
+  generatedOutline: string = "";
+  generatedContent: string = "";
+  responseMsg: any;
+  isComplete: boolean | undefined;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.generatedOutline = params['outline'];
+      this.generateNovelContent();
+    });
+  }
+
+  generateNovelContent() {
+    // 假设这里有一个服务可以生成小说内容
+    // 这里只是一个示例，你需要根据实际情况调用你的服务
+    let novelContentTemplate = `
+    根据大纲生成的小说内容：
+    大纲：${this.generatedOutline}
+    `;
+    let completion = new FmodeChatCompletion([
+      { role: "generatedOutline", content: "" },
+    ]);
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        this.generatedContent = novelContentTemplate; // 将生成的小说内容显示在文本框中
+      }
+
+    }
+    );
+  }
+}

novel-app/src/app/short-generator/short-generator.page.html

@@ -1,57 +1,31 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button (click)="goBack()">
-        <ion-icon name="arrow-back"></ion-icon>
-      </ion-button>
+      <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
     <ion-title>短篇小说生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>作品名称</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="workTitle" placeholder="请输入作品名称"></ion-input>
-    </ion-card-content>
-  </ion-card>
+<ion-content class="ion-padding">
 
-  <ion-item>
-    <ion-label>风格选择</ion-label>
-    <ion-select [(ngModel)]="selectedStyle" (ionChange)="onStyleChange()">
-      <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>
+  <h1>标题</h1>
+  <ion-input [value]="title" (ionInput)="titleInput($event)"></ion-input>
+  <h1>风格</h1>
+  <ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
+  <!-- 文本域：生成提示词 -->
+  <h1>人物词条</h1>
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词"
+    autoGrow="true"></ion-textarea>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>人物词条</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="characterName" placeholder="人物名称"></ion-input>
-      <ion-select [(ngModel)]="characterGender" placeholder="性别">
-        <ion-select-option value="男">男</ion-select-option>
-        <ion-select-option value="女">女</ion-select-option>
-      </ion-select>
-      <ion-textarea [(ngModel)]="characterDescription" placeholder="人物简介" autoGrow="true"></ion-textarea>
-      <ion-button expand="full" (click)="addCharacter()">新建人物</ion-button>
-    </ion-card-content>
-  </ion-card>
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>
 
-  <ion-list>
-    <ion-item *ngFor="let character of characters">
-      <ion-label>
-        <h2>{{ character.name }}</h2>
-        <p>性别: {{ character.gender }}</p>
-        <p>简介: {{ character.description }}</p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
+  <!-- 展示：返回消息内容 -->
+  <!-- 实时预览生成的小说大纲 -->
+  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea>
+  <!-- 按钮：生成小说 -->
+  <ion-button (click)="navigateToContentGenerator()" expand="block">生成小说</ion-button>
 
 </ion-content>

novel-app/src/app/short-generator/short-generator.page.scss

@@ -1,18 +1,52 @@
-ion-card {
-    margin: 16px;
+ion-content {
+    --padding-top: 20px;
+    --padding-bottom: 20px;
 }
 
-.theme-chips {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
+ion-header {
+    background-color: #488aff;
+    color: white;
 }
 
-ion-chip {
-    margin: 4px;
-    cursor: pointer; // 添加光标样式
+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-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;
 }

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

@@ -1,52 +1,76 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-short-generator',
   templateUrl: './short-generator.page.html',
   styleUrls: ['./short-generator.page.scss'],
   standalone: true,
-  imports: [IonicModule, FormsModule]
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule
+  ],
 })
 export class ShortGeneratorPage implements OnInit {
-  workTitle: string = '';
-  selectedStyle: string = '';
-  characterName: string = '';
-  characterGender: string = '';
-  characterDescription: string = '';
-  characters: Array<{ name: string; gender: string; description: string }> = [];
-
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() { }
-
-  goBack() {
-    // 实现返回逻辑，例如使用路由
+  navigateToContentGenerator() {
+    this.router.navigate(['/content-generator'], { queryParams: { outline: this.generatedOutline } });
+  }
+  // 用户输入提示词
+  title: string = "时空之旅";
+  titleInput(ev: any) {
+    this.title = ev.detail.value;
+  }
+  style: string = "玄幻";
+  styleInput(ev: any) {
+    this.style = ev.detail.value; // 修正这里应该是修改style而不是title
   }
 
-  onStyleChange() {
-    // 处理风格选择变化
+  // 用户输入提示词
+  userPrompt: string = "人物名字：林浅夏;  人物角色：女主角；人物描述：林浅夏是一名来自中国的少女，她的爱好是画画，她的梦想是成为一名优秀的画家。";
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
   }
 
-  addCharacter() {
-    console.log('人物创建:', {
-      name: this.characterName,
-      gender: this.characterGender,
-      description: this.characterDescription
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+
+    let PromptTemplate = `
+    您作为一名专业的${this.style}作者，请您根据用户提供的标题${this.title}，给出短篇小说大纲。
+    以下是用户的口述：${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;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
     });
-    if (this.characterName && this.characterGender && this.characterDescription) {
-      this.characters.push({
-        name: this.characterName,
-        gender: this.characterGender,
-        description: this.characterDescription
-      });
-    }
-    // 清空输入框
-    this.characterName = '';
-    this.characterGender = '';
-    this.characterDescription = '';
-  }
 
-}
+  }
+}

novel-app/src/app/tabs/tabs.routes.ts

@@ -18,7 +18,7 @@ export const routes: Routes = [
       },
       {
         path: 'character',
-        loadComponent: () => import('../character/character.page').then( m => m.CharacterPage)
+        loadComponent: () => import('../character/character.page').then(m => m.CharacterPage)
       },
       {
         path: 'story-generator',

novel-app/src/app/tag/README.MD

@@ -1 +0,0 @@
-- 标签组件

novel-app/src/app/tag/tag.component.html

@@ -1,3 +0,0 @@
-<p>
-  tag works!
-</p>

novel-app/src/app/tag/tag.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { TagComponent } from './tag.component';
-
-describe('TagComponent', () => {
-  let component: TagComponent;
-  let fixture: ComponentFixture<TagComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TagComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TagComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

novel-app/src/app/tag/tag.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-tag',
-  templateUrl: './tag.component.html',
-  styleUrls: ['./tag.component.scss'],
-})
-export class TagComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() { }
-
-}