You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@singa.apache.org by zh...@apache.org on 2021/11/29 13:52:52 UTC
[singa-doc] branch master updated: 21-11-29 add features for apache singa website
This is an automated email from the ASF dual-hosted git repository.
zhaojing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/singa-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 74666e0 21-11-29 add features for apache singa website
new 528a745 Merge pull request #52 from lzjpaul/21-11-29-pinot-style
74666e0 is described below
commit 74666e04e904bd821b327707896fedb84c509ab0
Author: zhaojing <zh...@comp.nus.edu.sg>
AuthorDate: Mon Nov 29 21:44:34 2021 +0800
21-11-29 add features for apache singa website
---
docs-site/package.json | 3 +
docs-site/website/pages/en/index.js | 284 ++++++++++++++++++++++++++------
docs-site/website/pages/en/versions.js | 49 +++---
docs-site/website/siteConfig.js | 30 ++--
docs-site/website/static/css/custom.css | 138 +++++++++++++++-
docs-site/yarn.lock | 5 +
6 files changed, 413 insertions(+), 96 deletions(-)
diff --git a/docs-site/package.json b/docs-site/package.json
index a700e00..ccc593e 100644
--- a/docs-site/package.json
+++ b/docs-site/package.json
@@ -75,5 +75,8 @@
"hooks": {
"pre-commit": "lint-staged"
}
+ },
+ "dependencies": {
+ "react-icons": "^4.3.1"
}
}
diff --git a/docs-site/website/pages/en/index.js b/docs-site/website/pages/en/index.js
index 7aad38e..a48006d 100644
--- a/docs-site/website/pages/en/index.js
+++ b/docs-site/website/pages/en/index.js
@@ -28,11 +28,15 @@ const React = require("react")
const CompLibrary = require("../../core/CompLibrary.js")
const Container = CompLibrary.Container
-const GridBlock = CompLibrary.GridBlock
+const MarkdownBlock = CompLibrary.MarkdownBlock
const Showcase = require(`${process.cwd()}/core/Showcase.js`)
// TODO: add <translate> tags
// const translate = require('../../server/translate.js').translate;
+//
+const iconRi = require("react-icons/ri")
+const iconBs = require("react-icons/bs")
+
const siteConfig = require(`${process.cwd()}/siteConfig.js`)
function docUrl(doc, language) {
@@ -104,65 +108,239 @@ class Index extends React.Component {
learning models
</div>
</div>
- <div className="mainContainer">
- <Container padding={["bottom", "top"]} className="mainPageContainer">
- <GridBlock
- contents={[
- {
- content: `SINGA [parallelizes the training and optimizes the communication cost](./docs/dist-train) to improve training scalability.`,
- imageAlign: "left",
- image: `${siteConfig.baseUrl}img/benchmark.png`,
- imageAlt: "Scalbility",
- title: "Scalablility",
- },
- ]}
- layout="twoColumn"
- />
+
+ <div className="mainPageContainer">
+ <Container padding="top, bottom">
+ <div
+ style={{
+ fontWeight: "bold",
+ textAlign: "left",
+ fontSize: "35px",
+ paddingBottom: "10px",
+ }}
+ >
+ Features
+ </div>
+ <div className="container-2">
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Easy installation</h2>
+ <p>
+ <MarkdownBlock>
+ Easy installation using
+ [Conda](https://singa.apache.org/docs/installation/#using-conda),
+ [Pip](https://singa.apache.org/docs/installation/#using-pip),
+ [Docker](https://singa.apache.org/docs/installation/#using-docker)
+ and [from
+ Source](https://singa.apache.org/docs/installation/#using-docker)
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Various examples</h2>
+ <p>
+ <MarkdownBlock>
+ Various example deep learning tasks are provided in SINGA
+ repo on
+ [Github](https://github.com/apache/singa/tree/master/examples)
+ and on [Google Colab](https://colab.research.google.com/)
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Distributed training</h2>
+ <p>
+ <MarkdownBlock>
+ SINGA supports data parallel training across multiple GPUs
+ (on a single node or across different nodes)
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Memory optimization</h2>
+ <p>
+ <MarkdownBlock>
+ The optimization of memory are implemented in the
+ [Device](https://singa.apache.org/docs/device/) class
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Automatic gradient calculation</h2>
+ <p>
+ <MarkdownBlock>
+ SINGA records the [computation
+ graph](https://singa.apache.org/docs/graph/) and applies the
+ backward propagation automatically after forward propagation
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Various optimizers</h2>
+ <p>
+ <MarkdownBlock>
+ SINGA supports various popular optimizers including
+ stochastic gradient descent with momentum, Adam, RMSProp,
+ and AdaGrad, etc
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Interoperability</h2>
+ <p>
+ <MarkdownBlock>
+ SINGA supports loading [ONNX](https://onnx.ai/) format
+ models and saving models defined using SINGA APIs into ONNX
+ format, which enables AI developers to use models across
+ different libraries and tools
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Time profiling</h2>
+ <p>
+ <MarkdownBlock>
+ SINGA supports the time profiling of each of the operators
+ buffered in the graph
+ </MarkdownBlock>
+ </p>
+ </div>
+ <div className="container-2-box">
+ <iconRi.RiNumbersLine className="icon" />
+ <h2>Half precision</h2>
+ <p>
+ <MarkdownBlock>
+ Half precision is supported to bring benefits, e.g., less
+ GPU memory, supporting larger networks and faster training,
+ etc
+ </MarkdownBlock>
+ </p>
+ </div>
+ </div>
</Container>
- <Container
- padding={["bottom", "top"]}
- className="mainPageContainer"
- background="light"
- >
- <GridBlock
- contents={[
- {
- content: `SINGA [builds a computational graph](./docs/graph) to optimizes the training speed and memory footprint.`,
- imageAlign: "right",
- image: `${siteConfig.baseUrl}img/GraphOfMLP.png`,
- imageAlt: "Efficiency",
- title: "Efficiency",
- },
- ]}
- layout="twoColumn"
+ <Container padding="top, bottom" background="light">
+ <p
+ style={{
+ textAlign: "center",
+ fontSize: "20px",
+ fontWeight: "bold",
+ }}
+ >
+ SINGA has a simple software stack and Python interface to improve
+ usability
+ </p>
+ <img
+ style={{ width: "50%" }}
+ className="containerImg"
+ src={`${siteConfig.baseUrl}img/singav3-sw.png`}
+ alt="Usability"
/>
</Container>
- <Container padding={["bottom", "top"]} className="mainPageContainer">
- <GridBlock
- contents={[
- {
- content: `SINGA has a simple [software stack and Python interface](./docs/software-stack) to improve usability.`,
- imageAlign: "left",
- image: `${siteConfig.baseUrl}img/singav3.1-sw.png`,
- imageAlt: "Usability",
- title: "Usability",
- },
- ]}
- layout="twoColumn"
+ <Container padding="top, bottom">
+ <p
+ style={{
+ textAlign: "center",
+ fontSize: "20px",
+ fontWeight: "bold",
+ }}
+ >
+ SINGA parallelizes the training and optimizes the communication
+ cost to improve training scalability
+ </p>
+ <img
+ style={{ width: "45%" }}
+ className="containerImg"
+ src={`${siteConfig.baseUrl}img/benchmark.png`}
+ alt="Scalability"
/>
</Container>
- <div className="productShowcaseSection paddingBottom">
- <h2 style={{ color: "#904600" }}>Users of Apache SINGA</h2>
- <p>
- Apache SINGA powers the following organizations and companies...
+ <Container padding="top, bottom" background="light">
+ <p
+ style={{
+ textAlign: "center",
+ fontSize: "20px",
+ fontWeight: "bold",
+ }}
+ >
+ SINGA builds a computational graph to optimizes the training speed
+ and memory footprint
</p>
- <Showcase users={pinnedUsersToShowcase} />
- <div className="more-users">
- <a className="button" href={`${pageUrl("users", language)}`}>
- All Apache SINGA Users
- </a>
+ <img
+ style={{ width: "60%" }}
+ className="containerImg"
+ src={`${siteConfig.baseUrl}img/GraphOfMLP.png`}
+ alt="Efficiency"
+ />
+ </Container>
+
+ <Container padding={["bottom", "top"]}>
+ <div
+ style={{
+ fontWeight: "bold",
+ textAlign: "left",
+ fontSize: "30px",
+ paddingBottom: "40px",
+ }}
+ >
+ Install SINGA
</div>
- </div>
+
+ <div className="container-3">
+ <button className="container-3-button">
+ <a href="https://singa.apache.org/docs/installation/#using-conda">
+ Using Conda
+ <span style={{ float: "right" }}>
+ <iconBs.BsDownload />
+ </span>
+ </a>
+ </button>
+ <button className="container-3-button">
+ <a href="https://singa.apache.org/docs/installation/#using-pip">
+ Using Pip
+ <span style={{ float: "right" }}>
+ <iconBs.BsDownload />
+ </span>
+ </a>
+ </button>
+ <button className="container-3-button">
+ <a href="https://singa.apache.org/docs/installation/#using-docker">
+ Using Docker
+ <span style={{ float: "right" }}>
+ <iconBs.BsDownload />
+ </span>
+ </a>
+ </button>
+ <button className="container-3-button">
+ <a href="https://singa.apache.org/docs/installation/#from-source">
+ From Source
+ <span style={{ float: "right" }}>
+ <iconBs.BsDownload />
+ </span>
+ </a>
+ </button>
+ </div>
+ </Container>
+ <Container>
+ <div className="productShowcaseSection paddingBottom">
+ <h2 style={{ color: "#904600" }}>Users of Apache SINGA</h2>
+ <p>
+ Apache SINGA powers the following organizations and companies...
+ </p>
+ <Showcase users={pinnedUsersToShowcase} />
+ <div className="more-users">
+ <a className="button" href={`${pageUrl("users", language)}`}>
+ All Apache SINGA Users
+ </a>
+ </div>
+ </div>
+ </Container>
</div>
</div>
)
diff --git a/docs-site/website/pages/en/versions.js b/docs-site/website/pages/en/versions.js
index 27e20c0..0825ebe 100755
--- a/docs-site/website/pages/en/versions.js
+++ b/docs-site/website/pages/en/versions.js
@@ -47,25 +47,25 @@ function Versions(props) {
</header>
<h3 id="rc">Other Languages</h3>
<p>
- Here you can find the documentation of Apache SINGA in other languages
+ Here you can find the documentation of Apache SINGA in other
+ languages
</p>
<table className="versions">
<tbody>
- {versions_otherlang.map(
- version =>
- <tr key={version}>
- <th>{version}</th>
- <td>
- <a
- href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
- props.language ? props.language + "/" : ""
- }${version}/installation`}
- >
- Documentation
- </a>
- </td>
- </tr>
- )}
+ {versions_otherlang.map(version => (
+ <tr key={version}>
+ <th>{version}</th>
+ <td>
+ <a
+ href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
+ props.language ? props.language + "/" : ""
+ }${version}/installation`}
+ >
+ Documentation
+ </a>
+ </td>
+ </tr>
+ ))}
</tbody>
</table>
<h3 id="latest">Current version (Stable)</h3>
@@ -78,7 +78,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }installation`}
+ }installation`}
>
Documentation
</a>
@@ -87,7 +87,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }releases/RELEASE_NOTES_${latestVersion}.html`}
+ }releases/RELEASE_NOTES_${latestVersion}.html`}
>
Release Notes
</a>
@@ -108,7 +108,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }next/installation`}
+ }next/installation`}
>
Documentation
</a>
@@ -126,7 +126,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }download-singa#incubating-v010-8-october-2015`}
+ }download-singa#incubating-v010-8-october-2015`}
>
this page
</a>{" "}
@@ -136,14 +136,15 @@ function Versions(props) {
<tbody>
{versions.map(
version =>
- version !== latestVersion && !versions_otherlang.includes(version) && (
+ version !== latestVersion &&
+ !versions_otherlang.includes(version) && (
<tr key={version}>
<th>{version}</th>
<td>
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }${version}/installation`}
+ }${version}/installation`}
>
Documentation
</a>
@@ -152,7 +153,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }releases/RELEASE_NOTES_${version}.html`}
+ }releases/RELEASE_NOTES_${version}.html`}
>
Release Notes
</a>
@@ -175,7 +176,7 @@ function Versions(props) {
<a
href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
props.language ? props.language + "/" : ""
- }releases/RELEASE_NOTES_${version}.html`}
+ }releases/RELEASE_NOTES_${version}.html`}
>
Release Notes
</a>
diff --git a/docs-site/website/siteConfig.js b/docs-site/website/siteConfig.js
index ca717c5..831f07f 100644
--- a/docs-site/website/siteConfig.js
+++ b/docs-site/website/siteConfig.js
@@ -100,6 +100,7 @@ const siteConfig = {
// many of the colors are over-written in custom.css
primaryColor: "#d27400",
secondaryColor: "#808080", // 2nd layer of toolbar in smaller screen
+ $myColor: "#2f3f4d",
},
/* Blog setting */
@@ -110,18 +111,17 @@ const siteConfig = {
twitter: true,
/* Custom fonts for website */
- /*
- fonts: {
- myFont: [
- "Times New Roman",
- "Serif"
- ],
- myOtherFont: [
- "-apple-system",
- "system-ui"
- ]
- },
- */
+
+ // fonts: {
+ // myFont: [
+ // "Serif",
+ // "Times New Roman",
+ // ],
+ // myOtherFont: [
+ // "-apple-system",
+ // "system-ui"
+ // ]
+ // },
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
copyright: `Copyright © ${new Date().getFullYear()}
@@ -140,6 +140,12 @@ const siteConfig = {
// Add custom scripts here that would be placed in <script> tags.
scripts: ["https://buttons.github.io/buttons.js"],
+ // Adding Google fonts:
+ stylesheets: [
+ "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700",
+ "https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&family=Source+Sans+Pro:wght@200;300&display=swap",
+ ],
+
// On page navigation for the current documentation page.
onPageNav: "separate",
// No .html extensions for paths.
diff --git a/docs-site/website/static/css/custom.css b/docs-site/website/static/css/custom.css
index a0b2ca2..d074a9e 100644
--- a/docs-site/website/static/css/custom.css
+++ b/docs-site/website/static/css/custom.css
@@ -16,15 +16,29 @@
specific language governing permissions and limitations
under the License
*/
+/* body * {
+ font-family: 'Baloo Paaji 2', cursive;
+/* font-family: 'Source Sans Pro', sans-serif; */
+ /* color: #2f3f4d; */
+
+
/* mainContainer landing page */
-.mainContainer .container .wrapper {
- /* border: 2px purple solid; */
+
+/* .mainContainer .wrapper {
+ border: 2px purple solid;
max-width: 1100px !important;
-}
+} */
+
+/* .container {
+ padding-top: 40px;
+ padding-bottom: 40px;
+} */
.mainPageContainer {
- padding: 55px 0 !important;
+ padding: 40px 10px !important;
+ margin: 0 auto;
+
}
/* Apache Footer */
@@ -132,7 +146,7 @@ table td:first-child > code {
width: auto;
height: 52px;
max-height: 100%;
- max-width: 80%;
+ max-width: 100%;
padding: 20px;
align-self: center;
/* border: 1px green solid; */
@@ -153,7 +167,7 @@ table td:first-child > code {
.announcement {
background-color: #f7f7f7;
- color: #20232a;
+ color: #2f3f4d;
font-weight: 500;
font-size: 18px;
padding: 36px;
@@ -314,7 +328,7 @@ table td:first-child > code {
}
@media only screen and (max-width: 768px) {
- .gridBlock .blockElement.imageAlignTop {
+ .gridBlock .blockElement.imageAlignTop .icon {
margin-bottom: 80px;
}
}
@@ -324,6 +338,16 @@ table td:first-child > code {
max-width: 400px;
}
+.containerImg {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 50px;
+ margin-top: 50px;
+ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+}
+
/* custom 404 page */
.error-page .error-message-container {
margin-left: auto;
@@ -345,6 +369,7 @@ table td:first-child > code {
text-align: center;
display: block;
}
+
.error-page .error-message p {
color: black;
margin-top: 50px;
@@ -359,3 +384,102 @@ table td:first-child > code {
display: block;
text-decoration: underline;
}
+
+.icon {
+ font-size: 25px;
+ text-align:center;
+}
+
+@media (min-width: 735px) {
+ .container-2 {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content:space-between;
+ text-align:center;
+ }
+}
+
+@media only screen and (max-width: 735px) {
+ .container-2 {
+ text-align:center;
+ }
+}
+.container-2-box {
+ flex: 1 0 33%;
+ padding: 25px 20px;
+}
+.container-2 p {
+ text-align: justify;
+}
+
+@media (min-width: 935px) {
+ .container-3 {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ max-width: 100%;
+ position: relative;
+ }
+ .container-3-button {
+ background: #f0f0f0;
+ padding: 20px;
+ flex:1 0 100px;
+ margin-right: 15px;
+ border:0;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ text-align: center;
+ justify-content: center;
+ transition-duration: 0.4s;
+ /* cursor: pointer; */
+ }
+ .container-3-button a {
+ color: #2f3f4d;
+ font-size: 18px;
+ }
+ .container-3-button:hover {
+ background-color: #FFF;
+ border: 0.6px solid rgb(67, 159, 195);
+ }
+}
+
+@media only screen and (max-width:935px) {
+ .container-3 {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ max-width: 100%;
+ align-items: center;
+
+ }
+ .container-3-button {
+ width: 60%;
+ float: none;
+ border-radius: 8px;
+ text-align: center;
+ justify-content: center;
+ flex:0;
+ margin: 5px;
+ padding:15px;
+ border: 0;
+ transition-duration: 0.4s;
+ /* cursor: pointer; */
+ }
+ .container-3-button:hover {
+ background-color: #FFF;
+ border: 0.6px solid rgb(33, 170, 204);
+ }
+ .container-3-button a {
+ flex-wrap: wrap;
+ font-size: 18px;
+ flex:0;
+ margin: 5px;
+ border: 0;
+ color:#24292e;
+ }
+ span {
+ margin-right: 25px;
+ }
+}
\ No newline at end of file
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index 30745ec..89624e9 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -6417,6 +6417,11 @@ react-error-overlay@^6.0.3:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
+react-icons@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+ integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
react-is@^16.8.1:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"