软件工程第一次作业

第一次作业

这个作业属于哪个课程	202601 软件工程
这个作业要求在哪里	第一次作业
这个作业的目标	熟悉 GitHub、博客园和 Markdown 的使用，学习 Hugging Face API 调用，并结合前端实现图像交互生成，同时梳理自己的专业能力和学习规划
学号	162404109

前提：准备工作

本次作业开始前，我完成了 GitHub 和博客园账号的准备。

我的 GitHub 个人主页：

https://github.com/myp208116

我的博客园个人主页：

https://www.cnblogs.com/myp208116

同时完成了以下准备工作：

完善 GitHub 个人信息；
完善博客园昵称、头像等个人信息；
关注老师和助教；
加入“202601 软件工程”班级博客；
确认博客园使用实名信息；
将博客园编辑器设置为 Markdown 编辑器。

一、Hugging Face API 的调用

1. 获取 Hugging Face API

首先进入 Hugging Face 官网：

Hugging Face

注册并登录个人账号，然后进入 Access Tokens 页面创建 API Token。

API Token 用于程序调用 Hugging Face 提供的模型服务。

2. 调用 Flux 模型

本次使用的模型为：

XLabs-AI/flux-RealismLora

本次任务需要通过 Hugging Face API 调用该模型，生成一张尽可能贴近真实世界的图像，并结合前端页面实现交互生成。

3. 实现过程

本次项目使用 Node.js 编写后端程序，并使用 HTML 编写前端页面。

3.1 配置 Hugging Face Token

在 Hugging Face 的 Access Tokens 页面创建 Token，然后在项目根目录新建 .env 文件：

HF_TOKEN=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
PORT=3001

如果当前网络需要使用代理，还可以在 .env 文件中添加：

HTTPS_PROXY=http://127.0.0.1:代理端口

为了防止 Token 被上传到 GitHub，需要在 .gitignore 中忽略 .env 文件：

.env
node_modules/

后端通过 dotenv 读取 Token。Token 只保存在服务器中，不会暴露在前端页面里。

dotenv.config();

const token = process.env.HF_TOKEN?.trim();
const client = new InferenceClient(token);

3.2 编写后端程序

后端使用 Express 创建本地服务器，并通过 @huggingface/inference 调用 XLabs-AI/flux-RealismLora 模型。

下面是模型调用接口的核心代码：

const MODEL = "XLabs-AI/flux-RealismLora";
const PROVIDER = "fal-ai";

app.post("/api/generate", async (req, res) => {
    const prompt = req.body?.prompt;

    try {
        const imageBlob = await client.textToImage({
            provider: PROVIDER,
            model: MODEL,
            inputs: prompt.trim()
        }, {
            outputType: "blob"
        });

        const buffer = Buffer.from(await imageBlob.arrayBuffer());

        res.json({
            success: true,
            image: `data:${imageBlob.type};base64,${buffer.toString("base64")}`
        });
    } catch (error) {
        res.status(502).json({
            success: false,
            error: "图片生成失败，请稍后重试"
        });
    }
});

后端接收前端提交的提示词，然后调用 FLUX 模型。模型返回图像二进制数据后，程序将其转换为 Base64 格式，并通过 JSON 返回给前端。

服务器通过下面的代码启动：

const port = Number(process.env.PORT || 3001);

app.listen(port, "127.0.0.1", () => {
    console.log(`服务器已启动：http://localhost:${port}`);
});

3.3 编写前端页面

前端页面主要包含提示词输入框、生成按钮、状态提示和图片展示区域。

核心 HTML 结构如下：

<textarea id="prompt" placeholder="请输入图像提示词"></textarea>
<button id="generateButton">Generate with FLUX</button>
<div id="status">System Ready</div>
<img id="result" alt="FLUX generated image">

用户点击按钮后，前端通过 fetch 将提示词发送到后端。收到返回结果后，把 Base64 图片数据设置为图片的 src。

button.addEventListener("click", async () => {
    const prompt = promptInput.value.trim();

    button.disabled = true;
    statusText.textContent = "正在生成图像，请稍候……";

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

        const data = await response.json();

        if (!response.ok) {
            throw new Error(data.error);
        }

        resultImage.src = data.image;
        resultImage.style.display = "block";
        statusText.textContent = "图片生成成功";
    } catch (error) {
        statusText.textContent = `生成失败：${error.message}`;
    } finally {
        button.disabled = false;
    }
});

至此，项目完成了“输入提示词—后端调用模型—返回图像数据—前端展示图片”的完整交互流程。

API 调用成功记录

4. 提示词设计和修改过程

为了使生成结果更加贴近真实世界，我对提示词进行了多次修改。

第一次提示词

A young man walking on a city street

第一次主要描述需要生成的人物或场景，但生成结果在真实感和细节方面还有不足。

第二次提示词

A young man walking on a modern city street, realistic photography, natural lighting, detailed face, urban background

第二次在原来的基础上增加了环境、光线以及画面细节等描述，使模型能够更加准确地理解生成要求。

最终提示词

A realistic street photograph of a young man walking through a modern city, natural sunlight, realistic skin texture, detailed urban background, 35mm photography, shallow depth of field, photorealistic, highly detailed

最后进一步增加了真实摄影、光线、场景和细节方面的描述，使图片效果更加接近真实世界。

最终生成结果

5. API 调用体验和心得

通过本次作业，我体验了从 Hugging Face 获取 API，到编写后端程序、前端页面，再到最终调用 Flux 模型生成图片的完整过程。

在实际调用过程中，我发现 API 调用不仅涉及模型本身，还涉及前后端之间的数据传递、网络请求以及程序调试。

实验过程中也遇到过连接失败、请求超时等问题。通过查看终端报错信息、检查网络和代码，逐步排查问题。

同时，通过修改提示词，我发现提示词越具体，模型生成的结果通常越符合预期。生成真实图片时，可以增加光线、环境、细节和摄影效果等描述。

通过本次实验，我对 API 调用以及前端、后端和人工智能模型之间的交互过程有了更直观的认识。

二、GitHub 个人主页搭建

本次选择老师提供的第一种方案：创建一个名称与 GitHub ID 相同的仓库，并通过根目录中的 README.md 完成个人主页建设。

GitHub 个人主页：