ecosystem.html

---
layout: default
title: Ecosystem
permalink: ecosystem/
background-class: ecosystem-background
body-class: ecosystem
---

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>
      <span id="ecosystem-header">Ecosystem</span> <br>
      <span id="ecosystem-header-tools">Tools</span>
    </h1>

    <p class="lead">Tap into a rich ecosystem of tools, libraries, and more to support, accelerate, and explore AI development.</p>
    <p class="ecosystem-join"><a href="{{ site.baseurl }}/ecosystem/join">Join the Ecosystem</a></p>

  </div>
</div>

<div id="pagination-scroll" class="main-content-wrapper">
  <div class="main-content">
    <div class="container">

      <!-- START CONTENT -->

      {% include ecosystem_sort.html %}

      <hr class="ecosystem-divider">

      <div id="ecosystem-index-cards">
        <div class="list row ecosystem-cards-wrapper cards-right">
          {% assign ecosystem = site.ecosystem  | sort_natural: "title" %}

          {% for item in ecosystem %}
            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}" data-date-added="{{ item.date-added }}" data-id="{{ item.github-id }}" data-title="{{ item.title }}">
              <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">
                      <ul class="star-list">
                        <li class="card-title">{{ item.title }}</li>
                          <div class="icon-count-container">
                            <li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
                            <li class="github-stars-count"></li>
                            <li class="github-stars-count-whole-number"></li>
                          </div>
                      </ul>
                        {% 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="pagination d-flex justify-content-center"></div>
      </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>

<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');
  }

  $(".ecosystem-card-wrapper").each(function() {
    var date = new Date($(this).attr("data-date-added")) / 1000;
    $(this).attr("data-date-added", date);
  });
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<div id="filter-script" data-list-id="ecosystem-index-cards" data-display-count="12" data-pagination="true"></div>
<script ecosystem="true" star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>