1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- <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>
|