Mechanistic Interpretability visualizations in React.
View all available components in Storybook at https://TransformerLensOrg.github.io/CircuitsVis .
First install the package:
yarn add circuitsvisThen import and use the visualizations directly:
import { Hello } from "circuitsvis";
export function Demo() {
return <Hello name="Bob" />;
}You can use this package directly from a CDN (e.g. unpkg) to render visualizations.
<div id="my-div-id" />
<script crossorigin type="module">
import { render, Hello } from "https://unpkg.com/circuitsvis/dist/cdn/esm.js";
render(
"my-div-id", // Div to render into
Hello, // Visualization function
{ name: "Bob" } // Props (arguments) for visualisation
);
</script><div id="my-div-id" />
<script
crossorigin
src="https://unpkg.com/circuitsvis/dist/cdn/iife.js"
onload="onCircuitsVisLoad()"
></script>
<script>
function onCircuitsVisLoad() {
"{";
}
CircuitsVis.render(
"{uuid}", // Div to render into
CircuitsVis.Hello, // Visualization function
{ name: "Bob" } // Props (arguments) for visualisation
);
{
("}");
}
</script>See https://github.com/TransformerLensOrg/CircuitsVis for details of how to use this library within a Python project.