import { Component, OnInit } from '@angular/core';
// 引用FmodeChatCompletion类
import { TestChatCompletion, TestChatMessage } from './class-test-chat-completion';
import { TestRxjsChatCompletion } from './class-rxjs-chat-completion';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {
  messageList:Array<TestChatMessage> = []
  userInput:string = ""

  Postjson = {
    "面部特征分析": {
      "三庭比例": {
        "前庭": "145.88",
        "中庭": "173.07",
        "下庭": "63.76",
        "分析": "前庭较短，说明额头相对较窄；中庭较长，显示脸中部较长，鼻子和颧骨区域比较突出；下庭较短，表明下巴较短。",
        "形象设计建议": "可以选择有刘海的发型，如空气刘海，增加额头的宽度。同时选择有层次感的发型，平衡脸部中庭的长度。使用高光在额头部位，增加视觉上的额头长度。同时在鼻子两侧使用阴影，缩短中庭的长度感。"
      },
      "五眼比例": {
        "比例": "1035.03",
        "分析": "五眼比例较大，说明眼睛之间的间距相对较宽。",
        "形象设计建议": "可以选择猫眼妆，通过延长眼线和使用深色眼影在眼角部分，增加眼睛的聚拢感。眉毛可以修剪得靠近眼睛的位置，增加眼睛的集中度。"
      },
      "脸型": {
        "类型": "长形脸",
        "分析": "长形脸说明脸部长度较大，相对宽度较窄。",
        "形象设计建议": "选择中长发或短发，卷发或大波浪可以增加脸部的宽度，减少脸部长度的视觉效果。侧分刘海也有助于缩短脸部长度。在脸颊中央使用腮红，增加脸部的饱满感，平衡脸部长度。"
      },
      "眉形": {
        "类型": "浓眉",
        "分析": "浓眉说明眉毛较为浓密，需要适当修饰使其更加整洁有型。",
        "形象设计建议": "保持自然的浓眉，适当修饰眉毛的形状，避免过于锐利的眉形。可以使用眉刷和眉笔进行细致的修整，使其更加有型。"
      },
      "唇形": {
        "类型": "薄唇",
        "分析": "薄唇说明嘴唇较为纤薄，需要增加唇部的丰满感。",
        "形象设计建议": "使用唇线笔勾勒出唇部轮廓，稍微超出自然唇线，使唇形显得更加丰满。选择光泽感强的唇膏或唇蜜，增加唇部的立体感。"
      },
      "眼睛形状": {
        "类型": "圆形眼",
        "分析": "圆形眼说明眼睛较为圆润，有一定的可爱感。",
        "形象设计建议": "可以尝试猫眼妆或烟熏妆，增加眼部的深邃感。使用眼线笔或眼线液拉长眼尾，适当加粗眼线，增强眼部轮廓感。选择哑光和珠光结合的眼影，可以增加眼部的层次感。"
      },
      "鼻形": {
        "类型": "鹰钩鼻",
        "分析": "鹰钩鼻说明鼻子的弧度较大，有一定的锐利感。",
        "形象设计建议": "通过高光和修容来调整鼻子的视觉效果。在鼻梁和鼻头部位使用高光，在鼻翼两侧使用阴影，能够柔化鼻子的线条。"
      },
      "颧骨": {
        "类型": "颧骨平",
        "分析": "颧骨平说明颧骨不突出，面部轮廓较为平坦。",
        "形象设计建议": "在颧骨部位使用阴影，增加颧骨的立体感，使面部轮廓更加分明。"
      },
      "下巴": {
        "类型": "短下巴",
        "分析": "短下巴说明下巴较为短小，需要增加下巴的长度感。",
        "形象设计建议": "在下巴部位使用高光，增加视觉上的下巴长度感，使面部比例更加和谐。"
      },
      "额头": {
        "类型": "窄额头",
        "分析": "窄额头说明额头较为窄小，需要增加额头的宽度感。",
        "形象设计建议": "选择有刘海的发型，如空气刘海，增加额头的宽度感。"
      },
      "脸颊": {
        "类型": "瘦削脸颊",
        "分析": "瘦削脸颊说明脸颊较为瘦削，需要增加脸颊的饱满感。",
        "形象设计建议": "使用腮红增加脸颊的饱满度，选择暖色调的腮红（如桃粉色、珊瑚色），从笑肌处轻扫至太阳穴，制造出健康红润的感觉。"
      }
    }
  };

  Postprompt={
    "现在你是一个形象设计大师，我的脸部特征是这些:" : "，三庭五眼:"+"145.88,173.07, 63.76"+"，五眼比例:"+"1035.03"+"，脸型:"+"长形脸"+"，眉形: "+"浓眉"+"，唇形: "+"薄唇"+"，眼睛形状: "+"圆形眼"+"，鼻形:"+"鹰钩鼻"+"，颧骨:"+"颧骨平"+"，下巴: "+"短下巴"+"，额头: "+"窄额头"+"，脸颊: "+"瘦削脸颊"+"。请你先分析说明每个特征分类的特点，然后给出形象设计意见，并将结果转换成json的格式。例如"+JSON.stringify(this.Postjson)
  }
  PostpromptString = JSON.stringify(this.Postprompt);
  completion:TestChatCompletion

  
  constructor() { 
    // 测试类：纯fetch读取http event stream数据
    this.completion = new TestChatCompletion(this.messageList)

    // 测试类：rxjs封装的可观察对象
  }

  ngOnInit() {
  }
  sendMessage(){
    this.messageList.push({
      role:"user",
      content:this.PostpromptString,
    })
    this.userInput = ""
    
    // this.completion.createCompletionByStream()

    // messageList在competion内部，已经赋予了完整的message
    // 下方暴露出来的可订阅内容，主要是用于关键字过滤，或者其他开发逻辑的续写
    let testChatCompletion = new TestRxjsChatCompletion(this.messageList);
    testChatCompletion.createCompletionByStream().subscribe({
        next: ({ content, cumulativeContent, done }) => {
            console.log(`Content: ${content}`);
            console.log(`Cumulative Content: ${cumulativeContent}`);
            if (done) {
                console.log('Stream completed');
            }
        },
        error: err => console.error(err),
        complete: () => console.log('Observable completed')
    });

  }

}
