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

软件工程第一次个人作业 - 最终报告

这个作业属于哪个课程 202601 软件工程
这个作业要求在哪里 软件工程第一次个人作业
这个作业的目标 完成课程相关账号注册配置；完成 HuggingFace API 调用并实现简单前端交互；搭建 GitHub 个人主页；明确本课程学习提升目标
学号 102401416

一、准备工作

按照作业要求完成以下账号注册与配置：

  • GitHub 账号：注册 GitHub 账号（用户名：trony33），创建与用户名同名的公开仓库，编辑 README.md 搭建个人 Profile 主页。

  • 博客园账号：注册博客园账号（博客地址： https://www.cnblogs.com/tangjie333/ ），完善个人资料，加入软件工程班级圈子「202601 软件工程」；关注任课老师吴越钟，以及助教张明圣、王奇蕊。

  • Hugging Face 账号：注册 Hugging Face 账号，进入 Settings → Access Tokens 创建具备读取权限的 API Token，用于调用推理 API。

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

2.1 模型选择说明
本次作业要求调用模型 XLabs-AI/flux-RealismLora 生成贴近真实世界的图像。经调研与实测,RealismLora 是给基础 Flux 模型追加写实效果的 LoRA 权重,不是完整可直接调用的端到端模型,Hugging Face 免费 Inference API 不托管此类 "LoRA-only" 仓库。用账号 Token 直接请求时,服务端返回:
{ "error": "Model not supported by provider hf-inference" }
同时,FLUX.1 系列自 2026 年起已从 Hugging Face 免费推理(hf-inference 提供方)下线。因此本次采用与作业同思路的可行方案:调用 HF Inference API 统一网关中真实可用的写实文生图模型 stabilityai/stable-diffusion-3-medium-diffusers,配合 Vue3 + Vite 前端与 Node 服务端转发实现交互式生成。代码中模型名做成可配置项,若账号获得 Flux 推理额度,将 VITE_MODEL / HF_MODEL 改回 XLabs-AI/flux-RealismLora 即可切换。
2.2 HuggingFace 账号注册与 API Key 创建

  1. 打开 Hugging Face 官网(https://huggingface.co),注册并登录账号(本实验账号用户名:trony3333)。
  2. 进入 Settings → Access Tokens → Create new token,Token type 选择 Read,创建后复制 hf_… 令牌(实验中令牌已打码:hf_eroSkY******************************iSUMriJ)。
  3. 重要前置:调用新版推理网关前,需在 https://huggingface.co/settings/inference-providers 同意服务条款;且 Token 需为 Read 类型。若使用未勾选推理权限的自定义 Token,接口返回:
    { "error": "This authentication method does not have sufficient permissions to call Inference Providers" }
    2.3 核心代码说明
    完整代码位于项目目录(核心文件:vite.config.js、src/App.vue、scripts/generate.mjs、.env),关键实现如下。
    服务端转发(等效后端,vite.config.js)
    为避免 Token 进入前端代码,由 Vite 开发服务器注册 /hf 转发中间件:读取本地 .env 中的 HF_TOKEN,在服务端附加 Authorization 请求头后转发到 HF 推理网关,并把返回的图片字节流回传前端;同时支持通过环境变量自动走 HTTP 代理。
    const r = await ufetch(upstreamUrl, {
    method: 'POST',
    headers: {
    Authorization: Bearer ${hfToken},
    'Content-Type': 'application/json',
    'x-wait-for-model': 'true' // 等待模型冷启动,避免立刻 503
    },
    body
    })
    前端交互(src/App.vue)
    页面包含正向提示词输入框、4 个示例提示词按钮、生成按钮与图片展示区;点击按钮后向同源 /hf/models/<模型名> 发送 POST;生成中显示 Loading,成功后在右侧画布渲染图片并可下载;页面下方记录每次调用的时间、HTTP 状态、耗时与图片大小。
    命令行调用(scripts/generate.mjs)
    const res = await fetch(API_URL, {
    method: 'POST',
    headers: { Authorization: Bearer ${TOKEN}, 'Content-Type': 'application/json', 'x-wait-for-model': 'true' },
    body: JSON.stringify({ inputs: prompt })
    })
    2.4 提示词设计思路与修改过程
    本次生成以「写实人物特写(海边码头老渔民)」为主题,目标是最贴近真实照片、而非动漫或插画。设计原则:把"真实照片"拆解成模型能理解的具体信号——媒介 + 主体 + 场景 + 光线 + 视角 + 镜头 + 质感细节。
    正向提示词核心要素
    维度 关键词 作用
    媒介指定 photorealistic / realistic photograph 告诉模型生成照片而非绘画
    主体描述 a weathered 65-year-old fisherman 明确人物与年龄质感
    场景环境 misty harbor dock at dawn 码头晨雾,营造氛围
    光线氛围 soft natural light 自然光,真实感来源
    镜头约束 85mm f/1.4, shallow depth of field 模拟真实单反虚化
    细节强化 realistic skin pores, subtle stubble 直指"像照片"的皮肤细节

修改迭代过程(三次真实生成)
版本 1(初始,过于简单)
portrait of an old fisherman
问题:主体、场景、光线、视角、风格均未约束,输出偏向插画、质感不足、五官含糊。

image

图 1:版本 1 输出(generated/gen_attempt1_v1.jpg)
版本 2(加入摄影风格、场景、光线、镜头)
Photorealistic portrait of an elderly fisherman with a weathered face, detailed wrinkles, standing on a harbor dock, overcast sky, natural lighting, 85mm lens
改善:Photorealistic 锁定照片风格;weathered face / detailed wrinkles 强化真实皮肤;码头阴天场景 + 85mm 镜头统一画面。真实感明显提升,但细节仍可再强化。

图片2

图 2:版本 2 输出(generated/gen_attempt2_v2.jpg)
版本 3(最终版,叠加故事感与参数级质感,并增加负面提示词)
Award-winning photorealistic close-up portrait of a weathered 65-year-old fisherman on a misty harbor dock at dawn, rain droplets on his yellow raincoat, deep wrinkles and realistic skin pores, subtle stubble, soft natural window-like light, 85mm f/1.4, shallow depth of field, cinematic color grade, ultra detailed
负面提示词:cartoon, anime, illustration, painting, drawing, blurry face, deformed face, low resolution
效果:dawn / misty / rain droplets 营造故事时间,realistic skin pores / subtle stubble 强化真实皮肤质感,负面提示词排除动漫、插画、畸形与低清输出。最终生成高真实感的码头渔民特写,皮肤纹理自然,景深与光线接近真实单反照片。

图片3

图 3:最终版输出(选定)(generated/gen_attempt3_final.jpg)
跨题材验证(同一提示词模板迁移到动物题材)
photorealistic portrait of a scruffy orange tabby cat looking at camera, fine fur detail, natural window light
验证"质感 + 光线 + 镜头"模板可迁移到其它题材。

图片4

图 4:跨题材验证(generated/gen_attempt4_cat_demo.jpg)
2.5 前端交互页面截图
在项目目录运行 npm run dev 后访问 http://localhost:5173 ,输入第 2.4 节最终提示词并点击「生成图像」,得到以下截图。
截图 1:输入提示词、待生成状态页面

图片5

截图 2:调用成功,页面渲染出写实图片(含下方调用记录 HTTP 200 / 耗时 / 图片大小)

图片6

2.6 调用体验与心得

  1. “模型存在”≠“模型能被 API 直接调用”:flux-RealismLora 是 LoRA 适配器,免费无服务器推理不直接托管;调用前应先用 HF 目录接口确认模型可被目标提供方服务,避免空耗时间。
  2. 权限与 Token 类型是常见坑:即使 Token 正确,若账号未同意推理服务条款或使用未勾选推理权限的自定义 Token,接口会返回 403;改用 Read 类型 Token 并同意条款后即通过。
  3. 冷启动与超时要处理:首次调用模型需加载,应使用 x-wait-for-model 等待而非立刻重试;图像推理耗时较长(本次单次约 16 秒),请求超时要设置足够大。
  4. 提示词对成片质量影响巨大:只写主体对象会得到插画感、随机视角;叠加 photorealistic、镜头参数与皮肤质感关键词,并用负面提示词排除动漫/插画/低清,真实感才有质的提升。
  5. 网络环境:受限网络下访问 HF 不稳定,服务端转发需支持 HTTP 代理;这也是工程可用性的一部分。
  6. 安全:Access Token 等同账号钥匙,只放本地 .env,不进入前端、不入库;作业完成后应在后台吊销。
    附录:运行方式(可复现)
    cd flux-realism-app
    npm install
    npm run dev # 浏览器打开 http://localhost:5173

命令行单次出图:npm run gen "",图片保存到 generated/

网络需代理时:设置 HTTPS_PROXY=http://127.0.0.1:7890 后重跑

切换模型:修改 .env 中 VITE_MODEL(前端)或 HF_MODEL(命令行)

三、GitHub 个人主页搭建

3.1 方案选择

作业提供了两种方案：

  • 方案一：创建与用户名同名的公开仓库，编辑 README.md 作为个人 Profile 主页。

  • 方案二：使用 GitHub Pages 搭建独立个人网站。

我选择了方案一，原因是：目前个人项目和经历还在积累阶段，用 README Profile 就能满足展示需求，不需要额外花时间配置 GitHub Pages 的主题、域名和部署流程；而且纯 Markdown 维护简单，后续有新作品直接更新 README 即可。

3.2 主页截图

image

我的 GitHub 主页地址：https://github.com/trony33

四、随笔

我的软件工程课程随笔（包含技能树与自我评估、代码量现状与目标、课程期待、AI 生成学习指南及分析）已发布在博客园：

👉 软件工程课程学习规划与自我评估

随笔主要内容摘要：

技能树与自我评估

已具备的专业知识与能力：

  • 能力A：Python编程与自动化测试 - 熟练掌握Python语言基础语法和面向对象编程，具备Android自动化测试框架开发经验
  • 能力B：开发工具与工程实践 - 熟练使用Git进行版本控制和团队协作，掌握基本的Linux命令行操作
  • 能力C：数据处理与分析 - 具备基本的数据处理能力，能够使用pandas、numpy等库
  • 能力D：机器学习基础 - 了解机器学习基本概念和常用算法，有使用Hugging Face等平台的经验

感兴趣的技术方向：

  1. 软件测试与质量保证
  2. DevOps与持续集成
  3. AI工程化
  4. 大型系统架构

尚欠缺的能力：

  • 能力E：系统设计与架构能力
  • 能力F：软件工程规范与文档能力
  • 能力G：团队协作与项目管理
  • 能力H：前沿技术跟踪能力

代码量统计与目标

  • 当前代码量：约 8,000-10,000行
  • 课程结束后目标：15,000-20,000行

最期待学习的知识

  1. 软件需求工程
  2. 软件设计方法与架构
  3. 软件测试与质量保证
  4. 软件项目管理

五、随笔后台编辑截图

image

六、总结

本次软件工程第一次个人作业，我主要完成了以下几方面的工作：

  1. 账号注册与环境配置：完成了 GitHub、博客园、HuggingFace 三个平台的账号注册与基础配置，开通了博客园博客并加入班级圈子，获取了 HuggingFace API Token，为后续课程实践搭建好了基础环境。

  2. HuggingFace API 调用与前端交互：理解了 LoRA 权重与完整推理模型的区别，选用封装好的 flux-realism-lora-dev 模型，通过 Python FastAPI 搭建后端代理服务，配合原生 HTML 前端实现了提示词输入、点击生成、图片渲染的完整交互流程，同时掌握了结构化正向提示词与负面提示词的设计方法。

  3. GitHub 个人主页搭建：创建了与用户名同名的公开仓库，通过编辑 README.md 搭建了个人 Profile 主页，梳理了个人介绍、技术栈和发展方向。

  4. 个人技能梳理与学习规划：通过撰写课程随笔，系统梳理了当前的技能树与技术偏好，明确了已具备的能力、感兴趣的方向和欠缺的能力，制定了本学期的代码量目标与学习计划，并借助 DeepSeek 生成的学习指南进行了合理性分析。

posted @ 2026-09-10 10:44  trony3333  阅读(12)  评论(0)    收藏  举报