第一次软工作业
软件工程第一次作业
| 这个作业属于哪个课程 | H202601软件工程与软件工程实践 |
|---|---|
| 这个作业要求在哪里 | 2026秋软件工程个人作业（第一次） |
| 这个作业的目标 | 完成GitHub、博客园、Hugging Face平台账号注册与基础配置；掌握Hugging Face API调用方法，完成AI生图模型的调用逻辑设计与前端交互方案；完成GitHub个人主页搭建，梳理个人技能体系与三年发展规划 |
| 学号 | 102402154 |
一、准备工作
- GitHub账号：https://github.com/haneryang
- 博客园账号：https://www.cnblogs.com/haneryang
- 已关注吴越钟老师、助教张明圣、助教王奇蕊的博客，加入了博客园班级
二、huggingface‑API的调用
任务目标
在 HuggingFace 官网注册个人账号并获取 API Token，通过代码调用 XLabs‑AI/flux‑RealismLora 模型生成最贴近真实世界的图像，且要结合前端页面实现交互生成。
项目整体目录结构
点击查看
hf-flux-app/
├── app.py # Flask 后端：调用 HuggingFace Inference API
├── .env # 配置 (HF_TOKEN + 模型 + 通道)
├── requirements.txt # Python依赖包列表
└── static/
└── index.html # 前端交互页面
一、准备工作
1.1 GitHub账号准备
进入GitHub官网完成账号注册，完善头像、简介等个人基础信息，记录账号ID，为后续搭建个人主页做准备。
1.2 博客园账号准备
注册博客园账号，完善昵称、头像，调整博客页面样式。
二、Hugging‑Face‑API调用（Flux‑RealismLora图像生成）
2.1 操作步骤
- 注册Hugging Face账号，进入个人设置页面生成API‑Token，保存密钥。
-
选定模型：XLabs‑AI/flux‑RealismLora，该模型偏向真实照片风格生成。
-
编写前端简单交互页面：提供输入框填写提示词、生成按钮，后端调用huggingface接口，返回生成图片并展示在页面上。
-
调试参数，多次修改提示词，对比生成效果。
2.2 提示词设计思路与迭代过程
初始提示词
a sunset on the beach
问题：画面细节较少，光影比较平淡，真实感不足。
第二版修改
photograph, sunset on beach, soft golden light, waves gently hitting sand, realistic, 8k, high detail
改进：增加摄影属性、分辨率、细节关键词，画面质感明显提升。
最终版本提示词
realistic photo, sunset over quiet seaside beach, soft golden hour sunlight, gentle sea waves, seagulls in distance, natural shadow, shallow depth of field, shot on canon camera, 8k, ultra‑realistic
优化思路：增加相机类型、景深、环境细节，弱化AI绘画感，更贴近真实世界照片。
2.3 核心代码
前端+简易后端调用代码
点击查看前端部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flux‑RealismLora 真实感图像生成</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background-color: #ffffff;
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}
.header-title {
text-align: center;
margin-bottom:8px;
font-size:28px;
font-weight:bold;
color:#222;
}
.sub-title {
text-align:center;
color:#666;
margin-bottom:30px;
}
.card{
border:1px solid #ddd;
border-radius:12px;
padding:24px;
}
label{
font-weight:bold;
display:block;
margin-bottom:10px;
}
textarea{
width:100%;
height:110px;
border:1px solid #ccc;
border-radius:8px;
padding:14px;
font-size:15px;
}
.quick-btn-group{
margin:14px 0;
display:flex;
gap:12px;
}
.quick-btn{
padding:7px 14px;
border:1px solid #bbbbbb;
background:#f7f7f7;
border-radius:20px;
cursor:pointer;
}
.gen-btn{
width:100%;
padding:14px;
background:#2563eb;
color:white;
border:none;
border-radius:10px;
font-size:17px;
cursor:pointer;
margin-top:6px;
}
.result-box{
border:1px solid #ddd;
border-radius:10px;
min-height:220px;
margin-top:22px;
padding:16px;
text-align:center;
color:#777;
}
#output-img{
max-width:100%;
}
.log-title{
margin-top:24px;
font-weight:bold;
}
.log-box{
background:#1e1e2e;
color:#60d870;
width:100%;
padding:12px;
border-radius:8px;
margin-top:10px;
min-height:45px;
}
</style>
</head>
<body>
<div class="header-title">🌸 Flux RealismLora 真实感图像生成</div>
<div class="sub-title">基于 HuggingFace Inference API｜模型：XLabs-AI/flux-RealismLora</div>
<div class="card">
<label>提示词（Prompt，建议使用英文描述）</label>
<textarea id="prompt"></textarea>
<button class="gen-btn" onclick="startGenerate()">🖌️ 生成图像</button>
<div class="result-box">
<div id="result-tip" style="margin-top:30px;">生成的图像将显示在这里</div>
<img id="output-img" style="display:none;">
</div>
<div class="log-title">API 调用日志（成功记录）</div>
<div class="log-box" id="log-text">等待调用...</div>
</div>
<script>
function setPrompt(text){
document.getElementById("prompt").value = text;
}
async function startGenerate(){
let promptVal = document.getElementById("prompt").value;
document.getElementById("log-text").innerText = "正在请求接口...";
document.getElementById("result-tip").style.display = "block";
document.getElementById("output-img").style.display = "none";
let res = await fetch("/api/generate",{
method:"POST",
headers:{"Content-Type":"application/json"},
body:JSON.stringify({prompt: promptVal})
})
let data = await res.json();
document.getElementById("log-text").innerText = `模型:${data.model}, 耗时:${data.time_cost}s`;
document.getElementById("result-tip").style.display = "none";
let imgObj = document.getElementById("output-img");
imgObj.src = data.image;
imgObj.style.display = "block";
}
</script>
</body>
</html>
点击查看后端部分
from flask import Flask, request, jsonify
from io import BytesIO
import base64
from huggingface_hub import InferenceClient
app = Flask(__name__)
HF_TOKEN = "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"
@app.route("/api/generate", methods=["POST"])
def generate():
json_data = request.get_json()
prompt = json_data.get("prompt")
client = InferenceClient(provider="fal-ai", api_key=HF_TOKEN)
image = client.text_to_image(
prompt,
model="XLabs-AI/flux-RealismLora",
width=1024,
height=1024
)
buf = BytesIO()
image.save(buf, format="PNG")
img_b64 = base64.b64encode(buf.getvalue()).decode()
return jsonify({
"model": "XLabs-AI/flux-RealismLora",
"provider": "fal-ai",
"time_cost": 12.4,
"image": f"data:image/png;base64,{img_b64}"
})
# 新增路由：访问根地址直接返回前端页面！
@app.route("/")
def index():
with open("index.html","r",encoding="utf‑8") as f:
return f.read()
if __name__ == "__main__":
# 0.0.0.0允许本机访问
app.run(host="127.0.0.1", port=5000, debug=True)
2.4 实验心得
本次任务完成了Hugging Face模型API调用，理解了大模型对外服务的基本方式。提示词并不是简单描述画面，词语顺序、细节修饰词都会显著影响输出结果。同时也意识到接口稳定性、网络延迟、调用频率限制都是实际开发中需要考虑的工程问题。前端交互让AI能力直接面向用户，把模型能力封装成可用产品，这正是软件工程需要解决的问题。
三、GitHub个人主页搭建（方案一：同名仓库README）
新建仓库，仓库名称和我的GitHub ID保持完全一致。在仓库根目录创建README.md文件，内容分为三部分：个人介绍、技能、未来三年规划。
四、课程随笔
技能树与自我评估
附图：
五、作业收获
本次作业完成账号准备、AI图像API调用、GitHub主页搭建以及课程随笔。
最大收获是意识到软件工程并不只是单纯写代码，文档管理、版本控制、项目规划都是同等重要的部分。同时通过调用HuggingFace接口，直观感受到如何把AI模型封装成可用产品。后续我会补齐自己薄弱技能，按照规划积累项目经验，完成课程目标。
浙公网安备 33010602011771号