❤
npm
Sign UpSign In

@cylynx/verifyml-card-sections
TypeScript icon, indicating that this package has built-in type declarations

1.0.11 • Public • Published

npm

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 --save

or:

YARN

yarn add @cylynx/verifyml-card-sections

Usage

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:

  1. Model Details, modelDetails
  2. Considerations, considerations
  3. Datasets, datasets
  4. Quantitative Analysis, quantitativeAnalysis
  5. Explainability Analysis, explainabilityAnalysis
  6. Fairness Analysis, fairnessAnalysis

subSections

  • Decide which subsection to render.

type:

  • ModelDetailSubSection[]
  • ConsiderationSubSection[]
  • DatasetSubSection[]
  • QASubSection[]
  • EASubSection[]
  • FASubSection[]

example:

Section Type Sub-section
modelDetails ModelDetailSubSection[]
  1. overview
  2. currentVersion
  3. owners
  4. regulatoryRequirements
  5. licenses
  6. references
  7. documentation
  8. path
considerations ConsiderationSubSection[]
  1. intendedUsers
  2. useCases
  3. limitations
  4. tradeoffs
  5. fairnessConsiderations
  6. ethicalConsiderations
datasets DatasetSubSection[]
  1. name
  2. graphics
  3. description
  4. link
  5. sensitivityMetrics
quantitativeAnalysis QASubSection[]
  1. slice
  2. graphics
  3. metadata
  4. tests
explainabilityAnalysis EASubSection[]
  1. type
  2. graphics
  3. metadata
  4. tests
fairnessAnalysis FASubSection[]
  1. type
  2. graphics
  3. metadata
  4. tests

Readme

Keywords

Package Sidebar

Install

npm i @cylynx/verifyml-card-sections

Weekly Downloads

1

Version

1.0.11

License

MIT

Unpacked Size

2.2 MB

Total Files

38

Last publish

Collaborators

  • timothy-lynx
  • cylynx-yinghua
Try on RunKit
Report malware