软件工程第一次作业

这个作业属于哪个课程	2026秋软件工程（202601）
这个作业要求在哪里	软件工程课程第一次个人作业
这个作业的目标	完成 GitHub、博客园与 Hugging Face 的实践准备；使用 Flux API 完成一次真实图像生成，结合前端实现交互；建立个人主页并梳理技能树。
学号	102401615

一、作业准备

• GitHub：账号为 vg666-NiKo，已完善头像、昵称和个人资料。链接：https://github.com/vg666-NiKo
• 注册并且完善了博客园账号
• 已关注吴越钟、张明圣、王奇蕊，并加入 202601 软件工程班级博客

二、Hugging Face Flux API 调用

2.1 Hugging Face 模型与 API 准备

本次作业使用 Hugging Face 平台提供的模型：

XLabs-AI/flux-RealismLora

模型地址：

XLabs-AI/flux-RealismLora

首先在 Hugging Face 官网注册个人账号，并在个人设置中创建 Access Token，用于后续程序通过 API 调用模型。

进入模型页面后，可以在右侧的 Inference Providers 区域直接输入 Prompt 对模型进行测试。确认模型能够完成文本生成图像任务后，再将模型调用过程接入自己设计的前端页面。

2.2 前后端交互设计

为了实现作业要求中的“结合前端接口，实现交互生成”，本次使用 Visual Studio 创建了一个 ASP.NET Core Web 项目。

整体调用流程如下：

用户输入 Prompt
        ↓
前端 HTML 页面
        ↓
POST /generate
        ↓
ASP.NET Core 后端
        ↓
Hugging Face API
        ↓
XLabs-AI/flux-RealismLora
        ↓
返回生成图像
        ↓
前端显示结果

2.3 前端页面实现

在项目的 wwwroot 文件夹中创建 index.html，设计了一个简单的图像生成页面。

页面包含 Prompt 输入框、“生成图片”按钮、运行状态提示以及最终生成图像的显示区域。

前端向后端发送请求的核心代码如下：

async function generateImage() {

    const prompt = document.getElementById("prompt").value;
    const status = document.getElementById("status");

    status.innerText = "正在生成图片，请稍候……";

    try {

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

        if (!response.ok) {
            throw new Error("生成失败");
        }

        const blob = await response.blob();
        const imageUrl = URL.createObjectURL(blob);

        const img = document.getElementById("resultImage");

        img.src = imageUrl;
        img.style.display = "block";

        status.innerText = "API 调用成功，图像生成完成！";

    } catch (error) {

        status.innerText = "生成失败：" + error.message;

    }
}

2.4 Hugging Face API 调用实现

后端使用 C# 的 HttpClient 向 Hugging Face API 发送请求。

首先从 Visual Studio 的 User Secrets 中读取 Hugging Face Token：

var token = configuration["HuggingFace:Token"];

if (string.IsNullOrWhiteSpace(token))
{
    return Results.Problem("hf_xxxxxVrxo");
}

然后指定本次作业使用的模型：

const string modelName = "XLabs-AI/flux-RealismLora";

在收到前端发送的 Prompt 后，后端构造请求并调用 Hugging Face 的图像生成接口：

app.MapPost("/generate", async (
    GenerateRequest request,
    IHttpClientFactory httpClientFactory,
    IConfiguration configuration) =>
{
    var token = configuration["HuggingFace:Token"];

    Console.WriteLine("开始调用 Hugging Face API");
    Console.WriteLine($"模型：XLabs-AI/flux-RealismLora");
    Console.WriteLine($"Prompt：{request.Prompt}");

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

});

为了能够清楚记录 API 调用过程，在程序中使用 Console.WriteLine() 输出模型名称、Prompt、任务状态和最终结果。

2.5 API 调用与运行结果

完成前后端代码后，在 Visual Studio 中运行 ASP.NET Core 项目。

浏览器打开本地页面后，在 Prompt 输入框中输入图像描述，然后点击“生成图片”。

后端收到请求后开始访问 Hugging Face API，并在控制台中输出调用过程。

调用成功时，可以看到类似以下信息：

开始调用 Hugging Face API

模型：XLabs-AI/flux-RealismLora

Prompt：A photorealistic university student ...

任务提交成功

当前状态：IN_PROGRESS

当前状态：COMPLETED

Hugging Face API 调用成功！

API 调用完成后，生成的图片会直接返回给前端，并显示在网页的结果区域中。

前端最终能够完成：

• 用户自行输入 Prompt
• 点击按钮发送生成请求
• 显示 API 调用状态
• 在页面中显示最终生成图像

2.6 Prompt 设计思路与修改过程

本次作业要求生成一张尽可能贴近真实世界的图像，因此在 Prompt 设计时，我主要使用现实场景、自然光照、真实人物以及摄影风格等关键词，而没有采用动漫、科幻等明显脱离真实世界的描述。

第一次测试时，我使用了较简单的 Prompt：

A realistic photo of a university student sitting in a classroom,
natural daylight, documentary photography

虽然已经能够生成较为真实的人物和场景，但是人物皮肤、光照以及环境细节仍然比较简单。

因此后续增加了更加详细的写实描述：

A photorealistic university student studying in a modern classroom,
natural daylight from the window, realistic skin texture,
casual clothes, documentary photography, natural colors

修改后的 Prompt 增加了 photorealistic、realistic skin texture、natural daylight、documentary photography 和 natural colors 等描述。
相比第一次生成结果，第二次生成图片在人物皮肤、室内光照以及整体色彩方面更加接近现实照片.

2.7 API 调用体验与心得

通过本次作业，我第一次比较完整地体验了从在线模型测试到 API 调用，再到前端交互显示的整个过程。

一开始我对 API 的理解主要停留在“向模型发送一个请求并得到结果”，实际完成作业后发现，一个能够正常使用的 AI Web 应用还涉及前端输入、HTTP 请求、后端接口、身份认证、模型调用以及结果返回等多个环节。

在实现过程中，我还遇到了 Hugging Face Inference Providers 免费额度耗尽导致 HTTP 402 PaymentRequired 的问题。通过查看后端返回的信息，可以判断问题并不是前端或 API 代码错误，而是模型推理额度不足。这也让我认识到实际调用在线 AI 服务时，还需要考虑 API 权限、调用额度和异常处理等问题。

总体来看，本次实验使我初步理解了 Web 前后端之间的交互方式，以及如何将第三方 AI 模型 API 集成到自己的应用程序中。相比直接在 Hugging Face 网页中生成图像，通过自己编写前端和后端程序进行调用，更接近实际软件应用的开发过程。

三、GitHub 个人主页创建

3.1 个人主页搭建方式

本次作业中，我选择通过 GitHub 个人资料 README 的方式搭建个人主页。

首先创建了一个与自己 GitHub 用户名相同的仓库，并在仓库根目录中创建 README.md 文件。GitHub 会自动将该 README 显示在个人主页中
个人主页包含以下内容：

我的 GitHub 个人主页地址：

• 个人身份介绍
• 掌握的技能和工具
• 正在学习的课程
• 未来的学习发展方向

点击进入我的 GitHub 主页

个人主页截图：

四、随笔提交

按照作业要求，我对目前的专业能力、技术兴趣、存在的不足以及未来的学习规划进行了梳理，并单独撰写了一篇随笔。

随笔内容主要包括：

• 对目前掌握的专业知识和技能进行自我评估
• 分析当前仍然欠缺的能力和需要进一步学习的内容
• 说明目前的代码量以及本学期结束后希望达到的代码量
• 总结本学期软件工程课程中最期待学习的知识和希望获得的收获
• 使用 AI 工具生成一份软件工程课程学习指南，并结合自身情况分析其合理性和实际帮助

随笔链接：

👉 随笔

五、博文编辑后台截图