软件工程第一次个人作业

项目	内容
这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/202601SofwareEngineering
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/202601SofwareEngineering/homework/15712
这个作业的目标	通过 Hugging Face API 调用与前端交互，初步了解接口调用流程；搭建 GitHub 个人主页并梳理个人学习规划。
学号	102401505

一、准备工作

• GitHub 用户名：StarrLin7；博客园用户名：StarrLin。
• Hugging Face Token 仅保存在本机 .env，不写入代码或博客。
• 已加入 202601 软件工程班级，并关注老师和助教。

二、Hugging Face API 调用与前端交互

技术方案与步骤

项目使用 Python、Flask、huggingface_hub 与原生 HTML/CSS/JavaScript。浏览器把提示词发送到 Flask 后端，后端从本机 .env 读取 Token，调用指定模型 XLabs-AI/flux-RealismLora，再把图片返回页面展示，因此 Token 不会暴露给浏览器。

1. 创建具备 Inference Providers 调用权限的 Token。
2. 使用 test_api.py 验证最小调用。
3. 编写 Flask 的 /api/generate 接口，接收正向和负面提示词。
4. 编写前端输入框、生成按钮、状态提示和图片展示区。
5. 浏览器访问 http://127.0.0.1:5001 完成交互生成。

项目文件包括 app.py、test_api.py、templates/index.html、generated、.env 和 .gitignore。

成功记录与最终生成图

最小 API 验证成功，终端输出为 SUCCESS: generated/api-test.png，说明指定模型能通过当前 Token 与 Provider 返回图片。网页端也成功完成了一次交互生成，并显示模型名、提示词、成功状态和已保存的图片文件名。

接口最小验证得到的图像：

网页端交互成功后得到的最终生成图：

前端页面最终生成图像截图

为避免免费额度耗尽后继续发起请求，页面展示的是此前实际成功的网页端生成结果。

提示词设计与修改过程

• V1：Fuzhou University campus bicycle parking area at night。只给出主体、地点和时间，语义较宽泛。
• V2：加入雨后、傍晚、街灯、湿地反光，补充环境和光线，使画面有明确氛围。
• V3：加入 photorealistic、35mm 摄影、真实材质和高细节要求。实际成功调用使用该版本，突出贴近真实世界的效果。

体验与心得

实际调用先遇到 Token 缺少 Inference Providers 权限的 403 响应；修正权限后成功生成图片。后续测试提示词时又遇到免费额度耗尽的 402 响应，因此没有继续触发可能的收费请求，并在前端增加了额度不足的友好提示。这让我认识到模型调用还要关注权限、额度、Provider 可用性、网络状态和错误处理。

三、GitHub 个人主页

主页： https://github.com/StarrLin7 。个人 README 已包含自我介绍、技能、自我评估、课程学习计划、当前约 3000 行的有效手写代码量、本学期累计达到 5000 行的目标，以及未来三年以考研为主的规划。

GitHub 个人主页截图：

四、个人随笔

随笔链接：https://www.cnblogs.com/StarrLin/p/22935244

随笔梳理了当前技能树、技术偏好与欠缺能力，并明确了代码量目标。文中标明并分析了 AI 辅助生成的 12 周软件工程学习指南。

五、Markdown 编辑后台截图

本文使用博客园 Markdown 编辑器完成；下面是实际编辑后台截图。

六、总结

通过本次作业，我完成了个人开发平台的准备，并体验了从 Token 配置、API 验证到前端交互的完整小型开发流程。接下来希望结合课程项目继续练习需求分析、系统设计、测试、维护和项目管理。