├── figs ├── aana_sdk.png ├── aana_logo.png └── aana_whisper_hqq_compile.png ├── index.html └── styling.css /figs/aana_sdk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropbox/aana-sdk-introducing-blog/main/figs/aana_sdk.png -------------------------------------------------------------------------------- /figs/aana_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropbox/aana-sdk-introducing-blog/main/figs/aana_logo.png -------------------------------------------------------------------------------- /figs/aana_whisper_hqq_compile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropbox/aana-sdk-introducing-blog/main/figs/aana_whisper_hqq_compile.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 38 | 39 | 40 | 41 | Introducing Aana SDK 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 52 | 53 | 54 | 55 | 56 | 58 | 59 | 60 | 61 | 62 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 |
84 |

Introducing Aana SDK

85 |

Open-Source SDK Empowering the Future of Multimodal AI Applications

86 | 87 |
88 |
89 |

90 | 91 | Aleksandr Movchan 92 | , 93 | 94 | Hossein Rashidi 95 | , 96 | 97 | Evan de Riel 98 | , 99 | 100 | Ashwin Nair Anilil 101 | , 102 | 103 | Appu Shaji 104 | 105 |

106 |

107 | Mobius Labs GmbH 108 |

109 | 110 | 111 |
112 | 113 | 114 | 115 |
116 |
117 | 118 |
120 |
121 |

122 | Table of Contents 123 |

124 | 169 | 170 |
171 |
172 | 173 |

Introduction

174 | 175 |

The landscape of Artificial Intelligence is rapidly evolving, with multimodal AI at the forefront of this revolution as we stand on the cusp of a new era in technology. It's becoming increasingly clear that multimodal AI will be a cornerstone of the Generative AI stack. The ability to process and understand multiple types of data - text, images, audio, and video - simultaneously is opening doors to a new class of applications that were once the stuff of science fiction. For example, we can now achieve rich understanding of video content, enabling applications to analyze and interpret complex scenes, recognize objects and actions, transcribe speech, and even understand context and emotions.

176 | 177 |

At Mobius Labs, we have years of experience working in computer vision, audio recognition, and multimodal applications, delivering strong AI capabilities to our enterprise customers. Therefore, we understand the challenges that come with this new frontier. Managing diverse inputs, scaling Generative AI applications, and ensuring extensibility are major hurdles that developers face today. That's why we're thrilled to announce the release of Aana SDK, our open-source software development kit designed to address these challenges head-on. 178 |

179 | 180 |

Aana SDK, named after the Malayalam word for "elephant" ("ആന" - pronounced "Aana"), is the core infrastructure that supports all our major applications. It serves as the robust infrastructure layer upon which we've built our suite of AI-powered solutions. By open-sourcing Aana SDK, we're sharing the fruits of our labor and expertise with the wider developer community, enabling others to build powerful multimodal AI applications with greater ease and efficiency.

181 | 182 |

Visit our GitHub repository https://github.com/mobiusml/aana_sdk or simply pip install aana to get started with Aana today. Join us in shaping the future of machine learning deployment and application development! 183 |

184 | 185 |

From Prototype to Production: Aana SDK's Vision for Enterprise-Grade AI

186 |

With new multimodal models being released at an unprecedented pace, the ability to rapidly prototype and deploy new applications is not just an advantage - it's a necessity. Aana was born out of this urgent need. We built it to empower developers, data scientists, and ML engineers to keep pace with the rapidly evolving AI landscape.

187 | 188 |

Aana simplifies the complex process of integrating multiple AI models, managing various data types, and scaling applications efficiently. It's designed to be the bridge between cutting-edge AI research and practical, deployable Enterprise grade applications.

189 | 190 |

Addressing Key Challenges

191 |
192 |
Managing Multimodal Inputs
193 |
Aana provides a unified framework for handling diverse data types, from text and images to audio and video, making it easier to build truly multimodal applications.
194 | 195 |
Scaling Generative AI
196 |
Built on top of Ray, a distributed computing framework, Aana allows your applications to scale seamlessly from a single machine to a cluster, ensuring that your Generative AI models can handle increasing loads. ( See here on how you scale in cloud environments).
197 |
Extensibility
198 |
We've designed Aana with the future in mind. Its modular architecture and extensive integration capabilities mean that as new models and technologies emerge, you can easily incorporate them into your existing applications. It also comes with predefined integrations with popular machine learning framework such as huggingface, VLLM etc.
199 |
200 | 201 |

Design Philosophy

202 |

To address these challenges and create a truly useful tool for the AI community, we built Aana on the following core principles

203 | 204 |
    205 |
  1. Reliability: In the world of AI applications, robustness is key. Aana is designed to be fault-tolerant, gracefully handling the unexpected.
  2. 206 |
  3. Scalability: From prototype to production, Aana grows with your needs, leveraging distributed computing to scale across multiple servers effortlessly.
  4. 207 |
  5. Efficiency: We've optimized Aana for speed and resource utilization, ensuring that you get the most out of your hardware.
  6. 208 |
  7. Ease of Use: Complex doesn't have to mean complicated. Aana's modular design, with extensive automation and abstraction, makes it accessible to developers of all skill levels.
  8. 209 |
210 | 211 |

Why Open Source?

212 | 213 |

Open-source models are increasingly dominating state-of-the-art multimodal benchmarks. We believe this trend will continue in Enterprise AI, offering greater transparency, privacy, and freedom from vendor lock-in. This shift mirrors the adoption of Linux and Android in their respective domains.

214 | 215 |

By open-sourcing Aana SDK, we're aligning with this trend, empowering businesses and developers to leverage cutting-edge AI while maintaining control over their technology stack. We believe that this open-source approach will significantly simplify the process of bringing cutting-edge machine learning models into production environments. Whether you're working on a small-scale project or developing enterprise-grade applications, Aana SDK provides the flexibility and scalability you need. If you are developer we are eager to learn more on how you are using it and if you are company that wants GenAI in your stack, you can contact us at support@mobiuslabs.com

216 | 217 | 218 |

Why use a Permissive License?

219 |

We believe in the power of collaboration and open innovation. That's why we're excited to announce that we are open-sourcing Aana SDK under the permissive Apache license. This decision reflects our commitment to advancing the field of AI and empowering developers worldwide.

220 | 221 |

The choice of a permissive license is crucial for fostering innovation, collaboration, and adoption:

222 | 223 |
224 |
Foster Innovation
225 |
With the Apache license, you can use, modify, and distribute Aana SDK without worrying about legal red tape. Want to experiment with a new feature or adapt the SDK for a unique use case? Go for it. Your innovations are yours to keep - no need to disclose your source code. 226 |
227 |
Encourage Collaboration
228 |
We believe the best ideas come from collaboration. The permissive license means you can share your improvements, contribute to the core SDK, or build plugins without fear of IP conflicts. Let's solve complex AI challenges together and create something greater than the sum of its parts. Looking forward to seeing your pull requests. 229 |
230 |
Promote Adoption
231 |
Whether you're a solo developer, a startup, or an enterprise, you can integrate Aana SDK into your projects worry-free. No hidden fees, no compulsory code sharing. Use it for personal projects, open-source work, or commercial applications - it's up to you. 232 |
233 |
234 | 235 |

By open-sourcing Aana SDK under these terms, we're inviting you to join us in pushing the boundaries of multimodal AI.

236 | 237 | 238 | 239 | 240 |

Thoughts for Future

241 | 242 |

While GenAI models grow more complex, we focus on making them smaller, faster, and more scalable. Our notable projects include Extreme Quantization (See https://mobiusml.github.io/hqq_blog/ and https://mobiusml.github.io/1bit_blog/) and Fast Kernels(See https://mobiusml.github.io/whisper-static-cache-blog/ and coming soon: Fast CUDA dequantization kernels)

243 | 244 |

We envision highly capable, scalable AI applications with minimal computational overhead, anticipating growth in multimodal applications from advanced search to personalized experiences and rich analytics. Emerging trends include enhanced multimodal capabilities, agentic workflows, and embodied intelligence. On-device AI is expected to be a major trend, enabling real-time, privacy-preserving applications. 245 |

246 | 247 |

Visit our GitHub repository to get started with Aana today. Join us in shaping the future of machine learning deployment and application development!

248 | 249 | 250 | 251 |

Citation

252 |
253 |

254 | @misc{movchan2024aanasdk,
255 | title = {Introducing Aana SDK: Open-Source SDK Empowering the Future of Multimodal AI Applications},
256 | url = {https://mobiusml.github.io/aana-sdk-introducing-blog},
257 | author = {Aleksandr Movchan, Hossein Rashidi, Evan de Riel, Ashwin Nair Anilil and Appu Shaji},
258 | month = {June},
259 | year = {2024}
260 | }
261 | 					
262 |
263 | 264 | 265 |
266 |

Please feel free to contact us.

268 | 269 | 270 |
271 | 272 |
273 | 274 | 275 | 276 | 277 | 278 | 279 |
280 |

281 |

282 |

283 |

284 |
285 |

286 |
287 |
288 | 289 | 290 | 291 | -------------------------------------------------------------------------------- /styling.css: -------------------------------------------------------------------------------- 1 | html { 2 | -webkit-print-color-adjust: exact; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | -webkit-print-color-adjust: exact; 8 | } 9 | 10 | html, 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 15 | } 16 | 17 | @media only screen { 18 | body { 19 | margin: 2em auto; 20 | max-width: 900px; 21 | color: rgb(55, 53, 47); 22 | } 23 | } 24 | 25 | body { 26 | line-height: 1.5; 27 | /* white-space: pre-wrap; */ 28 | } 29 | 30 | a, 31 | a.visited { 32 | color: inherit; 33 | text-decoration: underline; 34 | } 35 | 36 | .pdf-relative-link-path { 37 | font-size: 80%; 38 | color: #444; 39 | } 40 | 41 | h1, 42 | h2, 43 | h3 { 44 | 45 | letter-spacing: -0.01em; 46 | line-height: 1.2; 47 | font-weight: 700; 48 | margin-bottom: 0; 49 | } 50 | 51 | .page-title { 52 | color: #333; 53 | /* font-family: HoeflerText-Regular, Cochin, Georgia, serif; */ 54 | /* font-family: "Merriweather", "source-serif-pro", Georgia, serif;; */ 55 | /* font-family: 17px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif; */ 56 | font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; 57 | /* font-size: 14px; */ 58 | /* line-height: 20px; */ 59 | font-size: 3rem; 60 | font-weight: 1200; 61 | margin-top: 4; 62 | margin-left: 0; 63 | /* margin-bottom: 0.3em; */ 64 | } 65 | 66 | .about-mobius{ 67 | font-family: "Poppings", "Helvetica Neue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 68 | font-size: 85%; 69 | color: rgba(0, 0, 0, 0.8); 70 | } 71 | 72 | 73 | 74 | h1 { 75 | font-size: 1.875rem; 76 | margin-top: 1.875rem; 77 | } 78 | 79 | h2 { 80 | font-size: 1.5rem; 81 | margin-top: 1.5rem; 82 | } 83 | 84 | h3 { 85 | font-size: 1.25rem; 86 | margin-top: 1.25rem; 87 | } 88 | 89 | .source { 90 | border: 1px solid #ddd; 91 | border-radius: 3px; 92 | padding: 1.5em; 93 | word-break: break-all; 94 | } 95 | 96 | .callout { 97 | border-radius: 3px; 98 | padding: 1rem; 99 | } 100 | 101 | figure { 102 | margin: 1.25em 0; 103 | page-break-inside: avoid; 104 | } 105 | 106 | figcaption { 107 | opacity: 0.5; 108 | font-size: 85%; 109 | margin-top: 0.5em; 110 | } 111 | 112 | mark { 113 | background-color: transparent; 114 | } 115 | 116 | .indented { 117 | padding-left: 1.5em; 118 | } 119 | 120 | hr { 121 | background: transparent; 122 | display: block; 123 | width: 100%; 124 | height: 1px; 125 | visibility: visible; 126 | border: none; 127 | border-bottom: 1px solid rgba(55, 53, 47, 0.4); 128 | } 129 | 130 | img { 131 | max-width: 100%; 132 | } 133 | 134 | .image-container { 135 | border-radius: 20px; 136 | overflow: hidden; 137 | display: inline-block; /* or block, depending on your layout */ 138 | line-height: 0; /* to remove space below the image */ 139 | } 140 | 141 | .image-container img { 142 | display: block; 143 | } 144 | 145 | .toggle-content { 146 | display: none; 147 | margin-top: 10px; 148 | } 149 | 150 | .toggle-button { 151 | cursor: pointer; 152 | color: rgb(29, 29, 29); 153 | border: none; 154 | border-radius: 6px; 155 | padding: 10px; 156 | font-size: 16px; 157 | } 158 | 159 | .toggle-container{ 160 | display: flex; 161 | justify-content: space-between; 162 | align-items: center; 163 | } 164 | 165 | .toggle-text{ 166 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 167 | font-size: small; 168 | } 169 | 170 | .arrow { 171 | border: solid black; 172 | border-width: 0 3px 3px 0; 173 | display: inline-block; 174 | padding: 3px; 175 | } 176 | 177 | .right { 178 | transform: rotate(-45deg); 179 | -webkit-transform: rotate(-45deg); 180 | } 181 | 182 | .left { 183 | transform: rotate(135deg); 184 | -webkit-transform: rotate(135deg); 185 | } 186 | 187 | .up { 188 | transform: rotate(-135deg); 189 | -webkit-transform: rotate(-135deg); 190 | } 191 | 192 | .down { 193 | transform: rotate(45deg); 194 | -webkit-transform: rotate(45deg); 195 | } 196 | 197 | 198 | 199 | 200 | @page { 201 | margin: 1in; 202 | } 203 | 204 | .collection-content { 205 | font-size: 0.875rem; 206 | } 207 | 208 | .column-list { 209 | display: flex; 210 | justify-content: space-between; 211 | } 212 | 213 | .column { 214 | padding: 0 1em; 215 | } 216 | 217 | .column:first-child { 218 | padding-left: 0; 219 | } 220 | 221 | .column:last-child { 222 | padding-right: 0; 223 | } 224 | 225 | .table_of_contents-item { 226 | display: block; 227 | font-size: 0.875rem; 228 | line-height: 1.3; 229 | padding: 0.125rem; 230 | } 231 | 232 | .table_of_contents-indent-1 { 233 | margin-left: 1.5rem; 234 | } 235 | 236 | .table_of_contents-indent-2 { 237 | margin-left: 3rem; 238 | } 239 | 240 | .table_of_contents-indent-3 { 241 | margin-left: 4.5rem; 242 | } 243 | 244 | .table_of_contents-link { 245 | text-decoration: none; 246 | opacity: 0.7; 247 | border-bottom: 1px solid rgba(55, 53, 47, 0.18); 248 | } 249 | 250 | .clickable-image { 251 | position: relative; 252 | display: inline-block; /* or block depending on your layout */ 253 | cursor: pointer; 254 | /* border-radius: 30px; */ 255 | overflow: hidden; 256 | line-height: 0; /* to remove space below the image */ 257 | max-width: 320px; 258 | } 259 | 260 | .clickable-image img { 261 | width: 100%; 262 | height: auto; 263 | display: block; 264 | } 265 | 266 | .clickable-image .text-overlay { 267 | position: absolute; 268 | top: 0; 269 | left: 0; 270 | width: 100%; 271 | height: 100%; 272 | display: flex; 273 | flex-direction: column; 274 | justify-content: space-between; /* Aligns content to top and bottom */ 275 | color: white; /* Text color */ 276 | padding: 20px; /* Padding around text */ 277 | box-sizing: border-box; 278 | background: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */ 279 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 280 | } 281 | 282 | .text-overlay p { 283 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 284 | font-weight: 700; 285 | color: #fff; 286 | width: 100%; 287 | line-height: normal; 288 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 289 | } 290 | 291 | .clickable-image .text-overlay h1 { 292 | margin: 0; 293 | padding: 0; 294 | } 295 | 296 | .clickable-image .text-overlay p { 297 | margin: 0; 298 | padding: 0; 299 | } 300 | 301 | table, 302 | th, 303 | td { 304 | border: 1px solid rgba(45, 44, 43, 0.4); 305 | border-collapse: collapse; 306 | } 307 | 308 | table { 309 | border-left: none; 310 | border-right: none; 311 | border-top: none; 312 | margin-top: 20px; 313 | margin-bottom: 20px; 314 | } 315 | 316 | th, 317 | td { 318 | /* font-family: "Merriweather", "source-serif-pro", Georgia, serif; */ 319 | /* font-family: */ 320 | font-weight: 400; 321 | font-size: small; 322 | padding: 0.25em 0.5em; 323 | line-height: 1.8; 324 | min-height: 1em; 325 | min-width: 6em; 326 | text-align: left; 327 | color: rgba(21, 21, 21, 0.75); 328 | border-left-width: 0px; 329 | border-right-width: 0px; 330 | /* color: rgba(55, 53, 47, 0.8); */ 331 | 332 | } 333 | 334 | th.narrow, 335 | td.narrow { 336 | min-width: 3em; 337 | } 338 | 339 | td.method{ 340 | text-align: left; 341 | } 342 | 343 | th.external{ 344 | background-color: rgba(144, 101, 176, 0.2); 345 | } 346 | 347 | 348 | td.external{ 349 | background-color: rgba(241, 166, 17, 0.2); 350 | } 351 | 352 | td.highlight{ 353 | background-color: rgba(144, 101, 176, 0.2); 354 | } 355 | 356 | tr.group1{ 357 | background-color: rgba(144, 101, 176, 0.2); 358 | } 359 | 360 | tr.group2{ 361 | background-color: rgba(101, 176, 102, 0.2); 362 | } 363 | 364 | td.group1{ 365 | background-color: rgba(144, 101, 176, 0.2); 366 | } 367 | 368 | td.group2{ 369 | background-color: rgba(101, 176, 102, 0.2); 370 | } 371 | 372 | 373 | th { 374 | font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; 375 | font-weight: 700; 376 | font-size: small; 377 | border-top: none; 378 | /* border-bottom-width: 2px; */ 379 | border-color: rgba(21, 21, 21, 0.8); 380 | color: rgba(21, 21, 21, 0.8); 381 | } 382 | 383 | caption{ 384 | /* font-family: "Merriweather", "source-serif-pro", Georgia, serif; */ 385 | caption-side: bottom; 386 | font-size: x-small; 387 | font-weight: 600; 388 | /* text-align: left; */ 389 | text-align: center; 390 | margin:5px 7px 5px 7px; 391 | 392 | } 393 | 394 | ol, 395 | ul { 396 | margin: 0; 397 | margin-block-start: 0.6em; 398 | margin-block-end: 0.6em; 399 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 400 | } 401 | 402 | li>ol:first-child, 403 | li>ul:first-child { 404 | margin-block-start: 0.6em; 405 | } 406 | 407 | ul>li { 408 | list-style: disc; 409 | } 410 | 411 | ul.to-do-list { 412 | padding-inline-start: 0; 413 | } 414 | 415 | ul.to-do-list>li { 416 | list-style: none; 417 | } 418 | 419 | .to-do-children-checked { 420 | text-decoration: line-through; 421 | opacity: 0.375; 422 | } 423 | 424 | ul.toggle>li { 425 | list-style: none; 426 | } 427 | 428 | ul { 429 | padding-inline-start: 1.7em; 430 | } 431 | 432 | ul>li { 433 | padding-left: 0.1em; 434 | } 435 | 436 | ol { 437 | padding-inline-start: 1.6em; 438 | } 439 | 440 | ol>li { 441 | padding-left: 0.2em; 442 | } 443 | 444 | dl { 445 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 446 | } 447 | 448 | dt{ 449 | font-weight: 700; 450 | } 451 | 452 | 453 | .mono ol { 454 | padding-inline-start: 2em; 455 | } 456 | 457 | .mono ol>li { 458 | text-indent: -0.4em; 459 | } 460 | 461 | .toggle { 462 | padding-inline-start: 0em; 463 | list-style-type: none; 464 | } 465 | 466 | /* Indent toggle children */ 467 | .toggle>li>details { 468 | padding-left: 1.7em; 469 | } 470 | 471 | .toggle>li>details>summary { 472 | margin-left: -1.1em; 473 | } 474 | 475 | .selected-value { 476 | display: inline-block; 477 | padding: 0 0.5em; 478 | background: rgba(206, 205, 202, 0.5); 479 | border-radius: 3px; 480 | margin-right: 0.5em; 481 | margin-top: 0.3em; 482 | margin-bottom: 0.3em; 483 | white-space: nowrap; 484 | } 485 | 486 | .collection-title { 487 | display: inline-block; 488 | margin-right: 1em; 489 | } 490 | 491 | .page-description { 492 | margin-bottom: 2em; 493 | } 494 | 495 | .simple-table { 496 | margin-top: 1em; 497 | font-size: 0.875rem; 498 | empty-cells: show; 499 | } 500 | 501 | .simple-table td { 502 | height: 29px; 503 | min-width: 120px; 504 | } 505 | 506 | .simple-table th { 507 | height: 29px; 508 | min-width: 120px; 509 | } 510 | 511 | .simple-table-header-color { 512 | background: rgb(247, 246, 243); 513 | color: black; 514 | } 515 | 516 | .simple-table-header { 517 | font-weight: 500; 518 | } 519 | 520 | time { 521 | opacity: 0.5; 522 | } 523 | 524 | .icon { 525 | display: inline-block; 526 | max-width: 1.2em; 527 | max-height: 1.2em; 528 | text-decoration: none; 529 | vertical-align: text-bottom; 530 | margin-right: 0.5em; 531 | } 532 | 533 | img.icon { 534 | border-radius: 3px; 535 | } 536 | 537 | .user-icon { 538 | width: 1.5em; 539 | height: 1.5em; 540 | border-radius: 100%; 541 | margin-right: 0.5rem; 542 | } 543 | 544 | .user-icon-inner { 545 | font-size: 0.8em; 546 | } 547 | 548 | .text-icon { 549 | border: 1px solid #000; 550 | text-align: center; 551 | } 552 | 553 | .page-cover-image { 554 | display: block; 555 | object-fit: cover; 556 | width: 100%; 557 | max-height: 30vh; 558 | } 559 | 560 | .page-header-icon { 561 | font-size: 3rem; 562 | margin-bottom: 1rem; 563 | } 564 | 565 | .page-header-icon-with-cover { 566 | margin-top: -0.72em; 567 | margin-left: 0.07em; 568 | } 569 | 570 | .page-header-icon img { 571 | border-radius: 3px; 572 | } 573 | 574 | .link-to-page { 575 | margin: 1em 0; 576 | padding: 0; 577 | border: none; 578 | font-weight: 500; 579 | } 580 | 581 | p>.user { 582 | opacity: 0.5; 583 | } 584 | 585 | td>.user, 586 | td>time { 587 | white-space: nowrap; 588 | 589 | } 590 | 591 | input[type="checkbox"] { 592 | transform: scale(1.5); 593 | margin-right: 0.6em; 594 | vertical-align: middle; 595 | } 596 | 597 | 598 | 599 | p { 600 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 601 | margin-top: 0.5em; 602 | margin-bottom: 0.5em; 603 | line-height: 24px; 604 | color: rgba(24, 24, 24, 0.82); 605 | font-size: 95%; 606 | /* color: rgba(0, 0, 0, 0.7); */ 607 | } 608 | 609 | 610 | 611 | .code-container { 612 | position: relative; 613 | border-radius: 0px; 614 | border-width: 1px; 615 | border-color: #444; 616 | border: 1px solid #ccc; 617 | background-color: #fff; 618 | margin-top:10px; 619 | padding: 0px; 620 | margin-top: 10px; 621 | margin-bottom: 10px; 622 | /* margin-bottom: 40px; */ 623 | } 624 | 625 | 626 | .code-container code { 627 | margin: 0; 628 | padding: 0; 629 | display: block; /* Ensure it takes up the whole width */ 630 | } 631 | 632 | .copy-button { 633 | /* position: absolute; 634 | 635 | top: 5px; 636 | right: 5px; 637 | padding: 5px 10px; */ 638 | position: absolute; 639 | margin:0px; 640 | right:-5px; 641 | /* padding: 4px; */ 642 | border-radius: 0px; 643 | background-color: #ffffff; 644 | font-family: "Poppins", "Helvetica Neue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 645 | font-size: 50%; 646 | border: 1px solid #ccc; 647 | cursor: pointer; 648 | margin: 0px; 649 | margin:4px; 650 | } 651 | 652 | .footnote { 653 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 654 | margin-top: 0.5em; 655 | margin-bottom: 0.5em; 656 | line-height: 24px; 657 | color: rgba(24, 24, 24, 0.82); 658 | font-size: 50%; 659 | } 660 | 661 | .header-info { 662 | font-family: "Merriweather", "source-serif-pro", Georgia, serif; 663 | color: rgba(0, 0, 0, 0.7); 664 | /* line-height: 125%; */ 665 | /* font-size: smaller; */ 666 | /* font-style:oblique; */ 667 | } 668 | 669 | 670 | 671 | .image { 672 | border: none; 673 | margin: 1.5em 0; 674 | padding: 0; 675 | border-radius: 0; 676 | text-align: center; 677 | } 678 | 679 | 680 | 681 | blockquote { 682 | font-size: 1.25em; 683 | margin: 1em 0; 684 | padding-left: 1em; 685 | border-left: 3px solid rgb(55, 53, 47); 686 | } 687 | 688 | .bookmark { 689 | text-decoration: none; 690 | max-height: 8em; 691 | padding: 0; 692 | display: flex; 693 | width: 100%; 694 | align-items: stretch; 695 | } 696 | 697 | .bookmark-title { 698 | font-size: 0.85em; 699 | overflow: hidden; 700 | text-overflow: ellipsis; 701 | height: 1.75em; 702 | white-space: nowrap; 703 | } 704 | 705 | .bookmark-text { 706 | display: flex; 707 | flex-direction: column; 708 | } 709 | 710 | .bookmark-info { 711 | flex: 4 1 180px; 712 | padding: 12px 14px 14px; 713 | display: flex; 714 | flex-direction: column; 715 | justify-content: space-between; 716 | } 717 | 718 | .bookmark-image { 719 | width: 33%; 720 | flex: 1 1 180px; 721 | display: block; 722 | position: relative; 723 | object-fit: cover; 724 | border-radius: 1px; 725 | } 726 | 727 | .bookmark-description { 728 | color: rgba(55, 53, 47, 0.6); 729 | font-size: 0.75em; 730 | overflow: hidden; 731 | max-height: 4.5em; 732 | word-break: break-word; 733 | } 734 | 735 | .bookmark-href { 736 | font-size: 0.75em; 737 | margin-top: 0.25em; 738 | } 739 | 740 | .sans { 741 | font-family: "Poppins", "Helvetica Neue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 742 | } 743 | 744 | .code { 745 | font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace; 746 | } 747 | 748 | .serif { 749 | font-family: Lyon-Text, Georgia, ui-serif, serif; 750 | } 751 | 752 | .mono { 753 | font-family: iawriter-mono, Nitti, Menlo, Courier, monospace; 754 | } 755 | 756 | .pdf .sans { 757 | font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK JP'; 758 | } 759 | 760 | .pdf:lang(zh-CN) .sans { 761 | font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC'; 762 | } 763 | 764 | .pdf:lang(zh-TW) .sans { 765 | font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK TC'; 766 | } 767 | 768 | .pdf:lang(ko-KR) .sans { 769 | font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK KR'; 770 | } 771 | 772 | .pdf .code { 773 | font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; 774 | } 775 | 776 | .pdf:lang(zh-CN) .code { 777 | font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; 778 | } 779 | 780 | .pdf:lang(zh-TW) .code { 781 | font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; 782 | } 783 | 784 | .pdf:lang(ko-KR) .code { 785 | font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; 786 | } 787 | 788 | .pdf .serif { 789 | font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK JP'; 790 | } 791 | 792 | .pdf:lang(zh-CN) .serif { 793 | font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK SC'; 794 | } 795 | 796 | .pdf:lang(zh-TW) .serif { 797 | font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK TC'; 798 | } 799 | 800 | .pdf:lang(ko-KR) .serif { 801 | font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK KR'; 802 | } 803 | 804 | .pdf .mono { 805 | font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; 806 | } 807 | 808 | .pdf:lang(zh-CN) .mono { 809 | font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; 810 | } 811 | 812 | .pdf:lang(zh-TW) .mono { 813 | font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; 814 | } 815 | 816 | .pdf:lang(ko-KR) .mono { 817 | font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; 818 | } 819 | 820 | .highlight-default { 821 | color: rgba(55, 53, 47, 1); 822 | } 823 | 824 | .highlight-gray { 825 | color: rgba(120, 119, 116, 1); 826 | fill: rgba(120, 119, 116, 1); 827 | } 828 | 829 | .highlight-brown { 830 | color: rgba(159, 107, 83, 1); 831 | fill: rgba(159, 107, 83, 1); 832 | } 833 | 834 | .highlight-orange { 835 | color: rgba(217, 115, 13, 1); 836 | fill: rgba(217, 115, 13, 1); 837 | } 838 | 839 | .highlight-yellow { 840 | color: rgba(203, 145, 47, 1); 841 | fill: rgba(203, 145, 47, 1); 842 | } 843 | 844 | .highlight-teal { 845 | color: rgba(68, 131, 97, 1); 846 | fill: rgba(68, 131, 97, 1); 847 | } 848 | 849 | .highlight-blue { 850 | color: rgba(51, 126, 169, 1); 851 | fill: rgba(51, 126, 169, 1); 852 | } 853 | 854 | .highlight-purple { 855 | color: rgba(144, 101, 176, 1); 856 | fill: rgba(144, 101, 176, 1); 857 | } 858 | 859 | .highlight-pink { 860 | color: rgba(193, 76, 138, 1); 861 | fill: rgba(193, 76, 138, 1); 862 | } 863 | 864 | .highlight-red { 865 | color: rgba(212, 76, 71, 1); 866 | fill: rgba(212, 76, 71, 1); 867 | } 868 | 869 | .highlight-gray_background { 870 | background: rgba(241, 241, 239, 1); 871 | } 872 | 873 | .highlight-brown_background { 874 | background: rgba(244, 238, 238, 1); 875 | } 876 | 877 | .highlight-orange_background { 878 | background: rgba(251, 236, 221, 1); 879 | } 880 | 881 | .highlight-yellow_background { 882 | background: rgba(251, 243, 219, 1); 883 | } 884 | 885 | .highlight-teal_background { 886 | background: rgba(237, 243, 236, 1); 887 | } 888 | 889 | .highlight-blue_background { 890 | background: rgba(231, 243, 248, 1); 891 | } 892 | 893 | .highlight-purple_background { 894 | background: rgba(244, 240, 247, 0.8); 895 | } 896 | 897 | .highlight-pink_background { 898 | background: rgba(249, 238, 243, 0.8); 899 | } 900 | 901 | .highlight-red_background { 902 | background: rgba(253, 235, 236, 1); 903 | } 904 | 905 | .block-color-default { 906 | color: inherit; 907 | fill: inherit; 908 | } 909 | 910 | .block-color-gray { 911 | color: rgba(120, 119, 116, 1); 912 | fill: rgba(120, 119, 116, 1); 913 | } 914 | 915 | .block-color-brown { 916 | color: rgba(159, 107, 83, 1); 917 | fill: rgba(159, 107, 83, 1); 918 | } 919 | 920 | .block-color-orange { 921 | color: rgba(217, 115, 13, 1); 922 | fill: rgba(217, 115, 13, 1); 923 | } 924 | 925 | .block-color-yellow { 926 | color: rgba(203, 145, 47, 1); 927 | fill: rgba(203, 145, 47, 1); 928 | } 929 | 930 | .block-color-teal { 931 | color: rgba(68, 131, 97, 1); 932 | fill: rgba(68, 131, 97, 1); 933 | } 934 | 935 | .block-color-blue { 936 | color: rgba(51, 126, 169, 1); 937 | fill: rgba(51, 126, 169, 1); 938 | } 939 | 940 | .block-color-purple { 941 | color: rgba(144, 101, 176, 1); 942 | fill: rgba(144, 101, 176, 1); 943 | } 944 | 945 | .block-color-pink { 946 | color: rgba(193, 76, 138, 1); 947 | fill: rgba(193, 76, 138, 1); 948 | } 949 | 950 | .block-color-red { 951 | color: rgba(212, 76, 71, 1); 952 | fill: rgba(212, 76, 71, 1); 953 | } 954 | 955 | .block-color-gray_background { 956 | background: rgba(241, 241, 239, 1); 957 | } 958 | 959 | .block-color-brown_background { 960 | background: rgba(244, 238, 238, 1); 961 | } 962 | 963 | .block-color-orange_background { 964 | background: rgba(251, 236, 221, 1); 965 | } 966 | 967 | .block-color-yellow_background { 968 | background: rgba(251, 243, 219, 1); 969 | } 970 | 971 | .block-color-teal_background { 972 | background: rgba(237, 243, 236, 1); 973 | } 974 | 975 | .block-color-blue_background { 976 | background: rgba(231, 243, 248, 1); 977 | } 978 | 979 | .block-color-purple_background { 980 | background: rgba(244, 240, 247, 0.8); 981 | } 982 | 983 | .block-color-pink_background { 984 | background: rgba(249, 238, 243, 0.8); 985 | } 986 | 987 | .block-color-red_background { 988 | background: rgba(253, 235, 236, 1); 989 | } 990 | 991 | .select-value-color-interactiveBlue { 992 | background-color: rgba(35, 131, 226, .07); 993 | } 994 | 995 | .select-value-color-pink { 996 | background-color: rgba(245, 224, 233, 1); 997 | } 998 | 999 | .select-value-color-purple { 1000 | background-color: rgba(232, 222, 238, 1); 1001 | } 1002 | 1003 | .select-value-color-green { 1004 | background-color: rgba(219, 237, 219, 1); 1005 | } 1006 | 1007 | .select-value-color-gray { 1008 | background-color: rgba(227, 226, 224, 1); 1009 | } 1010 | 1011 | .select-value-color-translucentGray { 1012 | background-color: rgba(255, 255, 255, 0.0375); 1013 | } 1014 | 1015 | .select-value-color-orange { 1016 | background-color: rgba(250, 222, 201, 1); 1017 | } 1018 | 1019 | .select-value-color-brown { 1020 | background-color: rgba(238, 224, 218, 1); 1021 | } 1022 | 1023 | .select-value-color-red { 1024 | background-color: rgba(255, 226, 221, 1); 1025 | } 1026 | 1027 | .select-value-color-yellow { 1028 | background-color: rgba(253, 236, 200, 1); 1029 | } 1030 | 1031 | .select-value-color-blue { 1032 | background-color: rgba(211, 229, 239, 1); 1033 | } 1034 | 1035 | .select-value-color-pageGlass { 1036 | background-color: undefined; 1037 | } 1038 | 1039 | .select-value-color-washGlass { 1040 | background-color: undefined; 1041 | } 1042 | 1043 | .checkbox { 1044 | display: inline-flex; 1045 | vertical-align: text-bottom; 1046 | width: 16; 1047 | height: 16; 1048 | background-size: 16px; 1049 | margin-left: 2px; 1050 | margin-right: 5px; 1051 | } 1052 | 1053 | .checkbox-on { 1054 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E"); 1055 | } 1056 | 1057 | .checkbox-off { 1058 | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E"); 1059 | } 1060 | 1061 | 1062 | .left { 1063 | text-align: left; 1064 | } 1065 | 1066 | .right { 1067 | text-align: right; 1068 | } 1069 | 1070 | .center { 1071 | text-align: center; 1072 | margin-left: auto; 1073 | margin-right: auto; 1074 | } 1075 | 1076 | .justify { 1077 | text-align: justify; 1078 | } 1079 | 1080 | /* POSITIONING */ 1081 | 1082 | .left { 1083 | text-align: left; 1084 | } 1085 | 1086 | .right { 1087 | text-align: right; 1088 | } 1089 | 1090 | .center { 1091 | text-align: center; 1092 | margin-left: auto; 1093 | margin-right: auto; 1094 | } 1095 | 1096 | .justify { 1097 | text-align: justify; 1098 | } 1099 | 1100 | /* ==== GRID SYSTEM ==== (from https://simplegrid.io/ ) */ 1101 | 1102 | .container { 1103 | width: 98%; 1104 | margin-left: 0px; 1105 | margin-right: auto; 1106 | } 1107 | 1108 | .row { 1109 | position: relative; 1110 | width: 100%; 1111 | } 1112 | 1113 | .row [class^="col"] { 1114 | float: left; 1115 | margin: 0.5rem 2%; 1116 | min-height: 0.125rem; 1117 | } 1118 | 1119 | .col-1, 1120 | .col-2, 1121 | .col-3, 1122 | .col-4, 1123 | .col-5, 1124 | .col-6, 1125 | .col-7, 1126 | .col-8, 1127 | .col-9, 1128 | .col-10, 1129 | .col-11, 1130 | .col-12 { 1131 | width: 96%; 1132 | } 1133 | 1134 | .col-1-sm { 1135 | width: 4.33%; 1136 | } 1137 | 1138 | .col-2-sm { 1139 | width: 12.66%; 1140 | } 1141 | 1142 | .col-3-sm { 1143 | width: 21%; 1144 | } 1145 | 1146 | .col-4-sm { 1147 | width: 29.33%; 1148 | } 1149 | 1150 | .col-5-sm { 1151 | width: 37.66%; 1152 | } 1153 | 1154 | .col-6-sm { 1155 | width: 46%; 1156 | } 1157 | 1158 | .col-7-sm { 1159 | width: 54.33%; 1160 | } 1161 | 1162 | .col-8-sm { 1163 | width: 62.66%; 1164 | } 1165 | 1166 | .col-9-sm { 1167 | width: 71%; 1168 | } 1169 | 1170 | .col-10-sm { 1171 | width: 79.33%; 1172 | } 1173 | 1174 | .col-11-sm { 1175 | width: 87.66%; 1176 | } 1177 | 1178 | .col-12-sm { 1179 | width: 96%; 1180 | } 1181 | 1182 | .row::after { 1183 | content: ""; 1184 | display: table; 1185 | clear: both; 1186 | } 1187 | 1188 | .hidden-sm { 1189 | display: none; 1190 | } 1191 | 1192 | @media only screen and (min-width: 33.75em) { /* 540px */ 1193 | .container { 1194 | width: 98%; 1195 | } 1196 | } 1197 | 1198 | @media only screen and (min-width: 45em) { /* 720px */ 1199 | .col-1 { 1200 | width: 4.33%; 1201 | } 1202 | 1203 | .col-2 { 1204 | width: 12.66%; 1205 | } 1206 | 1207 | .col-3 { 1208 | width: 21%; 1209 | } 1210 | 1211 | .col-4 { 1212 | width: 29.33%; 1213 | } 1214 | 1215 | .col-5 { 1216 | width: 37.66%; 1217 | } 1218 | 1219 | .col-6 { 1220 | width: 46%; 1221 | } 1222 | 1223 | .col-7 { 1224 | width: 54.33%; 1225 | } 1226 | 1227 | .col-8 { 1228 | width: 62.66%; 1229 | } 1230 | 1231 | .col-9 { 1232 | width: 71%; 1233 | } 1234 | 1235 | .col-10 { 1236 | width: 79.33%; 1237 | } 1238 | 1239 | .col-11 { 1240 | width: 87.66%; 1241 | } 1242 | 1243 | .col-12 { 1244 | width: 96%; 1245 | } 1246 | 1247 | .hidden-sm { 1248 | display: block; 1249 | } 1250 | } 1251 | 1252 | @media only screen and (min-width: 60em) { /* 960px */ 1253 | .container { 1254 | width: 98%; 1255 | max-width: 60rem; 1256 | } 1257 | } 1258 | 1259 | 1260 | @media only print { 1261 | img { 1262 | max-height: 100vh; 1263 | object-fit: contain; 1264 | } 1265 | } 1266 | --------------------------------------------------------------------------------