index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://openaireview.org/" />
<title>OpenVerification: catching issues in AI-accelerated science — OpenAIReview</title>
<meta name="description" content="OpenVerification is an open effort to catch issues in AI-accelerated science. OpenAIReview points to the passages in AI-written papers that may be wrong.">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P2VZL2X4NX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-P2VZL2X4NX');
</script>
<script>
MathJax = {
  tex: { inlineMath: [['\\(', '\\)']], processEscapes: true },
  startup: { typeset: false }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --accent: #800000;
  --accent-light: #fdf2f2;
  --accent-hover: #600000;
  --orange-light: #fffbeb;
  --orange-border: #fde68a;
  --red-light: #fef2f2;
  --red-border: #fecaca;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 14px 28px -8px rgba(60,0,0,0.22), 0 6px 10px -6px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  position: relative;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Header ── */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header .logo { font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: -0.3px; }
.header-links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; font-weight: 500; }
.header-links a { color: var(--text-secondary); transition: color 0.15s; }
.header-links a:hover { color: var(--text); }
.header-links a { white-space: nowrap; }
@media (max-width: 480px) { div.header-links { gap: 12px; font-size: 12px; } div.header-links a.home-link { display: none; } }
.header-links a.current { color: var(--text); font-weight: 600; }

/* ── Hero ── */
.hero { max-width: 1240px; margin: 0 auto; padding: 64px 32px 40px; text-align: center; }
.hero-link { margin-top: 28px; font-size: 19px; line-height: 1.5; color: var(--text-secondary); }
.hero-link a { font-weight: 600; }
.hero-link.second { margin-top: 12px; }
.hero-link.second a { font-weight: 400; }
.hero h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 5vw, 44px);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* ── Paper grid ── */
.grid-section { max-width: 1440px; margin: 0 auto; padding: 8px 32px 48px; }
.collection-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin: 16px 0 20px; border-bottom: 1px solid var(--border);
}
.contribute-link { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--accent); border-radius: 999px; padding: 7px 16px; }
.contribute-link:hover { color: #fff; background: var(--accent-hover); }
.collection-head h2 { font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.filters label { min-width: 0; max-width: 100%; }
.filters select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.filters .sort { margin-left: auto; }
.filters select {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filters select:hover { border-color: #d1d5db; color: var(--text); }
.filters select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.filters select:focus { outline: none; border-color: var(--accent); }
.empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-secondary); font-size: 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.issue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.issue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  color: inherit;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s, box-shadow 0.18s;
}
.issue-card.moderate { border-top-color: #d97706; }
.issue-card.minor { border-top-color: #9ca3af; }
.issue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.issue-card .paper-field { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); margin-bottom: 8px; }
.issue-card .paper-title { font-family: 'Lora', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 16px; }
.issue-card .issue { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; flex: 1; }
.issue-card .issue .badge { display: inline-block; margin-bottom: 8px; }
.issue-card .issue-title { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.issue-card .card-meta strong { font-weight: 600; color: var(--text); }
.issue-card .card-meta { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.issue-card .go { font-weight: 600; color: var(--accent); }


.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.badge.critical, .badge.major { background: var(--red-light); color: #b91c1c; border: 1px solid var(--red-border); }
.badge.moderate { background: var(--orange-light); color: #92400e; border: 1px solid var(--orange-border); }
.badge.minor { background: #f3f4f6; color: #4b5563; border: 1px solid var(--border); }

.footer { max-width: 1440px; margin: 0 auto; padding: 16px 32px 48px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 1300px) { .issue-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .issue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) {
  .header { padding: 0 16px; gap: 12px; }
  .header-links { gap: 14px; font-size: 13px; }
  .hero { padding: 40px 16px 28px; }
  .hero h1 { white-space: normal; }
  .grid-section, .footer { padding-left: 16px; padding-right: 16px; }
  .issue-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>

<div class="header">
  <a class="logo" href="index.html">OpenAIReview</a>
  <div class="header-links">
    <a href="index.html" class="current home-link">OpenVerification</a>
    <a href="reviewer.html">Review your paper</a>
    <a href="blogs.html">Blogs</a>
    <a href="https://github.com/ChicagoHAI/OpenAIReview" target="_blank">GitHub</a>
  </div>
</div>

<div class="hero-wrapper">
  <div class="hero">
    <h1>OpenVerification: catching issues in<br>AI-accelerated science</h1>
    <p class="hero-link">We use AI to detect potential issues and invite the public to help verify. <a href="openverification.html">Learn more here</a>.</p>
  </div>
</div>

<div class="grid-section">
  <!-- One block like this per collection of papers. -->
  <div class="collection-head">
    <div>
      <h2>OpenAI math papers</h2>
    </div>
    <a class="contribute-link" href="contribute.html">Contribute a review &rarr;</a>
  </div>
  <div class="filters">
    <label>Severity <select id="severity-filter"></select></label>
    <label>Domain <select id="subject-filter"></select></label>
    <label class="sort">Sort by <select id="sort-order">
      <option value="majors">Most major issues</option>
      <option value="total">Most issues</option>
    </select></label>
  </div>
  <div class="issue-grid" id="issue-grid"></div>
</div>

<div class="footer">
  Papers are from <a href="https://github.com/openai/math" target="_blank">openai/math</a> (Apache 2.0).
  This is an independent project with no affiliation with OpenAI.
</div>

<script>
const SEVERITY_RANK = { critical: 0, major: 1, moderate: 2, minor: 3 };

// Catalog text marks math as <span class="math">tex</span>.
function withMath(html) {
  return html.replace(/<span class="math">(.*?)<\/span>/gs, '\\($1\\)');
}

function escapeHtml(text) {
  return text.replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
}

async function main() {
  const index = await fetch('math/data/index.json').then(r => r.json());
  const papers = await Promise.all(index.papers.map(p =>
    fetch(`math/data/${encodeURIComponent(p.id)}.json`).then(r => r.json())));

  for (const paper of papers) {
    paper.majors = paper.comments.filter(c => c.severity === 'major').length;
    paper.moderates = paper.comments.filter(c => c.severity === 'moderate').length;
  }
  const SORTS = {
    majors: (a, b) => b.majors - a.majors || b.moderates - a.moderates || b.num_findings - a.num_findings,
    total: (a, b) => b.num_findings - a.num_findings || b.majors - a.majors,
  };
  const filter = { severity: '', subject: '', sort: 'majors' };

  function renderGrid() {
    // Comments are stored most severe first, so the first one is the paper's most serious issue.
    // The severity filter uses that issue, the one the card shows.
    const shown = papers.filter(paper =>
      (!filter.severity || paper.comments[0].severity === filter.severity) &&
      (!filter.subject || paper.subject === filter.subject)).sort(SORTS[filter.sort]);
    document.getElementById('issue-grid').innerHTML = shown.map(paper => {
      const top = paper.comments[0];
      // The count is for the paper's most serious severity, which is "major" for most papers.
      const worst = paper.comments.filter(c => c.severity === top.severity).length;
      const majors = `${worst} ${top.severity} ${worst === 1 ? 'issue' : 'issues'}`;
      return `
      <a class="issue-card ${top.severity}" href="math/paper.html?paper=${encodeURIComponent(paper.id)}">
        <div class="paper-field">${escapeHtml(paper.subject)}</div>
        <div class="paper-title">${withMath(paper.title)}</div>
        <div class="issue">
          <span class="badge ${top.severity}">${top.severity}</span>
          <div class="issue-title">${escapeHtml(top.title).replace(/\$([^$]+)\$/g, '\\($1\\)')}</div>
        </div>
        <div class="card-meta"><span><strong>${majors}</strong> &middot; ${paper.num_findings} total</span><span class="go">Help verify &rarr;</span></div>
      </a>`;
    }).join('') || '<div class="empty">No papers match these filters.</div>';
    typeset();
  }

  const severities = Object.keys(SEVERITY_RANK).filter(sev => papers.some(p => p.comments[0].severity === sev));
  document.getElementById('severity-filter').innerHTML = '<option value="">All severities</option>' +
    severities.map(sev => `<option value="${sev}">${sev[0].toUpperCase() + sev.slice(1)}</option>`).join('');
  document.getElementById('severity-filter').onchange = e => {
    filter.severity = e.target.value;
    renderGrid();
  };
  document.getElementById('sort-order').onchange = e => {
    filter.sort = e.target.value;
    renderGrid();
  };
  const subjects = [...new Set(papers.map(p => p.subject))].sort();
  document.getElementById('subject-filter').innerHTML = '<option value="">All domains</option>' +
    subjects.map(sub => `<option>${escapeHtml(sub)}</option>`).join('');
  document.getElementById('subject-filter').onchange = e => {
    filter.subject = e.target.value;
    renderGrid();
  };

  renderGrid();
}

function typeset() {
  if (window.MathJax && MathJax.typesetPromise) MathJax.typesetPromise();
  else setTimeout(typeset, 200);
}
main();
</script>
</body>
</html>