软件工程作业 1：API 调用实践、个人主页搭建与自我评估

这个作业属于哪个课程 H202601软件工程与软件工程实践
这个作业要求在哪里 软件工程第一次作业
这个作业的目标 1.完成自我评估，对自己进行总结，与同学、老师相互了解，并明确未来目标。2.掌握Markdown的使用方法，并利用AI工具为自己规划学习方向 3.初步了解Github，huggingface的使用方法
学号 102402110

准备工作部分：

1.首先准备一个GitHub账号

我的主页：aaarctic

2.准备一个博客园账号，建立个人技术博客

我的博客：Cactusheep
已关注老师与助教博客image

任务一、基于 Hugging Face API 与 FLUX 模型的 AI 图像生成系统

1.1 实验目的

本实验旨在学习并掌握 Hugging Face 平台中模型 API 的基本调用方法，通过注册 Hugging Face 个人账号并获取 API Token，在 Python Flask 后端中调用 Hugging Face 推理服务，实现根据用户输入的文本提示词自动生成 AI 图像。

同时，本实验结合前端网页界面，实现用户输入提示词、发送生成请求、后端调用 AI 模型、返回生成图片并展示生成结果的完整流程。

通过本次实验，可以了解掌握以下内容：

  • Hugging Face API Token 的获取与配置；
  • Flask Web 框架的基本使用；
  • huggingface_hub 库的使用；
  • AI 文生图模型的 API 调用；
  • 前后端数据交互；
  • API 调用过程中错误信息的分析与处理；

1.2 实验环境

本次实验使用的开发环境如下：

项目 环境
操作系统 Windows
开发工具 Visual Studio Code
编程语言 Python
后端框架 Flask
前端技术 HTML + CSS + JavaScript
AI 平台 Hugging Face
图像生成模型 black-forest-labs/FLUX.1-dev
API 调用库 huggingface_hub
环境变量管理 python-dotenv
图像处理库 Pillow

1.3 实验原理

本实验采用前后端分离的基本思想，由前端负责接收用户输入，由 Flask 后端负责调用 Hugging Face API。

系统的整体工作流程如下：

用户输入图片提示词 Prompt
            ↓
      前端 JavaScript
            ↓
       POST /generate
            ↓
       Flask 后端接口
            ↓
     Hugging Face API
            ↓
        FLUX.1-dev
            ↓
         生成图片
            ↓
      Flask 保存图片
            ↓
       返回图片地址
            ↓
       前端显示图片

因此，本实验实现了从用户输入文本到 AI 模型生成图片，再到网页展示图片的完整流程。

1.4 Hugging Face API Token 获取与配置

1.4.1 创建 Hugging Face 账号

首先访问 Hugging Face 官方网站并注册个人账号。本人账号：aaarctic

登录账号后进入个人设置页面，找到 Access Tokens 页面，创建用于 API 调用的 Token。

本实验主要使用 Token 对 Hugging Face 模型进行 API 调用，因此需要确保 Token 具有相应的访问权限。本次创建了此token：
image

1.4.2 配置环境变量

为了避免将 Token 直接写入 Python 源代码，本实验采用 .env 文件保存 API Token。
在项目根目录下创建：

.env

文件内容如下：

HF_TOKEN=HuggingFace_Token（此处为自己的token保密哦嘿嘿）

在这里采用这种方法，通过环境变量保存 Token，可以避免在 Python 源代码中直接暴露敏感信息，提高程序的安全性。

1.5 项目结构

本实验最终项目结构如下：

flux_homework/
│
├── app.py
│
├── requirements.txt
│
├── .env
│
├── templates/
│   └── index.html
│
└── static/
    └── generated/
        └── 生成的图片.png

各文件和文件夹的主要作用如下：

文件或文件夹 作用
app.py Flask 后端程序，负责 API 调用和图片生成
requirements.txt 保存 Python 项目依赖
.env 保存 Hugging Face API Token
templates/index.html 前端网页页面
static/generated/ 保存 AI 生成的图片

其中，app.py 是整个系统的后端核心文件，负责接收前端请求、调用 Hugging Face API、保存生成图片以及向前端返回结果。

index.html 是系统的前端页面，负责提供 Prompt 输入框、生成按钮以及图片显示区域。

1.6 Python 依赖

本实验使用 requirements.txt 文件管理项目所需要的 Python 第三方库。

requirements.txt 内容如下：

Flask==3.1.0
huggingface_hub>=0.30.0
python-dotenv==1.0.1
Pillow>=10.0.0

在 VS Code 中打开终端，执行：

pip install -r requirements.txt

依赖安装成功即可进行下一步。

1.7 后端程序设计

1.7.1 导入相关库

后端程序首先导入 Flask、Hugging Face API 客户端以及环境变量管理相关模块。

import os
import uuid

from flask import Flask, render_template, request, jsonify
from dotenv import load_dotenv
from huggingface_hub import InferenceClient

各模块的作用如下：

  • Flask：创建 Web 后端服务器；
  • request：接收前端提交的数据；
  • jsonify：向前端返回 JSON 数据；
  • render_template：加载 HTML 页面；
  • load_dotenv：读取 .env 文件中的环境变量；
  • InferenceClient：调用 Hugging Face 推理服务；
  • uuid：生成唯一的图片文件名。

1.7.2 读取 Hugging Face Token

程序启动时读取 .env 文件：

load_dotenv()

HF_TOKEN = os.getenv("HF_TOKEN")

通过 os.getenv() 可以获取 .env 文件中保存的 HF_TOKEN。

然后创建 Hugging Face API 客户端：

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

这样，程序就可以使用个人 Token 访问 Hugging Face 的推理服务。

1.7.3 创建 Flask 应用

使用 Flask 创建 Web 应用：

app = Flask(__name__)

然后设置网站首页：

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

当用户访问：

http://127.0.0.1:5000

时，Flask 会加载 templates/index.html 文件并显示前端页面。

1.7.4 创建图片生成接口

后端通过 /generate 接口接收前端发送的图片生成请求：

@app.route("/generate", methods=["POST"])
def generate_image():

由于前端采用 POST 方法发送数据，因此后端接口需要设置：

methods=["POST"]

获取前端发送的 JSON 数据：

data = request.get_json()

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

其中 prompt 为用户在网页输入框中输入的图片提示词。

1.7.5 判断 Prompt 是否为空

如果用户没有输入 Prompt，则返回错误信息：

if not prompt:
    return jsonify({
        "success": False,
        "error": "请输入图片提示词"
    }), 400

这样可以防止在没有输入任何内容的情况下直接调用 AI 模型。

1.7.6 调用 Hugging Face API

获取用户输入的 Prompt 后，调用 Hugging Face 图像生成服务：

print("=" * 60)
print("正在调用 Hugging Face API...")

image = client.text_to_image(
    prompt=prompt,
    model="black-forest-labs/FLUX.1-dev"
)

本实验实际成功调用的模型为：

black-forest-labs/FLUX.1-dev

1.7.7 保存生成图片

生成图片后，首先创建图片保存目录：

save_directory = "static/generated"

os.makedirs(
    save_directory,
    exist_ok=True
)

然后使用 UUID 创建随机文件名：

filename = uuid.uuid4().hex + ".png"

然后生成完整保存路径：

filepath = os.path.join(
    save_directory,
    filename
)

最后保存图片：

image.save(filepath)

1.7.8 返回生成结果

图片保存成功后，后端将图片访问地址返回给前端：

return jsonify({
    "success": True,
    "image_url": "/" + filepath.replace("\\", "/")
})

前端获取这个图片地址后，就可以在网页中显示生成的图片。

1.8 前端页面设计

前端页面使用 HTML、CSS 和 JavaScript 实现。
页面标题设置为：

AI Realistic Image Generator

副标题设置为：

Hugging Face + FLUX 图像生成系统

1.8.1 Prompt 输入框

用户可以在 Prompt 输入框中输入希望生成的图片内容。
用户输入提示词
输入完成后点击：

生成图片

点击即可开始生成图片。

1.8.2 JavaScript 发送请求

前端使用 JavaScript 的 fetch() 方法向 Flask 后端发送请求。
核心代码如下：

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

1.8.3 获取后端返回结果

前端获取后端返回的数据：

const data = await response.json();

如果后端返回：

{
    "success": true,
    "image_url": "/static/generated/example.png"
}

则说明图片生成成功。

1.8.4 显示生成图片

前端获取图片地址后，将图片动态添加到页面：

result.innerHTML = `
    <h2>生成结果</h2>
    <img
        src="${data.image_url}"
        alt="AI Generated Image"
    >
`;

这样就可以直接看到 AI 生成的图片。

1.9 系统运行

完成上述步骤后就可以在 VS Code 终端中运行：

python app.py

程序成功启动后显示：

AI 图片生成网站正在启动...

请打开浏览器访问：

http://127.0.0.1:5000

* Serving Flask app 'app'
* Debug mode: on
* Running on http://127.0.0.1:5000

点击即可打开网站。

运行结果

这是我的调用成功截图：
d056f64da905f68c3e9776e2f017edf0
25d54a8d176efd88025ddc3ec0439b75

1.10 API 调用记录

在网页中输入 Prompt 后，点击“生成图片”按钮，前端会向 Flask 后端发送请求。
后端开始调用 Hugging Face API。
本次实验的 API 调用过程可以表示为：

前端提交 Prompt
        ↓
Flask 接收 POST 请求
        ↓
调用 Hugging Face API
        ↓
FLUX.1-dev 生成图片
        ↓
服务器保存图片
        ↓
返回图片地址
        ↓
浏览器成功加载图片

图 1-2 Hugging Face API 调用成功记录
**656c7066436716ab2e9e76380af3f6ab
**

1.11 Prompt 设计

1.11.1 Prompt 设计思路

本实验选择“森林中的现代玻璃小屋”作为生成对象。
Prompt 主要从以下几个方面进行描述：

描述方向 具体内容
图片主体 现代玻璃小屋
建筑环境 松树林、草地、湖泊
建筑材质 玻璃、木材、黑色金属
光线 自然阳光、室内暖光
摄影方式 35mm、全画幅相机
真实感 Photorealistic
环境细节 落叶、松针、碎石、泥土
画面风格 真实建筑摄影

1.11.2 初始 Prompt

初始 Prompt 如下：

A highly realistic professional photograph of a modern glass cabin deep in a peaceful pine forest, surrounded by tall green pine trees and lush grass, large floor-to-ceiling windows reflecting the natural landscape, warm interior lights visible through the glass, early morning sunlight passing through the trees, realistic shadows and reflections, detailed wood and glass textures, natural colors, realistic environmental lighting, cinematic composition, 35mm photography, subtle depth of field, high detail, photorealistic, authentic architectural photography

生成第一次图片：d4b0ca5aa1deabdab13ab00f7edc2830

初始 Prompt 生成的图片已经能够表现玻璃小屋和森林环境，但部分建筑表面过于干净，容易出现类似三维建筑效果图的感觉。

因此，我进一步对 Prompt 进行了优化，增加建筑材质细节。

加入：

slightly uneven natural wood siding

用于描述自然木材的不规则纹理。
加入：

subtle imperfections in the black metal frames

用于增加黑色金属框架的细微差异。
加入：

realistic glass with faint fingerprints and tiny reflections

用于模拟现实生活中玻璃表面的细小痕迹和反射。

加入：

minor weathering
small stains
variations in the wood
natural construction joints and hardware

这些描述可以让建筑不再看起来过于完美，而更加接近真实建筑。

同时增加：

slightly messy and naturally lived-in

使室内环境具有真实生活痕迹，而不是完全按照建筑效果图进行摆放。

为了让森林环境更加真实，加入：

fallen leaves
pine needles
small rocks
patches of bare soil
a simple uneven gravel path

经过多次调整后，最终使用的 Prompt 如下：

An extremely photorealistic candid architectural photograph of a real small modern glass cabin built in a pine forest beside a quiet mountain lake. The cabin looks naturally lived-in and realistically constructed, with slightly uneven natural wood siding, subtle imperfections in the black metal frames, realistic glass with faint fingerprints and tiny reflections, minor weathering on the deck, small stains and variations in the wood, natural construction joints and hardware. Inside the glass cabin are ordinary realistic furniture, a fabric sofa, wooden dining table, several chairs, a few books, simple plants, a small kitchen and warm household lamps. The interior is slightly messy and naturally lived-in rather than perfectly arranged.

The cabin is surrounded by naturally growing pine trees, wild grass, fallen leaves, pine needles, small rocks, patches of bare soil and a simple uneven gravel path. The lake in the background has subtle ripples and imperfect natural reflections. Distant mountains are partially obscured by atmospheric haze. Natural late afternoon daylight, realistic exposure, realistic white balance, physically accurate shadows, subtle lens imperfections, natural contrast, realistic texture, slight photographic grain, authentic full-frame DSLR photograph, 35mm lens, f/4 aperture, natural depth of field, documentary architectural photography, unedited realistic photography, true-to-life colors, extremely detailed, photorealistic.

No people, no text, no logo, no fantasy architecture, no exaggerated luxury, no perfect symmetry, no CGI, no 3D rendering, no illustration, no artificial glossy surfaces.

1.11.3 最终生成效果

使用优化后的 Prompt 重新调用 Hugging Face API 后，最终生成了一座位于松树林中的现代玻璃小屋。
优化后的 Prompt 比初始 Prompt 增加了更多现实世界中的细节，使建筑和环境不再过于规则。

图 1-3 最终 AI 图片生成效果

**bf2b217ca10168c0d69377c08919662b
78fab6bfd34d658bf2575fefb52720a7

**

1.12 实验心得

通过本次实验，我对 Hugging Face 平台以及生成式人工智能模型的实际调用过程有了更加深入的了解。

实验开始时，我首先学习了如何注册 Hugging Face 账号、创建 Access Token，并使用 .env 文件保存 Token。通过环境变量的方式管理 API Token，可以避免在源代码中直接暴露个人 Token，提高程序的安全性。

随后，我使用 Python 和 Flask 搭建后端服务，通过 huggingface_hub 库中的 InferenceClient 调用 Hugging Face 推理服务，并使用 FLUX.1-dev 模型完成图片生成。

在前端部分，通过 HTML、CSS 和 JavaScript 实现了一个简单的 AI 图片生成网页。用户只需要输入 Prompt 并点击“生成图片”按钮，就可以完成从文本描述到 AI 图片生成的全过程。

本次实验中比较重要的一部分是 Prompt 的设计和优化。最开始的 Prompt 主要描述玻璃小屋、森林、自然光等基本内容，虽然能够生成符合要求的图片，但是生成结果仍然具有一定的三维建筑效果图特点。

通过对不同 Prompt 生成结果进行比较，我认识到 AI 图像生成的效果不仅与模型本身有关，Prompt 中对主体、环境、材质、光线、摄影方式以及细节的描述同样非常重要。

此外，本次实验也让我进一步理解了前端、后端和 AI 模型 API 之间的数据交互过程：

用户
 ↓
前端页面
 ↓
JavaScript Fetch
 ↓
Flask API
 ↓
Hugging Face API
 ↓
FLUX 模型
 ↓
生成图片
 ↓
保存图片
 ↓
返回前端
 ↓
网页显示

总体而言，本实验完成了 Hugging Face API 的调用以及 AI 图片生成网站的基本实现，加深了我对 Flask Web 开发、API 调用、前后端数据交互以及生成式人工智能应用的理解。
通过本次实验，我认识到在实际 AI 应用开发过程中，前端交互、后端接口、模型调用、错误处理以及 Prompt 优化都是非常重要的组成部分。

任务二、GitHub 个人主页搭建

2.1 实现方案

此处采用方案 1，创建个人资料自述文件。
个人主页：aaarctic

2.2 主页包含内容

  1. 个人介绍：兴趣爱好、个人经历
  2. 个人成果、技能、专业实践经历，完成自我评估：已掌握的专业能力、感兴趣技术方向、希望学习的知识
  3. 未来三年发展规划：说明考研的目标以及理由

2.3 主页截图展示

image

任务三、随笔———了解我！

3.1 技能树与自我评估

目前我已经掌握和接触了以下几个方面的知识：

（1）Python 基础

通过课程学习和实验，我能够使用 Python 完成基本的程序设计任务，包括：

  • Python 基本语法；
  • 变量、数据类型以及运算；
  • 条件判断和循环结构；
  • 函数的定义与调用；
  • 文件的基本操作；
  • 第三方 Python 库的安装与使用；
  • Python 虚拟环境的基本使用。

（2）掌握C语言/Java基础语法

熟悉数据结构相关算法，能够完成常规算法题目编写

（3）GitHub 的基本使用

通过 GitHub 相关作业，我了解了 GitHub 的基本功能，并完成了个人主页的搭建。
目前已经了解：

  • GitHub 仓库的基本使用；
  • README 文件的编写；
  • Markdown 的基本语法；

虽然目前对 Git 和 GitHub 的使用还不够熟练，但是已经能够完成基本的项目代码上传和个人主页搭建。

（4）人工智能工具的使用

随着课程学习，我也开始接触 ChatGPT、DeepSeek 等人工智能工具。
目前主要将 AI 工具用于：

  • 理解代码；
  • 查找代码错误；
  • 学习新的技术概念；
  • 辅助编写程序；
  • 优化 Prompt；
  • 分析实验过程中出现的问题；
  • 辅助整理实验报告。

通过实际使用，我逐渐认识到 AI 工具不仅可以用来生成代码，也可以作为学习和解决问题的辅助工具。

目前存在的不足

虽然通过课程学习掌握了一些基础知识，但是我认为目前自己的专业能力仍然存在很多不足。

（1）硬件基础——编程基础还不够扎实

目前能够完成一些基础程序，但是遇到比较复杂的问题时，仍然容易出现不知道如何分析和拆解问题的情况。
尤其是在程序出现错误时，有时候比较依赖搜索引擎或者 AI 工具进行解决。
后续需要进一步加强：

  • 数据结构；
  • 算法；
  • 面向对象编程；
  • 程序设计思想；
  • 代码调试能力。

（2）Git 和 GitHub 使用不够熟练

目前已经能够进行基本的 GitHub 操作，但是对于 Git 的完整工作流程还不够熟悉。

例如：

  • 分支管理；
  • Merge；
  • Pull Request；
  • 冲突解决；
  • Git 工作流；

（3）前端开发能力需要提高

目前能够编写简单的 HTML 页面，也能够使用 JavaScript 完成基本的数据交互。

但是对于现代前端开发框架还没有系统学习。

（4）开发思想不够深入

以后需要进一步学习：

  • 软件需求分析；
  • 软件设计；
  • 软件测试；
  • 项目管理；
  • 代码规范；
  • 团队协作开发。

3.2 代码量统计

  • 当前累计代码量：3000左右，但都是一些基础代码
  • 本学期课程结束希望达到的代码量：8000+，希望真正的实现能力的精进。

3.3 本课程期待学习内容与收获

在本课程中，我比较期待继续学习以下内容。

1. 软件工程项目开发流程

希望能够更加深入地理解一个软件项目从需求分析到最终开发完成的完整过程。

  1. 需求分析；
  2. 系统设计；
  3. 数据库设计；
  4. 程序开发；
  5. 软件测试；
  6. 项目部署；
  7. 软件维护。

通过完整项目能够将课堂上的理论知识与实际开发联系起来。

2. 团队协作开发

真实的软件项目通常不是由一个人完成的，而是由多个开发人员共同完成。
因此希望能够进一步学习：

  • Git 协作；
  • GitHub 项目管理；
  • 分支开发；
  • Code Review；
  • Issue；
  • Pull Request；
  • 团队任务分工。

3. AI 与软件工程结合

随着人工智能技术的发展，我认为 AI 已经成为软件开发过程中非常重要的辅助工具。

因此我希望能够进一步学习如何合理使用 AI：

同时也希望能够避免过度依赖 AI，而是能够理解 AI 生成代码背后的原理。

3.4 AI 生成软件工程学习指南分析

本次作业选择使用 ChatGPT 作为 AI 辅助工具。

AI 工具生成的软件工程学习指南

通过与 ChatGPT 对话，我让 AI 根据软件工程课程的学习内容生成了一份学习指南，如下：

1. 先打好基础

软件工程学习不能只关注写代码，还需要理解软件是如何从想法逐渐变成完整项目的。

首先巩固 Python、HTML、CSS、JavaScript 等基础知识，同时熟悉 Git 和 GitHub 的基本使用。

2. 学会从需求出发

拿到一个项目时，先明确：

  • 要解决什么问题；
  • 用户需要哪些功能；
  • 软件应该怎么使用；
  • 不同功能之间有什么关系。

不要一开始就直接写代码，先把需求想清楚。

3. 尝试独立完成项目

通过实际项目理解软件开发过程，例如制作一个简单的 Web 应用。

开发时可以按照：

确定需求 → 设计功能 → 编写代码 → 测试修改 → 完成项目

逐步进行。

4. 重视调试和测试

程序出现问题时，先根据报错信息分析原因，再进行修改。

同时要主动测试不同情况下的程序表现，而不是只测试正常情况。

5. 合理使用 AI

可以使用 ChatGPT、DeepSeek 等 AI 工具辅助学习，例如：

  • 理解陌生代码；
  • 分析程序报错；
  • 寻找解决思路；
  • 优化代码；
  • 整理学习内容。
    但不能只复制 AI 给出的答案。使用 AI 后仍然需要自己运行、验证并理解代码。

6. 后续学习方向

接下来希望继续提高自己的项目实践能力，并逐渐学习：

  • 前后端开发；
  • 数据库；
  • 软件测试；
  • Git 协作；
  • AI 应用开发。

最终希望能够从完成课堂实验，逐渐过渡到能够独立完成一个完整的软件项目。

学习指南的合理性分析

1. 合理之处

这份学习指南与软件工程课程的学习过程比较符合。内容没有只关注编程，而是同时考虑了需求分析、项目开发、测试、调试以及 Git 等实际开发环节。

其中，将理论学习和项目实践结合起来比较合理。通过实际完成 Web 项目，可以把课堂上学习到的知识应用到具体问题中，加深对软件开发流程的理解。

另外，指南中加入了 AI 工具的使用方法，也比较符合目前的学习方式。将 AI 用于代码理解、错误分析和学习资料整理，可以提高学习效率。

2. 对自己的帮助

这份学习指南可以作为之后学习软件工程的参考。通过按照“学习基础知识—参与项目实践—进行测试和调试—总结问题”的方式学习，可以逐渐提高自己的实际开发能力。

同时，指南也让我认识到，软件工程不只是写代码，还需要考虑需求、设计、测试和项目管理等内容。

因此，这份学习指南对自己具有一定的实际帮助，可以帮助我明确后续的学习方向，并改进自己的学习方式。

最后的附录

1.后台博文编辑页面的截图：

image

2. 作业最终文件压缩包：

fiux_homework

posted @ 2026-09-11 16:32  Cactusheep  阅读(4)  评论(0)    收藏  举报