从Flask到Gradio：我的Flux模型API调用与前端交互探索之旅
| 这个作业属于哪个课程 | H202601软件工程与软件工程实践 |
|---|---|
| 这个作业要求在哪里 | 第一次个人作业 |
| 这个作业的目标 | 熟悉博客园与GitHub生态，初步体验大模型API及前端交互开发 |
| 学号 | 102401213 |
一、自我评估与个人画像
1. 自我介绍
我叫薛锦荣，目前就读于计算机二班，绩点处于中上水平。在过去的学习中，我尝试跳出课本，参加过蓝桥杯竞赛，也借助 AI 辅助工具进行过小型软件的实践开发。在日常生活中，我热衷于跑步、健身、看番和打游戏。运动帮我保持充沛的精力，而二次元与游戏则是我灵感和放松的源泉。
2. 当前技能树与自我评估
- 编程语言：熟练掌握 C/C++，具备一定的 Python 开发能力。
- 计算机基础：扎实掌握数据结构，时常通过刷题（如洛谷、CF）来保持算法手感。
- 初步实践：在 AI 的辅助下，完成了简易软件从构想到落地的全过程，初步体验了开发流程。
3. 感兴趣的技术方向
我对 AI 领域抱有极大的热情，尤其希望向大模型训练、推理、AI编译与算子等底层方向深入学习。目前，我正在主动补齐计算机基础知识（计算机组成原理、操作系统、Linux基础、并行计算），为后续进入底层技术方向打下扎实的基础。
4. 目前缺乏的能力
知不足而奋进，我清楚自己距离一名成熟的软件工程师还有差距：
- 工程经验不足：缺乏大型项目开发经验，还不熟悉团队协作流程和规范。
- 代码与算法沉淀不够：代码量仍需积累，算法能力还有较大提升空间。
- 流程认知欠缺：对软件工程的具体生命周期和开发规范缺乏系统的认知。
- 大模型应用尚浅：对大语言模型（LLM）和 Agent 的实际应用与工程落地不够熟悉。
5. 代码量现状和学期目标
- 现状：当前累计代码量约 5000 行。主要来源于课程实验、洛谷/CF的算法题，以及之前在 AI 辅助下手工编写的那款小软件。
- 目标：本学期期望总代码量达到 10000 行。这是一次翻倍的挑战，我计划通过课程实践、课后练习，以及拓展自己的个人项目来达成这个目标。
二、AI 生成的软件工程课程学习指南与分析
1. AI 工具选择与 Prompt
- 使用的 AI 工具：DeepSeek
- 提示词（Prompt）：请帮我生成一份简要的软件工程课程学习指南。
2. DeepSeek 生成的指南（原文引用）
软件工程课程学习指南
- 掌握核心理论：理解软件生命周期（SDLC），包括需求分析、设计、编码、测试和维护。
- 熟悉开发模型：学习瀑布模型、敏捷开发（Scrum）、DevOps 等不同的开发流程，理解它们的适用场景。
- 工程化工具的使用：
- 版本控制：熟练使用 Git 和 GitHub（分支管理、PR、Code Review）。
- 项目管理：了解 Jira、Trello 等任务追踪工具。
- CI/CD：了解持续集成与持续部署（如 GitHub Actions）。
- 文档与设计：学会撰写需求规格说明书（SRS），使用 UML 绘制用例图、类图等。
- 代码质量与测试：掌握单元测试、集成测试。重视代码规范、重构以及设计模式。
- 团队协作：培养沟通能力，适应敏捷开发中的每日站会、迭代评审。
- 理论与实践结合：建议找一个开源项目或自己组建团队做一个小项目，将上述流程走一遍。
- 学习资源推荐：阅读《人月神话》、《代码大全》，参考 GitHub 上的 Awesome-Software-Engineering 仓库。
3. 指南内容分析（我的思考与评价）
（1）合理性分析（能够带来帮助）：
- 我非常缺乏“团队协作”和“软件工程具体流程”的经验。指南中关于 Git 分支管理、Code Review、敏捷开发（Scrum）和文档撰写的建议，精准地击中了我的短板。
- 指南强调了“代码质量与测试”，这对我平时只注重“算法题通过即可”的习惯是一个很好的纠偏，让我意识到工程级代码必须考虑可维护性。
（2）局限性分析（不适合我的地方）：
- 这份指南偏向传统软件应用开发（Web、App）。对于我向往的“AI模型训练、推理、AI编译与算子”方向，它完全忽略了 MLOps（机器学习运维）、数据版本控制（DVC） 以及 大模型时代下的软件工程特殊需求。
- 指南推荐的理论较多，但对于初学者来说，直接啃《人月神话》可能会有些吃力。
（3）对我个人的改进计划：
我会以这份指南为宏观框架，在校内课程中重点补齐 Git 协作、单元测试、UML 设计这三大短板。同时，我会在课外补充 MLOps 相关知识（如使用 Docker 部署模型、使用 W&B 追踪实验），将传统软件工程与 AI 工程化结合起来，朝我的目标方向努力。
二、Hugging Face API 调用与前端交互生成
1. 结果展示
经过一系列配置与代码调试，最终成功搭建了包含交互参数调节的 Gradio 前端页面。以下是我的前端页面展示及生成图像的效果截图。
（1）初版提示词生成结果
【图片插入建议：在此处插入你发的第一张图（左侧提示词为初版，右侧生成的图为微笑且双手举起手势的女性）】
- 使用的提示词：
A Jelita Sukawati speaker is captured mid-speech. She has long, dark brown hair that cascades over her shoulders, framing her radiant, smiling face... She gestures with her left hand, displaying a delicate ring on her pinky finger... - 画面描述：成功根据提示词生成了一位穿着彩色图案连衣裙、戴着绿色挂绳的女性演讲者。但图片呈现出明显的“AI生成感”，光影较平，人物面部表情和手势略显僵硬。
（2）修改后提示词生成结果
- 使用的提示词：
A realistic photograph of a Jelita Sukawati speaker... She has a calm and serious expression, with both hands neatly folded and resting in front of her... Soft diffused studio lighting, subtle rim light, photorealistic, ultra-detailed skin texture, shot on 35mm lens, 8k resolution, cinematic texture. - 画面描述：修改后，人物表情变为平静严肃，双手自然收起，不再干扰画面。光影层次立体，皮肤和衣服的纹理十分真实，彻底消除了初版的塑料感，达到了“最贴近真实世界”的要求。
2. 具体配置
本项目主要是在本地环境下进行开发和调试，具体配置如下表所示：
| 配置项 | 具体配置/参数 | 说明 |
|---|---|---|
| 开发环境 | Windows 10, Python 3.x, VS Code | 本地开发环境 |
| 环境变量文件 | .env 文件 |
存放 HF_TOKEN=hf_... |
| 网络镜像配置 | HF_ENDPOINT="https://hf-mirror.com" |
解决国内网络连接超时问题 |
| 代理绕过配置 | NO_PROXY="127.0.0.1,localhost" |
防止本地 Gradio 服务被代理拦截 |
| 前端框架 | Gradio | 用于快速构建交互式 Web 界面 |
| 模型调用方式 | gradio_client.Client |
直连公开 Space DamarJati/FLUX.1-RealismLora |
| 生成参数设置 | CFG Scale=3.2, Steps=32, 尺寸=1152x896, LoRA Scale=0.85 | 前端页面可调节参数 |
3. 操作流程
（1）代码编写过程
首先，我在 Hugging Face 官网注册了账号并生成了 Access Token，将其写入 .env 文件。在初步尝试中，我编写了 Flask 后端（app.py）和纯原生 HTML 前端（index.html），通过 InferenceClient 去调用官方 API。但在本地调试时，遭遇了严重的网络问题。
（2）遇到的问题及解决办法
- 问题：网络连接超时与代理拦截
- 现象：运行代码时频繁报错
[WinError 10060] 由于连接方在一段时间后没有正确答复...，甚至在配置代理后，Gradio 本地服务因502错误无法启动。 - 解决办法：在代码开头加入了
os.environ["HF_ENDPOINT"] = "https://hf-mirror.com"并使用国内镜像站。同时添加os.environ["NO_PROXY"] = "127.0.0.1,localhost"，强制本地流量不走代理，成功解决了连接报错。
- 现象：运行代码时频繁报错
4. 提示词修改
为了让模型更贴近真实会议场景的演讲者状态，我进行了两次提示词迭代修改：
（1）初版提示词
A Jelita Sukawati speaker is captured mid-speech. She has long, dark brown hair that cascades over her shoulders, framing her radiant, smiling face. Her Latina features are highlighted by warm, sun-kissed skin and bright, expressive eyes. She gestures with her left hand, displaying a delicate ring on her pinky finger, as she speaks passionately. The woman is wearing a colorful, patterned dress... The lanyard prominently displays the "CagliostroLab" text...
修改思路：初版提示词将人物设定为“微笑（smiling face）”、“左手做手势（gestures with her left hand）”。这虽然符合原图，但导致生成的人物动作过于随意，光影没有层次感。我希望得到一个更严肃、正式，且光影质感更高级的画面。
（2）修改后提示词
A realistic photograph of a Jelita Sukawati speaker captured mid-speech. She has long, dark brown hair that cascades over her shoulders, framing her face... She has a calm and serious expression, with both hands neatly folded and resting in front of her. She is wearing a colorful, patterned dress... Soft diffused studio lighting, subtle rim light, photorealistic, ultra-detailed skin texture, sharp focus on the subject, shot on 35mm lens, 8k resolution, cinematic texture.
修改思路：
- 动作与表情重构（消除矛盾）：彻底删除了关于“微笑”、“手势”和“小指戒指”的描述，强制加入
calm and serious expression（平静严肃的表情）和both hands neatly folded（双手交叠收起），精确控制人物的姿态。 - 光影与质感增强（引入摄影术语）：去掉了原词中偏重自然光的描述，添加了
Soft diffused studio lighting（柔和漫反射影棚光）、subtle rim light（微妙的轮廓光）来重塑光影。同时加入shot on 35mm lens（35mm镜头）、ultra-detailed skin texture（超细节皮肤纹理）、8k resolution（8k分辨率）等专业词汇，利用模型对“写实”的倾向，大幅提升画面质感，从而获得了最终满意的成像效果。
三、Github个人主页搭建
方案二看起来更复杂，短时间难上手，所以我选择比较简单的方案一。
后续有时间一定用GitHub Pages搭建个人主页。
- 我的个人主页：https://github.com/emiliaistureangle
- README：https://github.com/emiliaistureangle/emiliaistureangle/blob/main/README.md
下面是我在README编辑的截图：
四、对课程的期待及心得体会
在正式进入这门课程之前，我对“软件工程”的理解其实比较片面，总觉得它大抵就是教我们如何更规范地写代码。但通过这次完成第一次作业的完整历程，我才真正体会到“工程”二字的重量。它从来都不只是敲击键盘的编码工作，而是包含了网络配置、环境兼容、接口调试、前端交互、算力调度等无数琐碎细节的系统工程。
这次调用大模型 API 的体验，堪称一场真实的“工程排错演练”。为了让代码跑通，我经历了技术路线的一次次重构。起初，我尝试使用传统的 Flask 后端加原生 HTML 前端进行开发，却立刻遭遇了 WinError 10060 网络超时和代理拦截导致的 502 报错。在反复配置镜像源和绕过代理后，又撞上了官方 Serverless API 的 ZeroGPU quota exceeded 额度限制。最终，我果断放弃原有路径，改用 Gradio 搭建交互界面，并借助 gradio_client 直连公开 Space，终于成功实现了图像生成。
在调试提示词的过程中，我也完成了一次从“简单描述”到“精准控图”的进阶。初版提示词中“微笑”与“手势”的设定，让生成的画面带有明显的 AI 塑料感。通过将动作修改为“平静严肃、双手交叠”，并引入 35mm 镜头、柔和漫反射影棚光、超细节皮肤纹理等专业摄影术语，最终生成的画面质感得到了质的飞跃。这让我深刻意识到，提示词工程不仅仅是“许愿”，更是对模型能力边界的精准试探与引导。
更重要的是，这次作业让我更加明确了自己未来的努力方向。我始终对大模型训练、推理优化以及 AI 编译与算子方向充满热情。在这次的实践中，应用层的网络波动、算力限制、前后端割裂等痛点，反而让我更加坚定了去底层探寻答案的决心——只有基础底座和底层推理效率足够扎实，上层的 AI 应用才能拥有真正稳定的生命力。平时在代码调不通、心烦意乱时，我会去跑跑步、健健身，用运动来重置大脑的疲惫感，再回来直面那些复杂的报错。
感谢老师和助教耐心阅读至此。我深知自己目前的代码量和工程经验还远远不够，作业中难免有不成熟或表达不当的地方，诚恳地希望老师和助教学长学姐能给予批评指正，帮助我在软件工程的道路上走得更稳、更远。
附录：Markdown编辑使用截图：
浙公网安备 33010602011771号