order button (#118)

- order button (d70bcf5dd0982c9071c03fd221222772a5f475ff)


Co-authored-by: Leandro von Werra <[email protected]>

convert_to_md.py

@@ -0,0 +1,110 @@
+#!/usr/bin/env python3
+"""
+HTML to Markdown Converter
+
+This script converts HTML files to Markdown format.
+Usage: python html_to_md.py input.html [output.md]
+If no output file is specified, it will use the input filename with .md extension.
+"""
+
+import sys
+import os
+import argparse
+import html2text
+import requests
+from urllib.parse import urlparse
+
+def is_url(path):
+    """Check if the given path is a URL."""
+    parsed = urlparse(path)
+    return parsed.scheme != '' and parsed.netloc != ''
+
+def convert_html_to_markdown(html_content, **options):
+    """Convert HTML content to Markdown."""
+    converter = html2text.HTML2Text()
+    
+    # Configure converter options
+    converter.ignore_links = options.get('ignore_links', False)
+    converter.ignore_images = options.get('ignore_images', False)
+    converter.ignore_tables = options.get('ignore_tables', False)
+    converter.body_width = options.get('body_width', 0)  # 0 means no wrapping
+    converter.unicode_snob = options.get('unicode_snob', True)  # Use Unicode instead of ASCII
+    converter.wrap_links = options.get('wrap_links', False)
+    converter.inline_links = options.get('inline_links', True)
+    
+    # Convert HTML to Markdown
+    return converter.handle(html_content)
+
+def main():
+    parser = argparse.ArgumentParser(description='Convert HTML to Markdown')
+    parser.add_argument('input', help='Input HTML file or URL')
+    parser.add_argument('output', nargs='?', help='Output Markdown file (optional)')
+    parser.add_argument('--ignore-links', action='store_true', help='Ignore links in the HTML')
+    parser.add_argument('--ignore-images', action='store_true', help='Ignore images in the HTML')
+    parser.add_argument('--ignore-tables', action='store_true', help='Ignore tables in the HTML')
+    parser.add_argument('--body-width', type=int, default=0, help='Wrap text at this width (0 for no wrapping)')
+    parser.add_argument('--unicode', action='store_true', help='Use Unicode characters instead of ASCII approximations')
+    parser.add_argument('--wrap-links', action='store_true', help='Wrap links in angle brackets')
+    parser.add_argument('--reference-links', action='store_true', help='Use reference style links instead of inline links')
+    
+    args = parser.parse_args()
+    
+    # Determine input
+    if is_url(args.input):
+        try:
+            response = requests.get(args.input)
+            response.raise_for_status()
+            html_content = response.text
+        except requests.exceptions.RequestException as e:
+            print(f"Error fetching URL: {e}", file=sys.stderr)
+            return 1
+    else:
+        try:
+            with open(args.input, 'r', encoding='utf-8') as f:
+                html_content = f.read()
+        except IOError as e:
+            print(f"Error reading file: {e}", file=sys.stderr)
+            return 1
+    
+    # Configure conversion options
+    options = {
+        'ignore_links': args.ignore_links,
+        'ignore_images': args.ignore_images,
+        'ignore_tables': args.ignore_tables,
+        'body_width': args.body_width,
+        'unicode_snob': args.unicode,
+        'wrap_links': args.wrap_links,
+        'inline_links': not args.reference_links,
+    }
+    
+    # Convert HTML to Markdown
+    markdown_content = convert_html_to_markdown(html_content, **options)
+    
+    # Determine output
+    if args.output:
+        output_file = args.output
+    else:
+        if is_url(args.input):
+            # Generate a filename from the URL
+            url_parts = urlparse(args.input)
+            base_name = os.path.basename(url_parts.path) or 'index'
+            if not base_name.endswith('.html'):
+                base_name += '.html'
+            output_file = os.path.splitext(base_name)[0] + '.md'
+        else:
+            # Generate a filename from the input file
+            output_file = os.path.splitext(args.input)[0] + '.md'
+    
+    # Write output
+    try:
+        with open(output_file, 'w', encoding='utf-8') as f:
+            f.write(markdown_content)
+        print(f"Conversion successful! Output saved to: {output_file}")
+    except IOError as e:
+        print(f"Error writing file: {e}", file=sys.stderr)
+        return 1
+    
+    return 0
+
+if __name__ == "__main__":
+    sys.exit(main())

dist/index.html

@@ -76,10 +76,16 @@
           Thousands of GPUs humming in perfect harmony. That's what it takes to train today's most powerful AI models – a symphony of computing power that until recently was the exclusive domain of elite research labs. Open source has transformed this landscape, but not completely. Yes, you can download the latest <a href="https://huggingface.co/meta-llama">Llama</a> or <a href="https://huggingface.co/deepseek-ai">DeepSeek</a> models. Yes, you can read their <a href="https://ai.meta.com/research/publications/the-llama-3-herd-of-models/">technical</a> and <a href="https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf">experiment</a> reports. But the most challenging part – the training code, the knowledge and techniques necessary to coordinate GPUs to train these massive systems – remains shrouded in complexity and spread around in a series of disconnected papers and often private codebases.
           </p>
           <aside>Reading time: 2-4 days. <br>For the best reading experience, we recommend not using a mobile phone.</aside>
-          <p>
+        <div class="order-button-container">
+            <button class="order-button" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">
+                Order Book Here
+            </button>
+        </div>
+        <p>
             This open source book is here to change that. Starting from the basics, we'll walk you through the knowledge necessary to scale the training of large language models (LLMs) from one GPU to tens, hundreds, and even thousands of GPUs, illustrating theory with practical code examples and reproducible benchmarks.
         </p>
 
+
         <p>As the size of the clusters used to train these models has grown, various techniques, such as data parallelism, tensor parallelism, pipeline parallelism, and context parallelism as well as ZeRO and kernel fusion, have been invented to make sure that GPUs are highly utilized at all times. This significantly reduces training time and makes the most efficient use of this expensive hardware. These distributed training techniques are not only important for building initial models but have also become essential for fine-tuning large models on specialized data, which often produces the best results. In this book, we'll progressively go over all of these techniques – from the simplest to the most refined ones – while maintaining a single story line to help you understand where each method comes from.</p>
 
         <aside>If you have questions or remarks, open a discussion on the <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/discussions?status=open&type=discussion">Community tab</a>!</aside>

dist/style.css

@@ -597,3 +597,49 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
+.order-button {
+            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            padding: 16px 32px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+.order-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.order-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.order-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    transition: left 0.5s ease;
+}
+
+.order-button:hover::before {
+    left: 100%;
+}
+.order-button-container {
+    display: flex;
+    justify-content: center;
+    margin: 40px 0;
+}

src/index.html

@@ -76,10 +76,16 @@
           Thousands of GPUs humming in perfect harmony. That's what it takes to train today's most powerful AI models – a symphony of computing power that until recently was the exclusive domain of elite research labs. Open source has transformed this landscape, but not completely. Yes, you can download the latest <a href="https://huggingface.co/meta-llama">Llama</a> or <a href="https://huggingface.co/deepseek-ai">DeepSeek</a> models. Yes, you can read their <a href="https://ai.meta.com/research/publications/the-llama-3-herd-of-models/">technical</a> and <a href="https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf">experiment</a> reports. But the most challenging part – the training code, the knowledge and techniques necessary to coordinate GPUs to train these massive systems – remains shrouded in complexity and spread around in a series of disconnected papers and often private codebases.
           </p>
           <aside>Reading time: 2-4 days. <br>For the best reading experience, we recommend not using a mobile phone.</aside>
-          <p>
+        <div class="order-button-container">
+            <button class="order-button" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">
+                Order Book Here
+            </button>
+        </div>
+        <p>
             This open source book is here to change that. Starting from the basics, we'll walk you through the knowledge necessary to scale the training of large language models (LLMs) from one GPU to tens, hundreds, and even thousands of GPUs, illustrating theory with practical code examples and reproducible benchmarks.
         </p>
 
+
         <p>As the size of the clusters used to train these models has grown, various techniques, such as data parallelism, tensor parallelism, pipeline parallelism, and context parallelism as well as ZeRO and kernel fusion, have been invented to make sure that GPUs are highly utilized at all times. This significantly reduces training time and makes the most efficient use of this expensive hardware. These distributed training techniques are not only important for building initial models but have also become essential for fine-tuning large models on specialized data, which often produces the best results. In this book, we'll progressively go over all of these techniques – from the simplest to the most refined ones – while maintaining a single story line to help you understand where each method comes from.</p>
 
         <aside>If you have questions or remarks, open a discussion on the <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/discussions?status=open&type=discussion">Community tab</a>!</aside>

src/style.css

@@ -597,3 +597,49 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
+.order-button {
+            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            padding: 16px 32px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+.order-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.order-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.order-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    transition: left 0.5s ease;
+}
+
+.order-button:hover::before {
+    left: 100%;
+}
+.order-button-container {
+    display: flex;
+    justify-content: center;
+    margin: 40px 0;
+}