Files
crab-webapp/public/index.html
2025-05-15 15:45:14 +02:00

162 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/img/crab.png">
<title>Dataset Downloader & Answer Uploader</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script defer src="js/index.js"></script>
<script defer src="js/sorttable.js"></script>
</head>
<body>
<header class="site-header">
<h3 id="page-title">
<img src="/img/crab.png" alt="Crab" class="crab-icon">
Crab Webapp
</h3>
<button id="about-button" class="info-btn">About</button>
</header>
<main>
<fieldset>
<legend>
<strong>Download a Dataset</strong>
<button id="info-download-btn" class='info-btn'><i class="fa fa-info"></i></button>
</legend>
<label for="dataset-select">Dataset:</label>
<select id="dataset-select">
<option value="comment_generation">Comment Generation</option>
<option value="code_refinement">Code Refinement</option>
</select>
<label>
<input type="checkbox" id="with-context">
Include context
</label>
<br /><br />
<button id="download-dataset">Download</button>
</fieldset>
<fieldset>
<legend>
<strong>Upload Your Answers</strong>
<button id="info-upload-btn" class='info-btn'><i class="fa fa-info"></i></button>
</legend>
<label for="answer-cype">Type:</label>
<select id="answer-cype">
<option value="comment">Comment Generation</option>
<option value="refinement">Code Refinement</option>
</select>
<br /><br />
<input type="file" id="file-cnput" accept="application/json" />
<br /><br />
<button id="upload-btn">Upload JSON</button>
<span id="status" class="hidden" style="color: green;"> </span>
</fieldset>
<fieldset>
<legend>
<strong>Get status of ongoing process</strong>
<button id="info-results-btn" class='info-btn'><i class="fa fa-info"></i></button>
</legend>
<label for="url">URL:</label>
<input type="url" id="url" placeholder="https://gym.si.usi.ch:45003/results/XXXX" size=50 required />
<br /><br />
<button id="request-status">Request status</button>
<span id="status" class="hidden" style="color: green;"> </span>
</fieldset>
<div id="progress-container" class="hidden">
<h3>Processing answers...</h3>
<div>
<progress id="progress-bar" value="0" max="100"></progress>
<span id="progress-text">0%</span>
</div>
</div>
<div id="comment" class="results-container hidden">
<h3>Results Comment Generation<button class="download-results">Download</button></h3>
<table class="sortable">
<thead>
<tr>
<th>id</th>
<th>Proposed comment</th>
<th>Max bleu score</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="refinement" class="results-container hidden">
<h3>Results Code Refinement<button class="download-results">Download</button></h3>
<table class="sortable">
<thead>
<tr>
<th>id</th>
<th>Compiled</th>
<th>Tested</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="modal-overlay" class="modal-overlay hidden" tabindex=-1>
<div class="modal-container">
<button id="modal-close" class="modal-close" aria-label="Close">&times;</button>
<div id="modal-content"></div>
</div>
</div>
<template id="about">
<h2>About this project</h2>
<div>
<p>CRAB (Code Review Automation Benchmark) is a research-driven platform designed to evaluate deep
learning models for code review tasks. Developed as part of a master's thesis at the Università
della Svizzera italiana, CRAB provides a high-quality, curated benchmark dataset of Java code review
triplets: submitted code, reviewer comment, and revised code. Each instance is manually validated to
ensure that reviewer comments directly address code issues and that the revised code implements the
feedback accurately. </p>
<p>The platform supports two core tasks: generating human-like review comments and refining code based
on those comments. It also accounts for paraphrased feedback and alternative valid code revisions,
offering a more realistic and robust evaluation. CRAB addresses the shortcomings of existing
datasets by eliminating noise and ensuring functional correctness through testing. Researchers can
upload model predictions to receive standardized evaluations, making CRAB an essential tool for
advancing automated code review technologies.</p>
</div>
</template>
<template id="info-download">
<h2>Downloading the datset</h2>
<div>
yes
</div>
</template>
<template id="info-upload">
<h2>Uploading results</h2>
<div>
yes
</div>
</template>
<template id="info-results">
<h2>Getting information of ongoing process</h2>
<div>
yes
</div>
</template>
</main>
</body>
</html>