Skip to content

Commit dffafe5

Browse files
jayhackjayhack
authored
Merge pull request #15 from codegen-sh/codegen-cg-18996-fix-frame-sizes
2 parents 5b2f0cb + 3448bfd commit dffafe5

File tree

1 file changed

+28
-14
lines changed

1 file changed

+28
-14
lines changed

‎docs/index.html‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -506,9 +506,15 @@ <h4>🎬 Interactive Frame Analysis - Splice Point Evidence</h4>
506506
<span id="frame-size">Size: Loading...</span>
507507
</div>
508508
<div class="performance-info" style="background: #1a1a1a; padding: 10px; margin-top: 10px; border-radius: 5px; font-size: 0.9em;">
509-
<span style="color: #4ecdc4;">⚡ Performance:</span>
510-
<span id="format-info">WebP format (95% smaller)</span> |
511-
<span id="load-time">Load time: <span id="load-duration">--</span>ms</span>
509+
<div style="margin-bottom: 5px;">
510+
<span style="color: #4ecdc4;">📊 Original Frame:</span>
511+
<span id="original-size">2,116,047 bytes</span>
512+
</div>
513+
<div>
514+
<span style="color: #4ecdc4;">⚡ Delivery:</span>
515+
<span id="format-info">WebP format (95% smaller)</span> |
516+
<span id="load-time">Load time: <span id="load-duration">--</span>ms</span>
517+
</div>
512518
</div>
513519
</div>
514520

@@ -678,16 +684,16 @@ <h3>⚖️ Legal and Ethical Implications</h3>
678684
<script>
679685
// Frame data for the splice point analysis
680686
const frameData = [
681-
{ filename: "frame_001.png", webpPath: "splice_frames/splice_1/frame_001.webp", pngPath: "splice_frames/splice_1/frame_001.png", size: "126,622 bytes (WebP)", originalSize: "2,116,047 bytes", time: "6h35m55s" },
682-
{ filename: "frame_002.png", webpPath: "splice_frames/splice_1/frame_002.webp", pngPath: "splice_frames/splice_1/frame_002.png", size: "128,560 bytes (WebP)", originalSize: "2,084,324 bytes", time: "6h35m56s" },
683-
{ filename: "frame_003.png", webpPath: "splice_frames/splice_1/frame_003.webp", pngPath: "splice_frames/splice_1/frame_003.png", size: "127,938 bytes (WebP)", originalSize: "2,012,467 bytes", time: "6h35m57s" },
684-
{ filename: "frame_004.png", webpPath: "splice_frames/splice_1/frame_004.webp", pngPath: "splice_frames/splice_1/frame_004.png", size: "128,092 bytes (WebP)", originalSize: "2,086,191 bytes", time: "6h35m58s" },
685-
{ filename: "frame_005.png", webpPath: "splice_frames/splice_1/frame_005.webp", pngPath: "splice_frames/splice_1/frame_005.png", size: "125,750 bytes (WebP)", originalSize: "2,062,775 bytes", time: "6h35m59s" },
686-
{ filename: "frame_006.png", webpPath: "splice_frames/splice_1/frame_006.webp", pngPath: "splice_frames/splice_1/frame_006.png", size: "128,234 bytes (WebP)", originalSize: "2,108,242 bytes", time: "6h36m00s" },
687-
{ filename: "frame_007.png", webpPath: "splice_frames/splice_1/frame_007.webp", pngPath: "splice_frames/splice_1/frame_007.png", size: "128,360 bytes (WebP)", originalSize: "2,067,485 bytes", time: "6h36m01s" },
688-
{ filename: "frame_008.png", webpPath: "splice_frames/splice_1/frame_008.webp", pngPath: "splice_frames/splice_1/frame_008.png", size: "128,380 bytes (WebP)", originalSize: "2,048,178 bytes", time: "6h36m02s" },
689-
{ filename: "frame_009.png", webpPath: "splice_frames/splice_1/frame_009.webp", pngPath: "splice_frames/splice_1/frame_009.png", size: "124,338 bytes (WebP)", originalSize: "2,010,795 bytes", time: "6h36m03s" },
690-
{ filename: "frame_010.png", webpPath: "splice_frames/splice_1/frame_010.webp", pngPath: "splice_frames/splice_1/frame_010.png", size: "124,998 bytes (WebP)", originalSize: "2,055,549 bytes", time: "6h36m04s" }
687+
{ filename: "frame_001.png", webpPath: "splice_frames/splice_1/frame_001.webp", pngPath: "splice_frames/splice_1/frame_001.png", size: "2,116,047 bytes", webpSize: "126,622 bytes", time: "6h35m55s" },
688+
{ filename: "frame_002.png", webpPath: "splice_frames/splice_1/frame_002.webp", pngPath: "splice_frames/splice_1/frame_002.png", size: "2,084,324 bytes", webpSize: "128,560 bytes", time: "6h35m56s" },
689+
{ filename: "frame_003.png", webpPath: "splice_frames/splice_1/frame_003.webp", pngPath: "splice_frames/splice_1/frame_003.png", size: "2,012,467 bytes", webpSize: "127,938 bytes", time: "6h35m57s" },
690+
{ filename: "frame_004.png", webpPath: "splice_frames/splice_1/frame_004.webp", pngPath: "splice_frames/splice_1/frame_004.png", size: "2,086,191 bytes", webpSize: "128,092 bytes", time: "6h35m58s" },
691+
{ filename: "frame_005.png", webpPath: "splice_frames/splice_1/frame_005.webp", pngPath: "splice_frames/splice_1/frame_005.png", size: "2,062,775 bytes", webpSize: "125,750 bytes", time: "6h35m59s" },
692+
{ filename: "frame_006.png", webpPath: "splice_frames/splice_1/frame_006.webp", pngPath: "splice_frames/splice_1/frame_006.png", size: "2,108,242 bytes", webpSize: "128,234 bytes", time: "6h36m00s" },
693+
{ filename: "frame_007.png", webpPath: "splice_frames/splice_1/frame_007.webp", pngPath: "splice_frames/splice_1/frame_007.png", size: "2,067,485 bytes", webpSize: "128,360 bytes", time: "6h36m01s" },
694+
{ filename: "frame_008.png", webpPath: "splice_frames/splice_1/frame_008.webp", pngPath: "splice_frames/splice_1/frame_008.png", size: "2,048,178 bytes", webpSize: "128,380 bytes", time: "6h36m02s" },
695+
{ filename: "frame_009.png", webpPath: "splice_frames/splice_1/frame_009.webp", pngPath: "splice_frames/splice_1/frame_009.png", size: "2,010,795 bytes", webpSize: "124,338 bytes", time: "6h36m03s" },
696+
{ filename: "frame_010.png", webpPath: "splice_frames/splice_1/frame_010.webp", pngPath: "splice_frames/splice_1/frame_010.png", size: "2,055,549 bytes", webpSize: "124,998 bytes", time: "6h36m04s" }
691697
];
692698

693699
let currentFrameIndex = 0;
@@ -746,6 +752,7 @@ <h3>⚖️ Legal and Ethical Implications</h3>
746752
const frameSize = document.getElementById('frame-size');
747753
const formatInfo = document.getElementById('format-info');
748754
const loadDuration = document.getElementById('load-duration');
755+
const originalSize = document.getElementById('original-size');
749756

750757
// Show loading indicator and start timing
751758
showLoadingIndicator();
@@ -781,7 +788,14 @@ <h3>⚖️ Legal and Ethical Implications</h3>
781788
frameSize.textContent = `Size: ${frame.size}`;
782789

783790
// Update performance info
784-
formatInfo.textContent = usingWebP ? 'WebP format (95% smaller)' : 'PNG format (fallback)';
791+
originalSize.textContent = frame.size;
792+
793+
// Calculate compression ratio for delivery optimization
794+
const originalBytes = parseInt(frame.size.replace(/,/g, '').replace(' bytes', ''));
795+
const webpBytes = parseInt(frame.webpSize.replace(/,/g, '').replace(' bytes', ''));
796+
const compressionRatio = Math.round((1 - webpBytes / originalBytes) * 100);
797+
798+
formatInfo.textContent = usingWebP ? `WebP format (${compressionRatio}% smaller)` : 'PNG format (fallback)';
785799
loadDuration.textContent = loadTime;
786800

787801
// Hide loading indicator

0 commit comments

Comments
 (0)