| 模块 | 说明 | 截图内容建议 |
| ----------------------- | ----------------------------------- | ------------------------------------------ |
| ✅ EC2 实例运行截图 | 展示实例在运行 | EC2 控制台 → Instances 页面 |
| ✅ Auto Scaling 扩缩截图 | 实例增加 / 减少的过程 | EC2 控制台 + CloudWatch 图 |
| ✅ ALB 配置截图 | 包括 Target Group 健康状态 | Load Balancer + Target Group 页面 |
| ✅ RDS 数据截图 | 展示写入的记录 | RDS 控制台 + 数据库客户端（DBeaver / CLI） |
| ✅ S3 上传与缩略图截图 | 展示图片和 thumbnails/ 中的文件 | S3 控制台 |
| ✅ Lambda 执行截图 | CloudWatch 日志或 Lambda 控制台状态 | Lambda 控制台 + CloudWatch Logs |
| ✅ 页面功能截图 | 上传图片、查看图片和描述 | 浏览器界面截屏 |
| ✅ 架构图截图 | draw.io 中导出的 PNG | 插入报告中 |


**Figure 1: EC2 Instances in AWS Console**
This screenshot shows the EC2 instances launched in the `us-east-1a` availability zone. Two instances named `flask-autoscale-instance` are currently in `Running` state, indicating that the Auto Scaling Group has successfully launched and maintained healthy instances. The configuration supports high availability and load balancing via an attached Application Load Balancer (ALB).


**Figure X: Auto Scaling Group Activity Log**
This screenshot shows the activity history of the Auto Scaling Group `flask-asg-v13`. It confirms that the group successfully launched and terminated EC2 instances based on health check failures and scaling policies. The logged timestamps and instance IDs provide evidence of dynamic scaling events, validating the Auto Scaling configuration and operational correctness.



> **Figure X: Application Load Balancer Configuration**
> This screenshot shows the configuration of the Application Load Balancer (`flask-alb`). It is configured as an internet-facing ALB, listening on port 80 and forwarding traffic to the `flask-target-group`.

> **Figure Y: Target Group Health Status**
> This screenshot confirms that the Target Group (`flask-target-group`) is correctly forwarding traffic to the registered EC2 instance (`i-00bf0cd69f1fc2828`) on port 8080, with health status marked as `Healthy`.



> **Figure X: RDS Instance Configuration**
> This screenshot shows the RDS MySQL database instance (`comp5349-db`) in the AWS Console. It is configured to be publicly accessible with endpoint and port information, allowing external applications to connect securely. The instance is in `Available` state and has been correctly deployed in the `us-east-1a` availability zone.

> **Figure Y: Query Results from RDS Table `images`**
> This screenshot confirms a successful connection to the RDS instance and execution of a `SELECT * FROM images` query. The table contains real entries including image filenames, S3 storage URLs, and AI-generated image captions, proving that the Flask application has successfully written data to the database.



> **Figure X: S3 Uploads Folder**
> This screenshot shows the uploaded original image files stored in the S3 bucket `comp5349-img-bucket-syao`, under the `uploads/` directory. The files are in `.png` and `.jpg` format, with sizes ranging from 1.3MB to 6MB, confirming successful image uploads from the Flask web application.

> **Figure Y: S3 Thumbnails Folder**
> This screenshot confirms that thumbnail images have been automatically generated and saved under the `thumbnails/` directory. Each thumbnail corresponds to an uploaded image, with significantly reduced file sizes (~30KB), demonstrating correct backend processing for image resizing.







> **Figure X: Lambda Function Configuration**
> This screenshot shows the AWS Lambda function `thumbnail_generator2`, which is triggered by S3 uploads to the `comp5349-img-bucket-syao` bucket. The function uses Python 3.9 and includes custom environment variables for database and API access.

> **Figure Y: Lambda Execution Logs in CloudWatch**
> This screenshot displays the CloudWatch execution log of the Lambda function. It confirms that the function downloaded an image, generated a thumbnail, uploaded it to the `thumbnails/` folder in S3, called the Gemini API to generate a caption, and successfully wrote the result to the RDS database.



> **Figure X: Web Application Image Upload Interface**
> This screenshot shows the user interface of the image captioning web application. Users can upload images using the file selector and `Upload` button. Uploaded images are displayed below with their filenames, automatically generated captions using Gemini API, and a link to view the original image stored in S3.

> **Figure Y: Viewing Uploaded Image from S3**
> This screenshot demonstrates that the uploaded image can be accessed using a public URL from the S3 bucket. The image is displayed in full resolution in a new browser tab, confirming successful upload and storage in S3.

### Figure 1: Web Application Architecture

```mermaid
flowchart TD
User["User Browser"] --> ALB["Application Load Balancer (flask-alb)"]

subgraph "Public Subnet (us-east-1a)"
ALB --> EC2A["EC2 Instance A (flask-autoscale-instance)"]
ALB --> EC2B["EC2 Instance B (flask-autoscale-instance)"]
end

subgraph "Auto Scaling Group (flask-asg-v13)"
EC2A & EC2B
end

EC2A --> S3["S3 Bucket: comp5349-img-bucket-syao (uploads/)"]
EC2B --> S3

EC2A --> RDS["RDS MySQL (comp5349-db) - DB: imageapp"]
EC2B --> RDS
```

### Figure 2: Serverless Architecture

```mermaid
flowchart TD
Upload["S3 Bucket: comp5349-img-bucket-syao (uploads/)"] --> LambdaThumb["Lambda: thumbnail_generator2"]
LambdaThumb --> ThumbS3["S3 Bucket: comp5349-img-bucket-syao (thumbnails/)"]

Upload --> LambdaCaption["Lambda: caption_lambda"]
LambdaCaption --> Gemini["Gemini API (image captioning)"]
Gemini --> RDS["RDS MySQL (comp5349-db). Table: images"]
```