ecosystem.html

---
layout: default
title: Ecosystem
permalink: ecosystem.html
background-class: ecosystem-background
body-class: ecosystem
---

<div class="jumbotron jumbotron-fluid on-dark-background">
  <div class="container">
    <h1>Ecosystem</h1>

    <p class="lead">Tap into a rich ecosystem of tools, libraries, and more to support, accelerate, and explore AI development.</p>

    <p><a class="join-link" href="{{ site.baseurl }}/ecosystem/join">Join the PyTorch ecosystem</a></p>
  </div>
</div>

<div class="main-content-wrapper">
  <div class="main-content">
    <div class="container">
<!--       <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#articleNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="articleNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" data-category="all" href="#">All</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-category="vision" href="#vision">Vision</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-category="reasoning" href="#reasoning">Reasoning</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-category="language" href="#language">Language</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-category="speech" href="#speech">Speech</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-category="tools" href="#tools">Tools</a>
            </li>

            <li class="nav-item">
              <a class="nav-link">Search</a>
            </li>
          </ul>
        </div>
      </nav> -->

      <!-- START CONTENT -->

      <div class="row ecosystem-cards-wrapper">
        {% assign ecosystem = site.ecosystem  | sort: 'order' %}

        {% for item in ecosystem %}
          <div class="col-md-6 ecosystem-card-wrapper" data-categories="{{ item.category | join: "," }}">
            <div class="card ecosystem-card">
              <a href="{{ item.link }}" target="_blank">
                <div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
                  <div class="ecosystem-card-title-container">
                    <h4>{{ item.title }}</h4>
                      {% if item.experimental %}
                        <div class="experimental-badge">
                          Experimental
                        </div>
                      {% endif %}
                  </div>
                  <p class="card-summary">{{ item.summary }}</p>
                </div>
              </a>
            </div>
          </div>
        {% endfor %}
      </div>

      <div class="join-notice">
        <p>Have a project you want featured?</p>
        <p><a class="join-link" href="{{ site.baseurl }}/ecosystem/join">Join the PyTorch ecosystem</a></p>
      </div>

    </div>
  </div>
</div>

{% include quick_start_module.html %}

<script type="text/javascript">
  var category = window.location.hash.replace(/^#/, '');;

  if (category) {
    updateMenuSelection(category);
    showCardsByCategory(category);
  } else {
    updateMenuSelection('all');
  }

  $(".main-content-menu .nav-link[data-category]").on('click', function(e) {
    e.preventDefault();
    var category = $(this).data('category');
    window.location.hash = category;

    if (category) {
      showCardsByCategory(category);
    } else {
      $(".ecosystem-card-wrapper").show();
    }

    updateMenuSelection(category);
  });

  function showCardsByCategory(category) {
    if (category === "all") {
      $(".ecosystem-card-wrapper").show();
      return;
    }

    $(".ecosystem-card-wrapper").each(function(i, el) {
      var targets = $(el).data('categories').split(",");
      if (targets.indexOf(category) > -1) {
        $(el).show();
      } else {
        $(el).hide();
      }
    });
  }

  function updateMenuSelection(category) {
    $(".nav-link").removeClass('selected');
    $(".nav-link[data-category=" + category + "]").addClass('selected');
  }
</script>