try to add frontend

Dockerfile

@@ -1,7 +1,7 @@
 # read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
 # you will also find guides on how best to write your Dockerfile
 
-FROM python:3.9
+FROM nikolaik/python-nodejs:python3.9-nodejs16
 
 WORKDIR /code
 COPY lib/libgnat-4.9.so /usr/lib
@@ -22,7 +22,13 @@ RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 
 COPY --chown=user . .
 
+COPY package.json yarn.lock ./
+COPY ./src ./src
+COPY ./public ./public
+RUN yarn install
+RUN yarn build
 
+RUN ls 
 
 RUN python -c "from cltk.data.fetch import FetchCorpus; corpus_downloader = FetchCorpus(language='lat');corpus_downloader.import_corpus('lat_models_cltk')"
 

app.py

@@ -17,6 +17,7 @@ from cltk.text.processes import DefaultPunctuationRemovalProcess
 from fastapi import FastAPI
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
 from typing import Optional
 import json
 from transformers import AutoTokenizer, AutoModelForSeq2SeqLM
@@ -25,6 +26,15 @@ import json
 import os
 
 app = FastAPI()
+origins = ["*"]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 @dataclass
 class LatinWhitakersWordsMorphology(Process):

src/aineid/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/aineid/README.md

@@ -0,0 +1,59 @@
+This project was bootstrapped with
+[Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br /> Open
+[http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br /> You will also see any lint errors
+in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br /> See the section
+about
+[running tests](https://facebook.github.io/create-react-app/docs/running-tests)
+for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br /> It correctly bundles
+React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br /> Your app is
+ready to be deployed!
+
+See the section about
+[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
+more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can
+`eject` at any time. This command will remove the single build dependency from
+your project.
+
+Instead, it will copy all the configuration files and the transitive
+dependencies (webpack, Babel, ESLint, etc) right into your project so you have
+full control over them. All of the commands except `eject` will still work, but
+they will point to the copied scripts so you can tweak them. At this point
+you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for
+small and middle deployments, and you shouldn’t feel obligated to use this
+feature. However we understand that this tool wouldn’t be useful if you couldn’t
+customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the
+[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

src/aineid/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "aineid",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^2.5.3",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^12.20.55",
+    "@types/react": "^18.0.29",
+    "@types/react-dom": "^18.0.11",
+    "axios": "^1.3.4",
+    "framer-motion": "^6.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^3.11.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

src/aineid/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

src/aineid/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/aineid/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/aineid/src/App.test.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { render } from "./test-utils"
+import { App } from "./App"
+
+test("renders learn react link", () => {
+  render(<App />)
+  const linkElement = screen.getByText(/learn chakra/i)
+  expect(linkElement).toBeInTheDocument()
+})

src/aineid/src/App.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import {
+  ChakraProvider,
+  Box,
+  Text,
+  Link,
+  VStack,
+  Spacer,
+  Flex,
+  theme,
+  useColorModeValue,
+} from "@chakra-ui/react"
+import { ColorModeSwitcher } from "./ColorModeSwitcher"
+import { Logo } from "./Logo"
+import TopBar from "./TopBar"
+import MainPage from "./MainPage"
+export const App = () => {
+  const bg = useColorModeValue("brand.800", "brand.200");
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Flex direction="column" overflow='hidden'>
+        <Box>
+          <TopBar />
+        </Box>
+        <Box pt={73} mb={-73} >
+          <MainPage />
+        </Box>
+
+      </Flex>
+    </ChakraProvider>
+  )
+}

src/aineid/src/ColorModeSwitcher.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import {
+  useColorMode,
+  useColorModeValue,
+  IconButton,
+  IconButtonProps,
+} from "@chakra-ui/react"
+import { FaMoon, FaSun } from "react-icons/fa"
+
+type ColorModeSwitcherProps = Omit<IconButtonProps, "aria-label">
+
+export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = (props) => {
+  const { toggleColorMode } = useColorMode()
+  const text = useColorModeValue("light", "dark")
+  const SwitchIcon = useColorModeValue(FaMoon, FaSun)
+
+  return (
+    <IconButton
+      size="md"
+      fontSize="lg"
+      variant="ghost"
+      color="current"
+      marginLeft="2"
+      onClick={toggleColorMode}
+      icon={<SwitchIcon />}
+      aria-label={`Switch to ${text} mode`}
+      {...props}
+    />
+  )
+}

src/aineid/src/Logo.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import {
+  chakra,
+  keyframes,
+  ImageProps,
+  forwardRef,
+  usePrefersReducedMotion,
+} from "@chakra-ui/react"
+import logo from "./logo.svg"
+
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`
+
+export const Logo = forwardRef<ImageProps, "img">((props, ref) => {
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const animation = prefersReducedMotion
+    ? undefined
+    : `${spin} infinite 20s linear`
+
+  return <chakra.img animation={animation} src={logo} ref={ref} {...props} />
+})

src/aineid/src/MainPage.jsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import {
+  Box,
+  Flex,
+  Heading,
+  useColorMode,
+  Input,
+  Textarea,
+  Text,
+  Button,
+} from "@chakra-ui/react";
+import axios from "axios";
+
+function MainPage() {
+  const { colorMode } = useColorMode();
+
+  const bgColor = { light: "white", dark: "gray.800" };
+  const textColor = { light: "gray.700", dark: "gray.50" };
+  const placeholderColor = { light: "gray.400", dark: "gray.500" };
+
+  const [inputText, setInputText] = useState("");
+  const [translation, setTranslation] = useState({});
+
+  const handleInputChange = (event) => {
+    setInputText(event.target.value);
+  };
+
+  const handleSubmit = () => {
+    axios
+      .get(`https://grosenthal-latin-english-eco.hf.space/translate_all/?text=${inputText}`)
+      .then((response) => {
+        setTranslation(response.data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  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}>
+                The first open-source Latin to English translation system
+              </Heading>
+              <Text fontSize="xl" mb={8}>
+                AIneid beats Google Translate while offering a customizable and
+                transparent translation pipeline. The translations are not
+                guaranteed to be perfect.
+              </Text>
+            </Box>
+          </Box>
+          <Box
+            maxW="xl"
+            bg={bgColor[colorMode]}
+            boxShadow="xl"
+            p={8}
+            rounded="md"
+            textAlign="center"
+          >
+            {Object.keys(translation).length === 0 ? (
+              <Box>
+                <Textarea
+                  placeholder="Latin to Translate"
+                  size="lg"
+                  _placeholder={{ color: placeholderColor[colorMode] }}
+                  value={inputText}
+                  onChange={handleInputChange}
+                  resize="vertical"
+                  mb={4}
+                />
+                <Button colorScheme="teal" size="lg" onClick={handleSubmit}>
+                  Submit
+                </Button>
+              </Box>
+            ) : (
+              <Box>
+                {Object.entries(translation).map(([key, value]) => (
+                  <Box key={key} mb={4}>
+                    <Text fontWeight="bold">{key}:</Text>
+                    <Text>{value[0]}</Text>
+                  </Box>
+                ))}
+                <Button colorScheme="teal" size="lg" onClick={() => setTranslation({})}>
+                  Translate another text
+                </Button>
+              </Box>
+            )}
+          </Box>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}
+
+export default MainPage;

src/aineid/src/TopBar.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, useColorMode } from "@chakra-ui/react";
+import { ColorModeSwitcher } from "./ColorModeSwitcher";
+import { Heading } from "@chakra-ui/layout";
+
+function TopBar() {
+  const { colorMode } = useColorMode();
+  const textColor = {
+    light: "gray.700",
+    dark: "gray.50"
+  };
+  
+  return (
+    <Box
+      pos="fixed"
+      w="100%"
+      bg={colorMode === "light" ? "white" : "gray.800"}
+      borderBottom="1px"
+      borderColor={colorMode === "light" ? "gray.200" : "gray.900"}
+      zIndex="docked"
+      as="header"
+      mb={8}
+    >
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        py={4}
+        px={8}
+      >
+        <Heading
+          fontSize="xl"
+          fontWeight="bold"
+          color={textColor[colorMode]}
+          textAlign="center"
+          w="100%"
+          maxW="400px"
+          mx="auto"
+        >
+          AIneid
+        </Heading>
+        <ColorModeSwitcher justifySelf="flex-end" />
+      </Flex>
+    </Box>
+  );
+}
+
+export default TopBar;

src/aineid/src/index.tsx

@@ -0,0 +1,29 @@
+import { ColorModeScript } from "@chakra-ui/react"
+import * as React from "react"
+import * as ReactDOM from "react-dom/client"
+import { App } from "./App"
+import reportWebVitals from "./reportWebVitals"
+import * as serviceWorker from "./serviceWorker"
+
+
+const container = document.getElementById("root")
+if (!container) throw new Error('Failed to find the root element');
+const root = ReactDOM.createRoot(container)
+
+root.render(
+  <React.StrictMode>
+    <ColorModeScript />
+    <App />
+  </React.StrictMode>,
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+serviceWorker.unregister()
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()
+

src/aineid/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/aineid/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals"
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals

src/aineid/src/serviceWorker.ts

@@ -0,0 +1,146 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === "localhost" ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === "[::1]" ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
+)
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void
+  onUpdate?: (registration: ServiceWorkerRegistration) => void
+}
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener("load", () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://cra.link/PWA",
+          )
+        })
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) {
+          return
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === "installed") {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://cra.link/PWA.",
+              )
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It is the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log("Content is cached for offline use.")
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch((error) => {
+      console.error("Error during service worker registration:", error)
+    })
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { "Service-Worker": "script" },
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get("content-type")
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf("javascript") === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log(
+        "No internet connection found. App is running in offline mode.",
+      )
+    })
+}
+
+export function unregister() {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister()
+      })
+      .catch((error) => {
+        console.error(error.message)
+      })
+  }
+}

src/aineid/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom"

src/aineid/src/test-utils.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import { render, RenderOptions } from "@testing-library/react"
+import { ChakraProvider, theme } from "@chakra-ui/react"
+
+const AllProviders = ({ children }: { children?: React.ReactNode }) => (
+  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+)
+
+const customRender = (ui: React.ReactElement, options?: RenderOptions) =>
+  render(ui, { wrapper: AllProviders, ...options })
+
+export { customRender as render }

src/aineid/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "useUnknownInCatchVariables": false
+  },
+  "include": [
+    "src"
+  ]
+}