s202226701001/tailor-app/myapp/src/app/customization/customization.page.ts

import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NavigationExtras, Router } from '@angular/router';

import { IonCardSubtitle, IonProgressBar, IonTextarea, ModalController } from '@ionic/angular/standalone';
import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg } from '@ionic/angular/standalone';
import { TestChatCompletion } from './test-chat-completion';
import { EditTagComponent } from '../edit-tag/edit-tag.component';
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
import { DalleOptions, ImagineWork } from 'fmode-ng';
import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
import { Icon } from 'ionicons/dist/types/components/icon/icon';
import { camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutline } from 'ionicons/icons';
import { addIcons } from 'ionicons';
import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
import { SwiperComponent } from '../swiper/swiper.component';
import { extactAndParseJsonFromString } from 'src/agent/agent.json';
import { RouterModule } from '@angular/router';
import { NavController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
import { openCommentPostModal } from 'src/lib/user/modal-comment-post/modal-comment-post.component';


addIcons({ camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutline })

@Component({
  selector: 'app-customization',
  templateUrl: './customization.page.html',
  styleUrls: ['./customization.page.scss'],
  standalone: true,

  imports: [IonProgressBar,IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonInput, EditTagComponent, IonTextarea, IonItem, IonList, MarkdownPreviewModule, IonIcon, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg, IonCardSubtitle, SwiperComponent, RouterModule,]
})
export class CustomizationPage implements OnInit {
  public buffer = 0.06;
  public progress = 0;


  // 修改需求分析
  async modifyRequire() {
    this.requireComplete=false
  
    let a = await openCommentPostModal(this.modalCtrl, { "title": "需求修改", "title2": "修改" });
    if (a == null) {
      a = "";
    }
    let prompt = `你是一名专业服装设计师，这是你的上次回答：
    ${this.gptre}
    基于你上次回答，我想做一些修改，修改如下：
    ${a},
    请你将上次回答基于我提出的修改修改后再发一遍
    `;

    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: prompt }
    ]);
    completion.sendCompletion().subscribe(
      (message: any) => {
      this.gptre=message.content
        console.log("Received message:", message);
        if(this.progress<0.97){
          if(this.progress<0.5){
            this.progress+=0.01
          }
          if(this.progress>=0.5){
            this.progress+=0.001
          }
        }
        if (message?.complete) {
          this.requireComplete=true

          this.progress=0
          console.log("完成");
          
        } 
      }
    )
  }

  async createdetail() {
    this.type="detail"
    let promotTemplate = `您是一名专业的美术画家，请您根据服装描述内容，将1.其描述的服装细节描述出来，服装描述如下：${this.gptre}`
    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: promotTemplate }
    ])

    completion.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content)
      
      // 赋值消息内容给组件内属性
      this.picdetail = message.content
      if(this.progress<0.97){
        if(this.progress<0.5){
          this.progress+=0.01
        }
        if(this.progress>=0.5){
          this.progress+=0.001
        }
      }
      if (message?.complete) {
        this.isComplete = true;
        // this.getJson()
        this.progress=0

      }
    })

  }
  async modifyDetail() {
    this.isComplete=false
    
    let a = await openCommentPostModal(this.modalCtrl, { "title": "细节修改", "title2": "修改" });
    if (a == null) {
      a = "";
    }
    let prompt = `你是一名专业服装设计师，这是你的上次回答：
    ${this.picdetail}
    基于你上次回答，我想做一些修改，修改如下：
    ${a},
    请你将上次回答基于我提出的修改修改后再发一遍
    `;

    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: prompt }
    ]);
    completion.sendCompletion().subscribe(
      (message: any) => {
      this.picdetail=message.content
        console.log("Received message:", message);
        if(this.progress<0.97){
          if(this.progress<0.5){
            this.progress+=0.01
          }
          if(this.progress>=0.5){
            this.progress+=0.001
          }
        }
        if (message?.complete) {
    this.isComplete=true

          console.log("完成");
          this.progress=0
          
        } 
      }
    )
  }


  getJson() {
    this.type="image"
    let promt = `请你以以下json格式整合文段内容：
    
    {
    "goal":"客户定制服装目的",
    "style":"风格",
    "color":"颜色",
    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
    "ACC":"配饰，耳环，领带什么的",
    "rim":"辅料，纽扣，拉链什么的",
    "period":"定制周期",
    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
    "after":"售后信息",
    "texture":"材质"
    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"

}


    内容如下：${this.picdetail} ${this.gptre}
`

    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: promt }
    ])
    completion.sendCompletion().subscribe((message: any) => {
      if(this.progress<0.97){
        if(this.progress<0.8){
          this.progress+=0.005
        }
        if(this.progress>=0.8){
          this.progress+=0.001
        }
      }
      // 打印消息体
      console.log(message.content)


      // 赋值消息内容给组件内属性
      this.JSONdes = message.content
      if (message?.complete) {
        console.log("json:", this.JSONdes);

        this.imagineWork = new ImagineWork();
        let options: DalleOptions = { prompt: this.picdetail }
        this.imagineWork.draw(options).subscribe(async work => {
          console.log("imagineWork", work?.toJSON())
          console.log("images", work?.get("images"))
          if (work?.get("images")?.length) {
            this.images = work?.get("images");
            this.progress=0



            let a = extactAndParseJsonFromString(this.JSONdes)
            // a.comment=await this.presentAlert();
            // console.log("a.comment",a.comment);


            a.detail = this.picdetail;
            a.image =this.images[0]
            this.JSONobject = a
            this.JSONKeys = Object.keys(this.JSONobject)
            this.JSONcomplete = true
            console.log(a);

            //加入数据库
            let newDsign = {
              "goal": a['goal'],
              "style": a['style'],
              "color": a['color'],
              "feature": a['feature'],
              "ACC": a['ACC'],
              "rim": a['rim'],
              "period": a['period'],
              "clothing": a['clothing'],
              "trousers": a['trousers'],
              "shoe": a['shoe'],
              "after": a['after'],
              "texture": a['texture'],
              "remark": a['remark'],
              "image": a['image'],
              "user": new CloudUser().toPointer(),
              "detail": a['detail'],
              "comment": ""


            }
            let newObject = new CloudObject("Designs")
            newObject.set(newDsign)
            newObject.id = (await newObject.save()).id
            this.newObject = newObject;
            console.log("添加成功");
          }
        })
      }
    })


    return true;
  }





  //打开聊天窗口
  async openInquiry(doctor: CloudObject) {
    let currentUser = new CloudUser();
    let userPrompt = ``
    if (!currentUser?.id) {
      console.log("用户未登录，请登录后重试");
      let user = await openUserLoginModal(this.modalCtrl);
      if (!user?.id) {
        return
      }
      currentUser = user;
    }
    if (currentUser?.get("realname")) {
      userPrompt += `当前来访的患者，姓名：${currentUser?.get("realname")}`
    }
    if (currentUser?.get("gender")) {
      userPrompt += `，性别：${currentUser?.get("gender")}`
    }
    if (currentUser?.get("age")) {
      userPrompt += `，年龄：${currentUser?.get("age")}`
    }


    localStorage.setItem("company", "Svehl6FceL")
    let options: ChatPanelOptions = {
      roleId: "sVT0ezdJml",
      chatId: this.chatID,
      onClose: (chat: FmodeChat): boolean | Promise<boolean> => {
        //开始分析用户和ai聊天记录
        console.log("关闭");

        if (!this.complete) { return true; }
        console.log(this.isComplete);
        console.log("开始分析");


        this.complete = false;
        console.log(chat.messageList);
        let contentList = chat.messageList.map(item => ({
          role: item.role,
          content: item.content
        }));
        let stringArray = contentList.map(item => `${item.role}:\n ${item.content}`);
        console.log(stringArray);

        let contentStr = stringArray.slice(2).join("\n")
        console.log(contentStr);


        let promt = `您作为一名专业的服装推荐师，您的任务是为用户进行特定的服装设计，设计好后面料颜色等都要选定以便后续制造，请帮我分析以下用户user与一位服装设计师assistant的对话，详细分析出：1.用户对于定制服装的需求，2.联想并补全服装的细节，对话如下：${contentStr}
    `

        let completion = new FmodeChatCompletion([
          { role: "system", content: "" },
          { role: "user", content: promt }
        ])
        completion.sendCompletion().subscribe((message: any) => {
          if(this.progress<0.97){
            if(this.progress<0.5){
              this.progress+=0.01
            }
            if(this.progress>=0.5){
              this.progress+=0.001
            }
          }
         
          console.log(message.content)
          console.log("complete:::::", this.isComplete);
          this.gptre = message.content
          if (message?.complete) {
            this.progress=0
          this.requireComplete=true;

            // this.createImage()
          }
        })


        return true;
      },
      onChatInit: (chat: FmodeChat) => {
        console.log("onChatInit");
        console.log("预设角色", chat.role);
        chat.role.set("name", doctor?.get("name"));
        chat.role.set("title", doctor?.get("title"));
        chat.role.set("desc", `一名${doctor?.get("desc")}的服装设计专家，${doctor?.get("name")}，年龄${doctor?.get("age")}岁`);
        chat.role.set("tags", ["服装", "设计"]);
        chat.role.set("avatar", doctor?.get("avater") || "../../assets/img/doctor5.png")
        chat.role.set("prompt", `

    

# 角色设定
您是一名亲切和蔼的服装设计专家，${doctor?.get("name")}，年龄${doctor?.get("age")}岁，需要完成一次完整的服装定制服务。

# 对话环节
0.引导（根据用户基本情况，引导其描述需要定制的服装）
1.预设的问询方式：询问顾客定制服装的目的（如婚礼、晚会、日常穿着等）。

- 打招呼，以用户自述为主
- 当信息充足时候，根据用户定制服装目的做出一些推荐服装来引导用户，并进入下一个环节
2.拓展的问询细节
例如：询问顾客的风格偏好（如休闲、正式、个性化等）。是否要指定特定的材质？倾向于哪种版型？英式、意式或其他？是否有特定的身体特征需要特别注意，例如肩宽、胸围、腰围等？是否有任何特殊的图案、标志或文字想要添加到服装上？是否需要这件服装与特定的配饰或鞋子或裤子搭配？是否需要特定的辅料，如纽扣、拉链、衬里等？是否需要特定的颜色或配色方案？对服装有没有什么特殊的需求？期望的定制周期是多久？您对售后服务有什么期望？
- 以上这些问题要要逐个问，不能一次性给出让用户作答，每次问完都要根据之前回答和这次提问内容为用户推荐特定的服装来引导用户(比如前面用户回答是为了婚礼，那你应该先说一下婚礼的服装需要满足的特点，因为接下来你要问用户需要什么风格，你就可以基于用户婚礼这个回答先推荐西装，燕尾服等服装，然后再问用户需要什么风格的服装，推荐5个选择)，当问询细节补充完成后进入下一个环节
3.初步的定制结果，并且同时列出定制项目
初步结果：初步得出现在定制的结果要得出客户定制服装目的，风格，颜色，客户特殊的身体特征，配饰，辅料，定制周期，衣服类型，裤子类型，鞋子类型，售后信息，材质，备注
定制项目：展现给用户看当前类似与现在定制结果的服装的市场趋势
- 进入下一阶段
4.在确定好服装后，询问客户身高体重，为他提供合适的尺码推荐
- 等待用户提交身高体重，进入下一阶段
4.给出初步的定制方案
- 完成定制时，以json格式给出定制方案,json格式如下:
{
    "goal":"客户定制服装目的",
    "style":"风格",
    "color":"颜色",
    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
    "ACC":"配饰，耳环，领带什么的",
    "rim":"辅料，纽扣，拉链什么的",
    "period":"定制周期",
    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
    "after":"售后信息",
    "texture":"材质"
    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"

}
，并在消息结尾附带: [完成]

# 开始话语
当您准备好了，可以以一个设计师的身份，向来访的用户打招呼。
${userPrompt}

`);
      },
      onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
        console.log("onMessage", message)
        let content: any = message?.content
        this.messageList.push(content);
        console.log("this.messageList", this.messageList);


        if (typeof content == "string") {
          if (content?.indexOf("[完成]") > -1) {
            console.log("门诊已完成")
            this.complete = true
          }
        }
      },
      onChatSaved: (chat: FmodeChat) => {
        // chat?.chatSession?.id 本次会话的 chatId
        console.log("onChatSaved", chat, chat?.chatSession, chat?.chatSession?.id)
        this.chatID = chat?.chatSession?.id
      },

    }
    openChatPanelModal(this.modalCtrl, options)
    console.log(this.messageList);

  }








  @Input()
  type: "require" | "detail" | "image" = "require"
  typeChange(ev: any) {
    this.type = ev?.detail?.value || ev?.value || 'require'
  }




  public isComplete: boolean = false;
  public requireComplete: boolean = true;
  editTags: Array<string> = []
  picdetail: string = ""
  public JSONKeys: string[] = []
  public JSONKeys2: string[] = []



  async toComment() {
    let a = await openCommentPostModal(this.modalCtrl, { "title": "评论", "title2": "评论" })
    if (a == null) {
      a = ""
    }

    this.newObject.set({ "comment": a })
    this.newObject.save()
    console.log("添加评论成功");

  }




  toReport() {
    // this.nav.navigateRoot(['report'], {
    //   queryParams: {
    //     'object': JSON.stringify(this.JSONobject)
    //   }
    // });


    const state: any = { myObject: this.JSONobject }; // 你要传递的对象数据
    const navigationExtras: NavigationExtras = {
      state: state
    };
   
    this.router.navigate(['/report'], navigationExtras);

    // this.router.navigate(['/report',this.JSONobject2])

  }
  ngOnInit() {
    this.loadDoctorList()



  }
  test() {
    console.log("开始");

    let newDsign = {
      "goal": "婚礼",
      "style": "修身燕尾服",
      "color": "黑色",
      "feature": "",
      "ACC": "领带",
      "rim": "纽扣",
      "period": "7天",
      "clothing": "燕尾服+XXL",
      "trousers": "裤子+XXL",
      "shoe": "鞋子+42码",
      "after": "清洗",
      "texture": "丝绸",
      "remark": "",
      "detail": ""
    }
    let newObject = new CloudObject("Designs")
    newObject.set(newDsign)

    console.log(newObject.save());


  }
  constructor(
    private modalCtrl: ModalController,
    private router: Router,
    public nav: NavController,
    private alertController: AlertController
  ) {
    // 示例任务，自己生成图片后请存储新的ID
    console.log('ImagineWork instance:', this.imagineWork);
    
    // this.imagineWork = new ImagineWork("Wx6o1Js1gA");
    // this.imagineWork.fetchTask().then(work => {
    //   this.images = this.imagineWork?.images || [];
    // })
  }
  


  imagineWork: ImagineWork | undefined
  images: Array<string> = []
  public gptre = `在这段对话中，我们可以分析出用户的需求和服装的细节设计。以下是详细分析：

### 1. 用户对于定制服装的需求
- **场合**：用户明确表示需要定制服装的场合是婚礼，这意味着服装需要正式且优雅。
- **风格选择**：用户希望设计师帮忙选择风格，并没有明确的偏好，这表明用户可能对婚礼服装的具体风格不太了解或者希望设计师提供专业建议。
- **颜色和材质**：用户在颜色和材质方面也没有特别要求，完全依赖设计师的选择，这显示出用户对设计师的信任。
- **尺码和身体特征**：用户提供了身高和体重，并提到“胸围大点”，这意味着在服装的剪裁上需要特别注意胸部的合身度。
- **售后服务**：用户希望有售后服务，特别是调整和清洗服务，显示出用户对服装的长期使用和维护的关注。

### 2. 联想并补全服装的细节
- **服装类型**：选择了经典的燕尾服，适合正式的婚礼场合。
- **颜色**：选择了经典的黑色，符合婚礼的正式氛围。
- **材质**：选择了丝绸，因其光泽感和柔软度，适合高档场合。
- **配饰**：选择了黑色领结和白色口袋巾，经典而优雅，能够提升整体形象。
- **辅料**：选择了黑色纽扣和丝绸衬里，确保整体风格统一且高档。
- **定制周期**：设定为3周，符合一般定制的时间要求。
- **尺码**：根据用户的身高和体重，推荐XXL尺码，特别注意胸围的合身。
- **鞋子类型**：建议42-43码的皮鞋，符合用户的身高体重。
- **售后服务**：包括免费调整和清洗服务，确保用户在婚礼后也能保持服装的最佳状态。
- **备注**：用户希望随时联系，表明用户对沟通的重视。

### 总结
通过对用户需求的分析和对服装细节的补全，我们可以为用户提供一套完整的婚礼燕尾服定制方案。这不仅满足了用户对正式场合服装的需求，也考虑到了用户的个人特征和售后服务的期望。这样的定制方案将有助于用户在婚礼上展现最佳形象。`
  messageList: string[] = []
  title: string = "123"
  chatID = ""
  complete: boolean = false
  JSONcomplete: boolean = false
  JSONdes = ""
  JSONobject: { [key: string]: string } = {}


  /** 示例：问诊ChatPanel面板 */

  
  newObject: CloudObject = new CloudObject("Designs")
  shareData: any = {}






  async loadDoctorList() {
    let query = new CloudQuery("Designer");
    query.include("depart")
    this.doctorList = await query.find()
    console.log(this.doctorList);



  }
  doctorList: Array<CloudObject> = []

}