From b2feb56b22e52de6171bfdbd5899db5c74de28f7 Mon Sep 17 00:00:00 2001 From: Sebastian Golebiewski Date: Fri, 16 Dec 2022 19:49:32 +0100 Subject: [PATCH] DOCS: Homepage - openvino workflow section update - for 22.3 (#14654) Removing raw html directive Updating/improving css adding new diagram updating css --- docs/_static/css/homepage_style.css | 166 ++----- docs/_static/images/openvino_diagram.svg | 443 ++++-------------- docs/_static/images/supported_devices.png | 3 + docs/home.rst | 78 +-- .../templates/layout.html | 1 + 5 files changed, 157 insertions(+), 534 deletions(-) create mode 100644 docs/_static/images/supported_devices.png diff --git a/docs/_static/css/homepage_style.css b/docs/_static/css/homepage_style.css index d5679ad841868b..a7296a5d7d88cc 100644 --- a/docs/_static/css/homepage_style.css +++ b/docs/_static/css/homepage_style.css @@ -14,12 +14,21 @@ img { font-size: 1.3em; } -/* === OPENVINO CHART ================================================= */ +/* === OPENVINO DIAGRAM ================================================= */ + +@media only screen and (min-width: 1100px) { + .openvino-diagram { + width: 70%; + } + } + +@media only screen and (max-width: 1099px) { + .openvino-diagram { + width: 100%; + } + } + -.openvino-chart { - width: 100%; - margin: 0px auto; -} /* === PANELS ================================================= */ @@ -35,179 +44,58 @@ img { border-bottom: 1px solid white; } -/* === SEPARATOR HEADERS ================================================= */ -.HP_separator-header { - font-weight: bold; - text-align: center; - width: 100%; - height: 2em; - line-height: 2em; - margin: 40px auto; -} - -.HP_separator-header p { - display: inline-block; - line-height: 1em; +/* === OV workflow chart ===================================================== */ +#hp-flow-container { margin: 0 auto; - color: #0068B5; - background-color: #fff; - padding: 0 15px; -} - -.HP_separator-header::before { - display: block; - content: ""; - position: relative; - top: 1em; - margin: 0; - border-top: 1px solid #0068B5; - width: 100%; - z-index: -1; -} - -img.HP_img_chart { width: 90%; - display: block; - margin: 0 auto; } -/* === OV workflow chart ===================================================== */ -#HP_flow-container { - margin: 0 auto; - width: 90%; -} - -#HP_flow-container div { +#hp-flow-container div { margin: 0; float: left; } -div.HP_flow-arrow { +div.hp-flow-arrow { width: 5%; padding: 40px 5px; } -div.HP_flow-btn { +div.hp-flow-btn { width: 30%; background-repeat: no-repeat; } -#HP_flow-container div.HP_flow-btn:nth-of-type(1) { +#hp-flow-container div.hp-flow-btn:nth-of-type(1) { background-image: url("../images/OV_flow_model.svg"); } -#HP_flow-container div.HP_flow-btn:nth-of-type(3) { +#hp-flow-container div.hp-flow-btn:nth-of-type(3) { background-image: url("../images/OV_flow_optimization.svg"); } -#HP_flow-container div.HP_flow-btn:nth-of-type(5) { +#hp-flow-container div.hp-flow-btn:nth-of-type(5) { background-image: url("../images/OV_flow_deployment.svg"); } -div.HP_flow-btn a img { +div.hp-flow-btn a img { width: 100%; visibility: hidden; } -div.HP_flow-btn:hover a img { +div.hp-flow-btn:hover a img { visibility: visible; } - -/* === INFORMATION BOXES ================================================= */ -.HP_infoboxes { - width: 100%; - height: auto; - margin: 0; - margin-bottom: 10px; -} -.HP_infoboxes a { - background-color: #0068B5; - height: 150px; - padding: 5px 2%; - float: left; - margin: 0 1% 10px 1%; - width: 32%; -} - -.HP_infoboxes a p, -.HP_infoboxes a h3 { - color: #fff; - margin: 0; - text-align: left; - - transition: all 0.5s; - -webkit-transition: all 0.5s; - -moz-transition: all 0.5s; - -o-transition: all 0.5s; - -ms-transition: all 0.5s; -} -.HP_infoboxes a h3 { - display: table-cell; - width: 300px; - vertical-align: middle; - height: 35px; - border-bottom: solid 1px #fff; - font-weight: bold; - font-size: 1em; - margin-bottom: 5px; -} -.HP_infoboxes a p { - font-size: 0.9em; - line-height: 1.5em; - margin-top: 5px; -} - -.HP_infoboxes a:hover h3 { - font-size: 1.1em; - text-decoration:none !important; -} -/*.HP_infoboxes a:hover p { - margin-top: 10px; - text-decoration:none !important; -}*/ - -/* === screen wide =================================================== */ -/* =================================================================== */ -@media only screen and (min-width: 901px) { - .HP_infoboxes a { - width: 32%; - } - .HP_infoboxes a:nth-of-type(1), - .HP_infoboxes a:nth-of-type(4), - .HP_infoboxes a:nth-of-type(7) { - margin-left: 0; - } - .HP_infoboxes a:nth-of-type(3), - .HP_infoboxes a:nth-of-type(6), - .HP_infoboxes a:nth-of-type(9) { - margin-right: 0; - } -} -/* === screen narrow ================================================== */ -/* =================================================================== */ -@media only screen and (max-width: 900px) { - .HP_infoboxes a { - width: 48%; - margin-left: 0; - margin-right: 2%; - } - .HP_infoboxes a:nth-of-type(2n) { - margin-left: 2%; - margin-right: 0; - } -} /* =================================================================== */ @media only screen and (max-width: 500px) { - #HP_flow-container div { + #hp-flow-container div { float: none; margin: 0 auto; } - div.HP_flow-arrow { + div.hp-flow-arrow { display: none; } - div.HP_flow-btn { + div.hp-flow-btn { width: 50%; } } - diff --git a/docs/_static/images/openvino_diagram.svg b/docs/_static/images/openvino_diagram.svg index ca2014f6a7d0a4..d1d0a33ac43eb2 100644 --- a/docs/_static/images/openvino_diagram.svg +++ b/docs/_static/images/openvino_diagram.svg @@ -1,365 +1,96 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + diff --git a/docs/_static/images/supported_devices.png b/docs/_static/images/supported_devices.png new file mode 100644 index 00000000000000..ff117bd8d61f34 --- /dev/null +++ b/docs/_static/images/supported_devices.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:566aab6ef86a50dad4fba5483a9b0abffc85778dccee7a0c7e98d4b09447f9b1 +size 130586 diff --git a/docs/home.rst b/docs/home.rst index b3709fe668a8c0..939b2fc7e36a8f 100644 --- a/docs/home.rst +++ b/docs/home.rst @@ -10,9 +10,10 @@ OpenVINO is an open-source toolkit for optimizing and deploying deep learning models. It provides boosted deep learning performance for vision, audio, and language models from popular frameworks like TensorFlow, PyTorch, and more. `Get started with OpenVINO. `__ -.. rst-class:: openvino-chart +.. rst-class:: openvino-diagram .. image:: _static/images/openvino_diagram.svg + :align: center Overview @@ -22,38 +23,42 @@ OpenVINO enables you to optimize a deep learning model from almost any framework A typical workflow with OpenVINO is shown below. -.. raw:: html +.. container:: section + :name: welcome-to-openvino-toolkit-s-documentation -
+ .. container:: + :name: hp-flow-container - + .. container:: hp-flow-btn + + .. image:: _static/images/OV_flow_model_hvr.svg + :alt: link to model processing introduction + :target: openvino_docs_model_processing_introduction.html + + .. container:: hp-flow-arrow + + .. image:: _static/images/OV_flow_arrow.svg + + .. container:: hp-flow-btn + + .. image:: _static/images/OV_flow_optimization_hvr.svg + :alt: link to an optimization guide + :target: openvino_docs_optimization_guide_dldt_optimization_guide.html + + .. container:: hp-flow-arrow -
- -
-
- - link to model processing introduction - -
-
- -
-
- - link to an optimization guide - -
-
- -
-
- - link to deployment introduction - -
-
+ .. image:: _static/images/OV_flow_arrow.svg + .. container:: hp-flow-btn + + .. image:: _static/images/OV_flow_deployment_hvr.svg + :alt: link to deployment introduction + :target: openvino_docs_deployment_guide_introduction.html + + +.. raw:: html + + High-Performance Deep Learning ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -95,20 +100,16 @@ Boost your model’s speed even further with quantization and other state-of-the Supported Devices ~~~~~~~~~~~~~~~~~ -OpenVINO is supported on a wide range of hardware platforms. Visit the `Supported Devices `__ page for a full list of OpenVINO-compatible platforms. +OpenVINO is supported on a wide range of hardware platforms. -* All Intel Xeon, Core, and Atom CPUs, with boosted performance on 11th generation Core CPUs and 3rd generation Xeon CPUs or newer -* Intel integrated GPUs including Intel UHD Graphics and Intel Iris Xe -* Intel discrete GPUs including Iris Xe MAX and Arc -* Intel accelerators such as VPUs and GNAs -* Arm CPU, including Apple ARM based SoCs +`Visit the Supported Devices page for a full list of OpenVINO-compatible platforms. `__ Check the `Performance Benchmarks `__ page to see how fast OpenVINO runs popular models on a variety of processors. OpenVINO supports deployment on Windows, Linux, and macOS. -Install OpenVINO -~~~~~~~~~~~~~~~~ +.. image:: _static/images/supported_devices.png + :width: 70% + :align: center -`Go to installation to set up OpenVINO on your device. `__ Get Started ~~~~~~~~~~~ @@ -127,4 +128,3 @@ Get Started MODEL ZOO RESOURCES RELEASE NOTES - diff --git a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/layout.html b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/layout.html index e9aaf14092dd2b..5a0155f3f8de5a 100644 --- a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/layout.html +++ b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/layout.html @@ -17,6 +17,7 @@ + {% endblock %}