Skip to content

Instantly share code, notes, and snippets.

@jordangarcia

jordangarcia/error_viewer.html

Created December 6, 2025 00:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jordangarcia/a022f304eb4f96b3e6ef2a1b749494dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jordangarcia/a022f304eb4f96b3e6ef2a1b749494dc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
error_viewer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EditCard2 Error Analysis</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 30px;
text-align: center;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
header p {
font-size: 1.1em;
opacity: 0.95;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 30px;
background: #f8f9fa;
border-bottom: 2px solid #e9ecef;
}
.stat-box {
text-align: center;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-box .number {
font-size: 2em;
font-weight: bold;
color: #667eea;
margin-bottom: 8px;
}
.stat-box .label {
font-size: 0.9em;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.content {
padding: 30px;
}
.category-section {
margin-bottom: 50px;
border: 2px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
}
.category-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.category-header:hover {
background: linear-gradient(135deg, #5568d3 0%, #6b3d93 100%);
}
.category-header h2 {
font-size: 1.3em;
margin: 0;
flex: 1;
}
.category-stats {
display: flex;
gap: 20px;
font-size: 0.95em;
}
.stat {
display: flex;
align-items: center;
gap: 6px;
}
.stat-number {
background: rgba(255,255,255,0.3);
padding: 4px 12px;
border-radius: 20px;
font-weight: bold;
}
.expand-icon {
font-size: 1.5em;
transition: transform 0.3s;
}
.category-content {
padding: 30px;
background: #fafbfc;
display: none;
}
.category-content.expanded {
display: block;
}
.examples {
display: grid;
gap: 20px;
}
.example-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.example-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #667eea;
}
.example-header {
background: #f0f4ff;
padding: 15px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.example-title {
font-weight: 600;
color: #333;
flex: 1;
}
.request-badge {
background: #667eea;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 500;
}
.example-content {
padding: 20px;
}
.field {
margin-bottom: 15px;
}
.field-label {
font-size: 0.85em;
text-transform: uppercase;
color: #666;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.field-value {
background: #f8f9fa;
border-left: 3px solid #667eea;
padding: 12px;
border-radius: 4px;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.9em;
line-height: 1.6;
color: #333;
word-break: break-word;
max-height: 200px;
overflow-y: auto;
}
.error-message {
border-left-color: #e74c3c;
background: #ffe8e8;
}
.section-separator {
height: 2px;
background: linear-gradient(to right, transparent, #667eea, transparent);
margin: 20px 0;
}
.summary-section {
background: #f0f4ff;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.summary-section h3 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.1em;
}
.summary-text {
color: #555;
line-height: 1.8;
margin-bottom: 10px;
}
.no-data {
text-align: center;
padding: 40px;
color: #999;
}
@media (max-width: 768px) {
.stats {
grid-template-columns: 1fr;
}
.category-header {
flex-direction: column;
align-items: flex-start;
}
.category-stats {
margin-top: 10px;
width: 100%;
}
header h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>📊 EditCard2 Error Analysis</h1>
<p>Comprehensive breakdown of 990 test case failures with error categorization and examples</p>
</header>
<div class="stats" id="statsContainer"></div>
<div class="content">
<div class="summary-section">
<h3>Overview</h3>
<p class="summary-text">
This analysis covers <strong>990 test cases</strong> with <strong>987 actual errors</strong> across <strong>12 categories</strong>.
The top 3 issues (color/styling, watermark/logo, and pagination) account for <strong>66% of all failures</strong>.
</p>
<p class="summary-text">
All errors stem from limitations in Gamma's GML (Gamma Markup Language), which lacks support for CSS styling,
absolute positioning, animations, and global document-level changes.
</p>
</div>
<div id="categoriesContainer"></div>
</div>
</div>
<script>
const errorsData = {
"color/styling limitations": {
"total": 247,
"unique": 247,
"examples": [
{
"request": "Change background color",
"error": "I cannot directly change the background color of the entire card or apply custom hex codes like #B8E6B8 to the SECTION tag using the available GML attributes. GML does not support styling sections with specific background colors.",
"input": "User wants to change card background to light green (#B8E6B8)"
},
{
"request": "Adjust line spacing",
"error": "I'm sorry, but I cannot directly apply CSS text-shadow to text elements in Gamma. Gamma Markup Language (GML) does not support custom CSS styling like text-shadow for individual text blocks.",
"input": "User wants to adjust line spacing from 1.5 to 1.0"
},
{
"request": "Apply text-shadow",
"error": "I cannot directly adjust line spacing (e.g., from 1.5 to 1.0) on text blocks using the available Gamma Markup Language (GML) attributes. Line spacing is typically controlled by the Gamma platform's default styling.",
"input": "User wants to add text-shadow effect to all text"
}
]
},
"watermark/logo limitations": {
"total": 231,
"unique": 231,
"examples": [
{
"request": "Add watermark",
"error": "I cannot add a watermark logo with specific positioning, size, and opacity because these styling attributes are not supported by the available GML tags and attributes. GML does not support custom CSS or absolute positioning for images like a watermark.",
"input": "Add a watermark logo in bottom-right corner with 80-100px width and reduced opacity"
},
{
"request": "Add watermark",
"error": "I cannot fulfill this request directly. The Gamma Markup Language (GML) does not support arbitrary positioning (like 'bottom right corner with padding') or specific styling (like 'reduced opacity') for images as a watermark. GML is block-based.",
"input": "Add company logo as watermark with custom positioning and transparency"
},
{
"request": "Add watermark",
"error": "I cannot add a small watermark logo in the bottom right corner of the card with custom positioning, size, and opacity using the current Gamma GML features, as GML does not support absolute positioning or CSS styling for images.",
"input": "Position logo in bottom-right with specific padding and opacity"
}
]
},
"pagination/numbering limitations": {
"total": 181,
"unique": 181,
"examples": [
{
"request": "Add page/slide numbers",
"error": "I can only edit one card at a time and do not have access to the entire presentation to add sequential slide numbers across all cards. Please provide instructions for how to add a slide number to this specific card.",
"input": "Add sequential page numbers starting from page 4, numbered as '1'"
},
{
"request": "Add page/slide numbers",
"error": "I cannot add page numbers directly to the GML sections. Gamma does not currently support adding page numbers as a GML element with specific positioning like 'bottom right' that persists across slides.",
"input": "Add page numbers to bottom-right corner of each slide"
},
{
"request": "Add page/slide numbers",
"error": "I cannot fulfill this request directly using GML. The Gamma markup language focuses on content and layout within individual cards, and does not support adding global elements like page numbers that appear in a fixed position across multiple slides.",
"input": "Implement slide numbering for entire deck"
}
]
},
"font/typography limitations": {
"total": 46,
"unique": 46,
"examples": [
{
"request": "Change font/typeface",
"error": "I cannot directly control font families or typefaces using GML. My capabilities are limited to the provided GML tags and their attributes, none of which allow for specifying a font family.",
"input": "Change all headings to Helvetica or sans-serif font"
},
{
"request": "Change font/typeface",
"error": "I cannot fulfill this request. GML does not provide direct controls for changing font families or styles (e.g., to a specific sans-serif appearance). I can only control basic text formatting like bolding, italics, and size.",
"input": "Apply 'Times New Roman' font to all text elements"
},
{
"request": "Change font/typeface",
"error": "I cannot directly control font-family using GML. The Gamma platform automatically handles font choices, typically using web-safe or system fonts based on the chosen theme.",
"input": "Ensure consistent typeface for Czech diacritics support"
}
]
},
"image/positioning limitations": {
"total": 64,
"unique": 64,
"examples": [
{
"request": "Modify/add images",
"error": "I cannot fulfill this request exactly as stated. The image-layout='left' feature in Gamma designs the accent image to occupy a specific portion of the card's width, and if the original image's aspect ratio doesn't fit this area, it will be cropped.",
"input": "Display image without cropping to show all details"
},
{
"request": "Modify/add images",
"error": "I cannot directly manipulate the intrinsic size or cropping of an existing image within its accent-image container using GML attributes to make internal content fully visible.",
"input": "Adjust image size and cropping in gallery layout"
},
{
"request": "Modify/add images",
"error": "I cannot adjust the visibility or opacity of an accent image when using the 'behind' image-layout. The 'behind' layout automatically applies a specific faded effect, and there isn't a GML attribute to control its transparency.",
"input": "Adjust opacity of background image for better text readability"
}
]
},
"CSS/styling limitations": {
"total": 19,
"unique": 19,
"examples": [
{
"request": "Add animations",
"error": "I cannot add dynamic animations like bounce, scale on entrance, or hover effects directly using GML, as GML does not support custom CSS or JavaScript for such functionalities.",
"input": "Add fade-in animation to text blocks on entrance"
},
{
"request": "Add animations",
"error": "I'm sorry, but I cannot directly add dynamic animations, staggered entrance effects, or hover effects to elements using GML. The Gamma markup language focuses on structured content and predefined visual components.",
"input": "Add staggered entrance animations and hover effects to testimonial boxes"
},
{
"request": "Add animations",
"error": "I cannot add dynamic animations, hover effects, or smooth transitions using GML. GML is a markup language for structuring content and does not support custom CSS or JavaScript for animations.",
"input": "Apply parallax scrolling effects with smooth transitions"
}
]
},
"deletion/removal limitations": {
"total": 15,
"unique": 14,
"examples": [
{
"request": "Delete/remove card",
"error": "I cannot delete a card using this interface. I can only edit the content of the current card.",
"input": "Remove this card from the presentation"
},
{
"request": "Delete/remove card",
"error": "I cannot delete an entire card. I can only modify the content within the current card. If you wish to remove this card, please do so using the application's interface.",
"input": "Delete card from deck"
}
]
},
"global/multi-card limitations": {
"total": 15,
"unique": 15,
"examples": [
{
"request": "Change background color",
"error": "I can only edit one card at a time, and I do not have the ability to apply a background color to 'all cards'. I can apply a background color to this specific card if you wish.",
"input": "Apply light green background to all cards in the presentation"
},
{
"request": "Add watermark",
"error": "I am unable to implement a global watermark across all cards because I can only edit one card at a time. The limitation of my editing scope prevents me from applying a consistent watermark across the entire presentation.",
"input": "Add watermark logo to every slide in the deck"
}
]
},
"other": {
"total": 161,
"unique": 161,
"examples": [
{
"request": "Change color",
"error": "There is no text content in the current card to reduce by 50%. The card only contains a title. Please provide a card with more text if you'd like me to condense it.",
"input": "Reduce all text by 50% to make room for new content"
},
{
"request": "Find content",
"error": "The text 'Why TurboTax:' was not found in the provided input content. I can only edit the current card.",
"input": "Find and highlight all instances of 'Why TurboTax:' and apply styling"
},
{
"request": "Change layout",
"error": "No 'solidBoxes' smart layout was found in the provided content to replace.",
"input": "Convert solidBoxes layout to circleStat variant"
}
]
}
};
function renderStats() {
const container = document.getElementById('statsContainer');
let totalErrors = 0;
let totalCategories = 0;
Object.values(errorsData).forEach(data => {
totalErrors += data.total;
totalCategories++;
});
const html = `
<div class="stat-box">
<div class="number">${totalErrors}</div>
<div class="label">Total Errors</div>
</div>
<div class="stat-box">
<div class="number">${totalCategories}</div>
<div class="label">Categories</div>
</div>
<div class="stat-box">
<div class="number">66%</div>
<div class="label">Top 3 Issues</div>
</div>
<div class="stat-box">
<div class="number">GML</div>
<div class="label">Root Cause</div>
</div>
`;
container.innerHTML = html;
}
function toggleCategory(element) {
const content = element.nextElementSibling;
const icon = element.querySelector('.expand-icon');
content.classList.toggle('expanded');
icon.style.transform = content.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0)';
}
function renderCategories() {
const container = document.getElementById('categoriesContainer');
const sortedCategories = Object.entries(errorsData)
.sort((a, b) => b[1].total - a[1].total);
const html = sortedCategories.map(([category, data]) => `
<div class="category-section">
<div class="category-header" onclick="toggleCategory(this)">
<h2>${category}</h2>
<div class="category-stats">
<div class="stat">
<span>Total:</span>
<span class="stat-number">${data.total}</span>
</div>
<div class="stat">
<span>Unique:</span>
<span class="stat-number">${data.unique}</span>
</div>
</div>
<div class="expand-icon">▼</div>
</div>
<div class="category-content">
<div class="examples">
${data.examples.map((example, idx) => `
<div class="example-card">
<div class="example-header">
<span class="example-title">Example ${idx + 1}</span>
<span class="request-badge">${example.request}</span>
</div>
<div class="example-content">
<div class="field">
<div class="field-label">User Request</div>
<div class="field-value">${escapeHtml(example.input)}</div>
</div>
<div class="section-separator"></div>
<div class="field">
<div class="field-label">LLM Error Response</div>
<div class="field-value error-message">${escapeHtml(example.error)}</div>
</div>
</div>
</div>
`).join('')}
</div>
</div>
</div>
`).join('');
container.innerHTML = html;
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Initialize
renderStats();
renderCategories();
// Auto-expand first category
setTimeout(() => {
const firstHeader = document.querySelector('.category-header');
if (firstHeader) {
toggleCategory(firstHeader);
}
}, 0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment