软件工程课程第一次个人作业

软件工程第一次个人作业

项目	内容
这个作业属于哪个课程	202601 软件工程
这个作业要求在哪里	软件工程第一次个人作业
这个作业的目标	完成 GitHub、博客园等基础环境准备，尝试调用 Hugging Face API 并实现前后端交互，同时梳理目前掌握的技术和未来学习方向
学号	102401411

---

一、准备工作

1. GitHub

我的 GitHub 主页：

https://github.com/bookiii98

完成 GitHub 账号注册后，我对用户名、头像以及个人信息进行了简单完善，并通过 Profile README 搭建了自己的 GitHub 个人主页。

---

2. 博客园

按照作业要求注册博客园账号，并建立个人技术博客，用于记录软件工程课程的实践过程以及之后的学习内容。

我的博客园主页：

https://www.cnblogs.com/bookii

同时，我已经加入课程对应的博客园班级，并关注任课老师及助教。

---

二、Hugging Face API 调用

1. 实验目标

本次实验主要尝试使用 Hugging Face 提供的模型 API，根据输入的提示词生成图像。

按照作业要求，我使用的模型为：

XLabs-AI/flux-RealismLora

在完成基础 API 调用之后，我进一步使用 Flask 搭建本地 Web 服务，并编写前端页面，实现：

输入提示词 → 点击生成 → 后端调用模型 API → 返回生成结果 → 前端显示图片

通过这个过程，将单纯的 API 调用改造成一个可以实际操作的简单图片生成应用。

---

2. 实验环境

本次实验使用的主要环境如下：

• 设备：MacBook Air
• Python：3.9.6
• 后端框架：Flask
• 前端：HTML、CSS、JavaScript
• AI 平台：Hugging Face
• 模型：XLabs-AI/flux-RealismLora
• 本地运行地址：127.0.0.1:5000

首先在 Hugging Face 官网完成账号注册，然后创建个人 Access Token，用于程序访问 Hugging Face 提供的模型服务。

为了避免 Token 直接暴露在前端页面中，我将 API 调用放在 Flask 后端处理，前端只负责向自己的服务器发送用户输入的提示词。

整体调用过程如下：

用户输入 Prompt
       ↓
前端页面
       ↓
Flask 后端
       ↓
Hugging Face API
       ↓
FLUX 模型生成图像
       ↓
后端接收结果
       ↓
前端显示图片

---

3. 核心代码实现

后端主要负责接收前端发送的提示词，并向 Hugging Face 模型发送生成请求。

后端代码主要流程为：

@app.route('/generate', methods=['POST'])
def generate():
    # 获取前端传入的提示词
    prompt = request.json.get('prompt')

    # 调用 Hugging Face 模型
    # 获取生成结果

    # 将图片结果返回前端

前端则通过 JavaScript 将用户输入的提示词发送到 Flask 后端：

fetch('/generate', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        prompt: prompt
    })
})

实际程序中还加入了异常处理、图片展示以及历史记录等功能。

---

4. API 调用过程

开始时，我先编写 Python 程序直接测试 Hugging Face API，确认程序能否正常向模型发送请求。

测试过程并不是一次成功的。

其中比较明显的一个问题是：

402 Payment Required

进一步检查后发现，这是由于当前 Hugging Face 账号可使用的推理 Credits 不足导致的。

这个问题让我意识到，调用第三方 API 与单纯在本地运行程序有所不同。除了代码本身是否正确之外，还会受到账号额度、模型服务状态以及网络环境等因素影响。

在解决 API 使用问题之后，接口能够正常返回结果。

---

三、前端交互页面实现

1. 初始页面

只使用 Python 调用 API 虽然能够完成图片生成，但是操作过程并不直观。

因此我使用 Flask 搭建简单后端，并制作了一个前端页面。

页面最基本的功能包括：

• 输入图片生成提示词；
• 点击按钮发送生成请求；
• 显示当前生成状态；
• API 调用失败时显示错误信息；
• API 调用成功后展示图片。

运行 Flask 后，在浏览器访问：

http://127.0.0.1:5000

即可进入图片生成页面。

---

2. 页面功能调整

完成基础功能之后，我又根据实际使用情况对页面进行了调整。

最开始生成按钮、提示信息以及结果区域的位置比较简单，如果生成失败，错误信息并不明显，因此后续重新调整了页面布局。

之后又增加了：

• 生成图片点击放大；
• 图片保存/下载；
• 历史生成记录；
• 保存对应提示词；
• 失败状态提示。

相比最开始只能输入提示词并生成图片的页面，修改后的版本在实际使用上更加完整。

---

四、提示词设计与修改过程

本次作业要求生成一张尽可能贴近真实世界的图片。

因此在提示词设计上，我没有单纯追求“高清”“精美”等描述，而是尝试从真实摄影的角度逐步修改提示词。

1. 第一次尝试：基础场景描述

刚开始主要描述人物、环境以及基本行为。

提示词结构比较简单：

人物 + 所处场景 + 正在进行的动作

这种提示词能够让模型生成符合主题的图片，但是生成结果仍然存在比较明显的 AI 痕迹。

主要问题包括：

• 人物皮肤比较光滑；
• 光线过于理想；
• 背景虚化比较明显；
• 画面的摄影感较强，但缺少普通照片中的随机性；
• 整体有一种经过精修的感觉。

---

2. 第二次尝试：增加真实细节

第二次修改时，我开始增加对现实场景的限制，例如：

• 自然光线；
• 普通生活环境；
• 更真实的皮肤纹理；
• 自然姿态；
• 减少过强的背景虚化。

修改之后，生成结果比第一版更加自然。

但实际观察后仍然能够感觉到画面比较“完美”，人物和环境像经过刻意布置。

---

3. 第三次尝试：减少“过度精致感”

之后我发现，仅仅不断增加 photorealistic、highly detailed 等词，并不一定能够让图片更加真实。

现实中的普通照片本身并不会如此完美。

因此后续提示词开始加入一些“不完美”的元素，例如：

• 轻微运动模糊；
• 普通手机或相机拍摄感；
• 自然光照变化；
• 真实皮肤纹理；
• 避免皮肤过度光滑；
• 减少刻意的主体聚焦；
• 减少明显的背景虚化；
• 保留现实照片中的轻微瑕疵。

提示词设计思路逐渐从：

让图片更加精致

转变为：

让图片看起来更像现实中随手拍摄的照片

最终生成效果也更加符合本次作业“贴近真实世界”的要求。

最终提示词

A realistic everyday photograph of a 22-year-old Asian man sitting casually in an ordinary coffee shop. Natural daylight mixed with indoor light, with realistic light and shadow across the whole scene. Keep the person and background visually consistent and naturally clear. Do not use strong background blur or exaggerated depth of field.

The image should feel like a casual handheld photo taken in real life, with slight natural imperfections, mild camera softness, subtle sensor noise, and a very small amount of motion blur. Skin should look natural rather than overly smooth or airbrushed.

The environment should feel ordinary and lived-in, but not deliberately messy. Keep the clothing, posture, facial expression and surroundings natural and unforced.

Avoid overly polished commercial photography, beauty retouching, CGI, 3D-rendered appearance, artificial smoothness, and excessive sharpness.

The final image should look like a normal unedited real-life photograph rather than an AI-generated image.

---

五、API 调用成功结果

最终完成前后端连接后，可以直接在浏览器中输入提示词。

点击生成按钮后，前端将输入内容发送给 Flask 后端，后端继续向 Hugging Face API 发出请求。

模型生成完成之后，图片被返回并显示在前端页面中。

完整流程如下：

Prompt 输入
    ↓
前端提交
    ↓
后端处理
    ↓
API 调用
    ↓
模型生成
    ↓
图片返回
    ↓
前端展示

---

六、API 调用体验与心得

在完成这次作业之前，我对 API 的理解更多停留在概念上，知道它可以让不同程序之间进行数据交互，但是并没有完整实现过从前端到后端再到第三方服务的调用过程。

这次实验让我更加直观地理解了整个过程。

用户在网页中输入一句提示词，看起来只是点击了一次按钮，但实际上背后经过：

浏览器
→ JavaScript
→ Flask
→ Hugging Face API
→ 模型
→ Flask
→ 浏览器

实验过程中还遇到了 402 Credits、浏览器请求异常以及 API 请求成功但网页访问异常等问题。

这些问题让我发现，程序运行失败并不一定是代码本身出现错误，还可能来自：

• 网络；
• API 权限；
• 请求方式；
• 账号额度；
• 浏览器限制；
• 前后端数据传递。

另外，在提示词设计过程中，我也发现“真实”并不等于不断增加高清、专业摄影等描述。

如果画面过于完美，反而容易出现 AI 生成图片的感觉。加入自然光、真实纹理以及一些轻微的不完美元素之后，最终结果反而更加接近生活中的普通照片。

通过这次实验，我对 API、前后端交互以及 AI 模型在实际程序中的使用方式都有了更加具体的认识。

---

七、GitHub 个人主页搭建

我的 GitHub 主页：

https://github.com/bookiii98

根据作业要求，我采用 GitHub Profile README 的方式搭建个人主页。

创建了一个与 GitHub ID 相同的公开仓库 bookiii98，并在仓库根目录的 README.md 中完成个人主页内容编写。

个人主页主要包括：

• 个人介绍及兴趣；
• 已掌握的专业知识和技能；
• 专业相关实践经历；
• 当前自我评估；
• 感兴趣和希望继续学习的技术方向；
• 未来三年的学习与发展规划。

通过这次操作，我也进一步熟悉了 GitHub 中 Repository、README 和 Commit 等基础概念。

---

八、个人技能树与学习规划随笔

按照作业要求，我另外发布了一篇随笔，对目前掌握的专业知识、技术兴趣、存在的不足以及软件工程课程学习目标进行了梳理。

随笔主要包括：

• 当前技能树和技术偏好；
• 已掌握及仍然欠缺的专业能力；
• 当前代码量及课程结束时的目标代码量；
• 对软件工程课程的期待；
• 使用 AI 生成的软件工程学习指南；
• 对 AI 学习指南合理性及实际帮助的分析；
• 后续个人学习计划。

随笔地址：

软件工程课程学习规划与自我评估

---

九、博客园后台编辑截图

本次作业使用博客园 Markdown 编辑器进行编写。

---

十、总结

通过本次第一次个人作业，我完成了 GitHub、博客园以及 Hugging Face 等平台的基础配置，并实际完成了一次从 API 调用到前后端交互的实践。

在 Hugging Face 实验中，我经历了 API 配置、错误排查、Flask 后端搭建、前端页面开发以及提示词多次调整，对 API 调用和前后端数据交互有了更加直观的认识。

同时，通过 GitHub Profile README 和个人学习规划随笔，我重新梳理了目前掌握的专业知识、存在的不足以及之后的学习方向。

相比过去只关注代码是否能够运行，这次作业让我更加意识到，软件开发还包括环境配置、接口设计、问题排查、版本管理、文档记录以及不断迭代优化等过程。

希望之后能够通过软件工程课程进一步提升自己的工程实践能力和团队协作能力。