软件工程第一次作业

这个作业属于哪个课程	2026秋软件工程（202601）
这个作业要求在哪里	软件工程课程第一次个人作业
这个作业的目标	完成个人技术账号准备，调用 Hugging Face API 使用 Flux 模型生成写实图像，结合前端实现交互，并搭建 GitHub 个人主页，梳理自己的技能树和学习计划。
学号	102401608

软件工程第一次个人作业

一、作业准备

本次作业使用了 GitHub、博客园和 Hugging Face 三个平台。

我已经完成了以下准备工作：

注册并完善了 GitHub 账号，用户名为 wizneko，链接 https://github.com/wizneko ；
建立了 GitHub 个人资料 README；
注册并完善了博客园账号；
加入了软件工程课程班级博客；
关注了两位助教；

二、Hugging Face API 调用

2.1 使用的模型

本次使用的模型为：

XLabs-AI/flux-RealismLora

模型地址：

XLabs-AI/flux-RealismLora

该模型适合生成具有真实摄影效果的图像，因此我选择了苏州江南水乡作为生成主题。

2.2 API Token 配置

在 Hugging Face 个人设置中创建 API Token 后，我没有直接把 Token 写入 Python 代码，而是使用 .env 文件保存。

.env 文件的格式如下：

HF_TOKEN=hf_我的Token
HTTP_PROXY=http://127.0.0.1:7890
HTTPS_PROXY=http://127.0.0.1:7890

2.3 API 调用代码

独立测试 API 调用的主要代码如下：

import os
from datetime import datetime

from dotenv import load_dotenv
from huggingface_hub import InferenceClient

load_dotenv()

token = os.getenv("HF_TOKEN")

if not token:
    raise RuntimeError("没有找到 HF_TOKEN，请检查 .env 文件")

client = InferenceClient(
    api_key=token,
    timeout=180,
)

model = "XLabs-AI/flux-RealismLora"

prompt = (
    "A photorealistic view of Pingjiang Road in Suzhou at sunset, "
    "traditional Chinese architecture, a stone bridge over flowing water, "
    "people walking naturally, warm sunlight, documentary photography, "
    "35mm lens, realistic details, natural colors"
)

print("开始调用 Hugging Face API...")
print(f"模型：{model}")
print(f"提示词：{prompt}")

image = client.text_to_image(
    prompt=prompt,
    model=model,
)

image.save("api_test.png")

print("API 调用成功")
print("图片已保存：api_test.png")
print(f"完成时间：{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")

调用模型的核心代码是：

image = client.text_to_image(
    prompt=prompt,
    model=model,
)

该代码向指定模型发送提示词，并返回生成的图像。

2.4 API 调用步骤

具体操作步骤如下：

登录 Hugging Face 官网；
进入个人设置页面；
创建 API Token；
在 PyCharm 中创建 Python 项目；
安装 huggingface_hub、python-dotenv、Pillow 和 Flask；
在项目根目录创建 .env 文件；
将 Token 保存在 .env 中；
编写 API 调用代码；
在 PyCharm 中运行 Python 程序；
查看控制台输出和生成的图片文件。

PyCharm 控制台显示了 Flask 服务启动信息，说明后端服务已经成功运行。

图1：PyCharm 中运行 Flask 后端的截图

![图1：PyCharm 中运行 Flask 后端]

三、前端交互功能实现

3.1 前后端工作流程

本项目采用 Flask 作为后端服务器，前端页面使用 HTML、CSS 和 JavaScript 实现。

整体流程如下：

用户在网页输入提示词
        ↓
点击“生成图片”按钮
        ↓
前端向 Flask 后端发送请求
        ↓
Flask 后端读取 .env 中的 Token
        ↓
调用 Hugging Face Flux 模型
        ↓
保存生成的图片
        ↓
将图片地址返回前端
        ↓
网页显示生成结果

3.2 后端接口

后端提供了 /api/generate 接口，接收前端发送的提示词：

@app.post("/api/generate")
def generate_image():
    data = request.get_json(silent=True) or {}
    prompt = (data.get("prompt") or "").strip()

    if not prompt:
        return jsonify({"error": "请输入提示词"}), 400

    try:
        print(f"收到生成请求，提示词：{prompt}")

        image = client.text_to_image(
            prompt=prompt,
            model=MODEL,
        )

        filename = f"{uuid.uuid4().hex}.png"
        filepath = os.path.join(OUTPUT_DIR, filename)
        image.save(filepath)

        print(f"API 调用成功，图片保存为：{filepath}")

        return jsonify({
            "success": True,
            "prompt": prompt,
            "image_url": f"/generated/{filename}",
        })

    except Exception as error:
        print("API 调用失败：", repr(error))
        return jsonify({
            "success": False,
            "error": f"{type(error).__name__}: {error}",
        }), 500

前端通过 JavaScript 的 fetch 方法调用后端接口：

const response = await fetch("/api/generate", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ prompt })
});

const result = await response.json();

if (result.success) {
    resultImage.src = result.image_url;
    status.textContent = "生成成功";
}

因此，用户可以直接在网页中修改提示词并生成图片，满足了“结合前端接口，实现交互生成”的要求。

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

本次图像主题为“苏州江南水乡”。我希望生成的图像具有真实摄影效果，因此提示词主要从场景、建筑、光线、人物和摄影风格几个方面进行设计。

4.1 第一次提示词

A photorealistic view of a Jiangnan water town in Suzhou, China, with a narrow canal, traditional white-walled houses, dark tiled roofs, and a small stone bridge, natural daylight, realistic colors, documentary photography, highly detailed, no text, no watermark

中文含义：

一张写实风格的中国苏州江南水乡照片，画面中有狭窄的河道、白墙黑瓦的传统房屋和一座小石桥，使用自然日光，色彩真实，具有纪实摄影效果，细节丰富，不包含文字和水印。

第一次主要确定了以下内容：

地点：苏州江南水乡；
主体：河道、白墙黑瓦建筑和石桥；
风格：写实摄影；
约束：不包含文字和水印。

第一次生成结果整体结构清晰，画面包含了江南水乡的主要元素。

图2：第一次提示词和生成结果

![图2：第一次生成结果]

4.2 第二次提示词

A photorealistic view of a Jiangnan water town in Suzhou, China, with a narrow canal, traditional white-walled houses, dark tiled roofs, and a small stone bridge. A few local residents are walking beside the canal, one person is rowing a small wooden boat, soft morning sunlight, gentle reflections on the water, documentary photography, realistic colors, highly detailed, no text, no watermark

第二次在第一次的基础上增加了：

河道旁行走的居民；
划船的人；
木船；
水面倒影；
清晨光线。

加入人物和木船后，画面具有了更多生活气息，不再只是单纯的建筑风景。

图3：第二次提示词和生成结果

![图3：第二次生成结果]

4.3 两次结果对比

第一次生成结果更加突出建筑、河道和石桥，画面比较整洁，适合表现江南水乡的整体环境。

第二次增加了居民和木船，画面内容更加丰富，也更接近日常旅游照片。不过，生成模型有时会对光线和人物进行艺术化处理，因此第二次提示词仍然保留了 photorealistic、documentary photography 和 realistic colors 等关键词，以尽量保持真实感。

本次共完成了两次前端交互生成。由于 Hugging Face 推理额度有限，后续生成请求受到额度限制，因此没有继续消耗 Token。

五、项目运行结果

项目启动后，在浏览器访问：

http://127.0.0.1:5000

网页中包含：

提示词输入框；
“生成图片”按钮；
“填入示例”按钮；
生成状态提示；
图像结果显示区域。

用户修改提示词后，可以直接点击按钮生成新图片，生成的图片会保存在项目的 generated 文件夹中。

这说明本项目已经实现了从前端输入到后端调用，再到前端显示结果的完整流程。

六、GitHub 个人主页建设

本次作业采用了 GitHub 个人资料 README 方案。

我的 GitHub 用户名为：

wizneko

我创建了与用户名相同的仓库，并在仓库根目录的 README.md 文件中进行了个人介绍。

个人主页包含以下内容：

个人身份介绍；
兴趣爱好；
已学习的专业课程；
掌握的编程语言和基础知识；
数学建模经历；
AI 辅助开发经历；
正在进行的个人项目；
未来学习和发展方向。

目前个人主页中展示的项目包括一个正在开发的国际象棋游戏项目。通过搭建 GitHub 个人主页，我进一步了解了 GitHub Profile README 的使用方式，也认识到个人主页可以作为展示学习经历和项目成果的窗口。

图4：GitHub 个人主页截图

![图4：GitHub 个人主页]

七、博客园随笔提交

关于当前技能树、技术偏好、自我评估、代码量、课程期待以及 AI 生成的软件工程学习指南等内容，我已经单独发布在博客园随笔中。

博客园随笔链接及截图如下：

我的技能现状与软件工程学习计划

后台博文编辑页面的截图如下：

posted @ 2026-09-10 01:35 Wizneko 阅读(33) 评论(0) 收藏举报

刷新页面返回顶部