Files
crab-webapp/public/index.html
Karma Riuk a63ebb2526 fixed typo
2025-06-16 11:51:46 +02:00

284 lines
12 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>
<script defer src="js/modal.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-type">Type:</label>
<select id="answer-type">
<option value="comment">Comment Generation</option>
<option value="refinement">Code Refinement</option>
</select>
<br /><br />
<input type="file" id="file-input" accept="application/json" />
<br /><br />
<div style="display: flex; align-items: center; gap: 0.5em">
<button id="upload-btn">Upload JSON</button>
<div id="upload-status" class="hidden" style="color: green;"> hello world </div>
</div>
</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>
<div style="display: flex; align-items: center; gap: 0.5em">
<label for="uuid">Process id:</label>
<input type="text" id="uuid" required />
</div>
<br /><br />
<button id="request-status">Request status</button>
<span id="status-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>Correct file</th>
<th>Distance</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 Dataset</h2>
<div>
<p>
When you download a dataset, you'll receive a ZIP archive containing a JSON file. The structure of
this file depends on the selected task.
</p>
<section class="json-schemas">
<details>
<summary><strong>Comment Generation</strong></summary>
<p>The JSON maps each ID to an object with:</p>
<ul>
<li><strong>files</strong>: a map of filenames to their content at the start of the pull
request.</li>
<li><strong>diffs</strong>: a map of filenames to the diff that was applied to each file
before
the comment was made.</li>
</ul>
<pre><code>{
"1234": {
"files": {
"src/Main.java": "public class Main { ... }"
},
"diffs": {
"src/Main.java": "@@ -1,3 +1,6 @@ ..."
}
}
}</code></pre>
</details>
<details>
<summary><strong>Code Refinement</strong></summary>
<p>The JSON structure is similar to comment generation, with one additional field:</p>
<ul>
<li><strong>files</strong>: the initial version of each file in the PR.</li>
<li><strong>diffs</strong>: the diff applied before the comment was made.</li>
<li><strong>comments</strong>: a list of comments, each with a body, the file it refers to,
and
the exact location of the comment.</li>
</ul>
<pre><code lang="json">{
"5678": {
"files": { ... },
"diffs": { ... },
"comments": [
{
"body": "Consider simplifying this logic.",
"file": "src/Util.java",
"location": {
"start_line": 42,
"end_line": 45
}
}
]
}
}</code></pre>
</details>
</section>
<h3>With Context (Optional)</h3>
<p>
You can choose to download the dataset with full repository context — the state of the entire
codebase at the time the PR was created. This may help your model better understand the broader
project structure and dependencies outside of the changed files.
</p>
</div>
</template>
<template id="info-upload">
<h2>Uploading Results</h2>
<section>
<p>
After downloading a dataset and generating your predictions for either task, you can upload your
results here to start the evaluation process.
</p>
<p>
Your uploaded JSON file must follow one of the schemas described below, depending on the selected
task. Once uploaded, the system will begin evaluating your submission. A progress bar will appear to
show how far along the evaluation is.
</p>
<p>
For <strong>Code Refinement</strong>, an id will also be displayed. This id allows you to safely
close the browser tab and later check the evaluation progress by pasting it into the <em>"Get
status of ongoing process"</em> section. More information is available in that section.
</p>
<section class="json-schemas">
<details>
<summary>
<strong>Comment Generation</strong>
</summary>
<p>
Submit a JSON object where each key is a string ID and each value is the generated comment.
</p>
<pre><code>
{
"1234": "This method lacks null checks.",
"5678": "Consider renaming this variable for clarity."
}
</code></pre>
</details>
<details>
<summary><strong>Code Refinement</strong></summary>
<p>
Submit a JSON object where each key is a string ID, and the value is another object that
maps
file
paths (relative to the top-level directory) to the new file content.
</p>
<pre><code>
{
"1234": {
"src/Main.java": "public class Main { /* updated code */ }"
},
"5678": {
"utils/Helper.java": "public class Helper { /* improved logic */ }"
}
}
</code></pre>
<p>
Make sure your file strictly follows the expected format to avoid upload errors.
</p>
</details>
</section>
</section>
</template>
<template id="info-results">
<h2>Getting information of ongoing process</h2>
<div>
yes
</div>
</template>
</main>
</body>
</html>