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

这个作业属于哪个课程	H202601软件工程与软件工程实践
这个作业要求在哪里	2026秋软件工程个人作业（第一次）
这个作业的目标	完成GitHUb和博客园搭建，掌握Hugging Face API调用与网站前后端交互，梳理个人技能与学习规划
学号	102402144

一、 huggingface-API的调用

1. 获取API

注册hugging face账号
在setting中点击Access Tokens申请api token,应作业需求，申请READ权限即可
根据官方文档推荐，把api token 写入系统环境变量"HF_TOKEN"中，方便调用并起到保护隐私作用

2. 搭建后端

整体思路

使用FastApi搭建后端框架，用POST模式接收前端传递的图片生成需求，利用InferenceClient获取huanggingface的api服务，调用FLUX生成图片并储存在本地，返回生成的图片地址以及状态以便前端展示

核心代码

#生成web后端app对象
app = FastAPI()
#配置并得到inferenceclient
client = InferenceClient(
    token = os.environ["HF_TOKEN"],
    provider = "auto",
)
#创建文件夹用于放图片
os.makedirs("generated",exist_ok=True)
#设置要从post请求体中提取的必备信息
class GenerateRequest(BaseModel):
    prompt : str
#接受前端传递到prompt，用client调用FLUX模型生成图片
@app.post("/generate")
def generate_image(req : GenerateRequest):
    #获取前端传递的提示词并调用FLUX生成图片
    prompt = req.prompt
    print("收到prompt: "+prompt)
    image = client.text_to_image(
        prompt=prompt,
        model="black-forest-labs/FLUX.1-dev"
    )
    #将图片保存到本地
    filename = f"{uuid.uuid4()}.png"
    filepath = f"generated/{filename}"
    image.save(filepath)
    #返回状态码与图片储存地址
    return{
        "success" : True,
        "image_url" : f"/generated/{filename}"
    }
#把储存图片的文件夹挂载到/generated
app.mount("/generated", 
          StaticFiles(directory="generated"),
          name="generated"
          )
#把前端页面放到web服务器根目录
app.mount(
    "/",
    StaticFiles(directory="static",html=True),
    name="frontend"
    )

3. 搭建前端

整体思路

1个多行输入框用于输入提示词，1个按钮用于向后端发出生成图片请求，1个标签用于显示图片生成状态，1个图片容器用于显示生成的图片

页面展示

核心交互逻辑

<script>
        async function generateImage(){
            <!--获取html组件的对象-->
            const prompt = document.getElementById("prompt").value;
            const status = document.getElementById("status");
            const result = document.getElementById("result");
            <!--检测到prompt为空不发送请求并提示-->
            if(!prompt){
                    alert("请输入图片描述");
                    return;
                }
            <!--修改status标签状态-->
            status.innerText = "正在生成图片请耐心等待..."
            try{
                <!--把提示词以POST的形式发送给后端，并得到响应体-->
                const response = await fetch(
                    "http://127.0.0.1:8000/generate",
                    {
                        method:"POST",
                        headers:{
                            "Content-Type":"application/json"
                        },
                        body:JSON.stringify({prompt:prompt})
                    }
                )
                <!--取出响应体的数据-->
                const data = await response.json();
                <!--生成图片成功，修改相应status状态，并把生成的图片放进result容器展示-->
                if(data.success){
                    status.innerText = "图片生成成功!";
                    result.src = "http://127.0.0.1:8000" + data.image_url;
                }
                <!--生成图片失败，修改相应status状态-->
                else{
                    status.innerText = "图片生成失败！";
                }
            <!--大概率是发送请求失败，控制台打印错误码-->
            }catch(error){
                console.error(error);
                status.innerText = "服务器请求失败";
            }
        }
    </script>

4. 提示词设计

第一轮迭代

中文

少女与猫在户外一起旅行，背景是夜晚，场景是大草原，远处能看到群山和星空，近处有帐篷和篝火，氛围是温馨的，画风是写实的

英文

A girl and her cat traveling together outdoors at night, on a vast grassland, distant mountains and starry night sky in the far background, a tent and a campfire up close, warm and cozy atmosphere, realistic photography style

问题

少女和猫的外貌没有描述，少女和猫之间的交互没有描述

第二轮迭代

中文

年龄17岁，留着齐肩的长发的少女与一只狸花猫在户外一起旅行，背景是夜晚，场景是大草原，远处能看到群山和星空，近处有帐篷和篝火，少女坐在草地上，篝火前，怀里抱着猫，眺望者远方，氛围是温馨的，画风是写实的

英语

A 17-year-old Asian girl with shoulder-length hair traveling outdoors with her tabby cat, at night on a vast grassland, distant mountains and starry night sky in the far background, a tent and a campfire up close, the girl sitting on the grass in front of the campfire holding her cat in her arms, gazing into the distance, warm and cozy atmosphere, realistic photography style

前端页面结果

API调用成功记录

心得体会

api_token是个人身份标识，需要严格保密，防止被别人盗用，可以写进系统环境变量每次调用的时候只显示参数名，防止暴露给别人
通过本次作业，我学会了huggingface api调用，初步掌握了web后端服务器搭建，网页html编写，web前端搭建，以及前后端交互逻辑
善用ai可以很好的提高学习效率，省去了费劲检索知识的步骤
编程时一定要有层次和模块，先想好框架再编写代码，人脑容量有限不可能同时记住所有东西

二、github个人主页搭建

采用方案1

图片展示

主页连接

三、博客随笔

个人技能树

基于python的web前后端搭建以及爬虫
基于hadoop的saprk,mapreduce,Hbase的基础运用，会基础的数据清洗以及数据挖掘
基于python的机器学习基本运用
编程语言java,python,c,c++都会基本运用
深度学习基础原理与少许框架，以自编码器族为主
常用的算法与数据结构

技术偏好

边缘计算
云计算
深度学习
LLM

代码量

目前代码量：2-3k
本学期目标代码量: 5k

本课程期待学习的知识和希望获得收获

完整的中大型项目能力
团队协作能力

软件工程课程学习指南

生成自chatgpt

📚 软件工程课程学习指南

🎯 学习目标

掌握软件开发的基本流程，了解如何进行需求分析、系统设计、编码、测试和维护。

📖 主要学习内容

软件工程基础
- 软件生命周期
- 软件开发模型
- 敏捷开发
需求分析
- 用户需求
- 功能需求
- 用例分析
系统设计
- 软件架构
- 模块化设计
- UML 建模
软件开发
- 编程规范
- Git 版本控制
- 项目协作
软件测试
- 单元测试
- 集成测试
- 系统测试
软件维护
- 软件优化
- Bug 修复
- 版本更新

🚀 学习方法

通过实际项目将需求 → 设计 → 编码 → 测试 → 维护串联起来，提高软件开发和项目实践能力。

合理性分析

合理，软件工程一门指导学科，它不教人如何具体如何写代码，而是教如何对接需求，如何推进项目，如何团队合作编程，如何测试和维护，我觉得你能给我带来帮助

后台博客编辑界面截图

右上角编辑器模式为MarkDown

posted on 2026-09-11 18:40 slantingbell 阅读(12) 评论(0) 收藏举报