Merge pull request #51 from JadenFiotto-Kaufman/docs

Status Page and Link Fixes

docs/source/_static/css/status.css

@@ -0,0 +1,34 @@
+/* .status-container {
+    background-color: '#F84F31';
+    
+} */
+
+.status-body {
+    color: "white";
+}
+
+/* Style the buttons that are used to open and close the accordion panel */
+.accordion {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+  }
+
+  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+  .active, .accordion:hover {
+    background-color: #ccc;
+  }
+
+  /* Style the accordion panel. Note: hidden by default */
+  .panel {
+    padding: 0 18px;
+    background-color: white;
+    display: none;
+    overflow: hidden;
+  }

docs/source/_templates/ndif_status.html

@@ -1,5 +1,5 @@
 <script>
-    var statusIcon = document.querySelector('.ndif .fa-circle-check');
+
     fetch("{{ndif_url}}")
         .then((response) => {
             if (response.status == 200) {
@@ -15,7 +15,9 @@
                         spanElement.style.setProperty('color', '#F84F31', 'important');
                     });
                 });
+                var statusIcon = document.querySelector('.ndif .fa-circle-check');
                 if (statusIcon) {
+                    // not here
                     statusIcon.classList.replace('fa-circle-check', 'fa-circle-xmark'); 
                 }
             }
@@ -26,6 +28,7 @@
                     spanElement.style.setProperty('color', '#F84F31', 'important');
                 });
             });
+            var statusIcon = document.querySelector('.ndif .fa-circle-check');
             if (statusIcon) {
                 statusIcon.classList.replace('fa-circle-check', 'fa-circle-xmark');
             }

docs/source/conf.py

@@ -49,7 +49,7 @@
         },
         {
             "name": "Status",
-            "url": "https://discord.gg/6uFJmCSwW7",
+            "url": "/status",
             "icon": "fa-solid fa-circle-check",
             "attributes": {"class": "ndif"},
         },

docs/source/features.rst

@@ -1,9 +1,49 @@
 Features
 ==========
 
+.. .. grid:: 2
+..    :gutter: 2
+
+..    .. grid-item-card:: Getting Values
+..       :link: notebooks/features/getting.ipynb
+      
+
+..    .. grid-item-card:: Setting Values
+..       :link: notebooks/features/setting.ipynb
+
+
+..    .. grid-item-card:: Applying Operations
+..       :link: notebooks/features/operations.ipynb
+
+
+..    .. grid-item-card:: Applying Modules
+..       :link: notebooks/features/modules.ipynb
+
+
+..    .. grid-item-card:: Cross-Prompt Intervention
+..       :link: notebooks/features/cross_prompt.ipynb
+
+   
+..    .. grid-item-card:: Multiple Token Generation
+..       :link: notebooks/features/multiple_token.ipynb
+
+   
+..    .. grid-item-card:: Working With Gradients
+..       :link: notebooks/features/gradients.ipynb
+   
+
+..    .. grid-item-card:: Remote Execution
+..       :link: notebooks/features/remote_execution.ipynb
+   
+
+..    .. grid-item-card:: Token Based Indexing
+..       :link: notebooks/features/token_indexing.ipynb
+   
+
+
 .. toctree::
    :maxdepth: 1
-
+   
    notebooks/features/getting.ipynb
    notebooks/features/setting.ipynb
    notebooks/features/operations.ipynb
@@ -13,3 +53,4 @@ Features
    notebooks/features/gradients.ipynb
    notebooks/features/remote_execution.ipynb
    notebooks/features/token_indexing.ipynb
+

docs/source/index.rst

@@ -29,13 +29,13 @@ nnsight
 
         .. div:: sd-fs-1 sd-font-weight-bold title-bot sd-text-primary image-container
 
-            nnsight
+            NNsight
 
         .. div:: sd-fs-4 sd-font-weight-bold sd-my-0 sub-bot image-container
 
             interpretable neural networks
 
-        **nnsight** (/ɛn.saɪt/) is a package for interpreting and manipulating the internals of large models
+        **NNsight** (/ɛn.saɪt/) is a package for interpreting and manipulating the internals of large models
 
         .. div:: button-group
 

docs/source/status.rst

@@ -1,77 +1,115 @@
 :html_theme.sidebar_secondary.remove:
 :sd_hide_title:
 
-status
+.. raw:: html
+
+    <link rel="stylesheet" href="../_static/css/status.css">
+    <script>
+        fetch("https://ndif.dev/ping")
+            .then((response) => {
+                if (response.status == 200) {
+                    Array.from(document.getElementsByClassName("status-container")).forEach((elm) => {
+                        elm.style.backgroundColor = "#23C552";
+                        Array.from(elm.getElementsByClassName('sd-card-text')).forEach((text) => {
+                            text.textContent = "All Systems Are Operational";
+                            text.style.color = "#FFFFFF";
+                        });
+                    });
+                    console.log('Ping success');
+
+                    // Nested fetch to ndif.dev/stats
+                    fetch("https://ndif.dev/stats")
+                        .then((statsResponse) => {
+                            if (statsResponse.status == 200) {
+                                statsResponse.json().then((parsed) => {
+                                    // Initialize an empty string to accumulate information
+                                    let infoString = '';
+
+                                    // Iterate through the JSON dictionary and append information
+                                    Object.keys(parsed).forEach((key) => {
+                                        const value = parsed[key];
+                                        infoString += `Repo ID: <a href="https://huggingface.co/${value.repo_id}" target="_blank">${value.repo_id}</a><br>Config String: ${value.config_json_string}<br><br>`;
+                                    });
+
+                                    // Display the accumulated string
+                                    Array.from(document.getElementsByClassName("status-message")).forEach((elm) => {
+                                        Array.from(elm.getElementsByClassName('sd-card-text')).forEach((text) => {
+                                            text.innerHTML = infoString;
+                                        });
+                                    });
+
+                                    Array.from(document.getElementsByClassName("page-hook")).forEach((elm) => {
+                                        elm.innerHTML = `<button class="accordion">Section 1</button><div class="panel"><p>Lorem ipsum...</p></div>`;
+                                        
+                                    });
+
+                                    console.log('Stats success');
+                                }).catch((jsonError) => {
+                                    console.log('JSON parsing error:', jsonError);
+                                });
+                            } else {
+                                console.log('Stats error');
+                            }
+                        })
+                        .catch((statsError) => {
+                            console.log('Stats error');
+                        });
+                } else {
+                    Array.from(document.getElementsByClassName("status-container")).forEach((elm) => {
+                        elm.style.backgroundColor = "#F84F31";
+                        Array.from(elm.getElementsByClassName('sd-card-text')).forEach((text) => {
+                            text.textContent = "NDIF Is Unavailable";
+                            text.style.color = "#FFFFFF";
+                        });
+                    });
+                    console.log('Ping error');
+                }
+            })
+            .catch((pingError) => {
+                Array.from(document.getElementsByClassName("status-container")).forEach((elm) => {
+                    elm.style.backgroundColor = "#F84F31";
+                    Array.from(elm.getElementsByClassName('sd-card-text')).forEach((text) => {
+                        text.textContent = "NDIF Is Unavailable";
+                        text.style.color = "#FFFFFF";
+                    });
+                });
+                console.error('Ping fetch failed:', pingError);
+            });
+    </script>
+
+.. raw:: html
+
+    <script>
+        var acc = document.getElementsByClassName("accordion");
+        var i;
+
+        for (i = 0; i < acc.length; i++) {
+        acc[i].addEventListener("click", function() {
+            /* Toggle between adding and removing the "active" class,
+            to highlight the button that controls the panel */
+            this.classList.toggle("active");
+
+            /* Toggle between hiding and showing the active panel */
+            var panel = this.nextElementSibling;
+            if (panel.style.display === "block") {
+            panel.style.display = "none";
+            } else {
+            panel.style.display = "block";
+            }
+        });
+        }
+    </script>
+
+Status
 ======
 
 .. toctree::
    :maxdepth: 1
    :hidden:
 
-
-
 .. card::
-
-    All Systems Are Operational
-
-
-
-.. div:: sd-fs-1 sd-font-weight-bold sd-text-center sd-text-primary sd-mb-5
-
-  Key Features
-
-.. grid:: 1 1 2 2
-    :class-container: features
-
-    .. grid-item::
-
-      .. div:: features-container
-
-        .. image:: _static/images/one.png
-          :width: 250
-
-        .. div:: 
-
-          **Integration**
-
-          Pass in a ID from any HuggingFace Transformer repo and access its weights with nnsight. 
-
-    .. grid-item::
-
-      .. div:: features-container
-
-        .. image:: _static/images/two.png
-          :width: 250
-
-        .. div:: 
-
-          **Interpretability**
-
-          Access the internal gradients and activations at any point or module in a model.
+    :class-card: status-container
 
-    .. grid-item::
-
-      .. div:: features-container
-
-        .. image:: _static/images/two.png
-          :width: 250
-
-        .. div:: 
-
-          **Intuitive**
-
-          Set up a context block and manipulate model internals with only a couple lines of code.
-
-    .. grid-item::
-
-      .. div:: features-container
-
-        .. image:: _static/images/one.png
-          :width: 250
-
-        .. div:: 
-
-          **Interoperable**
-
-          Enable grad and train interventions like LORA or probes on any point in a model.
+    All Systems Are Operational
 
+.. div:: page-hook

docs/source/tutorials.rst

@@ -7,7 +7,7 @@ Tutorials
    .. grid-item-card:: Walkthrough
       :link: notebooks/walkthrough.ipynb
 
-      Main features of the nnsight library.
+      :bdg-primary:`Main Features`
 
    .. grid-item-card:: IOI Patching
       :link: notebooks/tutorials/ioi_patching.ipynb