Refactor web app

src/web/backend/app.py

@@ -2,13 +2,12 @@
 import random
 import csv
 from flask_cors import CORS
-from flask import request, jsonify, make_response
+from flask import request, jsonify
 from flask import Flask
 
 import sys
 import os
 import argparse
-import torch
 
 # needs to be before importing Review and Lda
 sys.path.append(os.path.abspath(os.path.join(
@@ -21,6 +20,7 @@
 from aml.rnd import Rnd
 from aml.bert import BERT
 
+model_names = ['lda', 'bert', 'btm', 'rnd', 'ctm']
 
 __dirname = os.path.dirname(__file__)
 
@@ -92,5 +92,21 @@ def get_random_row_from_csv():
         return jsonify({'error': '[Server]: reviews.csv not found'}), 500
 
 
+@app.route('/get_models', methods=['GET'])
+def get_models():
+    path = os.path.join(__dirname, 'models')
+    models = os.listdir(path)
+    result = {}
+
+    for lang in models:
+        model_path = os.path.join(path, lang)
+        models = os.listdir(model_path)
+        lang_ = lang.split('.')[-1] if '.' in lang else 'eng'
+
+        result[lang_] = list(filter(lambda x: x in model_names, models))
+
+    return jsonify(result)
+
+
 if __name__ == '__main__':
     app.run(debug=True)

src/web/frontend/.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+        "no-namespace": 0
+    }
+}

src/web/frontend/Components/Chart.jsx → src/web/frontend/Components/Chart.tsx

@@ -7,8 +7,10 @@ import {
   Tooltip,
   Legend,
 } from "chart.js";
+
 import { Bar } from "react-chartjs-2";
-import React, { useState, useEffect } from "react";
+import React from "react";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -19,7 +21,7 @@ ChartJS.register(
 );
 
 export const options = {
-  indexAxis: "y",
+  indexAxis: "y" as const,
   elements: {
     bar: {
       borderWidth: 2,
@@ -28,7 +30,7 @@ export const options = {
   responsive: true,
   plugins: {
     legend: {
-      position: "right",
+      position: "right" as const,
     },
     title: {
       display: true,
@@ -37,9 +39,7 @@ export const options = {
   },
 };
 
-export default function Example(props) {
-  console.log("output", props.output);
-  // setChartData(props.output);
-
-  return <Bar options={options} data={props.output} />;
-}
+export const Chart = (props: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  output: any;
+}) => <Bar options={options} data={props.output} />;

src/web/frontend/hooks/useFetch.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios from "axios";
+import { RD } from "prelude";
+import React from "react";
+
+export const useFetch = <Data, Params extends Record<string, any> = object>({
+  params,
+  url,
+}: {
+  url: string;
+  params?: Params;
+}) => {
+  const [data, setData] = React.useState<RD.RemoteData<string, Data>>(RD.Init);
+
+  React.useEffect(() => {
+    setData(RD.Loading);
+
+    axios
+      .get(url, { params })
+      .then((x) => setData(RD.Data({ data: x.data })))
+      .catch((x) => setData(RD.Error({ error: x })));
+  }, [params, url]);
+
+  return data;
+};

src/web/frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

src/web/frontend/package.json

@@ -14,15 +14,26 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@next/font": "13.3.0",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.1",
     "csv-loader": "^3.0.5",
     "csvtojson": "^2.0.10",
+    "fp-ts": "^2.16.1",
     "framer-motion": "^10.12.2",
     "next": "13.3.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
-    "faker": "^5.5.3"
+    "@types/node": "20.10.3",
+    "@types/react": "^18.2.42",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "faker": "^5.5.3",
+    "typescript": "^5.3.3"
   }
 }

src/web/frontend/pages/_app.js → src/web/frontend/pages/_app.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import "@/styles/globals.css";
 import { ChakraProvider } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { Spinner } from "@chakra-ui/react";
-export default function App({ Component, pageProps }) {
+import { AppProps } from "next/app";
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider>
       <Component {...pageProps} />

src/web/frontend/pages/_document.js → src/web/frontend/pages/_document.tsx

@@ -1,4 +1,5 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import React from "react";
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +10,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }