start work on explainer page

app.py

@@ -250,7 +250,7 @@ def process_handler(text):
           'base': text,
           'morph': morph_text,
           'morph_simplified': morph_simplified_text,
-          'split': case_text
+          'case': case_text
         },
         'tokenized':{
           'base': tokenize_base(text),

src/aineid/src/{App.tsx → App.jsx}

@@ -1,4 +1,5 @@
 import * as React from "react"
+import {useState} from 'react'
 import {
   ChakraProvider,
   Box,
@@ -14,17 +15,25 @@ import { ColorModeSwitcher } from "./ColorModeSwitcher"
 import { Logo } from "./Logo"
 import TopBar from "./TopBar"
 import MainPage from "./MainPage"
+import ProcessExplainer from './ProcessExplainer'
 export const App = () => {
   const bg = useColorModeValue("brand.800", "brand.200");
+  const [currentPage, setCurrentPage] = useState("main")
+  const [processInputText, setProcessInputText] = useState("Post hoc, ergo propter hoc");
+  const [tokenized, setTokenized] = useState({});
+  const [isProcessLoading, setIsProcessLoading] = useState(false);
+  let processState = {processInputText, setProcessInputText, tokenized, setTokenized, isProcessLoading, setIsProcessLoading};
 
   return (
     <ChakraProvider theme={theme}>
       <Flex direction="column" overflow='hidden'>
         <Box>
-          <TopBar />
+          <TopBar currentPage={currentPage} setCurrentPage={setCurrentPage}/>
         </Box>
         <Box pt={73} mb={-73} >
-          <MainPage />
+          {
+            currentPage == 'main' ? <MainPage /> : <ProcessExplainer state={processState}/>
+          }
         </Box>
 
       </Flex>

src/aineid/src/ProcessExplainer.jsx

@@ -0,0 +1,205 @@
+import React, { useState } from "react";
+import {
+  Input,
+  useToast,
+} from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Heading,
+  useColorMode,
+  Textarea,
+  Text,
+  Button,
+  Spinner,
+  Alert,
+  AlertIcon,
+  Code,
+  Stack
+} from "@chakra-ui/react";
+import axios from "axios";
+import { Link } from '@chakra-ui/react'
+function ProcessExplainer({state}) {
+
+  let {processInputText, setProcessInputText, tokenized, setTokenized, isProcessLoading, setIsProcessLoading} = state;
+  // const [processInputText, setProcessInputText] = useState("Post hoc, ergo propter hoc");
+  // const [tokenized, setTokenized] = useState({});
+  // const [isProcessLoading, setIsProcessLoading] = useState(false);
+  const { colorMode } = useColorMode();
+
+  const bgColor = { light: "white", dark: "gray.800" };
+  const placeholderColor = { light: "gray.400", dark: "gray.500" };
+
+  const toast = useToast();
+
+  const handleInputChange = (event) => {
+    setProcessInputText(event.target.value);
+  };
+
+  const nameMap = {
+    base: "Raw input",
+    case: "Case-Split",
+    morph: "Morphological Split",
+    morph_simplified: "Simplified Morphological Split"
+  };
+
+  const handleButtonClick = async () => {
+    setIsProcessLoading(true);
+
+    try {
+      axios
+        .get(`https://grosenthal-latin-english-eco.hf.space/process/?text=${processInputText}`)
+        .then((response) => {
+          setIsProcessLoading(false);
+          setTokenized(JSON.parse(response.data));
+        })
+        .catch((error) => {
+          setIsProcessLoading(false);
+          console.error(error);
+        });
+
+
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: error.message,
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+
+    setIsProcessLoading(false);
+  };
+
+  return (
+    <Box mt="0rem">
+      <Flex
+        justify="center"
+        minH="100vh"
+        bgGradient={
+          colorMode == "dark"
+            ? "linear(to-b, teal.400, teal.800)"
+            : "linear(red.100 0%, orange.100 25%, yellow.100 50%)"
+        }
+        mt={0}
+      >
+        <Flex direction="column" align="center">
+          <Box maxW="6xl" p={8} rounded="md" textAlign="center" mb={4}>
+            <Box>
+              <Heading as="h2" size="4xl" mb={8}>
+                About
+              </Heading>
+              <Text fontSize="xl" mb={8}>
+                AI doesn't have an intrinsic understanding of language. Explore the process that your input undergoes to be translated.
+              </Text>
+            </Box>
+          </Box>
+          <Box
+            maxW="4xl"
+            bg={bgColor[colorMode]}
+            boxShadow="xl"
+            p={8}
+            rounded="md"
+            textAlign="center"
+          >
+            {!tokenized['processed_texts'] || isProcessLoading ? (
+              <Box>
+                <Textarea
+                  placeholder="Latin Input"
+                  size="lg"
+                  _placeholder={{ color: placeholderColor[colorMode] }}
+                  value={processInputText}
+                  onChange={handleInputChange}
+                  isInvalid={/\d/.test(processInputText)}
+                  resize="vertical"
+                  mb={4}
+                />
+                {/\d/.test(processInputText) &&
+                  <Alert status='warning' mb={6}>
+                    <AlertIcon />
+                    You have English numbers in your source text - these should not be found in Latin source. Either remove them or be prepared to receive corrupted translations.
+                  </Alert>}
+                {
+                  isProcessLoading ?
+                    <Spinner size="xl" />
+                    :
+                    <Button colorScheme="teal" size="lg" onClick={handleButtonClick}>
+                      Submit
+                    </Button>
+                }
+
+              </Box>
+            ) : (
+              <Box>
+                <Heading as="h2" size="xl" mb={4}>
+                  Pre-processing
+                </Heading>
+                <Text textAlign={"left"}>
+                  First, your text needs to be pre-processed. For the base model, this mostly consists of normalizing letters (turning а̄ into a and œ into oe).
+                  However, for the other models, this is a far more advanced process. After normalizing, we use the tool {'  '}
+                  <Link color='teal.500' href='https://latin-words.com/'>
+                    Whitaker's Words
+                  </Link>
+                  {'  '}  to perform lookups on each word. An example output for the word "amat" is:
+                  <Stack direction='column' textAlign={"left"} mt="3" mb="3">
+                    <Code>
+                      am.at                V      1 1 PRES ACTIVE  IND 3 S
+                    </Code>
+                    <Code>
+                      amo, amare, amavi, amatus  V (1st)   [XXXAO]
+                    </Code>
+                    <Code>
+                      love, like; fall in love with; be fond of; have a tendency to;
+                    </Code>
+                  </Stack>
+                </Text>
+                {"\n"}
+                <Text textAlign={"left"}>
+
+                  This provides us with extremely useful <Link color='teal.500' href='https://en.wikipedia.org/wiki/Morphology_(linguistics)'> Morphological Information</Link> on the word.
+
+                  First, we get a <Text as="span" fontWeight={"bold"}>stem-case split:</Text> "am" is the stem and "at" is the case - all forms stemming from "am" will have similar root meaning (love), but will be different in their specific inflection implying voice, person, number, and more.
+                  We use this information for the "Case-Split" model, by splitting every inflected word into two - the stem and the case marked by "CASE_" at the start. Words that do not have any variant forms stay the same. "amat" would be converted to "am CASE_at".
+                </Text>
+
+                <Text textAlign={"left"} mt="3">
+
+                  We also get outright <Text as="span" fontWeight={"bold"}>morphological splits:</Text> everything on the top line of the Whitaker's Words output, with spaces removed - V11PRESACTIVEIND3S.
+                  This seemingly nonsensical string of characters tells us that "amat" is a 3rd Person Singular Present Active Indicative form of "amo", which is a 1st conjugation 1st type verb. We want to provide all of this rich
+                  information about the usage of the word to the model, so in the same way, we convert the words - this time to the root and morphology: "amat" turns into "am V11PRESACTIVEIND3S". Given that no Latin word
+                  has a digit in it, we can automatically distinguish these words in the model without having to add CASE_ to the front of them. 
+                  We use this information for the "Morphological Split" model.
+                </Text>
+
+                <Text textAlign={"left"} mt="3">
+
+                 It seems that the morphological information we acquire might be, indeed, a little too specialized - does the model really care whether the noun is 1st declension or 2nd? 
+                 To assuage those worries, we have a <Text as="span" fontWeight={"bold"}>simplified morphological splits</Text> model, which takes the information of the morphological split model and throws away all the unnecessary.
+                 We make the morphological strings more readable and throw away the seemingly unecessary information, and result in "am Verb_Present_Active_Indicative_Third_Singular" - the morphology is still only one word, though.
+                </Text>
+
+                <Text textAlign={"left"} mt="3">
+
+                Your text, after pre-processing in the various methods, looks like:
+                {Object.entries(tokenized['processed_texts'] || {}).map(([key, value]) => (
+                  <Box key={key} mb={4}>
+                    <Text fontWeight="bold">{nameMap[key]}:</Text>
+                    <Text>{value}</Text>
+                  </Box>
+                ))}
+                </Text>
+                <Button colorScheme="teal" size="lg" onClick={() => setTokenized({})}>
+                  Translate another text
+                </Button>
+
+              </Box>
+            )}
+          </Box>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}
+
+export default ProcessExplainer;

src/aineid/src/{TopBar.tsx → TopBar.jsx}

@@ -2,7 +2,7 @@ import { Box, Flex, useColorMode } from "@chakra-ui/react";
 import { ColorModeSwitcher } from "./ColorModeSwitcher";
 import { Heading } from "@chakra-ui/layout";
 
-function TopBar() {
+function TopBar({ currentPage, setCurrentPage }) {
   const { colorMode } = useColorMode();
   const textColor = {
     light: "gray.700",
@@ -30,13 +30,27 @@ function TopBar() {
           fontSize="xl"
           fontWeight="bold"
           color={textColor[colorMode]}
-          textAlign="center"
+          // textAlign="center"
           w="100%"
           maxW="400px"
           mx="auto"
+          onClick={() => setCurrentPage("main")}
         >
           AIneid
         </Heading>
+
+        <Heading
+          fontSize="l"
+          fontWeight="bold"
+          color={textColor[colorMode]}
+          textAlign="right"
+          w="100%"
+          maxW="400px"
+          mx="auto"
+          onClick={() => setCurrentPage("about")}
+        >
+          About
+        </Heading>
         <ColorModeSwitcher justifySelf="flex-end" />
       </Flex>
     </Box>