软件工程第一次个人作业
软件工程第一次个人作业
| 这个作业属于哪个课程 | 2026秋软件工程与软件工程实践 |
|---|---|
| 这个作业要求在哪里 | 2026秋软件工程个人作业（第一次） |
| 这个作业的目标 | 学习Hugging Face API调用与前端交互，完成GitHub个人主页建设，梳理个人技能树与学习规划 |
| 学号 | 102402113 |
一、Hugging Face API 调用 Flux 模型生成图像
1.1 注册账号并获取 API Token
本次作业使用 Hugging Face 平台提供的 Inference API 调用 XLabs-AI/flux-RealismLora 模型生成写实图像。
操作步骤如下：
- 访问 Hugging Face 官网 注册个人账号。
- 登录后，点击右上角头像 → Settings → Access Tokens。
- 点击 "Create New Token"，选择 "Read" 权限，创建并复制 Token。
📷截图：
1.2 项目结构与代码实现
本项目采用 "前端页面 → Flask 后端 → Hugging Face Inference API" 的三层架构。
项目目录结构
flux-realism-web/
├── venv # 虚拟环境
├── app.py # Flask 后端程序
├── requre.txt # Python 依赖
├── index.html # 前端页面
└── outputs/ # 生成的图片保存目录
📷截图：
后端代码（app.py）
from flask import Flask, request, jsonify
from flask_cors import CORS
import base64
import warnings
from datetime import datetime
from io import BytesIO
from PIL import Image
from huggingface_hub import InferenceClient
warnings.filterwarnings('ignore')
app = Flask(__name__)
CORS(app)
HF_TOKEN = "hf_CfRypSnzUyDcckVGloKJcoPklGGoA"
HF_MODEL_ID = "XLabs-AI/flux-RealismLora"
# 初始化
client = InferenceClient(api_key=HF_TOKEN)
@app.route('/generate', methods=['POST'])
def generate_image():
"""调用 Flux """
try:
data = request.json
prompt = data.get('prompt', '')
negative_prompt = data.get('negative_prompt', '')
if not prompt:
return jsonify({'error': '提示词不能为空'}), 400
print("\n" + "="*80)
print(f"[{datetime.now().strftime('%H:%M:%S')}] API 调用记录")
print("="*80)
print(f"📝 提示词: {prompt[:80]}...")
print(f"🤖 模型: {HF_MODEL_ID}")
print(f"🔄 正在生成图像...")
try:
image = client.text_to_image(
prompt=prompt,
model=HF_MODEL_ID,
negative_prompt=negative_prompt if negative_prompt else None,
height=512,
width=512,
num_inference_steps=30,
guidance_scale=7.5,
)
img_byte_arr = BytesIO()
image.save(img_byte_arr, format='PNG')
img_byte_arr.seek(0)
image_data = base64.b64encode(img_byte_arr.getvalue()).decode('utf-8')
img_size = len(img_byte_arr.getvalue())
print(f"✅ 成功! 图像大小: {img_size} 字节")
print("="*80 + "\n")
return jsonify({
'success': True,
'image': f'data:image/png;base64,{image_data}',
'message': '✅ 图像生成成功'
})
except Exception as e:
error_str = str(e)
print(f"❌ 生成失败: {error_str}")
print("="*80 + "\n")
if '503' in error_str or 'loading' in error_str.lower():
return jsonify({
'success': False,
'error': '模型正在加载中'
}), 503
return jsonify({
'success': False,
'error': f'生成失败: {error_str[:200]}'
}), 500
except Exception as e:
error_str = str(e)
print(f"❌ 错误: {error_str}")
print("="*80 + "\n")
return jsonify({'error': f'发生错误: {error_str}'}), 500
@app.route('/health', methods=['GET'])
def health():
return jsonify({'status': 'ok'})
if __name__ == '__main__':
print("\n🚀 Flux 图像生成服务启动")
print(f"📍 地址: http://127.0.0.1:5000")
print(f"🤖 模型: {HF_MODEL_ID}")
print(f"✅ 使用 Hugging Face 官方库\n")
app.run(debug=True, port=5000)
前端代码（index.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flux 图像生成工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.header p {
font-size: 1.1em;
opacity: 0.9;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 40px;
}
.form-section h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.5em;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
}
textarea, input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-family: inherit;
font-size: 1em;
transition: all 0.3s ease;
}
textarea:focus, input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 14px 30px;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.result-section {
display: flex;
flex-direction: column;
}
.result-section h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.5em;
}
.image-container {
flex-grow: 1;
background: #f5f5f5;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
position: relative;
}
#generatedImage {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.loading {
text-align: center;
color: #999;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.message {
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
display: none;
}
.message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
display: block;
}
.message.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
display: block;
}
.action-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
}
.btn-secondary {
background: #6c757d;
padding: 10px;
font-size: 0.9em;
}
.btn-secondary:hover {
background: #5a6268;
}
.history {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #ddd;
}
.history h3 {
color: #555;
margin-bottom: 10px;
}
.history-item {
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 0.9em;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.history-item:hover {
background: #f0f0f0;
transform: translateX(5px);
}
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 Flux 图像生成工具</h1>
<p>使用 XLabs-AI/flux-RealismLora 模型生成逼真图像</p>
</div>
<div class="content">
<!-- 左侧：输入区域 -->
<div class="form-section">
<h2>📝 输入设置</h2>
<div class="message" id="message"></div>
<div class="form-group">
<label for="prompt">✨ 正面提示词 (Prompt)</label>
<textarea id="prompt" placeholder="描述你想要生成的图像，例如：A realistic photo of a beautiful sunset over mountains, golden hour, high quality, detailed"></textarea>
</div>
<div class="form-group">
<label for="negativePrompt">❌ 反面提示词 (Negative Prompt)</label>
<textarea id="negativePrompt" placeholder="描述你不想要的元素，例如：blurry, low quality, distorted, ugly"></textarea>
</div>
<button id="generateBtn" onclick="generateImage()">
⚡ 生成图像
</button>
<div class="history">
<h3>📋 生成历史</h3>
<div id="historyList"></div>
</div>
</div>
<!-- 右侧：结果显示区域 -->
<div class="result-section">
<h2>🖼️ 生成结果</h2>
<div class="image-container" id="imageContainer">
<div class="loading">点击左侧"生成图像"按钮开始生成</div>
</div>
<div class="action-buttons" id="actionButtons" style="display: none;">
<button class="btn-secondary" onclick="downloadImage()">💾 下载图像</button>
<button class="btn-secondary" onclick="copyPrompt()">📋 复制提示词</button>
</div>
</div>
</div>
</div>
<script>
const API_BASE_URL = 'http://localhost:5000';
let generationHistory = [];
let currentPrompt = '';
async function generateImage() {
const prompt = document.getElementById('prompt').value.trim();
const negativePrompt = document.getElementById('negativePrompt').value.trim();
const generateBtn = document.getElementById('generateBtn');
const messageEl = document.getElementById('message');
const imageContainer = document.getElementById('imageContainer');
if (!prompt) {
showMessage('请输入正面提示词', 'error');
return;
}
generateBtn.disabled = true;
generateBtn.textContent = '⏳ 生成中...';
imageContainer.innerHTML = '<div class="loading"><div class="spinner"></div><p>正在调用 Flux 模型生成图像...</p></div>';
messageEl.style.display = 'none';
try {
console.log('发送请求:', { prompt, negativePrompt });
const response = await fetch(`${API_BASE_URL}/generate`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: prompt,
negative_prompt: negativePrompt
})
});
const result = await response.json();
if (result.success) {
const img = document.createElement('img');
img.id = 'generatedImage';
img.src = result.image;
imageContainer.innerHTML = '';
imageContainer.appendChild(img);
showMessage('✅ ' + result.message, 'success');
document.getElementById('actionButtons').style.display = 'grid';
currentPrompt = prompt;
addToHistory(prompt);
console.log('成功生成图像');
} else {
showMessage('❌ 错误: ' + result.error, 'error');
imageContainer.innerHTML = '<div class="loading">生成失败，请重试</div>';
console.error('生成失败:', result.error);
}
} catch (error) {
console.error('请求错误:', error);
showMessage('❌ 请求失败: ' + error.message, 'error');
imageContainer.innerHTML = '<div class="loading">请求失败，请检查服务器是否运行</div>';
} finally {
generateBtn.disabled = false;
generateBtn.textContent = '⚡ 生成图像';
}
}
function showMessage(message, type) {
const messageEl = document.getElementById('message');
messageEl.textContent = message;
messageEl.className = `message ${type}`;
messageEl.style.display = 'block';
if (type === 'success') {
setTimeout(() => {
messageEl.style.display = 'none';
}, 5000);
}
}
function downloadImage() {
const img = document.getElementById('generatedImage');
if (!img) return;
const link = document.createElement('a');
link.href = img.src;
link.download = `flux_image_${Date.now()}.png`;
link.click();
}
function copyPrompt() {
if (!currentPrompt) return;
navigator.clipboard.writeText(currentPrompt).then(() => {
showMessage('✅ 提示词已复制到剪贴板', 'success');
}).catch(err => {
console.error('复制失败:', err);
});
}
function addToHistory(prompt) {
generationHistory.unshift({
prompt: prompt,
timestamp: new Date().toLocaleString('zh-CN')
});
updateHistoryDisplay();
}
function updateHistoryDisplay() {
const historyList = document.getElementById('historyList');
historyList.innerHTML = generationHistory
.map((item, index) => `
<div class="history-item" onclick="applyHistory(${index})">
<strong>${item.timestamp}</strong><br>
${item.prompt.substring(0, 40)}...
</div>
`)
.join('');
}
function applyHistory(index) {
document.getElementById('prompt').value = generationHistory[index].prompt;
generateImage();
}
window.addEventListener('load', async () => {
try {
const response = await fetch(`${API_BASE_URL}/health`);
if (!response.ok) {
console.warn('后端服务可能未启动');
}
} catch (error) {
console.error('无法连接到后端服务，请确保 Flask 服务器正在运行');
}
});
</script>
</body>
</html>
依赖文件（requre.txt）
Flask==2.3.0
Flask-CORS==4.0.0
huggingface-hub==0.17.0
Pillow==10.0.0
requests==2.31.0
urllib3==2.1.0
certifi==2023.7.22
1.3 API 调用成功记录
📷截图：
1.4 前端页面最终生成图像截图
📷截图1：
📷截图2：
📷截图3：
1.5 提示词设计思路与修改过程
第一版提示词：
A photorealistic landscape photograph of mountains at sunset,
golden hour lighting, professional photography, 4k, sharp focus
生成结果虚假，饱和度过高，缺乏真实感。
第二版提示词：
A photorealistic landscape photograph of majestic snow-capped mountains
at golden sunset, with a clear alpine lake in the foreground reflecting
the mountains, warm golden hour sunlight, professional nature photography,
ultra high quality, 4k resolution, sharp focus, detailed textures,
vibrant natural colors, cinematic composition, documentary photography style
画面质感有所提升，但效果平淡，细节仍不够丰富。
第三版提示词：
An award-winning photorealistic landscape photograph of magnificent
snow-capped Alpine mountain peaks at golden sunset, with a perfectly
still crystalline alpine lake in the immediate foreground reflecting
the dramatic orange and purple sky. The scene captures the warm golden
hour sunlight filtering through delicate clouds, creating dramatic shadows
and highlights on the rocky terrain. Professional nature photography,
shot with professional camera equipment, ultra high quality, 8k resolution,
sharp focus with selective depth of field, intricate details, vibrant yet
natural color grading, warm tone, cinematic composition with strong
foreground interest, National Geographic documentary photography style,
award-winning landscape photography, atmospheric perspective, perfect exposure,
no text, no watermark
设计思路分析：
版本 1 → 版本 2 的改进：
- 添加了具体的场景元素（alpine lake, reflecting）
- 增加了光影描述（dramatic shadows）
- 加入了风格定位（documentary style）
版本 2 → 版本 3 的改进：
- 进一步细化了环境描写（crystalline, perfectly still）
- 增强了色彩指导（vibrant yet natural color grading）
- 加入了参考标准（award-winning, National Geographic）
- 明确了质量要求（8k resolution）
1.6 API 调用体验与心得
本次 API 调用的体验：
-
提示词质量决定生成效果
- 简单提示词容易生成低质量结果
- 详细的提示词能显著提升效果
- 加入风格和参考标准能使结果更专业
-
关键词的选择很重要
- 质量词：4k, sharp focus, ultra high quality
- 风格词：photorealistic, professional, cinematic
- 参考词：National Geographic, award-winning
- 这些词能有效引导 AI 生成更好的结果
-
反面提示词也很关键
- 明确告诉 AI 不要生成什么
- 能有效避免低质量、失真等问题
-
生成速度与提示词长度的关系
- 提示词越详细，生成时间越长
- 但效果提升幅度更大
-
持续迭代的重要性
- 第一次没有完美结果
- 通过观察和调整，逐步优化提示词
- 最终得到满意的结果
二、GitHub 个人主页搭建
2.1 创建个人资料自述文件（Profile README）
我选择方案一：创建个人资料自述文件。
操作步骤：
- 登录 GitHub，点击右上角 "+" → "New repository"。
- 仓库名称设置为与我的 GitHub ID 完全相同的名称（例如：
username/username）。 - 勾选 "Add a README file"。
- 点击 "Create repository"。
2.2 README 内容设计
以下是我的个人资料 README 内容：
👋 你好，我是liuliu223377
🧑💻 关于我 / About Me
我是一名充满热情的 大数据科学 专业学生/开发者。我对代码充满好奇，喜欢通过动手实践来探索技术的边界。
- 兴趣爱好：除了敲代码，我还喜欢 到处乱逛。这些爱好让我保持创造力和生活的平衡。
- 想分享的经历：最难忘的一次经历是 独自旅游。这次经历教会了我 坚持好奇。
📝 自我评估 / Self-Assessment
技术栈
1. 已掌握的专业知识和能力
经过系统的学习和项目实战，我目前已经较好地掌握了：
- 基础理论：数据结构与算法、操作系统、计算机网络。
- 开发语言：使用 Python 和 Java，能够独立完成一些操作。
2. 我感兴趣的技术方向
- 后端系统架构：设计高可用、高并发的系统是我最享受的挑战。
- 云原生与 DevOps：对 Docker、Kubernetes 等容器化技术有着浓厚的兴趣，希望未来能深入掌握云上部署。
3. 我最想学习/深耕的知识
在接下来的时间里，我最渴望攻克以下领域：
- 分布式系统：深入学习分布式事务、共识算法（如 Raft）。
- 消息中间件：系统学习 Kafka 或 RabbitMQ，并能在实际场景中运用。
- 数据库调优：掌握 MySQL 和 Redis 的底层原理及高级性能优化技巧。
🗺️ 未来三年发展规划 (2026 - 2029)
我选择的目标是 就业。
-
第一年（2026 - 2027）：夯实内功，积蓄力量
- 巩固计算机基础（刷 LeetCode 等）。
- 深入钻研一门技术栈（Java 生态），阅读底层源码（如 Spring、HashMap 等）。
- 完成一个能够体现“高并发/微服务”的项目，并撰写博客输出沉淀。
-
第二年（2027 - 2028）：拥抱实习，积累经验
- 争取在大三暑假获得企业的暑期实习（Intern） Offer。
- 在真实的企业环境中学习工程规范、团队协作流程以及线上问题的排查与解决。
- 根据实习反馈，查漏补缺，明确具体的细分就业方向。
-
第三年（2028 - 2029）：全力冲刺，开启职业生涯
- 参加秋招，凭借扎实的基础和宝贵的实习经历，争取拿到心仪的 校招Offer。
- 选择就业的原因：通过解决实际的用户需求和业务痛点获得成就感，我更希望在真实的业务场景中快速迭代和成长。
📷 **截图：
三、博客园随笔
3.1 技能树与技术偏好自我评估
一、已具备的专业知识与能力
能力 A：Python 后端开发能力
能够使用 Python 和 Flask 框架搭建 Web 后端服务，实现 RESTful API 接口，处理前后端数据交互。
能力 B：数据结构和算法基础
掌握数组、链表、栈、队列、树、图等核心数据结构，能够完成常见的算法实现（排序、搜索、递归等）。
能力 C：版本控制与协作能力
熟练使用 Git 进行版本管理，了解 GitHub 平台的基本操作（仓库创建、分支管理、Pull Request 等）。
二、感兴趣的技术方向
- 生成式 AI 与多模态模型：对文本生成图像、大语言模型等方向有浓厚兴趣
- 全栈 Web 开发：希望掌握从数据库到前端界面的完整开发能力
- 软件工程实践：学习敏捷开发、代码规范、自动化测试等工程化方法
三、还欠缺的能力
- 大型项目开发经验：缺乏参与大型软件项目的实战经验
- 数据库设计与优化：对数据库索引、查询优化等高级主题掌握不足
- 自动化测试：缺乏单元测试、集成测试的实践
- DevOps 与部署：对 Docker、CI/CD 等运维技术了解较少
3.2 代码量与目标
截至目前的代码量： 约 3000-5000 行（包括课程作业、个人项目和练习）
完成本学期课程后希望达到的代码量： 6000-10000 行
提升计划：
- 课程项目：完成 2-3 个完整的软件工程项目
- 个人练习：每周保持 3-5 小时的编码练习
- 开源贡献：尝试参与 1-2 个开源项目的小型贡献
3.3 本课程最期待学习的知识
- 软件工程方法论：理解从需求分析到软件交付的完整流程
- 团队协作与项目管理：学习如何在团队中高效协作
- 代码质量与工程实践：掌握代码规范、设计模式、重构等技能
- 实际项目开发经验：通过课程项目积累实战经验
希望获得的收获：
- 建立完整的软件工程知识体系
- 提升团队协作和项目管理的实际能力
- 完成一个高质量的课程项目，丰富个人作品集
3.4 AI 工具生成的软件工程课程学习指南
工具：DeepSeek
提示词： "请生成一份简要的软件工程课程学习指南，包括学习重点、时间安排和推荐资源"
生成结果：
软件工程课程学习指南
一、课程概述
软件工程是一门研究如何系统化、规范化、定量化地开发和维护软件的学科。本指南旨在帮助学习者高效掌握软件工程的核心知识。
二、学习重点
1. 软件过程模型（第1-3周）
- 瀑布模型、增量模型、螺旋模型
- 敏捷开发与 Scrum 框架
- 理解不同模型的适用场景
2. 需求工程（第4-6周）
- 需求获取与分析方法
- 需求规格说明编写
- 用例图与需求建模
3. 软件设计（第7-9周）
- 架构设计（MVC、分层架构等）
- 详细设计与设计模式
- UML 建模（类图、时序图等）
4. 软件测试（第10-12周）
- 单元测试、集成测试、系统测试
- 白盒测试与黑盒测试
- 自动化测试工具（JUnit、pytest 等）
5. 项目管理与团队协作（第13-15周）
- 项目计划与估算
- 配置管理与版本控制
- 团队沟通与协作工具
三、时间安排建议
阶段 时间 学习内容 实践任务 基础阶段 第1-6周 过程模型 + 需求工程 完成需求分析文档 进阶阶段 第7-12周 设计 + 测试 完成系统设计与测试用例 综合阶段 第13-16周 项目管理 + 综合实践 完成完整项目 四、推荐资源
教材
- 《软件工程》（第10版）—— Ian Sommerville
- 《人月神话》—— Frederick P. Brooks
在线资源
- Coursera: Software Engineering Specialization
- 博客园软件工程相关技术博客
- GitHub 开源项目学习
工具
- 版本控制：Git + GitHub
- 项目管理：Jira / Trello
- 建模工具：StarUML / Draw.io
- 测试工具：JUnit / pytest / Selenium
分析评价：
这份 AI 生成的学习指南整体结构清晰，涵盖了软件工程课程的主要模块。优点在于：
- 模块划分合理：按软件生命周期组织学习内容，符合课程教学的逻辑顺序
- 时间安排明确：提供了分阶段的学习计划，便于制定学习目标
- 资源推荐实用：推荐的教材和工具都是很常用的
不足之处：
- 对实践环节的强调不够，软件工程是一门实践性很强的课程
- 缺少对 AI 辅助编程等新兴话题的涉及
- 项目管理的部分较为简略
对自身的帮助：
这份指南可以作为我课程学习的参考，帮助我计划安排学习进度。而我会结合课程实际教学安排，将指南中的内容与课堂讲授、课后实践相结合，形成更具体的学习计划。
四、作业要求说明
4.1 Markdown 编辑器设置
📷截图：
4.2 博文编辑页面截图
📷截图：
五、总结
通过本次作业，我完成了以下任务：
- Hugging Face API 调用：成功获取 API Token，调用 XLabs-AI/flux-RealismLora 模型生成图像，并结合 Flask 实现了前后端交互。
- GitHub 个人主页搭建：创建了个人资料自述文件，完成了个人介绍、技能展示和三年发展规划。
- 博客园随笔撰写：梳理了个人技能树，进行了自我评估，并使用 AI 工具生成了学习指南。
本次作业让我对 API 调用、前后端交互、版本控制等技能有了更深入的理解，也帮助我明确了未来的学习方向。
浙公网安备 33010602011771号