testimony in 21st century base page

components/Footer/Footer.tsx

@@ -208,6 +208,9 @@ const AboutLinks = () => {
       <StyledInternalLink href="/about/how-maple-uses-ai">
         {t("links.mapleAI")}
       </StyledInternalLink>
+      <StyledInternalLink href="/about/testimony-in-the-21st-century">
+        {t("links.testimony21stCentury")}
+      </StyledInternalLink>
     </>
   )
 }

components/Navbar.tsx

@@ -8,6 +8,7 @@ import { Col, Container, Dropdown, Nav, Navbar, NavDropdown } from "./bootstrap"
 
 import {
   Avatar,
+  NavbarLink21stCentury,
   NavbarLinkAI,
   NavbarLinkBills,
   NavbarLinkEditProfile,
@@ -87,6 +88,7 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
           <NavbarLinkSupport handleClick={closeNav} />
           <NavbarLinkFAQ handleClick={closeNav} />
           <NavbarLinkAI handleClick={closeNav} />
+          <NavbarLink21stCentury handleClick={closeNav} />
         </NavDropdown>
 
         <NavDropdown className={"navLink-primary"} title={t("learn")}>
@@ -222,6 +224,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
             <NavbarLinkSupport />
             <NavbarLinkFAQ />
             <NavbarLinkAI />
+            <NavbarLink21stCentury />
           </Dropdown.Menu>
         </Dropdown>
       </div>

components/NavbarComponents.tsx

@@ -32,6 +32,27 @@ export const Avatar = () => {
   )
 }
 
+export const NavbarLink21stCentury: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth"])
+  return (
+    <NavDropdown.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : ""}
+        href="/about/testimony-in-the-21st-century"
+        {...other}
+      >
+        {t("navigation.testimony21stCentury")}
+      </NavLink>
+    </NavDropdown.Item>
+  )
+}
+
 export const NavbarLinkAI: React.FC<
   React.PropsWithChildren<{
     handleClick?: any

components/about/Testimony21stCentury/Testimony21stCentury.tsx

@@ -0,0 +1,184 @@
+import { useTranslation } from "next-i18next"
+import { Container, Row, Col } from "../../bootstrap"
+import {
+  MemberItem,
+  Divider,
+  DescrContainer,
+  NameContainer,
+  PageTitle,
+  PageDescr,
+  SectionContainer,
+  SectionTitle
+} from "../../shared/CommonComponents"
+
+const Testimony21stCentury = () => {
+  const { t } = useTranslation("mapleAI")
+
+  return (
+    <Container>
+      <Row>
+        <Col>
+          <PageTitle>{t("title")}</PageTitle>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <PageDescr>{t("mission-statement")}</PageDescr>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{t("section1.title")}</SectionTitle>
+            <DescrContainer className="py-3 px-4">
+              {t("section1.desc1")}
+            </DescrContainer>
+            <DescrContainer className="pb-1 px-4">
+              <ul>
+                <li className="pb-3">
+                  <b>{t("section1.desc2Bold")}</b> {t("section1.desc2Main")}
+                </li>
+                <li>
+                  <b>{t("section1.desc3Bold")}</b> {t("section1.desc3Main")}
+                </li>
+              </ul>
+            </DescrContainer>
+            <DescrContainer className="pb-3 px-4">
+              <b>{t("legal-advisory")}</b>
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{t("section2.title")}</SectionTitle>
+            <MemberItem
+              name={t("section2.desc1Title")}
+              descr={t("section2.desc1Main")}
+            />
+            <Divider />
+            <MemberItem
+              name={t("section2.desc2Title")}
+              descr={t("section2.desc2Main")}
+            />
+            <Divider />
+            <MemberItem
+              name={t("section2.desc3Title")}
+              descr={t("section2.desc3Main")}
+            />
+            <Divider />
+            <MemberItem
+              name={t("section2.desc4Title")}
+              descr={t("section2.desc4Main")}
+            />
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{t("section3.title")}</SectionTitle>
+            <MemberItem
+              name={t("section3.desc1Title")}
+              descr={t("section3.desc1Main")}
+            />
+            <DescrContainer className="pb-3 px-4">
+              <b>{t("legal-advisory")}</b>
+            </DescrContainer>
+            <Divider />
+            <MemberItem
+              name={t("section3.desc2Title")}
+              descr={t("section3.desc2Main")}
+            />
+            <Divider />
+            <NameContainer className="py-3 px-4">
+              {t("section3.desc3Title")}
+            </NameContainer>
+            <DescrContainer className="pb-3 px-4">
+              {t("section3.desc3Pre")} <i>{t("section3.desc3Italic")}</i>{" "}
+              {t("section3.desc3Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{t("section4.title")}</SectionTitle>
+            <NameContainer className="py-3 px-4">
+              {t("section4.sub1.title")}
+            </NameContainer>
+            <DescrContainer className="pb-3 px-4">
+              {t("section4.sub1.desc1")}
+            </DescrContainer>
+            <DescrContainer className="pb-3 px-4">
+              {t("section4.sub1.desc2")}
+            </DescrContainer>
+            <DescrContainer className="pb-1 px-4">
+              <ul>
+                <li className="pb-3">
+                  <b>{t("section4.sub1.desc3Bold")}</b>{" "}
+                  {t("section4.sub1.desc3Main")}
+                </li>
+                <li className="pb-3">
+                  <b>{t("section4.sub1.desc4Bold")}</b>{" "}
+                  {t("section4.sub1.desc4Main")}
+                </li>
+                <li>
+                  <b>{t("section4.sub1.desc5Bold")}</b>{" "}
+                  {t("section4.sub1.desc5Main")}
+                </li>
+              </ul>
+            </DescrContainer>
+            <Divider />
+            <NameContainer className="py-3 px-4">
+              {t("section4.sub2.title")}
+            </NameContainer>
+            <DescrContainer className="pb-1 px-4">
+              <ul>
+                <li className="pb-3">
+                  <b>{t("section4.sub2.desc1Bold")}</b>{" "}
+                  {t("section4.sub2.desc1Main")}
+                </li>
+                <li className="pb-3">
+                  <b>{t("section4.sub2.desc2Bold")}</b>{" "}
+                  {t("section4.sub2.desc2Main")}
+                </li>
+                <li>
+                  <b>{t("section4.sub2.desc3Bold")}</b>{" "}
+                  {t("section4.sub2.desc3Main")}
+                </li>
+              </ul>
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{t("section5.title")}</SectionTitle>
+            <DescrContainer className="py-3 px-4">
+              {t("section5.desc1")}
+            </DescrContainer>
+            <DescrContainer className="pb-1 px-4">
+              <ul>
+                <li className="pb-3">
+                  <b>{t("section5.desc2Bold")}</b> {t("section5.desc2Main")}
+                </li>
+                <li className="pb-3">
+                  <b>{t("section5.desc3Bold")}</b> {t("section5.desc3Main")}
+                </li>
+                <li>
+                  <b>{t("section5.desc4Bold")}</b> {t("section5.desc4Main")}
+                </li>
+              </ul>
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default Testimony21stCentury

pages/about/testimony-in-the-21st-century.tsx

@@ -0,0 +1,21 @@
+import { createPage } from "../../components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+import Testimony21stCentury from "components/about/Testimony21stCentury/Testimony21stCentury"
+
+export default createPage({
+  title: "Testimony in the 21st Century",
+  Page: () => {
+    return (
+      <div>
+        <Testimony21stCentury />
+      </div>
+    )
+  }
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "testimony21stCentury"
+])

public/locales/en/common.json

@@ -56,6 +56,7 @@
   "maple_abbr": "MAPLE",
   "maple_fullName": "Massachusetts Platform for Legislative Engagement",
   "navigation": {
+    "testimony21stCentury": "Testimony in the 21st Century",
     "accountProfile": "Profile",
     "additionalResources": "Additional Resources",
     "ai": "How MAPLE Uses AI",

public/locales/en/footer.json

@@ -14,6 +14,7 @@
     "team": "Team",
     "faq": "FAQ",
     "mapleAI": "How MAPLE Uses AI",
+    "testimony21stCentury": "Testimony in the 21st Century",
     "socials": {
       "instagram": "Follow MAPLE on Intagram",
       "linkedin":"Follow MAPLE on LinkedIn",

public/locales/en/testimony21stCentury.json

@@ -0,0 +1,68 @@
+{
+  "title": "How MAPLE Uses AI",
+  "mission-statement": "Our commitment is to provide you with the most reliable and accessible legislative information using cutting-edge AI technology. Stay tuned for continuous improvements and new features as we enhance MAPLE’s AI capabilities.",
+  "legal-advisory": "We advise users to consult the full text of the legislation and official resources for the most accurate and comprehensive understanding.",
+  "section1": {
+    "title": "How MAPLE Uses AI",
+    "desc1": "We use Artificial Intelligence (AI) on MAPLE to help you quickly understand legislative information and navigate to policies that interest you. Right now, we use AI in two ways:",
+    "desc2Bold": "Bill Summaries",
+    "desc2Main": "We use AI to generate concise summaries for each piece of legislation. These summaries help you grasp the essentials of a bill without wading through dense legal text.",
+    "desc3Bold": "Topic Tags",
+    "desc3Main": "AI tags each bill with relevant topics, making it easier for you to find related legislation and understand the broader context. These tags categorize bills by subject matter, allowing for efficient searching and filtering."
+  },
+  "section2": {
+    "title": "Our Guiding Principles",
+    "desc1Title": "Transparency",
+    "desc1Main": "We are open about how our AI systems function and their limitations, so that users understand the extent and limits of AI's role in enhancing their legislative engagement.",
+    "desc2Title": "Accessibility",
+    "desc2Main": "We seek to make legislative information easily understandable and navigable for everyone.",
+    "desc3Title": "Accuracy & Fairness",
+    "desc3Main": "We strive to minimize biases and value impartiality in our use of AI, acknowledging that AI is a tool to aid but not replace detailed review.",
+    "desc4Title": "Community Input",
+    "desc4Main": "We integrate feedback from a range of stakeholders to build our AI deployments, and solicit community input to continually improve our use of AI. You can email any questions or ideas to [email protected]."
+  },
+  "section3": {
+    "title": "Limitations and Risks of AI",
+    "desc1Title": "Limitations",
+    "desc1Main": "While we believe AI significantly enhances your experience on MAPLE, it has limitations. AI-generated summaries and tags are based on limited information about the bill in question and existing law and may not always capture every nuance or recent events. Legislative information is also complex and can use archaic or legal language that is difficult for AI models to properly understand and summarize. Finally, like us humans, AI can make mistakes in both understanding and explaining policies.",
+    "desc2Title": "Risks",
+    "desc2Main": "If the bill summaries produced by AI models are wrong or misleading, they present a risk of misinforming the public about legislative proposals. We have mitigated risk by testing and iterating on the implementation of our models in collaboration with academic researchers at Boston University’s Spark! program. While we cannot guarantee that the model will never make mistakes, we have found it to be generally accurate and helpful in the summaries it provides.",
+    "desc3Title": "Data privacy",
+    "desc3Pre": "We only run",
+    "desc3Italic": "publicly available",
+    "desc3Main": "information through AI models and do not expose any private or sensitive data to AI models or third party APIs. Data we do pass through AI models includes bill and law text. In the future, we may also use AI to summarize testimony documents that you publish to MAPLE, but only testimony that you have chosen to display publicly. Like other information on public websites, this text is already available to be accessed and processed by any search engine, web crawler, or AI model."
+  },
+  "section4": {
+    "title": "About Our Model",
+    "sub1": {
+      "title": "Overview",
+      "desc1": "Our AI features are built with advanced language processing technologies. Using a state-of-the-art language model, we generate summaries and tags by analyzing the full text of each bill and associated metadata, including the relevant sections of the existing law.",
+      "desc2": "Key features of our AI deployment include:",
+      "desc3Bold": "Real-time Summaries:",
+      "desc3Main": "AI generates summaries as new bills are filed or updated.",
+      "desc4Bold": "Dynamic Tagging:",
+      "desc4Main": "Bills are tagged with multiple relevant topics, helping you find similar legislation quickly.",
+      "desc5Bold": "Scalability:",
+      "desc5Main": "Our system is designed to handle the large volume of bills in each legislative session, ensuring timely and accurate updates."
+    },
+    "sub2": {
+      "title": "Technical details",
+      "desc1Bold": "Backend Integration:",
+      "desc1Main": "We use Python functions to call the AI model, integrating seamlessly with our backend systems.",
+      "desc2Bold": "API Utilization:",
+      "desc2Main": "OpenAI’s GPT-4o model powers our AI capabilities, with the ability to automatically ingest and interpret about 100,000 words of bill and law text at once, and to query additional information on demand from our database.",
+      "desc3Bold": "Data Management:",
+      "desc3Main": "Summaries and tags are stored in our backend, timestamped, and linked to specific bills and legislative sessions. We may regenerate them periodically as modeling capabilities evolve."
+    }
+  },
+  "section5": {
+    "title": "Future Deployments of AI",
+    "desc1": "We are continually exploring new ways to leverage AI to improve your experience on MAPLE. Future enhancements may include more personalized recommendations, deeper insights into legislative trends, and interactive tools to engage with legislative data more effectively. Here are some projects we are considering:",
+    "desc2Bold": "Testimony Summarizer:",
+    "desc2Main": "AI will summarize all of the testimonies on a single bill or related bills, and identify points of consensus, disagreement and notable points.",
+    "desc3Bold": "Testimony-Drafting Copilot:",
+    "desc3Main": "AI will help a user organize their thoughts, compose appropriate testimony and cite relevant sources.",
+    "desc4Bold": "Bill Comparison Tool:",
+    "desc4Main": "AI will identify and compare similar bills, summarizing their commonalities and distinctions to help you understand the differences in legislative approaches."
+  }
+}