Report benchmark results on page

clipchamp · Jun 3, 2024 · ef2639e · ef2639e
1 parent 7d5ef7f
commit ef2639e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/index.html b/src/index.html
@@ -121,7 +121,6 @@ <h3>Encoder settings</h3>
                     <div class="progress">
                         <div id="encoder-progress" class="progress-bar" role="progressbar" style="width: 0%" aria-label="encoder progress"></div>
                     </div>
-                    <div>Exported file size: <span id="output-size">0</span> bytes</div>
                 </div>
             </div>
 
@@ -137,9 +136,25 @@ <h3>Encoder settings</h3>
                         <div id="loading-progress" class="progress-bar" role="progressbar" style="width: 0%" aria-label="loading progress"></div>
                     </div>
                 </div>
+            </div>
+
+            <div class="row">
+                <div class="mb-3"><hr></div>
+
+                <div class="mb-3">
+                    <h3>Benchmark results</h3>
+                </div>       
+
+                <div class="mb-3">
+                    <div>Export time: <span id="export-time">0</span> seconds</div>
+                </div>
 
-                <div class="m3-b">
-                    <div>Export time (seconds): <span id="export-time">0</span></div>
+                <div class="mb-3">
+                    <div>Exported file size: <span id="output-size">0</span> bytes</div>
+                </div>
+
+                <div class="mb-3">
+                    <div><span id="decoded-frames">0</span> frames decoded, <span id="encoded-packets">0</span> packets encoded</span></div>
                 </div>
             </div>
 

diff --git a/src/index.ts b/src/index.ts
@@ -12,12 +12,15 @@ const TOTAL_TIME_MICROS = 596380000;
 const encoderProgressControl = $('#encoder-progress');
 const exportTimeText = $('#export-time');
 const outputSizeText = $('#output-size');
+const decodedFramesText = $('#decoded-frames');
+const encodedPacketsText = $('#encoded-packets');
 
-
-function setExportProgress(timestampMicros: number, durationSeconds: number, outputSizeBytes: number): void {
+function setExportProgress(timestampMicros: number, durationSeconds: number, outputSizeBytes: number, decodedFrames: number, encodedPackets: number): void {
     encoderProgressControl.css('width', `${Math.round(timestampMicros / TOTAL_TIME_MICROS * 100)}%`);
     exportTimeText.text(`${durationSeconds.toFixed(3)}`);
     outputSizeText.text(`${outputSizeBytes}`);
+    decodedFramesText.text(`${decodedFrames}`);
+    encodedPacketsText.text(`${encodedPackets}`);
 }
 
 const loadingProgressControl = $('#loading-progress');
@@ -40,9 +43,10 @@ $('button#run-benchmark').click(async () => {
     $('button#run-benchmark').attr('disabled', 'disabled');
     $('select').attr('disabled', 'disabled');
     $('input').attr('disabled', 'disabled');
-    loadingProgressControl.css('width', `0%`);
-    encoderProgressControl.css('width', `0%`);
 
+    setExportProgress(0, 0, 0, 0, 0);
+    setLoadingProgress(0, 0);
+
     const inputFileName = $('select#input-file').val() as string;
     const decoderAcceleration = $('select#decoder-acceleration').val() as HardwareAcceleration;
     const decoderCanvas = $('canvas#decoder-canvas')[0] as HTMLCanvasElement;
@@ -57,11 +61,8 @@ $('button#run-benchmark').click(async () => {
     const latencyMode = $('select#latency-mode').val() as LatencyMode;
     const showEncodingProgress = $('input#progress-update:checked').val() === 'on';
 
-    exportTimeText.val('Loading video.');
-    outputSizeText.text('0');
 
     const inputFile = await loadInputFile(inputFileName, setLoadingProgress);
-    exportTimeText.val('Running...');
 
     const startTimeMillis = performance.now();
 
@@ -99,18 +100,16 @@ $('button#run-benchmark').click(async () => {
         ++encodedPackets;
 
         if (showEncodingProgress) {
-            setExportProgress(chunk.timestamp, performance.now() - startTimeMillis, outputSizeBytes);
+            setExportProgress(chunk.timestamp, performance.now() - startTimeMillis, outputSizeBytes, decodedFrames, encodedPackets);
         }
     }
 
     const durationSeconds = (performance.now() - startTimeMillis) / 1000;
 
     setLoadingProgress(0, 0);
-    setExportProgress(0, durationSeconds, outputSizeBytes);
-    alert(`Benchmark finished in ${durationSeconds.toFixed(3)} seconds.\n${decodedFrames} frames decoded, ${encodedPackets} packets encoded (${outputSizeBytes} bytes).`);
+    setExportProgress(0, durationSeconds, outputSizeBytes, decodedFrames, encodedPackets);
+
     $('button#run-benchmark').removeAttr('disabled');
     $('select').removeAttr('disabled');
     $('input').removeAttr('disabled');
-
-    loadingProgressControl.css('width', `0%`);
 });