Skip to content

Commit

Permalink
Merge pull request #2720 from clari182/fix/translations-incidents-tax…
Browse files Browse the repository at this point in the history 
…onomies

Fix/translations incidents taxonomies
  • Loading branch information
@kepae
kepae authored Apr 24, 2024
2 parents 94f83e2 + 2418a83 commit ee8f6f3
Show file tree
Hide file tree
Showing 10 changed files with 800 additions and 51 deletions.
232 changes: 231 additions & 1 deletion site/gatsby-site/i18n/locales/es/translation.json
View file

Large diffs are not rendered by default.

232 changes: 231 additions & 1 deletion site/gatsby-site/i18n/locales/fr/translation.json
View file

Large diffs are not rendered by default.

235 changes: 233 additions & 2 deletions site/gatsby-site/i18n/locales/ja/translation.json
View file

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions site/gatsby-site/src/components/TaxonomyGraphCarousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { LocalizedLink } from 'plugins/gatsby-theme-i18n';
import { getClassificationValue } from 'utils/classifications';
import { CarouselLeftArrow, CarouselRightArrow } from 'elements/Carousel';
import { isAiHarm } from 'utils/cset';
import { useTranslation } from 'react-i18next';

const TaxonomyGraphCarousel = ({ namespace, axes, data }) => {
const taxaData = data.allMongodbAiidprodTaxa;
Expand Down Expand Up @@ -99,6 +100,8 @@ const TaxonomyGraphCarousel = ({ namespace, axes, data }) => {
}
}

const { t } = useTranslation();

return (
!classificationsLoading && (
<div className="h-96 dark">
Expand All @@ -112,7 +115,7 @@ const TaxonomyGraphCarousel = ({ namespace, axes, data }) => {
axes.map((axis, index) => {
if (categoryCounts[axis]) {
const columns = Object.keys(categoryCounts[axis])
.map((category) => [category, categoryCounts[axis][category]])
.map((category) => [t(category), categoryCounts[axis][category]])
.sort((a, b) =>
a[0] == 'All Others' ? 1 : b[0] == 'All Others' ? -1 : b[1] - a[1]
);
Expand All @@ -139,7 +142,7 @@ const TaxonomyGraphCarousel = ({ namespace, axes, data }) => {

return (
<div key={index} className="h-96">
<h3 className="text-base text-center">{axis}</h3>
<h3 className="text-base text-center">{t(axis)}</h3>
<LocalizedLink
to={`/taxonomy/${namespace.toLowerCase()}#field-${encodeURIComponent(axis)}`}
className="h-96"
Expand Down
2 changes: 1 addition & 1 deletion site/gatsby-site/src/components/incidents/IncidentsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export default function IncidentsTable({ data, isLiveData, setIsLiveData }) {
variant="link"
onClick={() => setIncindentIdToEdit(values.incident_id)}
>
Edit
<Trans>Edit</Trans>
</Button>
),
});
Expand Down
12 changes: 9 additions & 3 deletions site/gatsby-site/src/components/landing/Sponsors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,18 @@ export default function Sponsors({ sponsors = [] }) {
organization chartered to advance the AI Incident Database. The governance of the
Collaborative is architected around the participation in its impact programming.
For more details, we invite you to read the{' '}
<a href="https://asset.cloudinary.com/pai/cf01cce1af65f5fbb3d71fa092d001db">founding report</a> and learn
more on our{' '}
<a href="https://asset.cloudinary.com/pai/cf01cce1af65f5fbb3d71fa092d001db">
founding report
</a>{' '}
and learn more on our{' '}
<Link to="/about?lang=en#boardofdirectors">board and contributors</Link>.
</Trans>
</p>
<a href="https://asset.cloudinary.com/pai/cf01cce1af65f5fbb3d71fa092d001db" target="_blank" rel="noreferrer">
<a
href="https://asset.cloudinary.com/pai/cf01cce1af65f5fbb3d71fa092d001db"
target="_blank"
rel="noreferrer"
>
<StyledImageCover src="/images/reportcover.png" className="border-1" />
</a>
<p className="italic">
Expand Down
48 changes: 27 additions & 21 deletions site/gatsby-site/src/components/taxa/CsetTaxonomyPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ export default function CsetTaxonomyPage(props) {

const { namespace } = props.pageContext.taxonomy;

const metaTitle = `${namespace} Charts`;
const { t } = useTranslation();

const metaTitle = t(`${namespace} Charts`);

const allVsHarmDefinition = {
'All AIID Incidents': {
Expand All @@ -28,8 +30,6 @@ export default function CsetTaxonomyPage(props) {

classifications = classifications.filter((c) => c.publish);

const { t } = useTranslation();

return (
<>
<div className={'titleWrapper'}>
Expand Down Expand Up @@ -183,10 +183,10 @@ export default function CsetTaxonomyPage(props) {
subtitle={
<>
<div>
<Trans>
<Trans i18nKey={'csetAutonomy'}>
Autonomy is an AI&apos;s capability to operate independently. Levels of autonomy
differ based on whether or not the AI makes independent decisions and the degree
of human oversight. The level of autonomy does not depend on the type of input the
of human oversight. The level of autonomy does no depend on the type of input the
AI receives, whether it is human- or machine-generated.
</Trans>
<div>
Expand Down Expand Up @@ -220,19 +220,25 @@ export default function CsetTaxonomyPage(props) {
/>
<ul>
<li>
<b>Autonomy1 (fully autonomous)</b>: Does the system operate independently, without
simultaneous human oversight, interaction or intervention?
<Trans>
<b>Autonomy1 (fully autonomous)</b>: Does the system operate independently, without
simultaneous human oversight, interaction or intervention?
</Trans>
</li>

<li>
<b>Autonomy2 (human-on-loop)</b>: Does the system operate independently but with human
oversight, where the system makes decisions or takes actions but a human actively
observes the behavior and can override the system in real time?
<Trans>
<b>Autonomy2 (human-on-loop)</b>: Does the system operate independently but with human
oversight, where the system makes decisions or takes actions but a human actively
observes the behavior and can override the system in real time?
</Trans>
</li>

<li>
<b>Autonomy3 (human-in-the-loop)</b>: Does the system provide inputs and suggested
decisions to a human that
<Trans>
<b>Autonomy3 (human-in-the-loop)</b>: Does the system provide inputs and suggested
decisions to a human that
</Trans>
</li>
</ul>
{[
Expand All @@ -241,7 +247,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription: 'Did the incident occur in a domain with physical objects?',
subtitle: (
<>
<Trans>
<Trans i18nKey={'physicalObjectsSubtitle'}>
Incidents that involve physical objects are more likely to have damage or injury.
However, AI systems that do not operate in a physical domain can still lead to
harm.
Expand All @@ -253,7 +259,7 @@ export default function CsetTaxonomyPage(props) {
attributeShortName: 'Entertainment Industry',
titleDescription: 'Did the incident occur in the entertainment industry?',
subtitle: (
<Trans>
<Trans i18nKey={'entertainmentIndustrySubtitle'}>
AI systems used for entertainment are less likely to involve physical objects and
hence unlikely to be associated with damage, injury, or loss. Additionally, there is
a lower expectation for truthful information from entertainment, making detrimental
Expand All @@ -266,7 +272,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription:
'Was the incident about a report, test, or study of training data instead of the AI itself?',
subtitle: (
<Trans>
<Trans i18nKey={'reportTextSubtitle'}>
The quality of AI training and deployment data can potentially create harm or risks
in AI systems. However, an issue in the data does not necessarily mean the AI will
cause harm or increase the risk for harm. It is possible that developers or users
Expand All @@ -285,7 +291,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription:
'Was this a test or demonstration of an AI system done by developers, producers, or researchers (versus users) in controlled conditions?',
subtitle: (
<Trans>
<Trans i18nKey={'controlledConditionsSubtitle'}>
AI tests or demonstrations by developers, producers, or researchers in controlled
environments are less likely to expose people, organizations, property,
institutions, or the natural environment to harm. Controlled environments may
Expand All @@ -299,7 +305,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription:
'Was this a test or demonstration of an AI system done by developers, producers, or researchers (versus users) in operational conditions?',
subtitle: (
<Trans>
<Trans i18nKey={'operationalConditionsSubtitle'}>
Some AI systems undergo testing or demonstration in an operational environment.
Testing in operational environments still occurs before the system is deployed by
end-users. However, relative to controlled environments, operational environments
Expand All @@ -312,7 +318,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription:
'Was this a test or demonstration of an AI system done by users in controlled conditions?',
subtitle: (
<Trans>
<Trans i18nKey={'userControlledConditionsSubtitle'}>
Sometimes, prior to deployment, the users will perform a test or demonstration of
the AI system. The involvement of a user (versus a developer, producer, or
researcher) increases the likelihood that harm can occur even if the AI system is
Expand All @@ -326,7 +332,7 @@ export default function CsetTaxonomyPage(props) {
titleDescription:
'Was this a test or demonstration of an AI system done by users in operational conditions?',
subtitle: (
<Trans>
<Trans i18nKey={'userOperationalConditionsSubtitle'}>
The involvement of a user (versus a developer, producer, or researcher) increases
the likelihood that harm can occur even if the AI system is being tested. Relative
to controlled environments, operational environments try to closely represent
Expand All @@ -339,12 +345,12 @@ export default function CsetTaxonomyPage(props) {
].map(({ attributeShortName, titleDescription, subtitle }) => (
<GroupBarChart
key={attributeShortName}
title={`Domain questions – ${attributeShortName}`}
title={`${t('Domain questions')} – ${t(attributeShortName)}`}
groups={allVsHarmDefinition}
attributeShortName={attributeShortName}
classifications={classifications}
namespace={namespace}
titleDescription={titleDescription}
titleDescription={t(titleDescription)}
subtitle={subtitle}
className="mt-8"
/>
Expand Down
44 changes: 34 additions & 10 deletions site/gatsby-site/src/components/taxa/FacetTaxonomyPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Card, Badge, Button } from 'flowbite-react';
import { getClassificationValue } from 'utils/classifications';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import { Trans, useTranslation } from 'react-i18next';

export default function FacetTaxonomyPage(props) {
if (!props || !props.pageContext || !props.data) {
Expand All @@ -34,13 +35,19 @@ export default function FacetTaxonomyPage(props) {

const geocodes = getGeocodes(allMongodbAiidprodClassifications.nodes);

const { t } = useTranslation();

const markdownDescription = t('gmfMarkdown', description);

return (
<>
<div className={'titleWrapper'}>
<h1>{namespace}</h1>
</div>
<Markdown className="taxonomy-markdown">{description}</Markdown>
<h2 className="heading1">Taxonomy Fields</h2>
<Markdown className="taxonomy-markdown">{markdownDescription}</Markdown>
<h2 className="heading1">
<Trans>Taxonomy Fields</Trans>
</h2>
<div className="flex gap-9 flex-col">
{sortedFieldsArray
.filter((f) => f.short_name !== 'Publish')
Expand All @@ -51,10 +58,12 @@ export default function FacetTaxonomyPage(props) {
className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white relative flex items-center"
data-cy={`title-${short_name}`}
>
{long_name}{' '}
{t(long_name)}{' '}
{instant_facet && (
<span className="ml-2">
<Badge color="gray">Searchable in Discover App</Badge>
<Badge color="gray">
<Trans>Searchable in Discover App</Trans>
</Badge>
</span>
)}
</h3>
Expand All @@ -67,7 +76,7 @@ export default function FacetTaxonomyPage(props) {
geocodes={geocodes}
/>
<Markdown className="taxonomy-markdown">
{'**Definition**: ' + long_description}
{`**${t('Definition')}**: ` + t(long_description)}
</Markdown>
</Card>
</div>
Expand All @@ -78,6 +87,8 @@ export default function FacetTaxonomyPage(props) {
}

const FacetList = ({ namespace, instant_facet, short_name, stats, geocodes }) => {
const { t } = useTranslation();

if (!instant_facet) {
return '';
}
Expand Down Expand Up @@ -125,9 +136,17 @@ const FacetList = ({ namespace, instant_facet, short_name, stats, geocodes }) =>
]);
}

const names = data.columns.reduce((obj, key) => {
obj[key[0]] = t(key[0]);
return obj;
}, {});

return (
<div>
<strong>Discover</strong>:
<strong>
<Trans>Discover</Trans>
</strong>
:
<ul className="text-gray-500 dark:text-gray-400 mt-4 ml-4">
{sortedStatsArray
.filter((item, index) => showAllStats || index < 5)
Expand All @@ -152,7 +171,7 @@ const FacetList = ({ namespace, instant_facet, short_name, stats, geocodes }) =>
onClick={toggleShowAllStats}
style={{ padding: '0px', margin: '0px', textDecoration: 'none' }}
>
{`Show ${showAllStats ? 'fewer stats' : 'more stats'}`}
<Trans>{`Show ${showAllStats ? 'fewer stats' : 'more stats'}`}</Trans>
</Button>
)}
<div className="my-3 h-[320px]">
Expand All @@ -178,6 +197,7 @@ const FacetList = ({ namespace, instant_facet, short_name, stats, geocodes }) =>
);
}
},
names,
},
}}
/>
Expand All @@ -197,18 +217,22 @@ const FacetList = ({ namespace, instant_facet, short_name, stats, geocodes }) =>
/>
</div>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-lg">No classifications with this field</span>
<span className="text-lg">
<Trans>No classifications with this field</Trans>
</span>
</div>
</div>
);
};

const StatItem = ({ text, value }) => {
const { t } = useTranslation();

return (
<>
<span>{text}</span>
<span>{t(text)}</span>
<div className="flex ml-4">
<Badge>{`${value || 0} ${value === 1 ? 'Incident' : 'Incidents'}`}</Badge>
<Badge>{`${value || 0} ${value === 1 ? t('Incident') : t('Incidents')}`}</Badge>
</div>
</>
);
Expand Down
Loading

0 comments on commit ee8f6f3

Please sign in to comment.