Render Featrix Sphere model cards as interactive HTML, plain text, or React components.
| Approach | Best for | Install |
|---|---|---|
| JavaScript (CDN) | Any web page — zero build step | <script> tag |
| React Component | React / Next.js apps | npm install @featrix/modelcard |
| Python Package | Jupyter notebooks, server-side rendering, CLI | pip install featrix-modelcard |
Drop a single <script> tag into any HTML page. No bundler required.
<div id="model-card"></div>
<script src="https://bits.featrix.com/js/featrix-modelcard/model-card.js"></script>
<script>
const container = document.getElementById('model-card');
container.innerHTML = FeatrixModelCard.renderHTML(modelCardJson);
FeatrixModelCard.attachEventListeners(container);
</script>Also available via public CDNs:
https://unpkg.com/@featrix/modelcard-js/model-card.js
https://cdn.jsdelivr.net/npm/@featrix/modelcard-js/model-card.js
To isolate model card styles from your page, render into an iframe:
<iframe id="card-frame" style="width:100%; border:none;"></iframe>
<script src="https://bits.featrix.com/js/featrix-modelcard/model-card.js"></script>
<script>
const doc = document.getElementById('card-frame').contentDocument;
doc.open();
doc.write('<html><body>' + FeatrixModelCard.renderHTML(modelCardJson) + '</body></html>');
doc.close();
FeatrixModelCard.attachEventListeners(doc.body);
</script>Enable the interactive 3D sphere thumbnail by passing options:
const html = FeatrixModelCard.renderHTML(modelCardJson, { showSphere: true });npm install @featrix/modelcard rechartsimport ModelCard from '@featrix/modelcard';
function App() {
return <ModelCard data={modelCardJson} />;
}The component includes interactive charts (via Recharts), collapsible sections, and full TypeScript type definitions.
pip install featrix-modelcardfrom featrix_modelcard import render_html, render_html_to_file
# Get a complete standalone HTML document as a string
html = render_html(model_card)
# Or write it directly to a file
render_html_to_file(model_card, "output.html")The generated HTML loads the canonical JS renderer from CDN, so it always matches the JavaScript output.
from featrix_modelcard import print_text
# Quick summary
print_text(model_card, detailed=False)
# Full details
print_text(model_card, detailed=True)from featrix_modelcard import render_html
from IPython.display import HTML
HTML(render_html(model_card))Serve the HTML string from any Python web framework:
from featrix_modelcard import render_html
# Flask
@app.route("/model-card/<session_id>")
def model_card_view(session_id):
model_card = load_model_card(session_id) # your lookup logic
return render_html(model_card)html = render_html(model_card, show_sphere=True, session_id="your-session-id")All renderers consume the same JSON schema. See model-card-schema.json for the full specification.
Key sections:
| Section | Contents |
|---|---|
model_identification |
Name, status, target column, training date |
training_dataset |
Row counts, feature names |
feature_inventory |
Feature types and details |
training_configuration |
Hyperparameters |
training_metrics |
Accuracy, AUC, F1, loss curves |
model_architecture |
Network structure |
model_quality |
Warnings and quality assessments |
technical_details |
Runtime and environment info |
provenance |
Creation metadata |
column_statistics |
Per-column stats (Embedding Space models) |
See PUBLISH.md for instructions on publishing to PyPI, npm, and the Featrix CDN.
| Target | Package | Command |
|---|---|---|
| PyPI | featrix-modelcard |
cd python && ./publish.sh |
| npm (React) | @featrix/modelcard |
cd react && ./publish.sh |
| npm (JS) | @featrix/modelcard-js |
cd javascript && ./publish.sh |
| Featrix CDN | — | cd javascript && ./publish-cdn.sh |
MIT