Skip to content

Commit

Permalink
Fix for issue #508 (#513)
Browse files Browse the repository at this point in the history 
* Added stats table

* Added stats for moi #508

* Removed unwanted code

* Added image and some css changes
  • Loading branch information
@asa1997
asa1997 authored Jan 8, 2024
1 parent d82327b commit e8e93e5
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 131 deletions.
Binary file added src/assets/images/network.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 73 additions & 131 deletions src/pages/ModelOfInterest/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,152 +10,94 @@ import MKTypography from "../../components/MKTypography";
import { useState } from "react";
import { verifyLink } from "../ShowModelDetails/AssessmentSummary";
import { modelOfInterestData } from "../../dataStore";
import Language from "../../examples/Charts/PieChart/Languages";
import theme from "../../assets/theme";
import { debug } from "console";
import ThreeWayToggle from "../../examples/Button/ThreeWayToggle"
function prepPieChartData(
setModelType: React.Dispatch<React.SetStateAction<never[]>>,
setRiskAnalysis: React.Dispatch<React.SetStateAction<never[]>>,
cache: any,
data: any
) {
const modelTypePieData: any = [];
const modelTypeCount: any = {};
const riskAnalysisPieData: any = [];
const riskAnalysisCount: any = {};

data.forEach((item: any) => {
if (!modelTypeCount[item["type"]]) {
modelTypeCount[item["type"]] = 0;
}
modelTypeCount[item["type"]]++;

// Check for the existence of quality_control
if (item["quality_control"]) {
if (item["quality_control"].length === 0) {
// Handling for empty quality_control
if (!riskAnalysisCount["Unanalyzed"]) {
riskAnalysisCount["Unanalyzed"] = 0;
}
riskAnalysisCount["Unanalyzed"]++;
} else {
item["quality_control"].forEach((qc: string) => {
if (!riskAnalysisCount[qc]) {
riskAnalysisCount[qc] = 0;
}
riskAnalysisCount[qc]++;
});
}
}
});

for (let model of Object.keys(modelTypeCount)) {
modelTypePieData.push({ label: model, value: modelTypeCount[model] });
}
import networkIcon from "../../assets/images/network.png"

function statsTable(data: any) {

for (let risk of Object.keys(riskAnalysisCount)) {
riskAnalysisPieData.push({ label: risk, value: riskAnalysisCount[risk] });
if (!Array.isArray(data) || data.length === 0) {
return <div>No data available</div>; // Return a message if data is empty or not an array
}

setModelType(modelTypePieData);
setRiskAnalysis(riskAnalysisPieData);
const modelCount = data.length;
const classicCount = data.filter((item: { type: string }) => item.type === "Classic").length;
const llmCount = data.filter((item: { type: string }) => item.type === "LLM").length;

const sastCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.includes("SAST")).length;
const fuzzCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.includes("Fuzz Test")).length;
const emptyAnalysisCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.length === 0).length;
return (
<MKBox >
<Grid container spacing={2} style={{ textAlign: "center", fontSize: "18px"}}>
<Grid item style={{ width: "20%" }}>
<Card style={{ height: "40px", display: "grid", placeItems: "center" }}>

Models: {modelCount}
</Card>
</Grid>

<Grid item style={{ width: "32%" }}>
<Card style={{ height: "40px", display: "grid", placeItems: "center" }}>
Classic Models: {classicCount} | LLMs: {llmCount}
</Card>
</Grid>
<Grid item style={{ width: "48%" }}>
<Card style={{ height: "40px", display: "grid", placeItems: "center" }}>
Risk Analysis: SAST = {sastCount} | Fuzz Test = {fuzzCount} | Unanalyzed = {emptyAnalysisCount}
</Card>
</Grid>
</Grid>
</MKBox>
);
}



function ModelOfInterest() {
const [report, setreport]: any = useState([]);
const [modelType, setModelType]: any = useState([]);
const [riskAnalysis, setRiskAnalysis]: any = useState([]);
const [report, setReport]: any = useState();
const [modelType, setModelType]: any = useState();
const [riskAnalysis, setRiskAnalysis]: any = useState();
React.useEffect(() => {
const fetchData = async () => {
try {
const fetchedReport = await verifyLink(modelOfInterestData, setreport);
} catch (error) {
// Handle error
}
};

fetchData();
}, []);

React.useEffect(() => {
if (report.length > 0) {
prepPieChartData(setModelType, setRiskAnalysis, [], report);
}
}, [report, setModelType, setRiskAnalysis]);
verifyLink(modelOfInterestData, setReport);

const count = report.length;
}, []);

return (
<>
<DefaultNavbar routes={routes} sticky />
<MKBox pt={14} sx={{ mx: { xs: 2, lg: 3 } }}>
<Grid container spacing={3}>
<Grid item style={{ width: "33.3%" }}>
<MKBox mb={3} style={{ height: "20%" }}>
<Card sx={{ height: "470%" }}>
{/* <MKBox> */}
<MKBox pt={1} pb={1} px={1}>
<MKTypography
display="flex"
justifyContent="center"
alignItems="center"
variant="h5"
textTransform="capitalize"

>
Model Count
</MKTypography>
<MKTypography
display="flex"
justifyContent="center"
alignItems="center"
variant="h5"
textTransform="capitalize"
style={{ fontSize: "120px", paddingTop: "12%" }}

>
{count}
</MKTypography>
</MKBox>
{/* </MKBox> */}
</Card>
</MKBox>
</Grid>
<Grid item style={{ width: "33.3%" }}>
<MKBox mb={3}>
{/* Calling Language component for showing model type */}
<Language
title="Model Type"
chartData={modelType}
chartColors={[
theme.palette.primary.main,
theme.palette.info.main,
theme.palette.warning.main,
theme.palette.error.main,
]}
/>
</MKBox>
</Grid>
<Grid item style={{ width: "33.3%" }}>
<MKBox mb={3}>
<Language
title="Risk Analysis"
chartData={riskAnalysis}
chartColors={[
theme.palette.primary.main,
theme.palette.info.main,
theme.palette.warning.main,
theme.palette.error.main,
]}
/>
</MKBox>
</Grid>
</Grid>

<MKBox pt={11} sx={{ mx: { xs: 2, lg: 3 } }}>
<MKTypography
display="flex"
alignItems="left"
variant="h1"
color="black"
width="fit-content"
>
Models of Interest
</MKTypography>
<MKTypography
display="flex"
alignItems="left"
color="black"
paddingTop="2px"
fontSize="20px"
width="75%"
style={{ fontWeight: "lighter" }}
// fontWeight="lighter"
>
Gain visibility into vulnerabilities and security gaps within popular open source machine learning models. Empower your strategies for safer, more robust AI implementations. Navigate the Landscape of Open Source AI Risks. Delve into the strengths, weaknesses, and steps to fortify your models against potential threats in the ever-evolving realm of open source machine learning.
</MKTypography>
<img style={{ width: "150px", position: "absolute", right: "92px", top: "95px"}} src={networkIcon} />


<MKBox pt={6}>

{statsTable(report)}

</MKBox>

</MKBox>
<MKBox pt={5} sx={{ mx: { xs: 2, lg: 3 } }}>
<MKBox pt={2} sx={{ mx: { xs: 2, lg: 3 } }}>
<Grid container spacing={6}>
<Grid item xs={12}>
<Card>
Expand Down

0 comments on commit e8e93e5

Please sign in to comment.