2026秋软件工程第一次个人作业

这个作业属于哪个课程	202601 软件工程
这个作业要求在哪里	作业要求
这个作业的目标	完成 GitHub 与博客园账号注册及个人主页搭建；学习调用 HuggingFace API 并结合前端实现交互式图像生成；梳理个人技能树与发展规划；体验 AI 工具在学习中的应用
GitHub 个人主页链接	Anna-khalil/Anna-khalil
学号	102401402

一、准备工作

GitHub 主页：https://github.com/Anna-khalil，已完善头像、昵称和个人资料。
博客园主页：已申请开通博客，加入班级博客「202601 软件工程」。
已关注：任课老师吴越钟博客，助教张明圣、王奇蕊博客。

二、HuggingFace API 调用与交互式图像生成

2.1 项目概述

本次作业调用 HuggingFace 上的 FLUX 系列模型（XLabs-AI/flux-RealismLora）生成写实风格图像，并在此基础上实现了一个交互式 Web 应用。与不少同学选择 Python + Flask 不同，我采用了自己更熟悉

的 Node.js 技术栈：后端用 Express 封装 API 请求，前端用原生 HTML + CSS + JavaScript 实现交互界面。

核心文件结构如下：

flux-hw/
├── node_modules/       # 依赖包
├── index.html          # 前端页面（提示词输入、参数调节、图像展示）
├── server.js           # Express 后端（代理 HuggingFace API 请求）
├── package.json        # 项目依赖配置
├── package-lock.json
└── demo.jpg            # 示例生成图

2.2 技术选型与实现思路

为什么用 Node.js？ 一方面我平时后端开发主要用 Java，对 Node.js 的事件驱动模型也有一定了解，这次正好用它做一个轻量的 API 代理服务；另一方面 Express 写起来非常简洁，几十行代码就能完成一个跨域

代理 + 静态文件服务，比搭一个 Spring Boot 项目轻量得多。

后端（server.js）核心逻辑：

使用 Express 搭建本地服务器，监听 5000 端口
提供 /generate 接口，接收前端传来的 prompt、width、height、num_inference_steps 等参数
服务端携带 HuggingFace Token 向 api-inference.huggingface.co 发起 POST 请求
将模型返回的图片二进制流转为 Base64，回传给前端展示
Token 通过环境变量读取，避免硬编码泄漏

前端（index.html）核心功能：

提示词（Prompt）文本输入框，支持多行编辑
图像尺寸调节（宽度 / 高度）
推理步数（num_inference_steps）滑块
「生成」按钮，点击后调用后端 /generate 接口
生成过程中显示 Loading 状态
生成结果实时展示在页面右侧，支持右键保存

2.3 API 调用过程

在 HuggingFace 官网注册账号，进入 Settings → Access Tokens 创建具有读取权限的 Token。
选择模型 XLabs-AI/flux-RealismLora，该模型在 FLUX 基础上加入了写实风格 LoRA，生成的人像和场景真实感较强。
本地运行 node server.js 启动服务，浏览器访问 http://127.0.0.1:5000 进入生成页面。
输入提示词、调节参数，点击生成，后端终端输出调用日志，前端展示返回的图像。

小插曲：一开始直接在前端 JavaScript 里 fetch HuggingFace API，遇到了 CORS 跨域问题，而且 Token 会暴露在前端代码里。后来改成 Express 后端代理，既解决了跨域，又把 Token 藏在了服务端，一举两得。

2.4 提示词设计与迭代过程

提示词（Prompt）是决定生成质量的关键。我以「海边日落人像」为主题，经历了三轮迭代：

第一版：简单提示词

a girl on beach

问题：过于笼统，模型无法确定年龄、种族、服装、光线、风格等关键信息。
结果：生成了一个微笑的金发白人女孩风格的女孩在海边，现实风格，质感偏高级。

第二版：增加主体与场景细节

photorealistic photo, young asian woman standing on beach at sunset, natural soft sunlight

改进：明确了主体（年轻亚洲女性）、场景（海滩日落）、风格（写实照片）、光线（柔和自然光）。
问题：缺少画质描述和摄影参数，皮肤质感、景深、细节锐度仍不够，整体还是有点"AI 感"。

第三版：完整结构化提示词（最终版）

photorealistic photo, young asian woman standing on beach at golden hour sunset,natural soft sunlight, shot on Sony A7M4, 8k, ultra detailed skin texture,
realistic shadow, depth of field, natural skin tone, lifelike real-world scene,no art illustration, high fidelity details

改进维度：

维度	内容
主体描述	young asian woman
环境场景	beach at golden hour sunset
光线氛围	natural soft sunlight, realistic shadow
画质风格	photorealistic, 8k, ultra detailed, high fidelity
技术参数	shot on Sony A7M4, depth of field
负面约束	no art illustration
细节强化	ultra detailed skin texture, natural skin tone, lifelike

结果：生成了高真实感的海边日落人像，皮肤纹理细腻，金色小时的光线自然柔和，景深效果明显，整体非常接近真实摄影作品。

关键技巧总结

越具体越好：年龄、种族、服装、表情、场景都要明确，模糊描述 = 模糊结果。
摄影术语很有用：golden hour、depth of field、shot on Sony A7M4 这类词能引导模型模仿真实摄影的质感。
画质词不能少：photorealistic、8k、ultra detailed 显著提升真实感。
负面约束有帮助：no art illustration 可以排除插画、油画等非写实风格。
迭代是王道：先生成看效果，再针对性补词，逐步逼近理想效果。

2.5 体验与心得

这次 HuggingFace API 调用实践，让我有几点挺深的体会：

1. API 调用本身不难，难的是工程化封装。 直接用 curl 或 Python requests 调一个 API 可能就几行代码，但要把它做成一个能用的 Web 应用，就得考虑跨域、Token 安全、异常处理、前端交互、用户体验……

这恰恰是软件工程的价值所在——把"能跑"变成"好用"。

2. 提示词工程是真·工程。 同一个模型，a girl 和一段结构化提示词生成的结果天差地别。提示词不是随便写写，而是需要结构化思维：主体→细节→环境→光线→构图→画质→参数，一个维度都不能少。这和我们写需求

文档其实很像——需求越清晰，实现越靠谱。

3. Node.js 做 AI 应用前端代理很合适。 轻量、异步、生态丰富，对于这种"调用第三方 API + 做个交互页面"的场景，比 Java 后端开发效率高很多。当然如果是复杂的业务逻辑和高并发场景，Java +

SpringBoot 还是我的主力。

4. AI 图像生成已经到了"人人可用"的阶段。 FLUX 模型几步推理就能生成 1024×1024 的高真实感图像，这在几年前不敢想。作为软件工程专业的学生，学会调用和集成 AI API 会越来越像"会用 Git"一样成为基础

技能。

三、GitHub 个人主页搭建

3.1 方案选择

作业提供了两种方案：

方案一：创建与用户名同名的公开仓库，编辑 README.md 作为个人主页。
方案二：使用 GitHub Pages 搭建独立个人网站。

我选择了方案一，原因是：README Profile 简洁直接，Markdown 语法就能实现丰富的排版（包括图标、进度条、技术栈徽章等），维护成本低，而且访问 GitHub 个人主页时第一眼就能看到，展示效率最高。等以后

有更多内容要展示时，再考虑用 GitHub Pages 做独立博客。

主页地址：https://github.com/Anna-khalil

四、随笔部分

点击这里可以查看我的随笔呀:)

五、总结

通过本次软件工程第一次个人作业，我完成了以下工作：

账号与环境准备：注册并完善了 GitHub 和博客园账号，开通了博客园博客，加入了班级博客，关注了任课老师和助教。
HuggingFace API 调用：学习了 HuggingFace 平台的使用，获取了 API Token，使用 Node.js + Express 搭建了后端代理服务，配合原生前端实现了交互式 FLUX 图像生成网页，掌握了结构化提示词设计方

法。

GitHub 个人主页：创建了与用户名同名的仓库，用 README 编写了内容充实的个人主页，包括自我介绍、技术栈、自我评估和未来规划。
个人梳理与规划：系统梳理了个人技能树，明确了已掌握的能力和欠缺的能力，制定了代码量目标和本学期学习计划。
AI 工具体验：使用 DeepSeek 生成了软件工程学习指南，并进行了深入分析，认识到了 AI 工具的优势和局限。

这次作业让我初步体验了"以博客园为实践平台、以 AI 工具为辅助"的学习模式。作为一个写了两年代码但工程素养还不够的后端学习者，我深刻意识到：写代码和做软件工程是两回事——代码能跑只是起点，规范的设计、

可靠的测试、完善的文档、高效的团队协作，才是软件工程的真正内涵。

在接下来的学习中，我将继续保持博客写作的习惯，积极参与课程项目，努力从"会写代码的人"成长为"会做工程的人"。

Always on the way:)

posted on 2026-09-08 22:39 Anna_2333 阅读(3) 评论(0) 收藏举报