mirror of
https://github.com/NousResearch/atropos.git
synced 2026-04-19 12:57:58 +00:00
dev - push for submission
This commit is contained in:
parent
c189fc3351
commit
9725761f5b
12 changed files with 2414 additions and 0 deletions
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rendered Messages - gsm8k_dpo_rollouts_2.jsonl</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; line-height: 1.6; margin: 20px; }
|
||||
details { border: 1px solid #ccc; border-radius: 4px; margin-bottom: 15px; }
|
||||
summary {
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: none; /* Remove default focus outline if needed */
|
||||
}
|
||||
details[open] summary { border-bottom: 1px solid #ccc; }
|
||||
.group-content { padding: 15px; }
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
transition: background-color 0.3s ease, box-shadow 0.2s ease; /* Smooth transitions */
|
||||
scroll-margin-top: 10px; /* Space when scrolling into view */
|
||||
}
|
||||
.item h4 { margin-top: 0; margin-bottom: 5px; font-size: 1.1em; }
|
||||
.content-block { background-color: #fff; padding: 8px; border-radius: 3px; margin-bottom: 5px; overflow-x: auto; }
|
||||
/* Use :focus-within for better accessibility on container focus */
|
||||
.item:focus, .item.active {
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Highlight active/focused item */
|
||||
outline: none; /* Remove default outline */
|
||||
}
|
||||
|
||||
/* Score Backgrounds (Faint) */
|
||||
.reward-positive { background-color: rgba(144, 238, 144, 0.3); } /* Faint light green */
|
||||
.reward-zero { background-color: rgba(255, 215, 0, 0.3); } /* Faint gold/orange */
|
||||
.reward-negative { background-color: rgba(255, 182, 193, 0.4); } /* Faint light pink/red */
|
||||
|
||||
/* Markdown specific styles */
|
||||
.content-block pre {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
overflow-x: auto; /* Allow horizontal scrolling for long code lines */
|
||||
white-space: pre-wrap; /* Wrap long lines within pre */
|
||||
word-wrap: break-word; /* Break long words if necessary */
|
||||
}
|
||||
.content-block code {
|
||||
background-color: #f0f0f0; /* Slightly different for inline code */
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.content-block pre code {
|
||||
background-color: transparent; /* Don't double-background code in pre blocks */
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: inherit; /* Inherit pre font size */
|
||||
}
|
||||
.content-block blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
padding-left: 10px;
|
||||
margin-left: 0;
|
||||
color: #555;
|
||||
}
|
||||
.content-block table {
|
||||
border-collapse: collapse;
|
||||
width: auto; /* Don't force full width */
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.content-block th, .content-block td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.content-block th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Rendered Messages - gsm8k_dpo_rollouts_2.jsonl</h1>
|
||||
<div id="groups-container">
|
||||
<p>No data to display. Input file might be empty or contain invalid data.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const items = document.querySelectorAll('.item');
|
||||
let activeIndex = -1; // No item active initially
|
||||
|
||||
// Function to set active item
|
||||
function setActiveItem(index) {
|
||||
if (activeIndex >= 0 && activeIndex < items.length) {
|
||||
items[activeIndex].classList.remove('active');
|
||||
items[activeIndex].removeAttribute('tabindex'); // Remove from tab order when not active
|
||||
}
|
||||
if (index >= 0 && index < items.length) {
|
||||
items[index].classList.add('active');
|
||||
items[index].setAttribute('tabindex', '0'); // Make active item focusable
|
||||
items[index].focus(); // Focus the element
|
||||
// Ensure the parent <details> is open
|
||||
const detailsParent = items[index].closest('details');
|
||||
if (detailsParent && !detailsParent.open) {
|
||||
detailsParent.open = true;
|
||||
}
|
||||
// Scroll into view with options if needed (focus should handle this mostly)
|
||||
// items[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
activeIndex = index;
|
||||
} else {
|
||||
activeIndex = -1; // Deactivate if index is out of bounds
|
||||
}
|
||||
}
|
||||
|
||||
// Add click listener to activate items
|
||||
items.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
setActiveItem(index);
|
||||
});
|
||||
// Make items focusable initially only if we want tab navigation
|
||||
// item.setAttribute('tabindex', '0');
|
||||
});
|
||||
|
||||
// Add keydown listener for arrow navigation
|
||||
document.addEventListener('keydown', (event) => {
|
||||
let targetIndex = -1;
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault(); // Prevent default page scroll
|
||||
targetIndex = (activeIndex === -1) ? 0 : Math.min(activeIndex + 1, items.length - 1);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault(); // Prevent default page scroll
|
||||
targetIndex = (activeIndex === -1) ? items.length - 1 : Math.max(activeIndex - 1, 0);
|
||||
}
|
||||
|
||||
if (targetIndex !== -1) {
|
||||
setActiveItem(targetIndex);
|
||||
}
|
||||
});
|
||||
|
||||
// Make first item focusable initially if you want immediate keyboard nav
|
||||
if (items.length > 0) {
|
||||
// items[0].setAttribute('tabindex', '0');
|
||||
// Optionally activate the first item on load:
|
||||
// setActiveItem(0);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue