page-createpic.component.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <ion-header [translucent]="true">
  2. <ion-toolbar color="primary">
  3. <ion-title>
  4. 古诗云想 | 图片生成进度: {{imagineWork?.progress || 0}}%
  5. </ion-title>
  6. </ion-toolbar>
  7. </ion-header>
  8. <ion-content [fullscreen]="true" style="background-color: #f9f9f9; padding: 16px;">
  9. <!-- 生成提示词 -->
  10. <h2 style="text-align: center; color: #5a5a5a;">请输入您的古诗</h2>
  11. <ion-textarea
  12. [value]="userPrompt"
  13. (ionInput)="promptInput($event)"
  14. placeholder="在此输入您想要的古诗..."
  15. autoGrow="true"
  16. style="background-color: white; color: black; border-radius: 8px; margin-bottom: 16px;"
  17. ></ion-textarea>
  18. <ion-button (click)="createImage()" expand="full" color="secondary">生成图片</ion-button>
  19. <!-- 诗歌分析结果 -->
  20. <div *ngIf="responseMsg" style="margin-top: 20px; padding: 10px; background: #e6f7ff; border-radius: 5px;">
  21. <h3 style="color: #007bff;">诗歌分析结果:</h3>
  22. <p>{{ responseMsg }}</p>
  23. </div>
  24. <!-- 生成结果 -->
  25. <div *ngIf="images.length; else noImages">
  26. <h2 style="text-align: center; color: #5a5a5a;">生成的图片</h2>
  27. <div style="display: flex; flex-wrap: wrap; justify-content: center;">
  28. <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);">
  29. </div>
  30. </div>
  31. <!-- 生成状态 -->
  32. <ng-template #noImages>
  33. <div style="text-align: center; margin-top: 20px;">
  34. <ng-container *ngIf="imagineWork; else notStarted">
  35. <h1>生成中...</h1>
  36. </ng-container>
  37. <ng-template #notStarted>
  38. <h1>未开始</h1>
  39. </ng-template>
  40. </div>
  41. </ng-template>
  42. </ion-content>