npcproject_ppt_speech

NPC 垃圾分类器项目汇报演讲稿版

第 1 页 封面

页面内容

• 标题：NPC 垃圾分类器项目汇报
• 副标题：基于 Next.js + TensorFlow.js 的浏览器端垃圾分类系统
• 可补充：姓名、学号、课程名称、日期

演讲稿

大家好，我今天汇报的项目是 NPC 垃圾分类器。这是一个基于 Next.js 和 TensorFlow.js 开发的浏览器端垃圾分类系统。项目的核心目标，是让用户通过拍照或者上传图片的方式，快速得到垃圾分类建议。下面我会从项目背景、系统设计、核心功能、技术实现和后续优化几个方面进行介绍。

第 2 页 项目背景与目标

页面内容

• 垃圾分类需求日益明显
• 用户对具体分类判断不清楚
• 传统查询方式效率较低
• 项目目标：通过图片识别辅助垃圾分类

演讲稿

这个项目的出发点，来自现实中的垃圾分类需求。随着垃圾分类要求越来越严格，很多用户虽然知道要分类，但是面对具体物品时，往往不知道应该投放到哪一类。传统方式通常是手动搜索或者查表，不仅效率低，而且体验也不够直观。所以我希望做一个更实用的网页工具，用户只需要提供一张图片，系统就可以自动识别并给出分类建议，从而降低使用门槛。

第 3 页 项目简介

页面内容

• 项目名称：NPC 垃圾分类器
• 项目定位：前端推理与结果展示系统
• 支持多种图片输入方式
• 支持五大垃圾分类结果展示
• 支持中韩双语与日志管理

演讲稿

这个项目的名称是 NPC 垃圾分类器。从定位上看，它主要是一个负责前端推理和结果展示的 Web 应用。用户可以通过拍照、本地上传、输入图片 URL 或者剪贴板粘贴这几种方式提供图片。系统会在浏览器端完成模型推理，并展示最终的分类结果。同时，系统还支持五大垃圾类别展示、中韩双语切换，以及日志查看和 CSV 导出等功能。

第 4 页 需求与问题分析

页面内容

• 需要便捷的图片输入方式
• 需要较快的识别反馈
• 需要用户容易理解的分类结果
• 需要保留日志用于效果分析

演讲稿

在做这个项目之前，我先把需求拆成了几个问题。第一，用户输入方式必须方便，不能限制得太死，所以我支持了多种图片来源。第二，系统反馈要尽量快，这样用户才会觉得实用。第三，模型本身输出的往往是细粒度类别，但普通用户更需要的是最终应该投放到哪一类，所以必须做结果聚合和可解释展示。第四，如果项目后续要继续优化，就需要保留推理日志，用来分析识别效果和低置信度情况。

第 5 页 整体解决方案

页面内容

• 用户上传或拍摄图片
• 前端预览并处理图片
• 浏览器端加载模型推理
• 输出原始类别与置信度
• 映射为五大垃圾分类
• 返回最终分类建议

演讲稿

整个系统的流程比较清晰。首先，用户上传图片或者拍摄图片。然后前端页面会对图片进行预览和基础处理。接着，浏览器端加载 TensorFlow.js 模型完成推理，得到原始类别和对应置信度。由于原始类别通常比较细，所以系统会再进行一次类别映射，把这些结果聚合成用户更容易理解的五大垃圾分类，最后将最终建议和候选结果展示出来。

第 6 页 技术架构

页面内容

• 前端框架：Next.js
• 页面开发：React
• 模型推理：TensorFlow.js
• 接口层：Next.js API Route
• 数据存储：localStorage
• 国际化：中文 / 韩文

演讲稿

在技术选型上，这个项目主要使用 Next.js 和 React 来开发页面。模型推理部分使用 TensorFlow.js，这样可以直接在浏览器端运行模型。接口层方面，我使用了 Next.js 的 API Route 来处理远程图片代理请求。数据存储方面，日志会保存在浏览器的 localStorage 中，便于轻量化管理。另外，项目还实现了中文和韩文双语切换，提升了系统的适用范围。

第 7 页 核心功能模块

页面内容

• 图片输入模块
• 模型推理模块
• 结果展示模块
• 管理与分析模块

演讲稿

从功能上看，我把整个系统拆成了四个核心模块。第一个是图片输入模块，负责接收不同来源的图片。第二个是模型推理模块，负责加载模型并完成预测。第三个是结果展示模块，把模型输出转化成用户可以理解的信息。第四个是管理与分析模块，用于查看日志、筛选结果和导出数据。通过这样的模块划分，项目结构会更清晰，后续维护和扩展也更方便。

第 8 页 图片输入模块

页面内容

• 本地文件上传
• 摄像头拍照
• 远程图片 URL
• 剪贴板粘贴图片

演讲稿

图片输入模块是项目可用性很重要的一部分。为了尽量贴近真实使用场景，我支持了四种输入方式。第一种是本地上传，适合用户选择已经保存好的图片。第二种是摄像头拍照，适合移动端或实时拍摄场景。第三种是通过远程 URL 加载图片。第四种是从剪贴板直接粘贴图片，这种方式在桌面端操作时会比较方便。通过这些方式，用户基本可以在不同场景下快速完成输入。

第 9 页 模型推理模块

页面内容

• 动态加载模型文件
• 加载标签文件
• 图片缩放与张量转换
• 输出预测分数并归一化

演讲稿

模型推理模块是系统的核心。页面会先动态加载模型文件和标签文件，然后把输入图片转换成模型可以接受的尺寸和张量格式。模型推理完成后，会输出每个类别对应的分数。由于不同模型输出形式可能不同，所以系统还做了分数归一化处理，以保证结果可以稳定地进入后续展示逻辑。这样设计后，前端可以更灵活地兼容不同的模型版本。

第 10 页 结果展示模块

页面内容

• 展示 Top1 分类结果
• 展示 Top3 候选结果
• 展示置信度
• 展示原始类别名称
• 输出最终垃圾分类建议
• 低置信度时标记不可判定

演讲稿

结果展示部分不仅仅是给出一个分类名称，而是尽量提高结果的可理解性。页面会展示 Top1 结果，也会展示 Top3 候选结果，让用户知道模型的主要判断方向。同时会显示置信度和原始类别名称，帮助理解模型输出。对于分类建议，系统会进一步转化成五大垃圾类别。如果当前结果属于背景类，或者置信度过低，系统会将其标记为不可判定，避免给用户错误引导。

第 11 页 管理与分析模块

页面内容

• 本地记录推理日志
• 按图片来源筛选
• 查看低置信度结果
• 统计总量与平均延迟
• 支持 CSV 导出

演讲稿

除了识别功能之外，我还实现了一个管理与分析页面。系统会把每次推理记录保存在本地，包括时间、图片来源、预测结果、置信度和延迟等信息。在管理页面中，可以按来源筛选日志，也可以只看低置信度结果，从而更容易发现问题样本。此外，页面还会统计总记录数、低置信度比例和平均推理延迟，并支持导出 CSV 文件，为后续分析和优化提供基础。

第 12 页 项目亮点

页面内容

• 浏览器端推理
• 多输入方式支持
• 细分类别自动聚合
• 不可判定机制
• 双语支持
• 本地日志分析能力

演讲稿

我认为这个项目有几个比较明显的亮点。第一，模型推理是在浏览器端完成的，不依赖服务端做图片识别，部署和演示都比较方便。第二，系统支持多种输入方式，交互完整度比较高。第三，系统不是简单输出原始类别，而是能够自动聚合成五大垃圾分类，更符合实际使用需求。第四，加入了不可判定机制，能减少低质量结果带来的误导。除此之外，项目还支持中韩双语和本地日志分析，这些都增强了系统的完整性。

第 13 页 关键实现细节

页面内容

• 模型文件位于 public/model/
• 使用版本号控制模型缓存
• labels.txt 与输出顺序一致
• 类别映射到五大垃圾分类
• 通过图片代理接口处理部分跨域问题

演讲稿

在实现层面，有几个细节对系统稳定性比较关键。首先，模型文件统一放在 public/model/ 目录下，前端可以直接按路径加载。其次，我使用版本号参数来控制模型缓存更新，避免浏览器一直使用旧模型。第三，labels.txt 的顺序必须和模型输出类别顺序保持一致，否则结果会错位。第四，系统维护了一套从原始类别到五大垃圾分类的映射逻辑。最后，为了支持远程图片识别，我还增加了图片代理接口，用来缓解部分跨域加载问题。

第 14 页 项目成果

页面内容

• 完成网页端垃圾分类原型
• 实现完整识别流程
• 支持动态类别映射
• 支持中韩双语
• 支持日志查看与导出

演讲稿

从目前的完成情况来看，这个项目已经实现了一个可运行的网页端垃圾分类原型。整个流程从图片输入、模型加载、推理预测到结果展示都已经打通。同时，系统支持动态类别映射，可以兼容不同类别数量的模型输出。中韩双语切换和本地日志导出功能也已经完成。因此，这个项目不仅可以用于课程展示，也具备继续迭代成更完整产品的基础。

第 15 页 存在的问题与不足

页面内容

• 识别准确率受训练数据影响
• 浏览器端推理受设备性能限制
• 复杂背景可能影响结果
• 远程图片可能受站点限制
• 日志目前仅保存在本地

演讲稿

当然，这个项目目前也存在一些不足。首先，识别准确率还是会明显受到训练数据规模和质量的影响。第二，由于推理是在浏览器端完成的，所以不同设备之间的性能差异会直接影响体验。第三，复杂背景、遮挡或者模糊图片可能会导致低置信度结果。第四，远程图片加载仍然可能受目标网站限制。最后，目前日志只保存在本地，还没有形成统一的后台分析系统。

第 16 页 后续优化方向

页面内容

• 扩充训练数据集
• 优化模型大小与速度
• 增加更多语言支持
• 接入服务端日志系统
• 增加分类说明与科普内容
• 适配移动端或小程序

演讲稿

在后续优化方面，我主要考虑几个方向。第一是继续扩充训练数据集，提高模型的类别覆盖率和识别准确率。第二是优化模型大小和推理速度，改善前端加载体验。第三是扩展更多语言支持，增强国际化能力。第四是把日志系统从本地扩展到服务端，方便集中分析。第五，可以在结果页增加更详细的投放说明和分类知识。最后，也可以进一步适配移动端甚至小程序场景。

第 17 页 总结

页面内容

• 实现了可运行的垃圾分类网页原型
• 结合前端交互与 AI 图像分类
• 兼顾功能性、可用性与扩展性
• 具有课程设计与展示价值

演讲稿

最后总结一下，这个项目实现了一个可运行的智能垃圾分类网页原型，把前端交互和 AI 图像分类能力结合在了一起。项目不仅完成了基本功能，还考虑了多输入方式、结果可解释性、日志分析和国际化等问题。整体上，它兼顾了功能性、可用性和扩展性，既适合课程设计展示，也适合作为后续深入优化的基础。我的汇报到这里结束，谢谢大家。