diff --git a/docs/assets/saetable.css b/docs/assets/saetable.css new file mode 100644 index 00000000..79bdf6c2 --- /dev/null +++ b/docs/assets/saetable.css @@ -0,0 +1,64 @@ +.saetable-loadSaeId { + display: inline-block; + margin-top: 10px; + cursor: pointer; +} +/* Modal styles */ +.saetable-modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0 !important; + background-color: rgba(0,0,0,0.4); +} + +.saetable-modalContent { + background-color: white; + margin: 15% auto; + padding: 2px; + border: 1px solid #888; + width: 80%; + max-width: 600px; + border-radius: 5px; + position: relative; +} + +.saetable-close { + color: #aaa; + font-size: 28px; + font-weight: bold; + cursor: pointer; + position: absolute; + right: 15px; + top: 0; + z-index: 1001; +} + +.saetable-close:hover { + color: black; +} + +.saetable-modalContent pre { + padding: 5px; + border-radius: 5px; + overflow-x: auto; + margin: 0; +} + +.saetable-copyButton { + margin: 0 5px 5px 5px; + padding: 8px 16px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.saetable-copyButton:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/docs/assets/saetable.js b/docs/assets/saetable.js new file mode 100644 index 00000000..e3285648 --- /dev/null +++ b/docs/assets/saetable.js @@ -0,0 +1,57 @@ +window.SaeTable = { + showCode: function (release, saeId) { + const modal = document.getElementById("codeModal"); + const codeContent = document.getElementById("codeContent"); + codeContent.textContent = `from sae_lens import SAE + +release = "${release}" +sae_id = "${saeId}" +sae = SAE.from_pretrained(release, sae_id)[0]`; + modal.style.display = "block"; + return false; // Prevent default link behavior + }, + + closeCode: function () { + document.getElementById("codeModal").style.display = "none"; + }, + + copyCode: function () { + const codeContent = document.getElementById("codeContent"); + const textArea = document.createElement("textarea"); + textArea.value = codeContent.textContent; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand("copy"); + document.body.removeChild(textArea); + + // Show feedback + const copyButton = document.querySelector(".saetable-copyButton"); + const originalText = copyButton.textContent; + copyButton.textContent = "Copied!"; + setTimeout(() => { + copyButton.textContent = originalText; + }, 2000); + }, + + selectCode: function (element) { + const range = document.createRange(); + range.selectNodeContents(element); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + }, +}; + +// Close modal when clicking the X +document + .querySelector(".saetable-close") + .addEventListener("click", function () { + document.getElementById("codeModal").style.display = "none"; + }); + +window.addEventListener("click", function (event) { + const modal = document.getElementById("codeModal"); + if (event.target == modal) { + modal.style.display = "none"; + } +}); diff --git a/docs/generate_sae_table.py b/docs/generate_sae_table.py index 1bb27ad8..f72f2e8f 100644 --- a/docs/generate_sae_table.py +++ b/docs/generate_sae_table.py @@ -1,5 +1,6 @@ # type: ignore from pathlib import Path +from textwrap import dedent import pandas as pd import yaml @@ -77,9 +78,23 @@ def generate_sae_table(): # Keep only 'id' and 'path' columns df = df[INCLUDED_CFG] + def style_id(val): + return f"
{val}
Load this SAE" + + df["id"] = df["id"].apply(style_id) table = df.to_markdown(index=False) markdown_content += table + "\n\n" - + markdown_content += dedent( + """ +
+
+ × +
+ +
+
+ """ + ) # Write the content to a Markdown file output_path = Path("docs/sae_table.md") with open(output_path, "w") as file: diff --git a/mkdocs.yml b/mkdocs.yml index 7aad166e..68ff0748 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -36,12 +36,13 @@ theme: extra_javascript: - - javascript/custom_formatting.js + - assets/saetable.js # The below three make MathJax work, see https://squidfunk.github.io/mkdocs-material/reference/mathjax/ - - javascript/mathjax.js - - https://polyfill.io/v3/polyfill.min.js?features=es6 + # - javascript/mathjax.js - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js +extra_css: + - assets/saetable.css nav: - Home: index.md - Roadmap: roadmap.md