Hugging Face's logo

Spaces:
VolariGlobal
/
MachineLearning
Running

App Files Community
MachineLearning
File size: 11,488 Bytes 
9218ec0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
 
<!DOCTYPE html>
<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>