软件工程课程第一次个人作业

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/202601SofwareEngineering
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/202601SofwareEngineering/homework/15712
这个作业的目标	学习调用 Hugging Face 模型 API，编写 Python 后端程序接收提示词、请求 AI 模型并获取生成图像；实现提示词输入、提交请求、图片回显的完整 Web 交互；个人资料整理：搭建 GitHub 个人主页，梳理自身技能树、技术偏好、短期学习目标
学号	102401601

一、Hugging Face API 的调用

本部分完成 Hugging Face Flux 模型 API 调用，使用 Python 脚本测试接口，迭代提示词生成海边写实人像；搭建 Flask 后端与前端页面实现 Web 交互，掌握基础前后端通信
1.API 调用成功记录
本次作业选用XLabs-AI/flux-RealismLora写实图像模型，基于 Hugging Face Inference Providers 完成文生图 API 调用。
先编写 Python 测试脚本，填入个人 Access Token 与提示词，向模型服务发送请求，等待模型计算并返回图片二进制数据，本地保存为图片文件。
终端输出API调用成功！，并生成result.png，证明模型接口可以正常工作。

2.前端页面与最终生成图像截图以及相关代码
在测试脚本验证 API 可用后，将调用逻辑封装进 Flask 后端 app.py，并编写前端页面 index.html，实现网页端输入提示词、点击按钮、后端返回图片、前端渲染展示的完整交互。

app.py

点击查看代码

from flask import Flask, request, send_file
from flask_cors import CORS
from huggingface_hub import InferenceClient
import io

app = Flask(__name__)
CORS(app)

# 在这里填入你的HF Token
HF_TOKEN = "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"

client = InferenceClient(
    model="black-forest-labs/FLUX.1-dev",
    token=HF_TOKEN
)

@app.route("/generate", methods=["POST"])
def generate_image():
    try:
        req_data = request.get_json()
        prompt = req_data.get("prompt", "")

        if not prompt:
            return "提示词不能为空", 400

        image = client.text_to_image(
            prompt=prompt,
            num_inference_steps=20,
            guidance_scale=7.5
        )

        buffer = io.BytesIO()
        image.save(buffer, format="PNG")
        buffer.seek(0)
        return send_file(buffer, mimetype="image/png")

    except Exception as e:
        print(f"模型调用错误: {str(e)}")
        return f"模型调用失败：{str(e)}", 500

@app.route("/")
def index_page():
    return send_file("index.html")

@app.route("/index.html")
def index_html():
    return send_file("index.html")

if __name__ == "__main__":
    app.run(debug=True)

index.html

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flux-RealismLora 写实图生成</title>
</head>
<body style="width:800px;margin:30px auto;">
    <h1>Flux-RealismLora 写实图生成</h1>
    <textarea id="prompt" rows="6" style="width:100%;font-size:16px;">photorealistic photo, young woman standing on quiet beach at sunset, soft golden sunlight, realistic skin texture, sharp focus, high detail, 8k DSLR photo, natural color, depth of field</textarea>
    <br><br>
    <button id="btn-generate" style="padding:8px 20px;font-size:16px;">生成图片</button>
    <div style="margin-top:20px;">
        <img id="result-img" style="max-width:100%;"/>
    </div>
    <script>
        document.getElementById("btn-generate").onclick = async ()=>{
            const prompt = document.getElementById("prompt").value;
            try{
                const res = await fetch("/generate",{
                    method:"POST",
                    headers:{"Content-Type":"application/json"},
                    body:JSON.stringify({
                        prompt: prompt,
                        lora_scale:0.75,
                        steps:20
                    })
                });
                if(!res.ok) throw new Error("服务错误");
                const blob = await res.blob();
                const url = URL.createObjectURL(blob);
                document.getElementById("result-img").src = url;
            }catch(e){
                console.error(e);
                alert("请求失败："+e);
            }
        }
    </script>
</body>
</html>

3.提示词设计思路和修改过程
设计思路:目标是生成贴近真实单反摄影的写实人像。提示词采用主体描述 + 场景环境 + 光影氛围 + 摄影画质关键词的组合方式：

主体：明确人物身份、姿态；
场景：交代环境（安静海滩、日落）；
光影：定义光线类型（柔和金色夕阳）；
画质：加入摄影术语（DSLR、depth of field、sharp focus），引导模型生成真实皮肤质感与景深，避免卡通、手绘风格。

改进维度：

维度	内容
主体描述	young woman
环境场景	quiet beach at sunset
光线氛围	soft golden sunlight
画质风格	photorealistic, 8k, high detail
技术参数	DSLR photo, depth of field, sharp focus
细节强化	realistic skin texture, natural color

结果：生成的海边日落人像皮肤纹理自然、金色光线柔和、景深明显，整体接近真实摄影作品。
4. API 调用操作步骤

注册 Hugging Face 账号，进入 Settings → Access Tokens，创建具有 Inference 权限的 Fine-grained Token；
访问 black-forest-labs/FLUX.1-dev 模型页面，同意模型 License 协议，获取访问权限；
新建 test_api.py 测试脚本，导入 huggingface_hub.InferenceClient，填入 Token、模型名 XLabs-AI/flux-RealismLora 与提示词；
在终端运行 python test_api.py，等待模型返回图片数据，保存为 result.png，验证 API 调用成功；
将 API 调用逻辑封装进 Flask 后端 app.py，提供 /generate 接口接收前端 POST 请求；
编写前端 index.html，通过 Fetch API 向后端发送提示词，接收图片 Blob 并渲染；
运行 python app.py 启动服务，浏览器访问 http://127.0.0.1:5000/，前后端联调完成。

5. API 调用体验与心得
通过本次 Hugging Face API 调用实验，我第一次比较完整地经历了从模型接口测试到前端交互应用实现的整个过程。
相比在本地直接部署 Flux 这样的大型图像生成模型，通过 Hugging Face API 调用更加方便，不需要自己准备高性能 GPU，也不需要配置复杂的本地运行环境。只需要完成身份认证并按照接口要求发送请求，就可以使用远程模型完成图像生成。
与此同时，本次实验也让我意识到，一个能够实际使用的 AI 应用并不是只有模型本身。模型负责生成图像，而前端负责与用户交互，Flask 后端负责接收请求和代理调用 API，不同模块分工协作，共同组成了一个完整的软件系统。这一点也让我对后续软件工程课程中系统设计、模块划分和接口设计等内容产生了更强的学习兴趣。