karma/crab-webapp
1
0
Fork 0
mirror of https://github.com/karma-riuk/crab-webapp.git synced 2025-07-05 06:08:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

added the possibility of having more that one

Browse Source 
messsage shown in the modal
This commit is contained in:
Karma Riuk
2025-05-15 12:20:02 +02:00
parent 269ced22bd
commit 3f9154cb95
3 changed files with 69 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/style.css
View File

@ -35,13 +35,20 @@ button {
cursor: pointer;
}
.info-btn {
header .info-btn {
background: none;
border: none;
font-size: 1rem;
padding: 0;
}
fieldset .info-btn {
aspect-ratio: 1;
padding: .35em .7em;
border-radius: 100%;
border-width: 1px;
}
header #page-title {
display: flex;
align-items: center;
@ -181,3 +188,7 @@ table tbody td:nth-child(1) {
font-size: 1.5rem;
cursor: pointer;
}
.modal-container h2 {
margin-top: 0;
}

55
public/index.html
View File

@ -7,6 +7,7 @@
<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>
@ -18,12 +19,16 @@
<img src="/img/crab.png" alt="Crab" class="crab-icon">
Crab Webapp
</h3>
<button id="info-button" class="info-btn">About</button>
<button id="about-button" class="info-btn">About</button>
</header>
<main>
<fieldset>
<legend><strong>Download a Dataset</strong></legend>
<legend>
<strong>Download a Dataset</strong>
<button id="info-download-btn" class='info-btn'><i class="fa fa-question" ></i></button>
</legend>
<label for="dataset-select">Dataset:</label>
<select id="dataset-select">
<option value="comment_generation">Comment Generation</option>
@ -99,29 +104,39 @@
</table>
</div>
<div id="modal-overlay" class="modal-overlay hidden">
<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>
<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>
<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>
</main>
</body>

25
public/js/index.js
View File

@ -135,13 +135,21 @@ socket.on("successful-upload", () => {
});
// INFO-MODAL LOGIC
const infoButton = document.getElementById("info-button");
const aboutButton = document.getElementById("about-button");
const modalOverlay = document.getElementById("modal-overlay");
const modalContent = document.getElementById("modal-content");
const modalClose = document.getElementById("modal-close");
// open modal
infoButton.addEventListener("click", () => {
function show_modal_with(content) {
modalOverlay.classList.remove("hidden");
modalContent.innerHTML = "";
modalContent.appendChild(content);
modalOverlay.focus();
}
// open modal
aboutButton.addEventListener("click", () => {
show_modal_with(about.content.cloneNode(true));
});
// close modal via “×” button
@ -156,6 +164,17 @@ modalOverlay.addEventListener("click", (e) => {
}
});
modalOverlay.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
modalOverlay.classList.add("hidden");
console.log("hiding");
}
});
window["info-download-btn"].addEventListener("click", (e) => {
show_modal_with(window["info-download"].content.cloneNode(true));
});
document.getElementById("request-status").onclick = () => {
url.reportValidity();
};