软件工程作业1:让AI画出想象,让代码连接现实

这个作业属于哪个课程 H202601 软件工程与软件工程实践
这个作业要求在哪里 第一次个人作业
这个作业的目标 完成 GitHub、博客园等开发平台的基础建设;实践 Hugging Face Flux 模型 API 调用和前端交互;梳理个人技能树、代码积累和技术兴趣,明确课程学习目标及未来发展规划。
学号 112401237

一、关于我

你好,我是吴诗莹。由49%的理性和51%的感性组成我,生活中还是比较感性的,我更喜欢去感受周围的世界,每一份感受都是特别与珍贵的。但在处理事情以及做决定上我觉得自己还是比较理智,这个占比其实是我追求的平衡了hh我希望自己多一点点感性但不要被感性完全占据,保持理智!然后我觉得自己其实也是一个比较有想法、想法比较丰富的人,而学习计算机的过程在某种程度上真的在帮助放大了人的创造力ദ്ദി˶ー̀֊ー́ )✧

我的个人tag:#音乐重度依赖者#电影爱好者#羽毛球业余选手#烟花秀追随者
(“看有烟花的夜空闪动、感动,一切一瞬间就有可能变得不同~”)
叠甲:我会markdown的格式的,这个#是为了表示tag的“艺术”效果,附上后台博文编辑页面
image
以及关注截图
image

1.1 技能树与自我评估

已具备哪些专业知识与能力

能力方向 具体内容
编程基础能力 掌握 C/C++、Python 等编程语言,具备基本程序设计和算法实现能力;能够完成数据结构、算法实验以及中小规模程序开发任务;具备代码调试、问题分析和程序优化能力。
计算机专业基础知识 学习过 数据结构、计算机组成原理、计算机网络 等核心课程;掌握基本数据结构与算法思想,了解计算机系统组成和网络通信原理;具备进一步学习人工智能相关技术的专业基础。
数据分析与数学建模能力 能够使用 Python 进行数据处理、统计分析、数学建模和结果可视化;具备将实际问题抽象为数学模型,并通过算法进行分析和验证的能力;通过数学建模竞赛积累了问题分析和模型设计经验。

感兴趣的技术方向
目前主要关注人工智能领域的发展方向,包括 计算机视觉、深度学习、大语言模型以及智能体 等方向。希望通过项目实践进一步学习相关技术,了解其在实际场景中的应用,并探索不同人工智能技术之间的结合与创新。

有待提升的能力

  1. 项目实战与工程能力。
    目前参与的项目主要集中在课程实验、数学建模和科研训练,缺少完整的大型项目开发经历。希望通过实际项目进一步提升需求分析、系统设计、代码实现、测试部署等工程实践能力,培养将算法和技术应用到真实场景中的能力。

  2. 技术深度与科研能力。
    目前对人工智能相关技术具备一定基础,但对深度学习模型原理、前沿技术以及论文研究仍缺少深入理解。希望通过阅读论文、复现实验和参与科研项目,进一步提升技术理解能力和科研探索能力。

  3. 团队协作与项目管理能力。
    目前具备一定的小规模团队合作经验,但尚未参与过十几人规模的大型团队项目。在任务分工、沟通协调、项目推进和团队管理等方面仍需积累经验,希望通过参与更多团队项目提升综合协作能力。

1.2 目前代码量与本学期目标

  • 目前的代码量大概3000-5000行?(之前确实没什么管理自己代码的意识orz,接下来会学一下git有意识做起来,所谓代码量主要来源于之前学习编程语言和数据结构的课内作业、课外自己练习真的很少量的算法题、还有数模比赛里的一些分析建模数据清洗)
  • 本学期目标破w行吧,尽量达到1.5w行(主要希望从软件工程这门课的实战提高自己的代码量,然后也正在参与的科研训练项目应该也会积累不少,再加上还在打建模比赛、展望一下!)

1.3 我的未来三年规划

尽全力争取保研->gap时间里拿一段时间去实习->研一确定就业方向(更为具体详细的规划写在底下个人主页链接里)
其实现在还挺迷茫的,因为感觉确实把大部分精力都放在课内卷那几个小数点,真正的技术掌握得很少。所以这三年内也是需要push自己主动去学习实践新的技术知识,尽可能迅速成长,毕竟读完研最后还是要找工作的。

二、软件工程课程学习规划与能力提升目标

2.1 最期待学习的知识与希望的收获

我最期待在软件工程课程中系统学习软件开发的完整流程和工程化方法,包括需求分析、系统设计、软件架构、编码规范、软件测试、项目管理以及软件维护等内容。相比单纯学习编程,我希望能够理解一个软件项目从需求提出到最终交付的整个过程,并掌握如何通过合理的方法提高软件的质量、可维护性和开发效率。

同时,我也希望通过课程中的团队项目和实践案例,学习如何进行团队协作、任务分工、版本管理和沟通交流,提升自己解决实际问题的能力。

最终,我希望不仅能够“写出代码”,更能够学会“如何工程化地开发一个可靠、可维护的软件系统”,培养系统思维、项目实践能力和团队协作能力,为今后的专业学习和实际软件开发项目打下基础。

2.2 AI生成的课程学习指南

我向chatgpt发送了个人情况以及老师上课给出的所学的参考课本,得到的学习指南如下:

重点学习内容

1. 软件开发过程与工程思想

  • 软件生命周期与开发模型;
  • 软件项目管理与质量保证;
  • 软件工程的基本思想和开发流程。
    结合《软件工程实践者的研究方法》,理解软件开发不仅是编写代码,更是通过规范的方法解决实际问题。

2. 需求分析与系统设计

  • 用户需求与需求分析;
  • UML 建模、软件架构与模块划分;
  • 培养分析实际问题、设计软件系统的能力。

3. 软件编码与工程实践

结合《构建之法》,学习:

  • 代码规范与软件设计;
  • Git 版本控制;
  • 代码复审与团队开发。

逐步建立规范的代码管理和工程化开发习惯。

4. 软件测试与维护

  • 软件测试的基本方法;
  • 单元测试与软件维护;
  • 理解软件不仅要实现功能,还要保证质量和可维护性。

5. 团队协作与项目实践

  • 项目任务分工与进度管理;
  • 团队沟通与协作开发;
  • 通过课程项目积累实际的软件开发经验。

学习计划

第一阶段:建立整体认知

  • 阅读两本参考书的相关内容;
  • 掌握软件工程基本概念和开发流程。

第二阶段:加强工程实践

  • 学习 Git 等开发工具;
  • 规范代码结构,了解团队开发方式。

第三阶段:结合项目实践

  • 在课程项目中实践需求分析、设计、开发和测试;
  • 总结项目中的问题和经验。

学习 Tips

  1. 课前:快速浏览课件,了解本节核心概念和问题。
  2. 课上:多思考“如果是我来做,应该怎么设计”。
  3. 课后:结合小项目实践,把知识真正用一遍。
  4. 和同学:互相 Code Review、讨论设计方案,学习不同思路。
  5. 小组合作:主动参与需求、设计、开发、测试,不只负责自己的模块。
  6. 定期复盘:总结本周学了什么、遇到什么问题、还有什么没掌握。
    核心:少背概念,多做实践;少自己闷头学,多交流和复盘。

重点学习内容我觉得是有所帮助的,虽然是比较概括性的重点,但是提供了一些关键性的专业术语,我可以在学习过程中有意识地去关注,至于学习计划感觉太笼统了,是先学理论再实践很直白的理念,所以学习计划这一部分帮助不大,学习Tips也还可以,可以帮助我在学习这门课的方法上的选择。

三、huggingface-API的调用

3.1 总体实现思路

本次任务的目标是调用 Hugging Face 上的 XLabs-AI/flux-RealismLora 模型,生成一张尽可能贴近真实世界的图像,并结合前端页面实现交互式生成。

整体实现方式采用 Flask 作为后端服务,HTML、CSS 和 JavaScript 作为前端页面。用户在网页中输入 Prompt 后,前端通过 Fetch API 将提示词发送给 Flask 后端,后端读取 .env 文件中的 Hugging Face Token,并使用 huggingface_hub 中的 InferenceClient 调用模型生成图像,通过 provider="auto" 配置推理服务提供商。随后调用 client.text_to_image(),并指定 XLabs-AI/flux-RealismLora 模型,根据用户输入的 Prompt 生成图像。模型返回结果后,后端将图片保存到 static/generated 目录,并把图片路径返回给前端,最终在网页中展示生成图像。流程图如下:
126f83d0905e93f9a5112bd01a546ca8

3.2 实验环境与项目结构

本实验在 PyCharm 中完成,使用 Python 虚拟环境管理依赖。项目主要由 Flask 后端文件、前端模板文件、静态样式文件以及生成图片保存目录组成。

huggingface-flux-web/
│
├── app.py                 # Flask 后端,负责 API 请求和调用模型
├── requirements.txt      # 项目依赖
├── .env                  # 保存 Hugging Face Token
│
├── templates/
│   └── index.html         # 前端页面
│
└── static/
    ├── style.css          # 页面样式
    └── generated/         # 保存生成后的图片

image

3.3 操作过程

3.1.1 Hugging Face Token 获取与配置

在 Access Tokens 页面中新建 Token,Token 类型选择 Fine-grained,并使用 Inference 预设,以保证程序能够调用 Hugging Face 的推理服务。
为了避免将 Token 直接写入代码,本实验将 Token 保存在 .env 文件中,并在 Python 程序中通过 python-dotenv 读取。这样可以提高程序安全性,也方便后期修改 Token。

from dotenv import load_dotenv
import os
# 加载 .env 文件
load_dotenv()
# 读取 Hugging Face Token
HF_TOKEN = os.getenv("HF_TOKEN")
if not HF_TOKEN:
    raise RuntimeError(
        "没有读取到 HF_TOKEN,请检查 .env 文件"
    )

3.1.2 后端 API 调用代码实现

后端使用 Flask 搭建 Web 服务,并通过 /generate 接口接收前端传来的 Prompt。程序读取 .env 中的 HF_TOKEN 后,创建 Hugging Face 的 InferenceClient,并指定模型地址 XLabs-AI/flux-RealismLora 完成图像生成。核心代码如下所示:

HF_TOKEN = os.getenv("HF_TOKEN")

MODEL_ID = "XLabs-AI/flux-RealismLora"

client = InferenceClient(
    api_key=HF_TOKEN,
    provider="auto"
)

# 后端通过 /generate 接口接收前端发送的 Prompt
@app.route("/generate", methods=["POST"])
def generate():

    data = request.get_json()

    prompt = data.get(
        "prompt",
        ""
    ).strip()

真正调用模型的代码:

image = client.text_to_image(
    prompt=prompt,
    model=MODEL_ID
)

其中 HF_TOKEN 用于身份认证,MODEL_ID 用于指定本次实验调用的模型。text_to_image() 是本实验的核心 API 调用方法,它根据前端传入的 Prompt 生成图像结果。

3.1.3 前端交互页面实现

前端页面主要包含 Prompt 输入框、生成按钮、状态提示区域和图像展示区域。用户输入提示词后点击“生成图像”,JavaScript 会将 Prompt 通过 Fetch API 发送到 Flask 后端的 /generate 接口。

const response = await fetch("/generate", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        prompt: prompt
    })
});

这段代码实现了前端到后端的数据传输。用户无需修改 Python 代码,只需要在网页中输入不同 Prompt,就可以多次进行交互式图像生成。效果如下:

FLUX Realism

3.4 结果展示

API调用成功的记录如下:

image

前端页面最终生成图像的截图如下:

dd584389ba27be31427d246761d40c4d

3.5 提示词设计思路和修改过程

提示词我选择用英文来描述,这是因为许多图像生成模型在训练阶段接触了大量英文图文数据,对英文关键词之间的关联理解更加成熟。描述画面细节、摄影风格和视觉效果时,英文提示词通常具有更好的表现力。
首先我做了一组咖啡馆人物图像的提示词尝试
咖啡馆人物提示词V1:

A realistic photo of a young woman drinking coffee in a cafe, natural lighting, high detailed.

咖啡馆人物提示词V2:

Candid photographic portrait of a 25-year-old Asian woman holding a ceramic mug in a cozy indie coffee shop, natural window light softly illuminating her face, fine skin texture with subtle imperfections, stray hairs, visible steam rising from the mug, wooden tabletop with soft coffee stains. Shot on 35mm lens, f/1.8 aperture, natural film grain, filmic color grading, soft bokeh background, highly detailed, realistic, ultra-photorealistic.

提示词 V2 相比 V1,主要增加了人物细节、环境背景、摄影参数、真实感控制等细节方面的信息。
两版图像对比如下(再写了一个网页来专门对比):
image
坦白讲,就逼真程度,两个真的有很大差别吗。这也说明这个模型也是有一个比较高的下限?我觉得较短的提示词,该模型的生图效果也已经较为逼真了,在这个场景对人物进行更加细节的描述,但其实差别并不是很大,或者说从肉眼上看,出图质量变化不大(这里只是说质量感受上,如果图像内容差异化表达上肯定是需要更加细节的描述的)
我觉得达到一定基础的提示词再详细也不太影响生成图片的逼真效果了,而是尝试对于图像中的多个组成部分,如果描写得更详细的部分,是不是会在图像中比较突出
因此我再做了一组老人与海(x)----码头边的渔夫
码头边的渔夫提示词V1:

a fisherman wearing a worn cap and a thick sweater, net slung over his shoulder, face weathered by the sea; a lively harbor at dawn.

ef4768a352150f35eeda67b2e6a6a791
可以看到前面的人像挺逼真的,但是背景虚化相对严重,而且画面的主体是人物。
那如果想要比较清晰的背景,并且不让渔夫占据大部分画面,那么尝试用更详细的语言描述港口,让它的内容数量超过渔夫于是设计出第二版提示词
码头边的渔夫提示词V2:

A lively harbor at dawn with fishing boats returning laden with the day's catch, gulls circling overhead, the sky painted in pastel hues of pink and orange; warehouses and cranes lining the docks, the salty smell of the sea in the air; a fisherman wearing a worn cap and a thick sweater, net slung over his shoulder, face weathered by the sea.

dd584389ba27be31427d246761d40c4d
可以看到港口成了画面的主要内容,并且画面背景更加清晰。
总结来说,通过调整提示词的详细程度,我们可以控制主体在图像中的突出程度和背景的清晰度ദ്ദി˶ー̀֊ー́ )✧在设计提示词的时候有意识控制详细程度,可以帮助我们更好地得到想要的图片。

3.6 体验和心得

  • 在 API 调用过程中,最大的体验是感受到云端模型服务的便利性。相比于本地部署大型图像生成模型,使用 Hugging Face API 不需要配置复杂的 GPU 环境,也不需要提前下载庞大的模型文件,只需要通过 Token 验证身份,并调用对应模型接口即可完成图像生成,大大降低了模型使用门槛确实很方便。
  • 虽然不是第一次调用API,但是作业要求里面的在调用模型的代码基础上结合前端接口,实现交互生成是第一次做,因为确实没有学过前后端相关知识,特别鸣谢chatgpt老师提供的代码支持。让我体验到了一个接近小型AI Web应用开发,不得不说AI时代真的让很多事情都变得方便(方便*2)
  • 研究提示词的设计来生成图片我还挺感兴趣的,很多时候和AI对话的语言也是需要学习的,这样也会更高地提高你的效率。

四、Github个人主页搭建

我选择了方案二,借助GitHub Pages搭建个人主页,制作内容较为充实的展示页面。
风格上选择了简约的学术风,不过我目前暂时没有什么学术研究成果显得比较单薄,画饼未来会填充的啊会的会的会的。
个人主页:https://zwoyyzy.github.io/
源码仓库:https://github.com/academicpages/academicpages.github.io
目前主页的内容就是按照作业要求的几个方面去建设的,后续有时间将(一定)填充入更丰富更个性化的内容,动态更新。
主页预览如下:
image
另外的页面拼图后预览:更详细内容欢迎click链接访问
df95e96491a5f941ac6b0220de322e24

通过 Fork 开源仓库、修改 Markdown 页面内容、调整配置文件以及部署 GitHub Pages,我实现了我个人独家的主页搭建。过程中学习了 GitHub 仓库管理、开源模板复用、版本管理以及静态网站部署等相关技术。不得不说开源的伟大ദ്ദി˶ー̀֊ー́ )✧
image

五、感想

做第一次作业下来其实还是花了不少时间的,但是收获也不少,在实践中得到锻炼,相应的能力也有所提升。但同时我也深知自己的实践能力还有比较大的提升空间,也是在这个开篇给自己加油打个气,希望自己能真的多主动、去实践做一些项目提升实践能力。写到这里,又感性了。下面都是感性发言。最初是抱着兴趣和憧憬转入计算机专业,我也知道CS是一个很卷的专业,这是一条很卷的路,在刚开始还不太了解的阶段会觉得omg很酷很有意思的专业与行业,一眨眼两年就过去了,这个选择给我带来了很多变化,现在大三好像又是一个新的节点,需要我去做出关于未来新的选择,目前更多地可能是半推半就,其实有时候也会害怕个人能力的不足是否能适合,这么卷的行业里...我最开始想了很久才决定转专业的,当时备忘录里一直记着一句话,“天赋一件是很残忍的事情,它吝啬而挑剔,但只要它选择你,你就所向披靡;而热爱是一件公平的事,它稀有而珍贵,但只要你选择它,你就光芒无限”,我觉得可以肯定的是我还是有兴趣的,兴趣就应该是一个纯粹的东西啊,所以就再给自己一些勇气吧,抓紧时间去提升实践能力!!!感觉真的也能在这门课上学到一些所渴望的真本领,虽然做得很累但也有所期待!亲爱的作业博客,我们下次见~

非常感谢老师&助教您们的浏览!如果可以的话可以的话可以拥有一个还可以的评价吗(´• ω •`)
image

posted @ 2026-09-09 10:08  ijustwannarun  阅读(34)  评论(2)    收藏  举报