Connect with us

FACEBOOK

PyTorch Tutorials Refresh – Behind the Scenes

Published

on

Hi, I’m Jessica, a Developer Advocate on the Facebook Open Source team. In this blog, I’ll take you behind the scenes to show you how Facebook supports and sustains our open source products – specifically PyTorch, an open source deep learning library. With every new release version, PyTorch pushes out new features, updates existing ones, and adds documentation and tutorials that cover how to implement these new changes.

On May 5, 2020, PyTorch released improvements to Tutorials homepage with new content and a fresh usability experience out into the world (see the Twitter thread) for the community. We introduced keyword based search tags and a new recipes format (bite-sized, ready-to-deploy examples) and more clearly highlighted helpful resources, which resulted in the fresh homepage style you see today.

Something Went Wrong

We’re having trouble playing this video.

As the framework grows with each release, we’re continuously collaborating with our community to not only create more learning content, but also make learning the content easier.

What Changed

The tutorials refresh project focused on re-envisioning the learning experience by updating the UX and updating the learning content itself.

Our 3 major goals for the refresh were:

  • Reduce blocks of text and make it easy for users to find important resources (e.g. PyTorch Cheat Sheet, New to PyTorch tutorials)
  • Improve discoverability of relevant tutorials and surface more information for users to know about the available tutorial content
  • Create content that allows users to quickly learn and deploy commonly used code snippets

And we addressed these goals by:

  • Adding callout blocks with direct links to highlight important resource such as the beginner tutorial, the PyTorch Cheat Sheet and new recipes
  • Adding filterable tags to help users easily find relevant tutorials; and formatting the tutorials cards with summaries so users know what to expect without having to click in
  • Creating a new learning format, Recipes, and 15 brand new recipes covering some of the most popular PyTorch topics such as interpretability and quantization as well as basics such as how to load data in PyTorch
  • In summary:

Goals

Implementation

Reduce blocks of text and make it easy for users to find important resources (e.g. PyTorch Cheat Sheet, New to PyTorch tutorials)

Add callouts with direct links to highlight important resources

Improve discoverability of relevant tutorials and surface more information for users to know about the available tutorial content

Add filterable tags to help users easily find relevant tutorials. Reformat tutorial cards with summaries so users know what to expect

Create content that allow users to quickly learn and deploy commonly used code snippets

Create a new learning format – Recipes. These are bite-sized, actionable examples of how to use specific Pytorch features, different from our previous full-length tutorials

Why We Made These Changes

Now, what drove these changes? These efforts were driven by feedback from the community; two sources of feedback were the UX research study and direct community interactions:

  • UX Research study – Earlier in 2020, we conducted a UX research study of our website in collaboration with the Facebook UX Research team to understand how our developer community is using the website and evaluate ways we can improve it to better meet their needs
  • In-person events and online feedback – The team gathered community feedback about existing tutorials to help identify learning gaps.

We used these channels of input to fuel revisioning our learning experience.

Rethinking the Learning Experience

Given the feedback from the UX Research study and the in-person workshop, we went back and rethought the current learning experience.

  • 3 levels
    PyTorch Tutorials Refresh - Behind the Scenes
    • Level 1: API docs. Currently these exist and they contain code snippets that provide an easily understandable (and reproducible) example that allows a user to implement that particular API
    • Level 2: The missing puzzle piece
    • Level 3: Tutorials ideally provide an end-to-end experience that provides users an understanding of how to take data, train a model and deploy it into a production setting using PyTorch. These exist, but needed to be pruned of outdated content and cleaned up to better fit this model
    • Realized we were missing something in between, content that was short, informative, and actionable. That’s how recipes were born. Level 2: Recipes are bite-sized, actionable examples of how to use specific PyTorch features, different from our tutorials

What Was the Process

Just as it took a large team effort, this was more of a marathon as opposed to a sprint. Let’s look at the process:

Timeline of the process:

PyTorch Tutorials Refresh - Behind the Scenes

Overall, the project took about 6 months, not including the UX research and prior feedback collection time. It started off with the kickoff discussion to align on the changes. We assessed the existing tutorials, pruned outdated content and decided on new recipe topics and assigned authors. In the meantime, marketing and documentation engineers collaborated with our web design team on the upcoming UI needs, created mocks to preview with the rest of the team and built out the infrastructure.

For logistics, we created a roadmap and set milestones for the team of authors. We held weekly standup meetings, and the team bounced ideas in chat. The changes were all made in a staging branch in GitHub, which allowed us to create previews of the final build. Next, the build process. Many of the recipe authors were first time content creators, so we held a live onboarding session where we discussed teaching mindset, writing with an active voice, outlining, code standards and requirements; and this was all captured in a new set of content creation documentation.

The bulk of the process was spent in building out the content, copy editing and implementing the UI experience.

With the product out the door, we took some time to perform a team retrospective – asking what went well? What went poorly? What can we do better next time? In addition, we continue to gather ongoing feedback from the community through GitHub issues.

Moving forward, we are brainstorming and forming a longer-term plan for the PyTorch learning experience as it relates to docs and tutorials.

Ways to Improve

Looking back on ways we could have improved:

  • Timeline – Our timeline ended up taking longer than anticipated because it had been coupled with a previous version release and team members were serving double-duty working on release content, as well as tutorials refresh content. As version release approached, we took a step back and realized we needed more time to put out a more polished product.
  • Testing – In software development, if there is an impending deadline, typically testing is the first thing to get squished; however, more focused testing will always save time in the bigger picture. For us, we would always welcome more time for more CI tests of the tutorial build, as well as beta tests of the user experience. Both of these are ongoing works in progress, as we continue to improve the tutorials experience overall.

What’s Next

So what’s next? We understand that this was just one change in a larger landscape of the overall PyTorch learning experience, but we are excited to keep improving this experience for you, our dedicated PyTorch user.

We would like to hear from you about your experience in the new tutorials. Found a tutorial you loved? Tweet about it and tag us (@PyTorch). Ran into an issue you can help fix? File an issue in https://github.com/pytorch/tutorials. We are excited to continue building the future of machine learning with you!

To learn more about Facebook Open Source, subscribe on YouTube, or follow us on Twitter and Facebook.

Facebook Developers

Continue Reading

FACEBOOK

ELI5: Docusaurus – Making Documentation Easy

Published

on

In this post, we will briefly talk about Docusaurus, a website building tool that makes it easy to develop, maintain and deploy a documentation site. If you prefer to learn about Docusaurus in a short video rather than a blog post, go to the Facebook Open Source YouTube channel to watch another episode of ELI5.

Why Docusaurus?

The top open source projects on GitHub have their own documentation sites that contain an overview of the project, short getting started guides, in-depth tutorials and project blogs. These resources are key to the success of any open source project, but building, managing and deploying them can be a lot of work. Unless you’re using Docusaurus.

Docusaurus is an open source project for building, deploying and maintaining websites. This project’s main goal is to get you started with your website in a matter of seconds. Beyond creating the site, Docusaurus emphasizes speed of both developer and end users by following the PRPL pattern and by relying on an incremental build for content changes.

Docusaurus allows developers to use tools they already know like Markdown or MDX to write documentation or blogs. With React as the backbone of Docusaurus, developers can customize their website to fit their use case.

This website building tool also comes with search and localization features. Projects built with Docusaurus leverage Algolia for a built in search engine and Crowdin for language support.

The cherry on top is that you don’t have to manually update your documentation every time you update your code. Docusaurus automatically syncs docs to project releases so that you can spend more of your time working on the things you care about.

Where is it used?

Docusaurus was first released to the public by the Facebook Open Source team in 2017. Since then, this project has been used by a large number of the Facebook open source projects and by over 100 external projects.

Where can I learn more?

Want to learn more about Docusaurus? You can find extensive documentation and tutorials covering a wide range of topics on building and customizing your site. If you want to engage with the community, feel free to join the Discord channel or talk to the team on Twitter.

If you want to see more content about Docusaurus, let us know on our YouTube channel, or by tweeting at us.

About the ELI5 series

In a series of short videos (~1 min in length), one of our Developer Advocates on the Facebook Open Source team explains a Facebook open source project in a way that is easy to understand and use.

We will write an accompanying blog post (like the one you’re reading right now) for each of these videos, which you can find on our YouTube channel.

To learn more about Facebook Open Source, visit our open source site, subscribe to our YouTube channel, or follow us on Twitter and Facebook.

Facebook Developers

Continue Reading

FACEBOOK

2020 Developer Circles Community Challenge regional winners announced

Published

on

It’s often said that one of the best ways to learn is to become the teacher. That’s why, for this year’s Developer Circles Community Challenge, we invited developers and creators to put an innovative spin on technical education by creating tutorials that showcase the capabilities of Facebook technologies.

Participants created step-by-step written tutorials that demonstrated one or more features of open source tools including Hack, React, React Native, PyTorch and Docusaurus; as well as products including Messenger, Spark AR and Wit.ai.

For their efforts, we offered cash prizes, as well as the opportunity to have their tutorials credited and shared with fellow innovators across the Facebook ecosystem.

Our regional winners

As our first step in deciding the overall winners, we’re very excited to announce our regional winners today.

The teams behind the below inspiring tutorials have each won a US$2,000 cash prize, and will also be invited to make further enhancements to their projects by Monday November 30, in order to have a chance at the global prizes announced in mid-December.

Asia Pacific

Intermediate/ Advanced

Create Smarter Messenger Experiences on Facebook with Bright
Messenger, Wit.AI

Covid Center Bot (Intermediate)
Messenger, Wit.AI

It’s Now Winter — AR Pop-up Card Tutorial Series
Spark AR

Beginner

HayWord | Case Study for Making Real Word Chatbot Messenger
React, Messenger, Wit.AI

Spark AR Promo Card Filter Tutorial
Spark AR

IndoNLU: Finetuning Tutorial IndoBERT using PyTorch
PyTorch, Docusaurus

Europe

Intermediate/Advanced

How to make Smoke in Spark AR
Spark AR

Creating colliders with Scripting – Spark AR
Spark AR

DIY Alexa With the ESP32 and Wit.ai
Wit.AI

Beginner

Calendar buddy
React, Wit.AI

Spark AR – Audio Visualizer Tutorial
Spark AR

React Custom Animation Hooks Tutorial
React

India

Intermediate/ Advanced

Shockwave
Spark AR

Reactode
React

Transfer Learning Model hosted on Heroku using React & Flask
React, PyTorch

Beginner

ReactNative Tutor ( Learn React Native On the Go )
React Native

Making Conversational Android Apps with Wit.ai
Wit.AI

DevCoder
Wit.AI

Latin America

Intermediate/ Advanced

Updating the Authorization header with Observables
React

Use data from Facebook API in Messenger Bots
Messenger

Manipulating Multiple Scene Objects with Scripts in Spark AR
Spark AR

Beginner

Create a serverless Messenger bot with Wit.ai
Messenger, Wit.AI

Documenting with Docusaurus Version 2 for beginners
Docusaurus

Spark AR – Art Series
Spark AR

Middle East and North Africa

Intermediate/ Advanced

violence Detection in videos using CNN + LSTM
PyTorch

360 Tours
React

Beginner

Messenger Platform Tutorial (TDD Approach)
Messenger

Customer Service Messenger Bot
Messenger, Wit.ai

Build an Encryptor/Decryptor Chatbot on Messenger using Wit
Messenger, Wit.ai

North America

Intermediate/ Advanced

Your Claw Machine
Spark AR

Wit.ai CI and CLI
Wit.ai

Job Finder Bot tutorial
PyTorch

Beginner

Pneumonet-Building an AI COVID-19 Product with Pytorch
Messenger, Wit.ai

Chatbot for Class
React, Docusaurus

Getting Started with React Hooks: useState and useEffect
React

Sub-Saharan Africa

Intermediate/ Advanced

Rabbit Coder (Spark AR Tutorial)
Spark AR

Pytorch For Information Extraction
PyTorch

Architecting and Designing a React Native Application
React Native

Beginner

Wiki Education
Messenger, Wit.ai

Live Chess
React, Docusaurus

Fruit Classifier
PyTorch, Messenger

Our local language winners

In acknowledgment of our diverse, global community, we’re also pleased to offer a set of special local language prizes for the first time. The below winning tutorials have each won a US$1,500 prize.

Arabic

Intermediate/ Advanced

Violence Detection in videos
PyTorch

Beginner

Adding Drag & Drop to React components
React, Docusaurus

French

Intermediate/ Advanced

Systeme De Reconnaissance Du Cache Nez
PyTorch

Beginner

Learn the basics of Spark AR by creating your FanMask filter
Spark AR

Indonesian

Intermediate/ Advanced

Gameo
React, PyTorch, Docusaurus

Beginner

HayWord | Case Study for Making Real Word Messenger Apps
React, Messenger, Wit.ai

Spanish

Intermediate/ Advanced

Chatbots As A Service con Messenger Platform
Messenger

Beginner

Tutorial web voice control using Wit.ai
Wit.ai

New building opportunities coming soon

Congratulations to all of these trail-blazing winners, and to everyone who took part in the Challenge. Stay tuned to our Facebook Developer Circles page for more information on our global winners announcement in December!

We’ll also be hosting a range of challenges including hackathons, as well as product immersion opportunities, for developers and creators in 2021. Don’t forget to sign up for our email newsletter to be among the first to know about these initiatives.

Stay safe and we can’t wait to continue supporting you as you #BuildwithFacebook.

Facebook Developers

Continue Reading

FACEBOOK

ELI5: Fresco – Image Management Library for Android

Published

on

In this post, we explain Fresco, a powerful system for displaying images in Android applications, in a way that is super simple to understand (or as it’s commonly known online, ELI5). If you’re interested in learning by watching or listening, check out a video about this open source project on our Facebook Open Source Youtube channel.

Why Fresco?

Many of us are accustomed to browsing the Internet using reliable in-home wireless or a high-speed LTE connection on our mobile device. However, many users all over the world don’t have access to reliable internet access or the newest phone. With these limitations, users are unable to effectively use photos, gifs, and other forms of media. These non-text based communication devices help people to come across more genuine, and, without them, people’s conversations stay more formal and often lack genuine personality.

Fortunately, we get to help these people with projects like Fresco. This resources management library ensures that images, animations, and other visual assets can be used on a wide range of devices, even with an unreliable Internet connection. Fresco makes this happen by keeping resources’ memory footprint as small as possible. This functionality lets people use visuals while adjusting the image quality to what the device and the network can handle.

Here’s how it works. Fresco introduces progressive image loading where a low-resolution scan of the image is shown first, and then the quality is gradually improved as more of the image gets downloaded. This functionality is especially useful for devices relying on slow networks.

One use case to consider is how we use Fresco at Facebook. As a company, we aim to make online communication more personal. For this purpose, the Facebook app has animated stickers and gifs where people can authentically express themselves. However, from a technical point of view, these animated stickers and gifs are difficult to support as they need to be decoded, stored and displayed. But with Fresco, these challenges are handled for you, so animation becomes what it should be – a lot of fun!

Where is it used?

Fresco was first open sourced in early 2015. Apart from Facebook, companies like Wikipedia, Twitter and Redfin use this library for their Android apps.

Where can I learn more?

To learn more about Fresco, visit their website. It has great documentation for those who are just starting or want to use more advanced features. In case you would like to see Fresco in action, the project’s site has multiple sample apps for you to try. If you have any questions, you can go to Fresco’s GitHub page or StackOverflow.

If you have any further questions about Fresco, let us know on our Youtube channel, or by tweeting at us. We always want to hear from you and hope you will find this open source project and the new ELI5 series useful.

About the ELI5 series

In a series of short videos (~1 min in length), one of our Developer Advocates on the Facebook Open Source team explains a Facebook open source project in a way that is easy to understand and use.

We will write an accompanying blog post (like the one you’re reading right now) for each of these videos, which you can find on our Youtube channel.

To learn more about Facebook Open Source, visit our open source site, subscribe to our Youtube channel, or follow us on Twitter and Facebook.

Interested in working with open source at Facebook? Check out our open source-related job postings on our career page by taking this quick survey.

Facebook Developers

Continue Reading

Trending