s202226701018/wisdom-app/src/app/poem-picture/poem-picture.component.html

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-title class="custom-title">
      个性化头像生成
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 生成提示词 -->
  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请输入头像要求(示例：画风采用动漫风，一位长发飘飘的女孩抬头仰望着天空微笑。)" autoGrow="true"></ion-textarea>
  <ion-button (click)="createImage()" expand="block" color="success">头像生成</ion-button>
  <!-- 意境画面提示词 -->
  <div class="desc">
    {{PictureDescResult}}
  </div>
  <!-- 生成结果 -->
  @if(images.length) {
    @for(imageUrl of images;track imageUrl){
      <img [src]="imageUrl || '../../assets/image/logo.png'" alt="" srcset="">
    }

    <h3>图片地址：
      <span class="copyable">{{images.join(', ')}}</span>
    </h3>

  }
  <!-- 生成状态 -->
  @if(!images.length){
    <h2 style="display: grid; place-items: center;">欢迎使用头像生成器</h2>
    @if(imagineWork.progress!=0){
      <h1 style="display: grid; place-items: center;">生成中：{{imagineWork.progress}}</h1>
    }
    <div style="display: grid; place-items: center;">
      <img src="https://app.fmode.cn/dev/jxnu/202226701019/头像生成器.png">
    </div>
  }

</ion-content>