软件工程实践第一次作业
软件工程实践第一次作业
| 这个作业属于哪个课程 | H202601软件工程与软件工程实践 |
|---|---|
| 这个作业要求在哪里 | 2026秋软件工程第一次作业 |
| 这个作业的目标 | 完成 Hugging Face API 调用与前端交互，建设 GitHub 个人主页，同时梳理自己的学习基础和后续目标 |
| 学号 | 032401339 |
一、Hugging Face API 调用
1. 创建账号和 Access Token
我先在 Hugging Face 注册了个人账号，然后在设置中的 Access Tokens 页面创建了一个用于模型推理的 Token。Token 类型选择 Fine-grained，Presets 选择 Inference。这样既可以调用推理服务，又不会开放修改仓库等与本次作业无关的权限。
图1：创建 Token 时选择 Inference 权限。为了防止账号信息泄露，截图和代码中都没有展示完整 Token。
实际开发时，我把 Token 保存在项目根目录的 .env 文件里，并将 .env 加入 .gitignore，没有把它直接写在前端代码中。
2. 获取模型访问权限
本次使用的模型是 XLabs-AI/flux-RealismLora。它是在 FLUX.1-dev 基础上训练的写实风格 LoRA，因此我还进入了 FLUX.1-dev 页面申请访问权限。页面显示已经获得访问许可后，才能继续进行测试和接口调用。
图2：FLUX.1-dev 页面显示已经获得模型访问权限。
3. 在模型页面进行第一次测试
在写代码之前，我先在 Hugging Face 模型页面输入提示词并点击 Generate。模型成功生成了一张大学生在图书馆学习的图片，这一步说明账号权限、模型和提示词基本可用。
图3：在模型页面使用提示词生成图片，生成过程大约用了十几秒。
4. 搭建本地项目（以下的代码均由chatgpt给出，我敲不出来啊=v=）
我使用 Node.js 和 Express 搭建本地服务器，并安装了 express、dotenv 和 @huggingface/inference：
npm install express dotenv @huggingface/inference
其中，Express 负责接收前端请求，dotenv 用来读取 .env 中的 Token，@huggingface/inference 用来调用 Hugging Face 的模型接口。
图4：项目依赖安装成功，共安装 72 个包，检查结果为 0 个漏洞。
项目主要包含以下文件：
software-engineering-flux
├─ public
│ ├─ index.html
│ ├─ style.css
│ └─ app.js
├─ .env
├─ .gitignore
├─ package.json
└─ server.js
5. 后端调用模型（嘿嘿gpt给的代码）
后端通过 process.env.HF_TOKEN 读取 Token，再调用 textToImage 方法。使用的模型为 XLabs-AI/flux-RealismLora，服务商为 fal-ai，图片尺寸设置为 768×768。
核心代码如下：
import express from "express";
import dotenv from "dotenv";
import { InferenceClient } from "@huggingface/inference";
dotenv.config();
const app = express();
const client = new InferenceClient(process.env.HF_TOKEN);
app.post("/api/generate", async (req, res) => {
const prompt = String(req.body?.prompt ?? "").trim();
const imageBlob = await client.textToImage({
provider: "fal-ai",
model: "XLabs-AI/flux-RealismLora",
inputs: prompt,
parameters: {
width: 768,
height: 768,
num_inference_steps: 28,
guidance_scale: 3.5
}
});
const imageBuffer = Buffer.from(await imageBlob.arrayBuffer());
res.setHeader("Content-Type", imageBlob.type || "image/png");
res.send(imageBuffer);
});
图5：server.js 中读取环境变量、接收提示词并调用 FLUX 模型的代码。截图没有包含真实 Token。
6. 实现前端交互（）（嘿嘿还是gpt给的代码）
前端页面提供一个提示词输入框和“生成写实图像”按钮。用户提交后，app.js 会向 /api/generate 发送 POST 请求。后端返回图片数据后，前端把数据转换成可显示的临时地址，并显示图片和下载按钮。
const response = await fetch("/api/generate", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ prompt })
});
const imageBlob = await response.blob();
currentImageUrl = URL.createObjectURL(imageBlob);
generatedImage.src = currentImageUrl;
generatedImage.hidden = false;
图6：前端通过 fetch 向后端发送提示词，并接收、显示后端返回的图片。
整个调用过程可以概括为：用户输入提示词，前端把提示词发送到本地服务器，本地服务器携带 Token 调用 Hugging Face API，模型生成图片，最后由前端显示结果。把 Token 放在后端，也避免了浏览器直接暴露 Token。
7. 调用结果
启动服务器后，我在浏览器访问 http://localhost:3000，输入提示词并点击生成按钮。终端最终显示“API 调用成功”，本次生成耗时约 12.9 秒，返回图片大小为 186825 字节。
图7：终端显示模型名称、服务商、提示词、生成耗时和图片大小，可以证明接口已经由本地程序成功调用。
前端页面也成功显示了生成结果，并提供了下载按钮：
图8：本地前端页面显示生成图片，页面下方提示生成成功，用时 12.9 秒。
下载后的原始图片如下：
图9：FLUX 模型最终生成的 768×768 写实图片。
8. 提示词设计和修改过程
最终使用的提示词是：
A candid documentary photograph of a Chinese university student studying alone in a quiet campus library at dusk, handwritten notes and an open laptop on a slightly worn wooden desk, soft warm window light mixed with cool indoor light, natural skin texture, subtle facial imperfections, realistic fabric folds, shallow depth of field, photographed with a 50mm lens, true-to-life colors, unretouched photo, no text, no watermark
我没有一开始就写出这么长的提示词，而是逐步补充的。
最初我只写了“一名大学生在图书馆学习”，生成结果虽然有基本的人物和环境，但画面比较普通，细节也不够明确。之后我加入了“中国大学生”“安静的校园图书馆”“傍晚”“手写笔记”“打开的笔记本电脑”等内容，让人物身份和场景更具体。
为了让画面更像真实照片，在AI的建议下，我又加入了 candid documentary photograph、natural skin texture、realistic fabric folds 和 unretouched photo。光线方面加入窗外暖光和室内冷光，摄影方面加入 50mm 镜头和浅景深。最后添加 no text, no watermark，尽量减少图片中的乱码和水印。
修改后，人物、书本、桌面和图书馆背景都比较完整，光线也有明显的冷暖层次。虽然仔细看仍然能够发现一些 AI 图片的特点，但整体已经比较接近真实摄影效果。
9. 遇到的问题和体会
我自己的代码能力确实远远不足以支撑我自己独立完成一个项目，像那些前端后端的代码我是完全不会也完全看不懂的，现在AI确实很厉害，在AI的帮助下我可以完成我能力之外的东西，我觉得还是得学会如何好好利用AI，以及学会如何可以让AI充分发挥AI自己的本事来帮助我们完成任务，但是同时也应该学会辨别AI给的东西是否正确，是否有误，如何和AI正确交流让AI可以读懂我们想做什么
二、GitHub 个人主页搭建
GitHub 个人主页部分，我选择了个人资料 README 方案。我创建了一个与 GitHub 用户名相同的公开仓库 2074599796-cpu/2074599796-cpu，并在仓库根目录编辑 README.md。提交后，README 会自动显示在个人主页中。
我的个人主页地址：https://github.com/2074599796-cpu
主页中包含了个人介绍、兴趣方向、项目实践、自我评估和未来三年规划。
图10：完成后的 GitHub 个人主页，页面包含个人介绍、FLUX 项目、自我评估和未来三年规划。
三、目前的技能树和技术偏好
我是计算机科学与技术专业的大三学生。
1. 目前具备的能力
- 编程基础：学习过C语言和python，能够完成基础语法练习和部分课程作业，对变量、循环、函数、数组等知识有基本认识。
- API 调用：通过本次作业，了解了 Token、请求参数、响应结果和环境变量的作用，能够在指导和文档帮助下完成一次 API 接入。
- GitHub 和 Markdown：能够创建仓库、编辑 README，掌握 Markdown 的标题、列表、链接、图片和代码块等常用语法。
- 查找资料和解决问题：遇到报错时，能够通过报错信息、搜索资料和 AI 工具寻找解决思路，并尝试验证。
2. 技术偏好
目前我对人工智能应用和 Web 开发比较感兴趣。相比只在网页里使用现成的 AI 工具，我更想了解怎样通过接口把模型能力接入自己的程序。本次 FLUX 项目虽然比较简单，但让我第一次看到了前端、后端和模型接口连接起来后的完整效果。
3. 目前欠缺的能力
- 独立完成项目的能力还不够：面对稍微完整一些的项目时，大部分都需要AI的帮助。
- 代码能力薄弱：我目前的代码完全没法用于现实需要的任务
- 调试能力需要提高：遇到问题，靠自己找出问题所在的效率低下。
- 后端和数据库基础不足：后端什么的我都不了解
- 英文文档阅读速度较慢：英语能力太差了，不是很能看懂那些英文网页
四、代码量和本学期目标
截至目前，我觉得我的代码量并不多，真的就是很一般的水平，我希望这学期我可以多进行代码练习，提升自己的代码水平，希望尽早可以达到可以通过考研机试的水平。
五、对软件工程课程的期待
之前确实也听说了这个课作业很麻烦啊，确实麻烦啊，=-=。
期待：我觉得我完成这个作业更多是在AI帮助下完成的，感觉好像上课也都不会教这些东西，更多的都是AI教的，但是这些作业确实也是挺有用的，确实是在现在社会能用上的东西，我也希望可以在课上多教一点这些切实有用的东西，希望我经过这门课程可以更加了解API调用和github的使用
六、AI 生成的软件工程课程学习指南
我选择的 AI 工具是 ChatGPT。我向它提出的问题是：
请为一名计算机科学与技术专业的大三学生生成一份简要的软件工程课程学习指南。
ChatGPT 给出的指南如下：
- 巩固编程基础：选择一门主要编程语言继续练习，掌握函数、面向对象、异常处理、数据结构和文件操作。
- 了解开发流程：学习需求分析、系统设计、编码、测试、部署和维护的基本过程，完成项目时保留各阶段记录。
- 学习版本控制：掌握 Git 的提交、分支、合并和冲突处理，并尝试使用 GitHub Issue 和 Pull Request 协作。
- 重视团队沟通：开发前明确分工、完成时间和接口约定，开发过程中及时同步进度和问题。
- 培养测试意识：同时考虑正常输入和异常输入，修改功能后检查是否影响原有功能。
- 做好阶段总结：记录遇到的问题、解决方法和不足，为后续复习和项目展示保留材料。
- 合理使用 AI：可以让 AI 帮助解释概念、分析报错和提供思路，但要检查生成内容，并确保自己理解代码。
对这份指南的分析
给的东西应该确实也没什么问题，不过这份指南也比较概括，没有说明应该花多少时间、需要完成多少练习，也没有根据我的基础指出学习顺序。感觉就是它只是一个任务清单，而不是可以直接照着执行的学习计划。
AI 工具确实能够提高查资料和排查问题的效率，但这次作业也让我发现，如果只是复制 AI 给出的步骤，遇到新的报错时还是容易卡住。比较合适的方法应该是先理解问题，再让 AI 提供思路，最后自己运行和验证结果。
七、总结
这次作业的内容比较多，中间也遇到了 Node.js 安装、PowerShell 执行策略、模型权限和网络代理等问题。整个过程并不是一次顺利完成的，但这些问题让我对 API 调用的实际过程有了更具体的认识。
最终，我完成了 Hugging Face 模型调用、前端交互页面和 GitHub 个人主页。更重要的是，我对自己目前会什么、不会什么有了比较明确的判断。接下来我希望通过课程作业逐渐提高独立编程、调试和团队协作能力，而不是只停留在“跟着步骤把程序运行起来”。
八、博客后台编辑记录
本篇随笔使用博客园 Markdown 编辑器完成。
（文章粘贴并上传图片后，在这里插入博客园后台 Markdown 编辑页面截图）
浙公网安备 33010602011771号