| - {headTitle} - | - ); - })} +
|---|
| + {headTitle} + | + ))}
|---|
| + {data.map((row, rowIndex) => ( + |
|
+
{cell}
- |
- );
- })}
-
-
-
-
-
- );
+ return | {"Index"} | -{"Input"} | + 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]); -{"Output"} | -
|---|---|---|
| {index} | -{row} | -- {data[row]} - | -
0 ? `w-4/5` : `w-2/5`
- } relative mx-auto mt-24 bg-main-dark border-2 border-main-lighter text-white pt-4 px-4 placeholder-gray-300 rounded-3xl min-h-min flex flex-col items-center justify-between ${
- isDragging ? "blur-sm" : ""
- }`}
+ className={`${data.length > 0 ? `w-4/5` : `w-2/5`
+ } min-h-[170px] relative mx-auto mt-24 bg-gray-100 border-dashed border-2 border-gray-700 text-gray-600 px-4 placeholder-gray-300 rounded-md flex flex-col items-center justify-center gap-4 ${isDragging ? "blur-sm" : ""
+ }`}
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
>
- {isDragging ? (
-
+ ) : (
+
+ Arrastar e soltar
- ) : ( - <> -{selectedFile.name}
- ) : ( - <> -Arrastar e soltar
-Ou
- - )} - - {data.length > 0 && ( -Arraste e solte ou { + const fileInput = document.getElementById("fileInput"); + if (fileInput) { + fileInput.click(); + } + }} + > + selecione do Computador + +
+ 0 ? `w-4/5` : `w-2/5`
+ } min-h-[170px] relative mx-auto flex flex-col items-center justify-center ${isDragging ? "blur-sm" : ""
+ }`}
+ onDrop={handleDrop}
+ onDragOver={handleDragOver}
+ onDragLeave={handleDragLeave}
+ >
+
+
+ {data.length > 0 && (
+
- );
+ )
}
diff --git a/src/index.css b/src/index.css
index ae228ce9..bf8caa94 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,12 +2,18 @@
@tailwind components;
@tailwind utilities;
+@layer base {
+ body {
+ font-family: Inter, sans-serif;
+ }
+
+ code,
+ pre {
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+ }
+}
+
* {
margin: 0;
padding: 0;
}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 6f52b7fb..13bb5f42 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,144 +1,8 @@
-import { Menu } from "../components/menu/menu";
-import { FaLinkedin, FaGithub } from "react-icons/fa";
+import Layout from "./layout/layout";
+import AboutView from "./views/aboutView";
export default function About() {
- const teamMembers = [
- {
- name: "Jonas Gabriel",
- linkedin: "https://www.linkedin.com/in/jonas-gabriel-araujo/",
- github: "https://github.com/jonasgabriel18",
- photo: "../../../assets/jonas.jpg",
- },
- {
- name: "Luiz Gusttavo",
- linkedin:
- "https://www.linkedin.com/in/luiz-gusttavo-oliveira-de-souza-7538091b1/",
- github: "https://github.com/GusttavoOliveira",
- photo: "../../../assets/luiz.jpg",
- },
+ return
-
-
-
- );
}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 0dcd7ff8..edcda349 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,207 +1,7 @@
-import { useState, useEffect } from "react";
-import SelectFileCard from "../components/selectFileCard/selectFileCard";
-import axios from "axios";
-import ResultTable from "../components/resultTable/resultTable";
-import { Menu } from "../components/menu/menu";
+import Layout from "./layout/layout";
+import HomeView from "./views/homeView";
-export default function Home() {
- const [selectedFile, setSelectedFile] = useState
-
- - LinguifAI -
- -- O LinguifAI é uma aplicação inovadora desenvolvida pela diretoria de - NLP da TAIL, projetada para simplificar e agilizar o treinamento e a - classificação de modelos de Machine Learning em texto. Com essa - ferramenta, é possível experimentar diversos algoritmos e ajustar - parâmetros de forma intuitiva, tornando o processo de desenvolvimento - de modelos NLP mais acessível e eficiente. -
- -Tecnologias Utilizadas:
- -
- 
-
- 
-
- 
-
- 
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- Conheça a Equipe:
- - -
-
-
-
- );
+export default function Home() {
+ return
-
- - LinguifAI -
- - { -
-
-
-
-
-
-
-
-
- {Object.keys(result).length > 0 && (
-
-
- )}
-
- )}
-
-
-
- + LinguifAI +
+
+ {children}
+
+ );
+}
diff --git a/src/pages/train.tsx b/src/pages/train.tsx
index ea3c67f9..c20d55bf 100644
--- a/src/pages/train.tsx
+++ b/src/pages/train.tsx
@@ -4,393 +4,12 @@ import axios from "axios";
import ResultTable from "../components/resultTable/resultTable";
import { Menu } from "../components/menu/menu";
import { ReactApexChartsDefaultOptions } from "../Shared/apexChartsOptions";
+import Layout from "./layout/layout";
+import TrainView from "./views/trainView";
export default function Train() {
- const [selectedFile, setSelectedFile] = useState
-
-
-
+
-
- - LinguifAI -
- - { -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {advancedOptionsVisible && (
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- {isLoading && (
-
-
-
-
-
- )}
-
-
-
-
- {`Treinamento em ${loadingProgress.toFixed(2)}%`}
-
-
+
+
+
+ );
+}
diff --git a/src/pages/views/homeView.tsx b/src/pages/views/homeView.tsx
new file mode 100644
index 00000000..f14fa2c6
--- /dev/null
+++ b/src/pages/views/homeView.tsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import SelectFileCard from "../../components/selectFileCard/selectFileCard";
+import ResultTable from "../../components/resultTable/resultTable";
+
+export default function HomeView() {
+ const [selectedFile, setSelectedFile] = useState
+
+ + O LinguifAI é uma aplicação inovadora desenvolvida pela diretoria de NLP da TAIL, projetada para simplificar e agilizar o treinamento e a classificação de modelos de Machine Learning em texto. Com essa ferramenta, é possível experimentar diversos algoritmos e ajustar parâmetros de forma intuitiva, tornando o processo de desenvolvimento de modelos NLP mais acessível e eficiente. +
+ +Tecnologias Utilizadas:
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Conheça nossa equipe:
+ + +
+
+ );
+}
diff --git a/src/pages/views/trainView.tsx b/src/pages/views/trainView.tsx
new file mode 100644
index 00000000..5836b8a2
--- /dev/null
+++ b/src/pages/views/trainView.tsx
@@ -0,0 +1,374 @@
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import ReactApexChart from "react-apexcharts";
+import SelectFileCard from "../../components/selectFileCard/selectFileCard";
+import { ReactApexChartsDefaultOptions } from "../../Shared/apexChartsOptions";
+
+export default function TrainView() {
+ const [selectedFile, setSelectedFile] = useState
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(result).length > 0 && (
+
+
+ )}
+
+ )}
+
+
+
+
+
+ );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {isLoading && (
+
+
+
+
+
+ )}
+
+ {!isLoading && }
+
+ {hasTrained && train_losses.length > 0 && (
+
+ {`Treinamento em ${loadingProgress.toFixed(2)}%`}
+
+
+
+ )}
+
+ {isLoading && (
+
+ )}
+