JPlag 报告查看器(Report Viewer)实战指南:从结果文件加载到交互式比对与聚类分析
代码质量教育后端【免费下载链接】JPlagState-of-the-Art Source Code Plagiarism Collusion Detection. Check for plagiarism in a set of programs.项目地址https://gitcode.com/gh_mirrors/jp/JPlag点击查看免费下载本指南以 JPlag 仓库中的报告查看器Report Viewer为主线完整讲解如何通过 CLI 的--mode参数启动查看器、如何在落地页加载.jplag结果文件、如何利用 Overview、Comparison、Cluster、Information 四大视图进行相似度分布统计、逐行比对与聚类研判以及如何匿名化提交、从源码本地构建与部署该 Web 应用。读完本文你将掌握 JPlag 结果文件从生成到可视化解读的完整链路并能在源码层面理解其内部工作原理。报告查看器是什么JPlag Report Viewer 是一个基于 Vue 3 TypeScript 的 Web 应用程序专门用于展示 JPlag 生成的结果文件默认扩展名为.jplag实际是一个包含 JSON 数据的 zip 归档。它负责把机器可读的比较结果转换为人类可读的交互式界面相似度分布图、可排序的比较表、逐行高亮的代码比对、聚类图与雷达图等。从源码结构看查看器由多个 npm workspace 组成见 report-viewer/package.jsonreport-viewer/主应用视图、路由、状态管理ui-components/可复用的 UI 组件库比较表、代码面板、聚类图等model/TypeScript 类型定义Comparison、Match、Cluster 等parser/ReportFileHandler负责解压并解析.jplag结果文件。在 JPlag 的 CLI 侧查看器通过一个内置的轻量级 HTTP 服务器对外提供访问。服务器实现在 ReportViewer.java它使用 JDK 自带的com.sun.net.httpserver.HttpServer绑定127.0.0.1默认端口为1996可用-P/--port修改若端口被占用会依次尝试下一个端口最多查找 4 次。该服务器负责把打包进 JAR 的静态资源report-viewer/index.html及其资源通过根路径report-viewer前缀暴露出来同时把 JPlag 生成的结果文件以results.jplag路径提供供查看器自动加载。需要特别说明的是查看器能否随 CLI 一起分发取决于构建方式。只有使用with-report-viewerprofile 构建时编译后的前端资源才会被打进 JARReportViewer.hasCompiledViewer()会检查资源是否存在若不存在则在启动时输出警告并跳过服务器。如何打开报告--mode模式详解自 JPlag 6.0.0 起CLI 提供了--mode简写-M标志用于控制 JPlag 运行后是否以及如何启动报告查看器。模式枚举定义在 JPlagMode.java取值及效果如下值效果run_and_view按给定参数对提交文件运行 JPlag运行结束后自动启动报告查看器并加载本次结果。view只启动报告查看器。可以通过位置参数root-dirs或-r标志指定一个先前运行生成的结果文件若未指定任何文件则打开落地页Landing Page。run仅运行 JPlag 生成结果文件不打开报告查看器。auto默认不显式指定模式时由 JPlag 根据输入自动猜测最佳模式。在 CLI.java 的executeCli()中switch语句按所选模式分发到runJPlag()、runViewer(...)、runAndView()等入口runAndView()的实现在于先runJPlag()生成结果文件再以该文件为参数调用runViewer(...)从而在查看器中自动加载结果。AUTO 模式的自动判断逻辑当--mode未指定默认auto时selectModeAutomatically()会依据输入参数进行智能判断没有任何输入文件启动view模式且不带结果文件浏览器打开落地页恰好一个输入且文件名以.zip或.jplag结尾判定为结果文件启动view模式并直接打开该报告其他情况传入的是提交目录执行run_and_view即先跑完比对再打开查看器。这就是用提交文件调用时自动运行并查看、用结果文件调用时直接查看、空参数调用时打开落地页这一行为的底层来源。通过 JAR 启动查看器在已用with-report-viewerprofile 构建出 JPlag JAR 后典型用法如下以自动模式为例# 运行 JPlag 并自动打开查看器加载结果 java -jar jplag.jar ./submissions # 只打开查看器并加载已有的结果文件 java -jar jplag.jar -M view ./results.jplag # 只打开落地页不加载任何文件 java -jar jplag.jar -M view # 只运行比对不打开查看器 java -jar jplag.jar -M run ./submissions其中-r标志用于指定结果文件名称默认results最终落盘为results.jplag-P/--port用于指定内部查看器端口。相关参数定义见 CliOptions.java 与同文件的端口选项。落地页Landing Page与报告的三种加载方式路由/对应落地页对应组件为 FileUploadView.vue。它提供两种本地加载方式以及一种远程加载方式拖放加载把.jplag结果文件直接拖入页面区域。组件通过uploadFileOnDrag监听dragover/drop事件并校验恰好一个文件文件选择器点击页面中央的红色拖放区域源码中的上传块会动态创建一个input typefile accept.jplag,.zip并触发点击从而打开系统文件选择对话框远程加载在 URL 后追加?fileURL查询参数即可从服务器获取报告。其实现位于 fileLoading.ts 的getQueryFileUrl()——解析file参数后fetch该地址并转为 Blob 再解析例如https://yourdomain.tld/JPlag?filedomain.tld/my-report.jplag会直接加载domain.tld/my-report.jplag这份报告适合把报告链接嵌入网页或文档分享。无论哪种方式文件都会被交给ReportFileHandler位于 parser解压解析它接受application/zip、application/zip-compressed等 MIME 类型以及扩展名为.jplag的空 MIME 类型.jplag本质是 zip浏览器可能无法识别其类型。解析成功后自动跳转到/overview视图。若解析失败页面会展示错误信息并提示查看浏览器控制台获取详细错误。从查看器内部加载本地结果文件除落地页手动加载外查看器还有一种本地结果文件模式当通过 JAR 启动run_and_view或带文件参数的view模式时内部服务器会把结果文件以results.jplag路径暴露出来见 ReportViewer.java 中的RESULT_PATH常量。查看器在启动时优先尝试fetch同源下的results.jplag成功则直接加载并跳过落地页这就是运行结束后自动打开结果的实现细节。该机制也解释了为何从服务器远程加载报告和自动加载本地结果在源码层面共用同一套解析管线。旧版本报告的处理机制随着 JPlag 版本迭代结果文件格式可能发生变化新版查看器不一定能解析旧版报告。当尝试打开旧版报告时查看器会检测报告对应的 JPlag 版本并重定向到旧版查看器页面路由/old/:version组件 OldVersionRedirectView.vue。该组件内置了一个版本映射表报告版本区间旧版查看器路径4.2.0 – 5.1.0v56.0.0 – 6.1.0v6_1若报告版本落在映射区间内页面会显示Open with old report viewer按钮点击后跳转到对应旧版查看器例如yourdomain.tld/v5/该查看器由内部服务器通过 ReportViewer.java 中的OLD_VERSION_DIRECTORIESv5、v6_1静态资源目录提供若报告版本早于所有映射区间或无法解析页面会提示该版本不受当前查看器支持注意旧版本重定向功能仅在通过 JAR 启动查看器时可用旧版前端资源被打包在 JAR 内使用npm run dev等纯前端方式运行时没有这些资源。此外旧版查看器可能不支持 JPlag 的全部最新特性。Overview/overview数据集整体概览Overview 视图组件 OverviewView.vue展示整个数据集的宏观信息而非某个单一比较的细节。页面顶部是报告基础信息区提交目录Submission Directory、结果名称Result name、提交总数Total Submissions、报告内比较数与全部比较数Shown/Total Comparisons、最小 Token 匹配数Min Token Match等。若存在解析失败的提交这里会显示无效提交警告可通过 More 按钮查看完整失败列表。点击 More 按钮可跳转到 Information 视图查看详细运行信息。分布图与箱线图页面中部是可视化的核心区域由TabbedContainer提供两个页签Distribution分布图按选定的相似度指标把所有提交划分到若干分桶bucket中直方图展示相似度分布。与报告内只收录部分比较不同分布图统计的是所有已计算比较包括未被收录进报告的那些。其配置项指标、分桶数量、线性/对数刻度在图表下方提供。点击某一分桶会将比较表自动排序并滚动到该分桶对应的比较行源码中onBarClicked完成这一联动。Boxplot箱线图以箱线图形式展示同一分布便于快速识别离群值。比较表与搜索栏页面右侧桌面端是比较表默认只显示被收录进报告的比较——这些可能并非 JPlag 计算的全部比较取决于提交数量与 CLI 配置例如--max-compares限制的最大比较数、相似度阈值等。表格可按任一指标排序或按聚类分组显示中间的分隔条支持拖拽调整左右两栏宽度。搜索栏Search Bar是 Overview 的实用功能支持多种过滤语法按提交名过滤输入提交名即可过滤行多个名字用空格分隔各部分之间为**析取OR**关系按索引过滤直接输入数字如81或加index前缀如index:81按指标过滤数字前加比较符///如90若想指定具体指标在比较符前加指标短名如avg:90完整输入某个提交名时该行会从隐藏状态恢复显示。每一行展示索引、两个提交的名称、各指标下的相似度属于某聚类的比较会在行尾显示聚类信息——同聚类内所有行图标同色图标后的数字表示该聚类包含的提交数点击图标会打开对应的 Cluster 视图。鼠标悬停在提交名上会出现眼睛图标点击即可切换该提交的匿名化状态。点击行的其他区域则进入 Comparison 比较视图。Comparison/comparison逐行比对的核心视图Comparison 视图组件 ComparisonView.vue以/comparison/:firstSubmissionId/:secondSubmissionId路由进入展示两个提交之间的详细比较结果。顶部显示三种相似度Average Similarity平均相似度与比较表中的数值一致Similarity提交 A提交 A 中有多少比例的 token 出现在提交 B 中Similarity提交 B同理反方向。由于两个提交长度可能不同这两个方向上的百分比不一定对称源码的 tooltip 明确说明了这一点。工具栏还提供打印按钮源码中以media print将页面方向设置为 landscape横向在 Chromium 系浏览器上打印效果最佳。匹配气泡与代码面板视图主体的上方是MatchList匹配列表每个气泡代表一个匹配Match显示两个提交中对应的文件名与匹配的 token 数点击气泡会同时滚动到两边的代码位置。下方是两个并排的FilesContainer代码面板各展示一个提交的全部文件。其交互包括文件列表可通过头部选项排序也可以直接拖拽文件调整顺序手动拖动后排序选择器会自动变为未排序状态每个文件头末尾的百分比表示该文件中有多少比例的 token 参与了匹配点击文件头可展开/折叠该文件内容代码中的匹配通过彩色色块高亮点击任一色块会在另一个提交的代码中滚动定位到对应匹配。文件排序共四种选项其枚举定义于 FileSortingOptions.ts排序选项含义Alphabetic按文件名排序。Match Coverage按参与匹配的 token 比例降序排序。Match Count按匹配数量降序排序。Match size按最大的匹配大小降序排序。代码高亮由 highlight.js 驱动并随明/暗主题动态切换样式源码中通过动态注入vs.css/vs2015.css实现。若报告开启了基础代码Basecode比对匹配色块还会区分出与基础代码相关的匹配。Cluster/cluster聚类分析与假阴性排查Cluster 视图组件 ClusterView.vue以/cluster/:clusterIndex路由进入展示单个聚类的结构。仅当 CLI 运行 JPlag 时启用了聚类选项--cluster-alg报告中才会包含聚类信息。页面顶部显示该聚类的平均相似度。主体左侧提供两种聚类可视化图Graph每个节点代表一个提交节点间的边代表比较。边的粗细与透明度反映两个提交之间的相似度高低若某比较未被收录进报告其边会显示为灰色虚线。鼠标悬停某条边时右侧表格中对应的行会被高亮形成图-表联动。雷达图Radar Chart展示聚类内其他提交相对于某一个提交的相似度该参考提交可在顶部下拉框中切换。注意当报告内缺少该聚类的足够比较时雷达图可能不可用当聚类成员过多源码阈值 35 个时图与雷达图都会降级为提示文案建议重新审视该聚类是否实为误报。右侧表格Comparison Table有两种模式Members成员与 Overview 中的比较表结构类似但只包含该聚类内部的比较Related Comparisons相关比较列出一端在聚类内、另一端不在聚类内的比较。这类比较是排查聚类假阴性漏网的相似对的关键线索——若聚类外的提交与聚类内提交相似度很高很可能聚类边界设置过严。两种模式的表格顶部都支持指标排序若聚类内比较数超过报告收录上限表格底部会提示重新运行 JPlag 并调高最大比较数参数以查看完整比较。Information/information运行数据与完整选项回溯Information 视图组件 InformationView.vue把一次 JPlag 运行的元信息完整呈现分两个面板Run Options运行选项完整回放 CLI 运行时的所有参数包括语言Language、最小 Token 匹配数Min Token Match、提交目录Submission Directories、旧提交目录Old Directories、基础代码目录Base Directory、子目录名Subdirectory Name、文件扩展名File Extensions、排除文件名Exclusion File Name、相似度指标Similarity Metric、相似度阈值Similarity Threshold、最大比较数Max Comparison Count、结果文件名Result File Name等。若本次运行启用了聚类Clustering还会展示聚类算法Spectral / Agglomerative、相似度指标、带宽与高斯过程方差Spectral 专属、最小/最大运行次数、K-Means 迭代次数、聚合阈值、预处理器及其阈值/百分位数、聚类间相似度等若启用了匹配合并Match Merging则展示最小邻接长度、最大间隙、最少合并次数等参数。Run Data运行数据展示执行日期Date of Execution、执行耗时Execution Duration毫秒、提交总数Total Submissions、全部比较数Total Comparisons、报告内比较数Shown Comparisons、缺失比较数Missing Comparisons可通过 CLI 调高最大比较数来补全、以及解析失败的提交列表含失败原因如语言解析错误等与 SubmissionState 枚举一一对应。该视图非常适合在共享报告时附上运行环境任何打开报告的人都能还原本次比对用到了哪些语言、阈值与算法从而判断结果的可复现性。匿名化Anonymization保护提交者身份报告查看器内置匿名化能力适用于在公开场合展示比对结果时隐藏提交者身份。其状态管理位于 reportStore.ts匿名化后提交名被替换为anon 数字如anon1、anon2。数字在首次匿名化该提交时分配并在本次报告会话期间保持唯一匿名化只作用于界面显示名如果提交名出现在代码内容或文件名中不会被替换匿名化状态可以单独切换也可以批量操作。两种匿名化入口表格中的眼睛图标在 Overview或 Cluster 的成员表中鼠标悬停某个提交名时会出现眼睛图标点击即切换该提交的匿名化状态Anonymize All 按钮位于比较表顶部一键匿名化所有提交当全部提交都已匿名化时按钮变为Show All点击后取消全部匿名化。结合源码看getAnonymizedName按anonymizedNumber映射分配序号匿名集合anonymizedSet记录哪些提交处于匿名状态getDisplayName则根据状态返回匿名名或真实名——所有视图共用这套逻辑因此在匿名化后Overview、Comparison、Cluster 乃至代码面板的标题都会一致地显示匿名名。从源码本地运行与构建报告查看器是标准的前端工程基于 Vite Vue 3需要系统安装Node.js 与 npm。环境准备在report-viewer/目录安装依赖会同时安装report-viewer/、ui-components/、model/三个 workspace 的依赖并自动配置 git hooksnpm install开发服务器npm run dev该命令启动 Vite 开发服务器report-viewer/report-viewer/package.json中dev脚本。开发模式下默认 base URL 为/JPlag-Dev/见 vite.config.ts浏览器需访问对应的http://localhost:5173/JPlag-Dev/。也可使用npm run build-dev或npm run build-dev-demo构建开发模式产物。编译与构建报告查看器存在多种构建方式按部署场景选择1. 随 JPlag CLI 打包进 JAR推荐功能最完整在cli/目录使用with-report-viewerprofile 构建前端资源会被内嵌进 JAR从而支持--mode view/run_and_view、旧版报告重定向等全部功能mvn -Pwith-report-viewer clean package assembly:single2. 标准构建无 base URL产物直接托管在域名根路径下npm run build3. 生产构建带/JPlag/base URL用于托管在子路径场景例如 GitHub Pages 上名为JPlag的仓库。构建产物需要能在yourdomain.tld/JPlag/路径下被访问npm run build-prod4. Demo 演示构建带/Demo/base URL与生产构建类似但 base URL 为/Demo/npm run build-demo这些 base URL 的实际取值定义在 vite.config.tsdev→/JPlag-Dev/、prod→/JPlag/、demo→/Demo/、dev-demo→/。每次构建前会先执行vue-tsc类型检查type-check脚本。构建产物输出到report-viewer/report-viewer/dist目录。各脚本dev、build、build-prod、build-demo、test:e2e、test:unit 等的完整定义见 report-viewer/report-viewer/package.json。参与开发格式化、代码检查与测试若你希望向报告查看器贡献代码仓库提供了完整的质量保障工具链格式化npm run format基于 Prettier含 Tailwind 插件代码检查npm run lint基于 ESLint--max-warnings 0要求零警告单元测试npm run test:unitVitest端到端测试npm run test:e2ePlaywright测试资产存放在 tests/e2e/assets 下包含不同版本的真实报告样本用于验证新旧报告的兼容解析。此外npm install时仓库根 package.json 的prepare脚本会自动把 git hooks 路径指向gitHooks/hooks对应 gitHooks 目录下的 pre-commit 钩子因此在提交前格式化与检查会被自动执行无需手工干预。小结JPlag Report Viewer 是 JPlag 从命令行工具走向可视化平台的关键一环--mode让结果生成与查看无缝衔接落地页与?file参数让报告分享变得轻量四大视图分别解决全局分布如何看、单对比较如何查、聚类结构如何判、运行参数如何回溯的问题匿名化则兼顾了公开演示场景下的隐私需求。无论你是仅想快速查看一次比对结果还是需要深度研判一份大规模作弊检测报告都可以从本文档结合仓库源码CLI 侧 CLI.java 与 ReportViewer.java前端侧 router.ts 与各视图组件进一步深入。赞分享代码质量教育后端【免费下载链接】JPlagState-of-the-Art Source Code Plagiarism Collusion Detection. Check for plagiarism in a set of programs.项目地址https://gitcode.com/gh_mirrors/jp/JPlag点击查看免费下载相关推荐JPlag Report Viewer 构建与使用指南从本地开发、打包到提交规范JPlag Report Viewer 构建与使用指南从本地开发、打包到提交规范 本指南以 report viewer/README.md https://l代码质量教育后端JPlag 完整系统端到端e2e测试指南从构建 JPlag 到报告查看器全链路验证JPlag 完整系统端到端e2e测试指南从构建 JPlag 到报告查看器全链路验证 本篇指南围绕 JPlag 仓库中的 e2e 测试说明文档 https:代码质量教育后端Task Master 复杂度分析报告查看指南complexity-report 命令的用法、报告结构与源码实现解析Task Master 复杂度分析报告查看指南complexity report 命令的用法、报告结构与源码实现解析 导读 complexity reportAI Agent开发工具CLIMCP上一篇CLN闭环步进电机驱动器如何实现NEMA电机的高精度智能控制下一篇NVIDIA Profile Inspector 完全指南从入门到精通的显卡性能调校创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考