Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" | |
| content="Machine Learning Systems - An interactive PDF viewer for exploring machine learning systems concepts, architectures, and best practices."> | |
| <meta name="keywords" content="machine learning, ML systems, AI, deep learning, MLOps"> | |
| <meta name="author" content="Machine Learning Systems"> | |
| <title>Machine Learning Systems | Interactive PDF Viewer</title> | |
| <!-- Fonts --> | |
| <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@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" | |
| rel="stylesheet"> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="styles.css"> | |
| <!-- PDF.js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo-section"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" | |
| stroke-linecap="round" stroke-linejoin="round" /> | |
| <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| </svg> | |
| </div> | |
| <div class="logo-text"> | |
| <h1>Machine Learning Systems</h1> | |
| <p class="subtitle">Interactive PDF Viewer</p> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn-icon" id="themeToggle" title="Toggle theme"> | |
| <svg id="sunIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" /> | |
| <path | |
| d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| <svg id="moonIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" | |
| style="display: none;"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" | |
| stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <button class="btn-icon" id="searchBtn" title="Search (Ctrl+F)"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" /> | |
| <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| <button class="btn-icon" id="fullscreenBtn" title="Fullscreen"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M8 3H5C3.89543 3 3 3.89543 3 5V8M21 8V5C21 3.89543 20.1046 3 19 3H16M16 21H19C20.1046 21 21 20.1046 21 19V16M3 16V19C3 20.1046 3.89543 21 5 21H8" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| <a href="Machine-Learning-Systems.pdf" download class="btn-primary"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| Download PDF | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <h2>Navigation</h2> | |
| <button class="btn-icon" id="closeSidebarBtn" title="Close sidebar"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="page-info"> | |
| <div class="info-item"> | |
| <span class="info-label">Current Page</span> | |
| <span class="info-value" id="currentPageDisplay">1</span> | |
| </div> | |
| <div class="info-item"> | |
| <span class="info-label">Total Pages</span> | |
| <span class="info-value" id="totalPagesDisplay">-</span> | |
| </div> | |
| </div> | |
| <div class="page-navigation"> | |
| <label for="pageInput">Go to Page</label> | |
| <div class="page-input-group"> | |
| <input type="number" id="pageInput" min="1" placeholder="1"> | |
| <button class="btn-secondary" id="goToPageBtn">Go</button> | |
| </div> | |
| </div> | |
| <div class="thumbnails" id="thumbnails"> | |
| <p class="loading-text">Loading pages...</p> | |
| </div> | |
| </aside> | |
| <!-- PDF Viewer --> | |
| <div class="viewer-container"> | |
| <button class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| <!-- Search Panel --> | |
| <div class="search-panel" id="searchPanel"> | |
| <div class="search-input-group"> | |
| <input type="text" id="searchInput" placeholder="Search in PDF..."> | |
| <button class="btn-secondary" id="searchNextBtn">Next</button> | |
| <button class="btn-secondary" id="searchPrevBtn">Previous</button> | |
| <button class="btn-icon" id="closeSearchBtn"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" | |
| stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="search-results" id="searchResults"></p> | |
| </div> | |
| <!-- Controls --> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <button class="btn-icon" id="prevPageBtn" title="Previous page (←)"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <span class="page-indicator"> | |
| <span id="pageNum">1</span> / <span id="pageCount">-</span> | |
| </span> | |
| <button class="btn-icon" id="nextPageBtn" title="Next page (→)"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="control-group"> | |
| <button class="btn-icon" id="zoomOutBtn" title="Zoom out (-)"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" /> | |
| <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" | |
| stroke-linecap="round" /> | |
| <path d="M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| <span class="zoom-level" id="zoomLevel">100%</span> | |
| <button class="btn-icon" id="zoomInBtn" title="Zoom in (+)"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" /> | |
| <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" | |
| stroke-linecap="round" /> | |
| <path d="M11 8V14M8 11H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| </button> | |
| <button class="btn-icon" id="fitWidthBtn" title="Fit to width"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" /> | |
| <path d="M9 12H15M9 12L11 10M9 12L11 14M15 12L13 10M15 12L13 14" stroke="currentColor" | |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Container --> | |
| <div class="canvas-container" id="canvasContainer"> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="spinner"></div> | |
| <p>Loading PDF...</p> | |
| </div> | |
| <canvas id="pdfCanvas"></canvas> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Scripts --> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |