Feature/SK-728 | Move Studio docs to Fedn docs

docs/_static/css/elements.css

@@ -0,0 +1,60 @@
+/* inputs  */
+
+.wy-side-nav-search input[type=text] {
+    box-shadow: 0 0 6px 0px var(--scaleout-grey-6);
+    border-color: var(--scaleout-grey-6);
+}
+
+/* lists */
+
+.rst-content .section ul,
+.rst-content .toctree-wrapper ul,
+.rst-content section ul,
+.wy-plain-list-disc,
+article ul {
+    list-style: none;
+    line-height: 16px;
+    margin-bottom: 16px;
+}
+
+.rst-content .section ul li,
+.rst-content .toctree-wrapper ul li,
+.rst-content section ul li,
+.wy-plain-list-disc li,
+article ul li {
+    list-style: none;
+    margin-left: 16px;
+}
+
+
+.rst-content .section ul li li,
+.rst-content .toctree-wrapper ul li li,
+.rst-content section ul li li,
+.wy-plain-list-disc li li,
+article ul li li {
+    list-style: none;
+}
+
+/* buttons */
+
+.btn {
+    box-shadow: 0 0 6px 0px var(--scaleout-grey-6);
+    border-color: var(--scaleout-grey-6);
+    border-radius: 8px;
+}
+
+.btn-neutral {
+    background: white !important;
+}
+
+.highlight {
+    background: var(--scaleout-grey-1) !important;
+}
+
+img {
+    box-shadow: 0 0 6px 0px var(--scaleout-grey-6);
+}
+
+img.logo {
+    box-shadow: none;
+}

docs/_static/css/text.css

@@ -0,0 +1,112 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
+
+:root {
+    --scaleout-black: #191919;
+    --scaleout-black-rgb: 25, 25, 25;
+    --scaleout-red: #E0746D;
+    --scaleout-red-rgb: 224, 116, 109;
+    --scaleout-yellow: #EBD886;
+    --scaleout-yellow-rgb: 235, 216, 134;
+    --scaleout-green: #81B967;
+    --scaleout-green-rgb: 129, 185, 103;
+    --scaleout-white: #FFFFFF;
+    --scaleout-white-rgb: 255, 255, 255;
+    --scaleout-grey-1: #F8F8F8;
+    --scaleout-grey-1-rgb: 248, 248, 248;
+    --scaleout-grey-2: #F2F5F9;
+    --scaleout-grey-2-rgb: 242, 245, 249;
+    --scaleout-grey-3: #F2F6F5;
+    --scaleout-grey-3-rg: 242, 246, 245;
+    --scaleout-grey-4: #FEFAE9;
+    --scaleout-grey-4-rgb: 254, 250, 233;
+    --scaleout-grey-5: #F6EDE4;
+    --scaleout-grey-5-rgb: 246, 237, 228;
+    --scaleout-grey-6: #DDDDDD;
+    --scaleout-grey-6-rgb: 221, 221, 221;
+}
+
+body {
+    font-family: "Manrope", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;
+}
+
+a {
+    color: var(--scaleout-black);
+    text-decoration: none;
+    display: inline-block;
+}
+
+
+a::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 1px;
+    background: #000;
+    transition: width .4s;
+}
+
+.wy-side-scroll a::after,
+a.image-reference::after {
+    content: none;
+    transition: none;
+}
+
+a:hover::after,
+a:focus::after,
+a.active::after {
+    width: 100%;
+}
+
+a:hover,
+a:visited {
+    color: var(--scaleout-black);
+}
+
+.rst-content .toctree-wrapper>p.caption,
+span.caption-text,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+legend {
+    margin-top: 0;
+    font-weight: 500;
+    font-family: Manrope, Roboto Slab, ff-tisa-web-pro, Georgia, Arial, sans-serif;
+    color: var(--scaleout-black);
+}
+
+.wy-menu-vertical a:hover {
+    background-color: var(--scaleout-white);
+    cursor: pointer;
+}
+
+.wy-menu-vertical a {
+    color: var(--scaleout-black);
+    display: inline-block;
+}
+
+.rst-content .toctree-wrapper ul li.toctree-l1>a {
+    font-weight: 500;
+}
+
+.wy-menu-vertical li.current a:hover {
+    background: var(--scaleout-white);
+}
+
+a.reference.internal {
+    width: fit-content;
+}
+
+.caption-text {
+    opacity: 0.5;
+    font-weight: 900 !important;
+}
+
+.wy-menu-vertical li.toctree-l3.current li.toctree-l4>a {
+    background: none !important;
+}

docs/_static/css/utilities.css

@@ -0,0 +1,38 @@
+div.wy-nav-content {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    max-width: 80%;
+}
+
+nav.wy-nav-side {
+    background-color: var(--scaleout-white);
+    background: var(--scaleout-white);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+
+}
+
+div.wy-side-nav-search {
+    background-color: var(--scaleout-white);
+
+}
+
+.wy-menu-vertical li.current {
+    background: var(--scaleout-white);
+}
+
+.wy-menu-vertical li.toctree-l2.current>a {
+    background: var(--scaleout-white);
+}
+
+.wy-menu-vertical li.toctree-l2.current li.toctree-l3>a {
+    background: var(--scaleout-white);
+}
+
+.wy-menu-vertical li.current a {
+    color: var(--scaleout-black);
+    border: 0;
+    padding: 0.4045em 2.427em;
+}
+
+.wy-menu-vertical li.toctree-l1.current>a {
+    border: 0;
+}

docs/apiclient.rst

@@ -3,6 +3,8 @@ APIClient
 
 FEDn comes with an *APIClient* for interacting with the FEDn network. The APIClient is a Python3 library that can be used to interact with the FEDn network programmatically. 
 
+Connect to the network
+----------------------
 
 The APIClient is available as a Python package on PyPI, and can be installed using pip:
 
@@ -18,4 +20,60 @@ To initialize the APIClient, you need to provide the hostname and port of the FE
    from fedn import APIClient
    client = APIClient("localhost", 8092)
 
+Inital setup
+------------
+
+Before you can start training models, you need to set the active package and an initail seed model. The active package can be set using the following code snippet:
+
+.. code-block:: python
+
+   client.set_active_package(path="path/to/compute_package.zip", helper="numpyhelper")
+
+To set the initial seed model, you can use the following code snippet:
+
+.. code-block:: python
+
+   client.set_active_model(path="path/to/seed_model.zip")
+
+Start training
+--------------
+
+Once the active package and seed model are set, you can connect clients to the network and start training models. The following code snippet initializes a session (training rounds):
+
+.. code-block:: python
+
+   session = client.start_session(id="session_name")
+
+List data
+---------
+
+Other than starting training sessions, the APIClient can be used to get data from the network, such as sessions, models etc. All entities are represented and the all work in a similar fashion.
+
+* get_*() - (plural) list all entities of a specific type
+* get_*(id=<id-of-entity>) - get a specific entity
+
+Entities represented in the APIClient are:
+
+* clients
+* combiners
+* models
+* packages
+* rounds
+* sessions
+* statuses
+* validations
+
+The following code snippet shows how to list all sessions:
+
+.. code-block:: python
+
+   sessions = client.get_sessions()
+
+And the following code snippet shows how to get a specific session:
+
+.. code-block:: python
+
+   session = client.get_session(id="session_name")
+
+
 For more information on how to use the APIClient, see the :py:mod:`fedn.network.api.client`, and the example `Notebooks <https://github.com/scaleoutsystems/fedn/blob/master/examples/mnist-pytorch/API_Example.ipynb>`_. 

docs/conf.py

@@ -40,21 +40,30 @@
 # The theme to use for HTML and HTML Help pages.
 html_theme = 'sphinx_rtd_theme'
 
+html_theme_options = {
+    'logo_only': True,
+}
 
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
-html_static_path = []
+html_static_path = ['_static']
 
 # Output file base name for HTML help builder.
 htmlhelp_basename = 'fedndocs'
 
 # If defined shows an image instead of project name on page top-left (link to index page)
-# html_logo = '' # FEDn logo looks ugly on rtd theme
+html_logo = '_static/images/scaleout_logo_flat_dark.svg'
+# FEDn logo looks ugly on rtd theme
 
-# Here we assume that the file is at _static/custom.css
-html_css_files = []
+html_favicon = 'favicon.png'
 
+# Here we assume that the file is at _static/custom.css
+html_css_files = [
+    'css/elements.css',
+    'css/text.css',
+    'css/utilities.css',
+]
 
 # LaTeX elements
 latex_elements = {

docs/index.rst

@@ -1,16 +1,27 @@
 .. toctree::
    :maxdepth: 2
-   :caption: Table of Contents
+   :caption: Introduction
 
    introduction
    quickstart
+
+.. toctree::
+   :maxdepth: 2
+   :caption: Documentation
+
+   studio
    distributed
    apiclient
    tutorial
    architecture
    aggregators
    helpers
    auth
+
+.. toctree::
+   :maxdepth: 2
+   :caption: Miscellaneous
+
    faq
    modules
 

docs/introduction.rst

@@ -13,7 +13,7 @@ The server aggregates and combines the gradients from multiple participants to u
 This iterative process allows the global model to improve without the need to share the raw data.
 
 FEDn: the SDK for scalable federated learning
----------------------------------------------
+.............................................
 
 FEDn serves as a System Development Kit (SDK) enabling scalable federated learning. 
 It is used to implement the core server side logic (including model aggregation) and the client side integrations.