202226701045/poem-life-app/src/app/page-createpic/page-createpic.component.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      古诗云想 | 图片生成进度: {{imagineWork?.progress || 0}}%
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="background-color: #f9f9f9; padding: 16px;">
  <!-- 生成提示词 -->
  <h2 style="text-align: center; color: #5a5a5a;">请输入您的古诗</h2>
  <ion-textarea
    [value]="userPrompt"
    (ionInput)="promptInput($event)"
    placeholder="在此输入您想要的古诗..."
    autoGrow="true"
    style="background-color: white; color: black; border-radius: 8px; margin-bottom: 16px;"
  ></ion-textarea>

  <ion-button (click)="createImage()" expand="full" color="secondary">生成图片</ion-button>

  <!-- 诗歌分析结果 -->
  <div *ngIf="responseMsg" style="margin-top: 20px; padding: 10px; background: #e6f7ff; border-radius: 5px;">
    <h3 style="color: #007bff;">诗歌分析结果：</h3>
    <p>{{ responseMsg }}</p>
  </div>

  <!-- 生成结果 -->
  <div *ngIf="images.length; else noImages">
    <h2 style="text-align: center; color: #5a5a5a;">生成的图片</h2>
    <div style="display: flex; flex-wrap: wrap; justify-content: center;">
      <img *ngFor="let imageUrl of images" [src]="imageUrl" alt="生成的图片" style="max-width: 100%; height: auto; margin: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
    </div>
  </div>

  <!-- 生成状态 -->
  <ng-template #noImages>
    <div style="text-align: center; margin-top: 20px;">
      <ng-container *ngIf="imagineWork; else notStarted">
        <h1>生成中...</h1>
      </ng-container>
      <ng-template #notStarted>
        <h1>未开始</h1>
      </ng-template>
    </div>
  </ng-template>
</ion-content>