in frontends/web/src/containers/ModelPage.js [511:858]
render() {
const { model, task, taskCode } = this.state;
const isFlores = FLORES_TASK_CODES.includes(task.task_code);
const isModelOwner =
parseInt(this.state.model.uid) === parseInt(this.state.ctxUserId);
const { leaderboard_scores } = this.state.model;
const { non_leaderboard_scores } = this.state.model;
const { leaderboard_evaluation_statuses } = this.state.model;
const { non_leaderboard_evaluation_statuses } = this.state.model;
const { hidden_evaluation_statuses } = this.state.model;
let orderedLeaderboardScores = (leaderboard_scores || []).sort(
(a, b) => a.round_id - b.round_id
);
let orderedNonLeaderboardScores = (non_leaderboard_scores || []).sort(
(a, b) => a.round_id - b.round_id
);
return (
<OverlayProvider initiallyHide={true}>
<BadgeOverlay
badgeTypes={this.state.showBadges}
show={!!this.state.showBadges}
onHide={() => this.setState({ showBadges: "" })}
></BadgeOverlay>
<Container className="mb-5 pb-5">
<h1 className="my-4 pt-3 text-uppercase text-center">
Model Overview
</h1>
<Col className="m-auto" lg={8}>
<Card className="profile-card">
<Card.Body>
<div className="d-flex justify-content-between mx-4 mt-4">
<Button
className={`blue-bg border-0 font-weight-bold ${
isModelOwner ? "mr-2" : null
}`}
aria-label="Back"
onClick={this.handleBack}
>
{"< Back"}
</Button>
<div>
{(isModelOwner || model.is_published) &&
model.deployment_status === "deployed" ? (
<Button
variant="outline-primary mr-2"
onClick={() => this.handleInteract()}
>
<i className="fas fa-pen"></i> Interact
</Button>
) : this.state.modelDeployed ? (
<Button variant="outline-primary mr-2" disabled={true}>
<i className="fas fa-upload"></i> Model Deployed!
</Button>
) : (isModelOwner || model.is_published) &&
model.deployment_status === "takendownnonactive" ? (
<Button
variant="outline-primary mr-2"
onClick={() => this.handleDeployModel()}
>
<i className="fas fa-upload"></i> Deploy Model
</Button>
) : (
""
)}
{model.source_url && model.source_url !== "" ? (
<Button
variant="outline-primary mr-2"
href={model.source_url}
>
<i className="fas fa-newspaper"></i> Read Paper
</Button>
) : (
""
)}
{isModelOwner && (
<Button
variant="outline-primary mr-2"
onClick={() => this.handleEdit()}
>
Edit
</Button>
)}
{isModelOwner && model.is_published === true ? (
<Button
variant="outline-danger"
onClick={() => this.togglePublish()}
>
Unpublish
</Button>
) : null}
{isModelOwner &&
model.is_published === false &&
model.name ? (
<Button
variant="outline-success"
onClick={() => this.togglePublish()}
>
Publish
</Button>
) : null}
</div>
</div>
{model.id ? (
<InputGroup>
<Table className="mb-0">
<thead />
<tbody>
<tr>
<td colSpan="2">
<h5 className="mx-0">
<span>{model.name || "Unknown"}</span>
<span className="float-right">
uploaded{" "}
<Moment utc fromNow>
{model.upload_datetime}
</Moment>
</span>
{isModelOwner && model.is_published === "True" ? (
<Badge variant="success" className="ml-2">
Published
</Badge>
) : null}
{isModelOwner &&
model.is_published === "False" ? (
<Badge variant="danger" className="ml-2">
Unpublished
</Badge>
) : null}
</h5>
</td>
</tr>
</tbody>
</Table>
<Table hover responsive className="mb-0">
<thead />
<tbody>
{isModelOwner && (
<tr style={{ border: `none` }}>
<td>Owner Anonymity</td>
<td>
<AnonymousStatus
anonymousStatus={model.is_anonymous}
/>
</td>
</tr>
)}
<tr style={{ border: `none` }}>
<td>Deployment Status</td>
<td>
<DeploymentStatus
deploymentStatus={model.deployment_status}
/>
</td>
</tr>
<tr style={{ border: `none` }}>
<td>Owner</td>
<td>
{model.uid ? (
<span>
<Link to={`/users/${model.uid}`}>
{model.username}
</Link>
{model.is_anonymous ? (
<i>
{" "}
(will be displayed as <b>anonymous</b> to
other users)
</i>
) : null}
</span>
) : (
"anonymous"
)}
</td>
</tr>
{!isFlores && (
<tr style={{ border: `none` }}>
<td>Task</td>
<td>
<Link to={`/tasks/${taskCode}`}>{taskCode}</Link>
</td>
</tr>
)}
<tr style={{ border: `none` }}>
<td>Summary</td>
<td>{model.longdesc}</td>
</tr>
<tr style={{ border: `none` }}>
<td style={{ whiteSpace: "nowrap" }}># Parameters</td>
<td>{model.params}</td>
</tr>
{!isFlores && (
<tr style={{ border: `none` }}>
<td>Language(s)</td>
<td>{model.languages}</td>
</tr>
)}
<tr style={{ border: `none` }}>
<td>License(s)</td>
<td>{model.license}</td>
</tr>
<tr style={{ border: `none` }}>
<td style={{ verticalAlign: "middle" }}>
Model Card
</td>
<td className="modelCard">
<Markdown>{model.model_card}</Markdown>
</td>
</tr>
</tbody>
</Table>
{orderedLeaderboardScores.length > 0 ||
orderedNonLeaderboardScores.length ? (
<span className={"w-100 mt-5 mx-4"}>
<DropdownButton
alignRight={true}
variant="outline-primary"
className="mr-2 float-right"
title={"Export"}
>
<Dropdown.Item onClick={this.downloadCsv}>
{"CSV"}
</Dropdown.Item>
<Dropdown.Item onClick={this.downloadLatex}>
{"LaTeX"}
</Dropdown.Item>
</DropdownButton>
</span>
) : (
""
)}
{orderedLeaderboardScores.length > 0 ||
leaderboard_evaluation_statuses.length ? (
<Table>
<tbody>
<tr>
<td colSpan={2}>
<h5>Leaderboard Datasets</h5>
</td>
</tr>
</tbody>
</Table>
) : (
""
)}
{orderedLeaderboardScores.map((score, index) => (
<ScoreRow
key={index}
score={score}
downloadLog={this.context.api.exportDatasetLog}
isModelOwner={isModelOwner}
isAdminOrTaskOwner={this.state.isAdminOrTaskOwner}
modelId={this.state.modelId}
/>
))}
{leaderboard_evaluation_statuses.map((status, index) => (
<EvalStatusRow
key={index}
status={status}
downloadLog={this.context.api.exportDatasetLog}
isModelOwner={isModelOwner}
isAdminOrTaskOwner={this.state.isAdminOrTaskOwner}
modelId={this.state.modelId}
/>
))}
{orderedNonLeaderboardScores.length > 0 ||
non_leaderboard_evaluation_statuses.length ? (
<Table>
<tbody>
<tr>
<td colSpan={2}>
<h5>Non-Leaderboard Datasets</h5>
</td>
</tr>
</tbody>
</Table>
) : (
""
)}
{orderedNonLeaderboardScores.map((score, index) => (
<ScoreRow
key={index}
score={score}
downloadLog={this.context.api.exportDatasetLog}
isModelOwner={isModelOwner}
isAdminOrTaskOwner={this.state.isAdminOrTaskOwner}
modelId={this.state.modelId}
/>
))}
{non_leaderboard_evaluation_statuses.map(
(status, index) => (
<EvalStatusRow
key={index}
status={status}
downloadLog={this.context.api.exportDatasetLog}
isModelOwner={isModelOwner}
isAdminOrTaskOwner={this.state.isAdminOrTaskOwner}
modelId={this.state.modelId}
/>
)
)}
{hidden_evaluation_statuses.length ? (
<Table>
<tbody>
<tr>
<td colSpan={2}>
<h5>
Hidden Dataset Incomplete Evaluation Statuses
</h5>
</td>
</tr>
</tbody>
</Table>
) : (
""
)}
{hidden_evaluation_statuses.map((status, index) => (
<EvalStatusRow key={index} status={status} />
))}
</InputGroup>
) : (
<Container>
<Row>
<Col className="my-4 text-center">Loading</Col>
</Row>
<Row>
<Col className="mb-4 text-center">
{this.state.isLoading && <Spinner animation="border" />}
</Col>
</Row>
</Container>
)}
</Card.Body>
</Card>
</Col>
</Container>
{isFlores && (
<>
<Container>
<hr />
</Container>
<FloresGrid model={model} />
</>
)}
</OverlayProvider>
);
}