mirror of
https://github.com/facebookresearch/pytorch3d.git
synced 2025-12-14 11:26:24 +08:00
Setup website with docusaurus (#11)
Summary: Set up landing page, docs page, and html versions of the ipython notebook tutorials. Pull Request resolved: https://github.com/fairinternal/pytorch3d/pull/11 Reviewed By: gkioxari Differential Revision: D19730380 Pulled By: nikhilaravi fbshipit-source-id: 5df8d3f2ac2f8dce4d51f5d14fc336508c2fd0ea
This commit is contained in:
Nikhila Ravi
committed by
Facebook Github Bot
Facebook Github Bot
parent
e290f87ca9
commit
15d3a4557e
51
website/pages/en/help.js
Normal file
51
website/pages/en/help.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
**/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
function Help(props) {
|
||||
const {config: siteConfig, language = ''} = props;
|
||||
const {baseUrl, docsUrl} = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const supportLinks = [
|
||||
{
|
||||
content: `Learn more using the [documentation on this site.](${docUrl(
|
||||
'doc1.html',
|
||||
)})`,
|
||||
title: 'Browse Docs',
|
||||
},
|
||||
{
|
||||
content: 'Ask questions about the documentation and project',
|
||||
title: 'Join the community',
|
||||
},
|
||||
{
|
||||
content: "Find out what's new with this project",
|
||||
title: 'Stay up to date',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="docMainWrapper wrapper">
|
||||
<Container className="mainContainer documentContainer postContainer">
|
||||
<div className="post">
|
||||
<header className="postHeader">
|
||||
<h1>Need help?</h1>
|
||||
</header>
|
||||
<p>This project is maintained by a dedicated group of people.</p>
|
||||
<GridBlock contents={supportLinks} layout="threeColumn" />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Help;
|
||||
223
website/pages/en/index.js
Normal file
223
website/pages/en/index.js
Normal file
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
**/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
const bash = (...args) => `~~~bash\n${String.raw(...args)}\n~~~`;
|
||||
class HomeSplash extends React.Component {
|
||||
render() {
|
||||
const {siteConfig, language = ''} = this.props;
|
||||
const {baseUrl, docsUrl} = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const SplashContainer = props => (
|
||||
<div className="homeContainer">
|
||||
<div className="homeSplashFade">
|
||||
<div className="wrapper homeWrapper">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Logo = props => (
|
||||
<div className="splashLogo">
|
||||
<img src={props.img_src} alt="Project Logo" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProjectTitle = props => (
|
||||
<h2 className="projectTitle">
|
||||
<small>{props.tagline}</small>
|
||||
</h2>
|
||||
);
|
||||
|
||||
const PromoSection = props => (
|
||||
<div className="section promoSection">
|
||||
<div className="promoRow">
|
||||
<div className="pluginRowBlock">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Button = props => (
|
||||
<div className="pluginWrapper buttonWrapper">
|
||||
<a className="button" href={props.href} target={props.target}>
|
||||
{props.children}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<SplashContainer>
|
||||
<Logo img_src={baseUrl + 'img/pytorch3dlogowhite.svg'} />
|
||||
<div className="inner">
|
||||
<ProjectTitle tagline={siteConfig.tagline} title={siteConfig.title} />
|
||||
<PromoSection>
|
||||
<Button href={docUrl('why_pytorch3d.html')}>Docs</Button>
|
||||
<Button href={`${baseUrl}tutorials/`}>Tutorials</Button>
|
||||
<Button href={'#quickstart'}>Get Started</Button>
|
||||
</PromoSection>
|
||||
</div>
|
||||
</SplashContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
const {config: siteConfig, language = ''} = this.props;
|
||||
const {baseUrl} = siteConfig;
|
||||
|
||||
const Block = props => (
|
||||
<Container
|
||||
padding={['bottom', 'top']}
|
||||
id={props.id}
|
||||
background={props.background}>
|
||||
<GridBlock
|
||||
align="center"
|
||||
contents={props.children}
|
||||
layout={props.layout}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
|
||||
const Description = () => (
|
||||
<Block background="light">
|
||||
{[
|
||||
{
|
||||
content:
|
||||
'This is another description of how this project is useful',
|
||||
image: `${baseUrl}img/docusaurus.svg`,
|
||||
imageAlign: 'right',
|
||||
title: 'Description',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
);
|
||||
|
||||
const pre = '```';
|
||||
|
||||
const codeExample = `${pre}python
|
||||
from pytorch3d.utils import ico_sphere
|
||||
from pytorch3d.io import load_obj
|
||||
from pytorch3d.structures import Meshes
|
||||
from pytorch3d.ops import sample_points_from_meshes
|
||||
from pytorch3d.loss import chamfer_distance
|
||||
|
||||
# Use an ico_sphere mesh and load a mesh from an .obj e.g. model.obj
|
||||
sphere_mesh = ico_sphere(level=3)
|
||||
verts, faces, _ = load_obj("model.obj")
|
||||
test_mesh = Meshes(verts=[verts], faces=[faces.verts_idx])
|
||||
|
||||
# Differentiably sample 5k points from the surface of each mesh and then compute the loss.
|
||||
sample_sphere = sample_points_from_meshes(sphere_mesh, 5000)
|
||||
sample_test = sample_points_from_meshes(test_mesh, 5000)
|
||||
loss_chamfer, _ = chamfer_distance(sample_sphere, sample_test)
|
||||
`;
|
||||
|
||||
const QuickStart = () => (
|
||||
<div
|
||||
className="productShowcaseSection"
|
||||
id="quickstart"
|
||||
style={{textAlign: 'center'}}>
|
||||
<h2>Get Started</h2>
|
||||
<Container>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Install PyTorch3D:</strong>
|
||||
<MarkdownBlock>{bash`conda install pytorch torchvision -c pytorch # OSX only
|
||||
conda install pytorch3d -c pytorch3d # all systems`}</MarkdownBlock>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Try a few 3D operators </strong>
|
||||
e.g. compute the chamfer loss between two meshes:
|
||||
<MarkdownBlock>{codeExample}</MarkdownBlock>
|
||||
</li>
|
||||
</ol>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Features = () => (
|
||||
<div className="productShowcaseSection" style={{textAlign: 'center'}}>
|
||||
<Block layout="fourColumn">
|
||||
{[
|
||||
{
|
||||
content:
|
||||
'Supports batching of 3D inputs of different sizes ' +
|
||||
'such as meshes' ,
|
||||
image: `${baseUrl}img/batching.svg`,
|
||||
imageAlign: 'top',
|
||||
title: 'Heterogeneous Batching',
|
||||
},
|
||||
{
|
||||
content:
|
||||
'Supports optimized implementations of ' +
|
||||
'several common functions for 3D data',
|
||||
image: `${baseUrl}img/ops.png`,
|
||||
imageAlign: 'top',
|
||||
title: 'Fast 3D Operators',
|
||||
},
|
||||
{
|
||||
content:
|
||||
'Modular differentiable rendering API ' +
|
||||
'with parallel implementations in ' +
|
||||
'PyTorch, C++ and CUDA' ,
|
||||
image: `${baseUrl}img/rendering.svg`,
|
||||
imageAlign: 'top',
|
||||
title: 'Differentiable Rendering',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Showcase = () => {
|
||||
if ((siteConfig.users || []).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const showcase = siteConfig.users
|
||||
.filter(user => user.pinned)
|
||||
.map(user => (
|
||||
<a href={user.infoLink} key={user.infoLink}>
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
));
|
||||
|
||||
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
|
||||
|
||||
return (
|
||||
<div className="productShowcaseSection paddingBottom">
|
||||
<h2>Who is Using This?</h2>
|
||||
<p>This project is used by all these people</p>
|
||||
<div className="logos">{showcase}</div>
|
||||
<div className="more-users">
|
||||
<a className="button" href={pageUrl('users.html')}>
|
||||
More {siteConfig.title} Users
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HomeSplash siteConfig={siteConfig} language={language} />
|
||||
<div className="landingPage mainContainer">
|
||||
<Features />
|
||||
<QuickStart />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Index;
|
||||
46
website/pages/en/users.js
Normal file
46
website/pages/en/users.js
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
**/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const Container = CompLibrary.Container;
|
||||
|
||||
class Users extends React.Component {
|
||||
render() {
|
||||
const {config: siteConfig} = this.props;
|
||||
if ((siteConfig.users || []).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
|
||||
const showcase = siteConfig.users.map(user => (
|
||||
<a href={user.infoLink} key={user.infoLink}>
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
<Container padding={['bottom', 'top']}>
|
||||
<div className="showcaseSection">
|
||||
<div className="prose">
|
||||
<h1>Who is Using This?</h1>
|
||||
<p>This project is used by many folks</p>
|
||||
</div>
|
||||
<div className="logos">{showcase}</div>
|
||||
<p>Are you using this project?</p>
|
||||
<a href={editUrl} className="button">
|
||||
Add your company
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Users;
|
||||
Reference in New Issue
Block a user