Merge pull request #52 from TailUFPB/front/small-changes

Front/small-changes

README.md

@@ -1,23 +1,35 @@
 # LinguifAI
+
 Projeto NLP 2 - 2023.2
 
 ## Tecnologias utilizadas:
+
 O projeto utiliza das seguintes tecnologias e ferramentas:
 
 ### Front-End
-* React
-* React-Router
-* Axios
-* ElectronJs
-* Tailwind
+
+- React
+- React-Router
+- Axios
+- ElectronJs
+- Tailwind
 
 ### Back-End
-* Python
-* Flask
+
+- Python
+- Flask
 
 ## Como rodar a aplicação:
 
-Primeiramente, instale as depencencias:
+Primeiramente, instale as dependências:
+
+Dependências do back-end:
+
+```bash
+pip install -r api/requirements.txt
+```
+
+Dependências do front-end:
 
 ```bash
 yarn
@@ -48,6 +60,6 @@ npm run electron
 - [x] Abrir CSV
 - [x] Exibir Preview de N linhas do CSV
 - [x] Escolher colunas de entrada
-- [X] Selecionar classificador e enviar dados
+- [x] Selecionar classificador e enviar dados
 - [x] Exibir resultado do classificador
-- [x] Exportar resultado em csv?
+- [x] Exportar resultado em csv?

api/Neural_Network2.py

@@ -381,7 +381,7 @@ def create_and_train_rnn_model(df, name, epochs = 10, batch_size = 32, learning_
 
  if len(valid_losses) > 2 and all(valid_loss >= loss for loss in valid_losses[-3:]):
  print('Stopping early due to lack of improvement in validation loss.')
- break
+ # break
 
  train_losses.append(train_loss)
  valid_losses.append(valid_loss)

package.json

@@ -32,6 +32,8 @@
  "react-papaparse": "^4.1.0",
  "react-router-dom": "^6.15.0",
  "react-scripts": "5.0.0",
+ "react-spinners": "^0.13.8",
+ "react-toastify": "^10.0.5",
  "react-transition-group": "^4.4.5",
  "serve": "^14.2.1",
  "typescript": "^4.9.5"

src/components/resultTable/resultTable.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import CsvTable from "../csvTable/csvTable";
+import { Button } from "@mui/material";
 
 interface TableData {
  Coluna: string;
@@ -11,13 +12,125 @@ interface Props {
  classifierName: string;
 }
 
+const ITEMS_PER_PAGE = 6;
+
 export default function ResultTable({ data, classifierName }: Props) {
+ const [currentPage, setCurrentPage] = useState<number>(0);
+
  const tableData: TableData[] = Object.entries(data).map(([key, value]) => ({
  Coluna: key,
  Valor: value,
  }));
 
- const convertedTableData: any[][] = tableData.slice(0, 4).map((item) => [item.Coluna, item.Valor]);
+ const convertedTableData: any[][] = tableData.map((item) => [
+ item.Coluna,
+ item.Valor,
+ ]);
 
- return <CsvTable data={convertedTableData} head={["Input", "Output"]} />;
-}
+ const displayedData = convertedTableData.slice(
+ currentPage * ITEMS_PER_PAGE,
+ (currentPage + 1) * ITEMS_PER_PAGE
+ );
+
+ const totalPages = Math.ceil(convertedTableData.length / ITEMS_PER_PAGE);
+
+ const handlePageChange = (page: number) => {
+ setCurrentPage(page);
+ };
+
+ const handlePreviousPage = () => {
+ if (currentPage > 0) {
+ setCurrentPage(currentPage - 1);
+ }
+ };
+
+ const handleNextPage = () => {
+ if ((currentPage + 1) * ITEMS_PER_PAGE < convertedTableData.length) {
+ setCurrentPage(currentPage + 1);
+ }
+ };
+
+ const renderPageNumbers = (): JSX.Element[] => {
+ const pageNumbers: JSX.Element[] = [];
+
+ if (totalPages <= 1) return pageNumbers;
+
+ pageNumbers.push(
+ <button
+ key={0}
+ onClick={() => handlePageChange(0)}
+ className={`mx-1 px-2 py-1 border rounded ${
+ currentPage === 0 ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+ }`}
+ >
+ 1
+ </button>
+ );
+
+ if (currentPage > 3) {
+ pageNumbers.push(<span key="start-ellipsis" className="mx-1">...</span>);
+ }
+
+ const startPage = Math.max(1, currentPage - 1);
+ const endPage = Math.min(totalPages - 2, currentPage + 1);
+
+ for (let i = startPage; i <= endPage; i++) {
+ pageNumbers.push(
+ <button
+ key={i}
+ onClick={() => handlePageChange(i)}
+ className={`mx-1 px-2 py-1 border rounded ${
+ currentPage === i ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+ }`}
+ >
+ {i + 1}
+ </button>
+ );
+ }
+
+ if (currentPage < totalPages - 4) {
+ pageNumbers.push(<span key="end-ellipsis" className="mx-1">...</span>);
+ }
+
+ if (totalPages > 1) {
+ pageNumbers.push(
+ <button
+ key={totalPages - 1}
+ onClick={() => handlePageChange(totalPages - 1)}
+ className={`mx-1 px-2 py-1 border rounded ${
+ currentPage === totalPages - 1 ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+ }`}
+ >
+ {totalPages}
+ </button>
+ );
+ }
+
+ return pageNumbers;
+ };
+
+ return (
+ <div className="w-full">
+ <CsvTable data={displayedData} head={["Input", "Output"]} />
+ <div className="flex justify-center mt-4">
+ <Button
+ variant="contained"
+ onClick={handlePreviousPage}
+ disabled={currentPage === 0}
+ >
+ Anterior
+ </Button>
+ <div className="flex items-center">
+ {renderPageNumbers()}
+ </div>
+ <Button
+ variant="contained"
+ onClick={handleNextPage}
+ disabled={(currentPage + 1) * ITEMS_PER_PAGE >= convertedTableData.length}
+ >
+ Próximo
+ </Button>
+ </div>
+ </div>
+ );
+}