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

added header to page

Browse Source
This commit is contained in:
Karma Riuk
2025-05-14 22:56:42 +02:00
parent d833beee83
commit 2e4382617f
3 changed files with 186 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
public/css/style.css
View File

@ -1,5 +1,35 @@
/* Header styling */
.site-header {
position: sticky;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
width: 100vw;
max-width: 100vw;
z-index: 1000;
background: #fafafa;
border-bottom: 1px solid #ddd;
padding: 0 1em;
}
.info-btn {
background: none;
border: none;
font-size: 1.5rem;
}
button {
cursor: pointer;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
margin: 0;
padding: 0;
}
main {
max-width: 50vw; max-width: 50vw;
margin: 2em auto; margin: 2em auto;
} }
@ -19,6 +49,7 @@ h1 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
margin: 0;
/* space between icon and text */ /* space between icon and text */
} }
@ -118,3 +149,43 @@ table tbody td:nth-child(1) {
.results-container#comment table tbody td:nth-child(3) { .results-container#comment table tbody td:nth-child(3) {
text-align: right; text-align: right;
} }
.hidden {
display: none !important;
}
/* Full-screen translucent backdrop */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
/* The white box */
.modal-container {
background: #fff;
padding: 1.5rem;
border-radius: 8px;
max-width: 400px;
width: 90%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
}
/* Close button in corner */
.modal-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}

158
public/index.html
View File

@ -13,79 +13,107 @@
</head> </head>
<body> <body>
<h1> <header class="site-header">
<img src="/img/crab.png" alt="Crab" class="crab-icon"> <h1>
Crab Webapp <img src="/img/crab.png" alt="Crab" class="crab-icon">
</h1> Crab Webapp
</h1>
<button id="info-button" class="info-btn" aria-label="About this project">About</button>
</header>
<main>
<fieldset> <fieldset>
<legend><strong>Download a Dataset</strong></legend> <legend><strong>Download a Dataset</strong></legend>
<label for="dataset-select">Dataset:</label> <label for="dataset-select">Dataset:</label>
<select id="dataset-select"> <select id="dataset-select">
<option value="comment_generation">Comment Generation</option> <option value="comment_generation">Comment Generation</option>
<option value="code_refinement">Code Refinement</option> <option value="code_refinement">Code Refinement</option>
</select> </select>
<label> <label>
<input type="checkbox" id="with-context"> <input type="checkbox" id="with-context">
Include context Include context
</label> </label>
<br /><br /> <br /><br />
<button id="download-dataset">Download</button> <button id="download-dataset">Download</button>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend><strong>Upload Your Answers</strong></legend> <legend><strong>Upload Your Answers</strong></legend>
<label for="answer-cype">Type:</label> <label for="answer-cype">Type:</label>
<select id="answer-cype"> <select id="answer-cype">
<option value="comment">Comment Generation</option> <option value="comment">Comment Generation</option>
<option value="refinement">Code Refinement</option> <option value="refinement">Code Refinement</option>
</select> </select>
<br /><br /> <br /><br />
<input type="file" id="file-cnput" accept="application/json" /> <input type="file" id="file-cnput" accept="application/json" />
<br /><br /> <br /><br />
<button id="upload-btn">Upload JSON</button> <button id="upload-btn">Upload JSON</button>
<span id="status" style="color: green;"> </span> <span id="status" style="color: green;"> </span>
</fieldset> </fieldset>
<div id="progress-container"> <div id="progress-container">
<h3>Processing answers...</h3> <h3>Processing answers...</h3>
<div> <div>
<progress id="progress-bar" value="0" max="100"></progress> <progress id="progress-bar" value="0" max="100"></progress>
<span id="progress-text">0%</span> <span id="progress-text">0%</span>
</div>
</div> </div>
</div>
<div id="comment" class="results-container"> <div id="comment" class="results-container">
<h3>Results Comment Generation<button class="download-results">Download</button></h3> <h3>Results Comment Generation<button class="download-results">Download</button></h3>
<table class="sortable"> <table class="sortable">
<thead> <thead>
<tr> <tr>
<th>id</th> <th>id</th>
<th>Proposed comment</th> <th>Proposed comment</th>
<th>Max bleu score</th> <th>Max bleu score</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="refinement" class="results-container"> <div id="refinement" class="results-container">
<h3>Results Code Refinement<button class="download-results">Download</button></h3> <h3>Results Code Refinement<button class="download-results">Download</button></h3>
<table class="sortable"> <table class="sortable">
<thead> <thead>
<tr> <tr>
<th>id</th> <th>id</th>
<th>Compiled</th> <th>Compiled</th>
<th>Tested</th> <th>Tested</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="modal-overlay" class="modal-overlay hidden">
<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>
</div>
</main>
</body> </body>
</html> </html>

22
public/js/index.js
View File

@ -129,3 +129,25 @@ socket.on("successful-upload", () => {
statusEl.style.color = "green"; statusEl.style.color = "green";
statusEl.textContent = "Upload succeeded!"; statusEl.textContent = "Upload succeeded!";
}); });
// INFO-MODAL LOGIC
const infoButton = document.getElementById("info-button");
const modalOverlay = document.getElementById("modal-overlay");
const modalClose = document.getElementById("modal-close");
// open modal
infoButton.addEventListener("click", () => {
modalOverlay.classList.remove("hidden");
});
// close modal via “×” button
modalClose.addEventListener("click", () => {
modalOverlay.classList.add("hidden");
});
// also close if you click outside the white box
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) {
modalOverlay.classList.add("hidden");
}
});