Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>PP Simulator</title> | |
| <link rel="stylesheet" href="/style.css?v=compare-1" /> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <header class="topbar"> | |
| <div class="brand">PP Simulator</div> | |
| <nav class="tabs" aria-label="Views"> | |
| <button type="button" id="tab-simulate" class="tab active">Simulate</button> | |
| <button type="button" id="tab-compare" class="tab">Compare</button> | |
| </nav> | |
| <div class="status" id="status">Ready</div> | |
| </header> | |
| <main class="workspace view active" id="simulate-view"> | |
| <aside class="config-panel"> | |
| <form id="config-form"> | |
| <section class="form-section"> | |
| <label> | |
| <span>Schedule</span> | |
| <select id="scheduler" name="scheduler"></select> | |
| </label> | |
| <div class="two-col"> | |
| <label> | |
| <span>PP</span> | |
| <input id="pp-size" name="pp_size" type="number" min="1" step="1" value="4" /> | |
| </label> | |
| <label> | |
| <span>VPP</span> | |
| <input id="vpp-size" name="vpp_size" type="number" min="1" step="1" value="2" /> | |
| </label> | |
| </div> | |
| <div class="two-col"> | |
| <label> | |
| <span>Microbatches</span> | |
| <input id="num-microbatches" name="num_microbatches" type="number" min="1" step="1" value="8" /> | |
| </label> | |
| <label> | |
| <span>VE limit</span> | |
| <input id="ve-forward-limit" name="ve_forward_limit" type="number" min="1" step="1" value="3" /> | |
| </label> | |
| </div> | |
| <label> | |
| <span>Seed</span> | |
| <input id="seed" name="seed" type="number" step="1" value="7" /> | |
| </label> | |
| </section> | |
| <section class="form-section"> | |
| <div class="section-title">Durations</div> | |
| <div class="duration-grid header-row"> | |
| <span>Op</span> | |
| <span>Mean</span> | |
| <span>Variance</span> | |
| </div> | |
| <div id="duration-fields"></div> | |
| </section> | |
| <section class="actions"> | |
| <button type="submit" class="primary">Simulate</button> | |
| <button type="button" id="download-chrome">Chrome Trace</button> | |
| <button type="button" id="download-perfetto">Perfetto Trace</button> | |
| </section> | |
| </form> | |
| </aside> | |
| <section class="main-panel"> | |
| <div class="summary-strip" id="summary-strip"></div> | |
| <div class="timeline-toolbar"> | |
| <button type="button" id="fit-button">Fit</button> | |
| <label class="toolbar-check"> | |
| <input type="checkbox" id="show-labels" checked /> | |
| <span>Labels</span> | |
| </label> | |
| <label class="zoom-control"> | |
| <span>Zoom</span> | |
| <input type="range" id="zoom-slider" min="20" max="180" value="72" /> | |
| </label> | |
| </div> | |
| <div class="timeline-wrap" id="timeline-wrap"> | |
| <svg id="timeline" role="img" aria-label="Pipeline timeline"></svg> | |
| </div> | |
| <div class="details-panel" id="details-panel"> | |
| <div class="details-empty">No op selected</div> | |
| </div> | |
| </section> | |
| </main> | |
| <main class="workspace view" id="compare-view"> | |
| <aside class="config-panel"> | |
| <form id="compare-form"> | |
| <section class="form-section"> | |
| <div class="section-title">Workload</div> | |
| <div class="three-col"> | |
| <label> | |
| <span>Stage budget</span> | |
| <input id="compare-pp-size" type="number" min="1" step="1" value="4" /> | |
| </label> | |
| <label> | |
| <span>Microbatches</span> | |
| <input id="compare-num-microbatches" type="number" min="1" step="1" value="8" /> | |
| </label> | |
| <label> | |
| <span>VPP</span> | |
| <input id="compare-vpp-size" type="number" min="1" step="1" value="2" /> | |
| </label> | |
| </div> | |
| <div class="two-col compare-toggle-row"> | |
| <label class="toolbar-check compare-check"> | |
| <input type="checkbox" id="compare-include-encoder" /> | |
| <span>Include encoder</span> | |
| </label> | |
| <label class="toolbar-check compare-check"> | |
| <input type="checkbox" id="compare-include-generator" /> | |
| <span>Include generator</span> | |
| </label> | |
| </div> | |
| <div class="two-col"> | |
| <label> | |
| <span>VE limit</span> | |
| <input id="compare-ve-forward-limit" type="number" min="1" step="1" value="3" /> | |
| </label> | |
| <label> | |
| <span>Seed</span> | |
| <input id="compare-seed" type="number" step="1" value="7" /> | |
| </label> | |
| </div> | |
| </section> | |
| <section class="form-section"> | |
| <div class="section-title">Schedulers</div> | |
| <label> | |
| <span>Scheduler A</span> | |
| <select id="compare-scheduler-a"></select> | |
| </label> | |
| <label> | |
| <span>Scheduler B</span> | |
| <select id="compare-scheduler-b"></select> | |
| </label> | |
| </section> | |
| <section class="form-section"> | |
| <div class="section-title">Durations</div> | |
| <div class="duration-grid header-row"> | |
| <span>Op</span> | |
| <span>Mean</span> | |
| <span>Variance</span> | |
| </div> | |
| <div id="compare-duration-fields"></div> | |
| </section> | |
| <section class="actions"> | |
| <button type="submit" class="primary">Compare</button> | |
| </section> | |
| </form> | |
| </aside> | |
| <section class="main-panel compare-main"> | |
| <div class="summary-strip" id="compare-summary-strip"></div> | |
| <div class="timeline-toolbar"> | |
| <button type="button" id="compare-fit-button">Fit</button> | |
| <label class="toolbar-check"> | |
| <input type="checkbox" id="compare-show-labels" checked /> | |
| <span>Labels</span> | |
| </label> | |
| <label class="zoom-control"> | |
| <span>Zoom</span> | |
| <input type="range" id="compare-zoom-slider" min="20" max="180" value="72" /> | |
| </label> | |
| </div> | |
| <div class="compare-timelines"> | |
| <section class="compare-lane"> | |
| <div class="compare-title" id="compare-title-a">Scheduler A</div> | |
| <div class="timeline-wrap compare-wrap" id="compare-timeline-a-wrap"> | |
| <svg id="compare-timeline-a" role="img" aria-label="Pipeline timeline A"></svg> | |
| </div> | |
| </section> | |
| <section class="compare-lane"> | |
| <div class="compare-title" id="compare-title-b">Scheduler B</div> | |
| <div class="timeline-wrap compare-wrap" id="compare-timeline-b-wrap"> | |
| <svg id="compare-timeline-b" role="img" aria-label="Pipeline timeline B"></svg> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="details-panel" id="compare-details-panel"> | |
| <div class="details-empty">No op selected</div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <div class="tooltip" id="tooltip"></div> | |
| <div class="modal-backdrop" id="error-modal" role="dialog" aria-modal="true" aria-labelledby="error-title" hidden> | |
| <div class="error-modal-card"> | |
| <div class="error-modal-header"> | |
| <div class="error-modal-title" id="error-title">Request failed</div> | |
| <button type="button" class="icon-button" id="error-close" aria-label="Close">×</button> | |
| </div> | |
| <div class="error-modal-body" id="error-message"></div> | |
| <div class="error-modal-actions"> | |
| <button type="button" id="error-ok">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/app.js?v=compare-1"></script> | |
| </body> | |
| </html> | |