@cylynx/verifyml-card-sections
v1.0.11
Published
Display specific model card information with provided section and segments.
Downloads
14
Readme
A React component that display specific VerifyML Model Card information with given data sources and section.
Quick Start
NPM
npm install @cylynx/verifyml-card-sections --saveor:
YARN
yarn add @cylynx/verifyml-card-sectionsUsage
Client Side Rendering - React
import CardSection, {
ModelCardSectionContent,
ProtobufUtil,
} from '@cylynx/verifyml-card-sections';
import { useEffect, useState } from 'react';
import '@cylynx/verifyml-card-sections/dist/style.css';
const SECTION = 'fairnessAnalysis';
const SUB_SECTIONS: ModelCardSubSection<'fairnessAnalysis'>[] = [
'type',
'tests',
'graphics',
'metadata',
];
const VerifyMLDemo = () => {
const [modelCardSection, setModelCardSection] =
useState<ModelCardSectionContent>();
useEffect(() => {
const init = async () => {
const protobufUtil = new ProtobufUtil();
const message = await protobufUtil.fetchMessage(
'https://github.com/cylynx/verifyml/blob/main/examples/model_card_output/data/credit_card_fraud_example2.proto',
SECTION,
);
setModelCardSection(message);
};
init();
}, []);
return (
<div style={{ padding: '16px' }}>
{modelCardSection && (
<CardSection
modelCardSection={modelCardSection}
section={SECTION}
subSections={SUB_SECTIONS}
/>
)}
</div>
);
};
ReactDOM.render(<VerifyMLDemo />, document.getElementById('root'));Server Side Rendering - Next
_app.tsx
Include style.css into _app.tsx to enable global style.
import '../styles/globals.css';
import type { AppProps } from 'next/app';
// https://nextjs.org/docs/messages/css-global
import '@cylynx/verifyml-card-sections/dist/style.css';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;index.tsx
import type { GetStaticProps, NextPage, InferGetStaticPropsType } from 'next';
import styles from '../styles/Home.module.css';
import Head from 'next/head';
import CardSection, {
ProtobufUtil,
ModelCardSectionContent,
ModelCardSubSection,
} from '@cylynx/verifyml-card-sections';
const SECTION = 'fairnessAnalysis';
const SUB_SECTIONS: ModelCardSubSection<'fairnessAnalysis'>[] = [
'type',
'tests',
'graphics',
'metadata',
];
type HomeProps = InferGetStaticPropsType<typeof getStaticProps>;
const Home: NextPage<HomeProps> = ({ creditCardExample }) => {
const creditCardData = JSON.parse(
creditCardExample,
) as ModelCardSectionContent;
return (
<div className={styles.container}>
<Head>
<title>VerifyML Card Section</title>
<meta
name='description'
content='Next App for library behaviour demonstration'
/>
</Head>
<main className={styles.main}>
<CardSection
modelCardSection={creditCardData}
section={SECTION}
subSection={SUB_SECTIONS}
/>
</main>
</div>
);
};
export const getStaticProps: GetStaticProps<{
creditCardExample: string;
}> = async () => {
const protobufUtil = new ProtobufUtil();
const creditCard = await protobufUtil.fetchMessage(
'https://github.com/cylynx/verifyml/blob/main/examples/model_card_output/data/credit_card_fraud_example2.proto',
SECTION,
);
const creditCardExample = JSON.stringify(creditCard);
return { props: { creditCardExample } };
};Props
This section outlined the list of available props and its structure.
modelCardSection
description:
- Decoded model card section data.
type:
ModelCardSectionContent
section
- Decide which section to render.
type:
string
example:
- Model Details,
modelDetails - Considerations,
considerations - Datasets,
datasets - Quantitative Analysis,
quantitativeAnalysis - Explainability Analysis,
explainabilityAnalysis - Fairness Analysis,
fairnessAnalysis
subSections
- Decide which subsection to render.
type:
ModelDetailSubSection[]ConsiderationSubSection[]DatasetSubSection[]QASubSection[]EASubSection[]FASubSection[]
example:
| Section | Type | Sub-section |
| :----------------------- | :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| modelDetails | ModelDetailSubSection[] | overviewcurrentVersionownersregulatoryRequirementslicensesreferencesdocumentationpath |
| considerations | ConsiderationSubSection[] | intendedUsersuseCaseslimitationstradeoffsfairnessConsiderationsethicalConsiderations |
| datasets | DatasetSubSection[] | namegraphicsdescriptionlinksensitivityMetrics |
| quantitativeAnalysis | QASubSection[] | slicegraphicsmetadatatests |
| explainabilityAnalysis | EASubSection[] | typegraphicsmetadatatests |
| fairnessAnalysis | FASubSection[] | typegraphicsmetadatatests |