lweymann's frontend

README.md

@@ -8,7 +8,7 @@ Support for language-dependent components has been added for dozens of languages
 
 Automated reports generated out of the tool that is actioned from a web application to which a corpus can be uploaded. Once processed, the viewer will plot the analysis and automatically generate a PDF report containing the same information. 
 
-<img alt="Data Analytics Viewer" src="https://github.com/hplt-project/data-analytics-tool/blob/main/img/data-viewer.png" width=600 />
+<img alt="Data Analytics Viewer" src="https://github.com/lukasweymann/data-analytics-tool/blob/main/img/bilingual.png" width=600 />
 
 Icon: https://thenounproject.com/icon/fingerprint-3530285/
 
@@ -17,6 +17,7 @@ Running the docker:
 * sudo docker-compose build
 * sudo docker-compose up
 
+
 URLS to upload and view a dataset: 
 * Uploader: localhost:8000/uploader.html
 * Viewer: localhost:8000/viewer.html
@@ -44,7 +45,7 @@ Code and data are located in `/work`
 
 - Parallel English-Norwegian HPLT corpus from initial data release: it shows that deduplication needs to be addressed as one of the most important issues.
 
-<img alt="Data Analytics Viewer" src="https://github.com/hplt-project/data-analytics-tool/blob/main/img/HPLT-en-nn.png" width=600 />
+<img alt="Data Analytics Viewer" src="https://github.com/lukasweymann/data-analytics-tool/blob/main/img/monolingual.png" width=600 />
 
 
 - Monolingual Turkish corpus from Bianet: it shows that at least a 12% of the corpus is not in Turkish.

css/footer.css

@@ -1,6 +1,6 @@
 .footer {
   display: flex;
-  margin: 60px 80px 30px 80px;
+  margin: 60px 120px 30px 120px;
 }
 .eu-flag {
   width: 50px;

css/index.css

@@ -1,6 +1,14 @@
+body {
+  font-family: "Inter", sans-serif;
+}
 .navbar-brand {
   margin-left: -7px;
 }
+.single-nav-link {
+  margin-left: 30px;
+  text-decoration: none;
+  color: rgb(140, 5, 5);
+}
 .cards-container {
   display: flex;
 }
@@ -9,7 +17,7 @@
   margin-right: 15px;
 }
 .main-container {
-  padding: 10px 80px;
+  padding: 10px 120px;
 }
 .form-group input:not([type="checkbox"]):not([type="radio"]) {
   min-width: 240px;
@@ -66,3 +74,125 @@
     padding: 10px 30px;
   }
 }
+
+.button-26,
+.button-27,
+.button-28 {
+  appearance: button;
+  background-color: #1652f0;
+  border: 1px solid #1652f0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1.15;
+  overflow: visible;
+  padding: 12px 16px;
+  position: relative;
+  text-align: center;
+  text-transform: none;
+  transition: all 80ms ease-in-out;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: fit-content;
+  margin-right: 10px;
+  text-decoration: none;
+}
+.button-27 {
+  background-color: transparent;
+  color: #1652f0;
+}
+.button-28 {
+  background-color: #e1ecf4;
+  border: 1px solid #7aa7c7;
+  color: #39739d;
+}
+.button-26:disabled {
+  opacity: 0.5;
+}
+
+.button-26:focus {
+  outline: 0;
+}
+
+.button-26:hover {
+  background-color: #0a46e4;
+  border-color: #0a46e4;
+}
+
+.button-26:active {
+  background-color: #0039d7;
+  border-color: #0039d7;
+}
+.button-8 {
+  background-color: #e1ecf4;
+  border-radius: 3px;
+  border: 1px solid #7aa7c7;
+  box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0 0 inset;
+  box-sizing: border-box;
+  color: #39739d;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", "Liberation Sans",
+    sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.15385;
+  margin: 0;
+  outline: none;
+  padding: 8px 0.8em;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.button-8:hover,
+.button-8:focus {
+  background-color: #b3d3ea;
+  color: #2c5777;
+}
+
+.button-8:focus {
+  box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15);
+}
+
+.button-8:active {
+  background-color: #a0c7e4;
+  box-shadow: none;
+  color: #2c5777;
+}
+.form-label {
+  margin-bottom: 3px;
+}
+.file-cont {
+  margin-bottom: 10px;
+}
+.name-cont {
+  margin-right: 20px;
+}
+.form-control {
+  width: 240px;
+}
+.file-input {
+  width: 300px;
+}
+.uploader-buttons {
+  margin-top: 30px;
+}
+.dropdown-cont {
+  width: 220px;
+  margin-right: 10px;
+}
+.lang-inputs {
+  display: flex;
+}
+.inputs {
+  margin: 15px 0;
+}

front/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+../yaml_dir
+../uploaded_corpora/

front/Dockerfile

@@ -0,0 +1,36 @@
+FROM node:18-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN  npm install --production
+
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["npm", "start"]

front/README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.