feat: train page added && menu added

package.json

@@ -20,6 +20,7 @@
  "electron-process": "^0.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-icons": "^4.12.0",
  "react-papaparse": "^4.1.0",
  "react-router-dom": "^6.15.0",
  "react-scripts": "5.0.1",

src/App.tsx

@@ -1,8 +1,14 @@
+import { HashRouter } from "react-router-dom";
 import "./App.css";
 import Router from "./routes";
 
 function App() {
- return <Router />;
+ return (
+ <HashRouter>
+ {/* HashRouter é rota com # ex: google.com#/rota-aqui*/}
+ <Router />
+ </HashRouter>
+ );
 }
 
 export default App;

src/components/menu/menu.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { HiOutlineMenu, HiOutlineX } from "react-icons/hi"; // Importando ícones do React Icons
+import { Link } from "react-router-dom";
+
+export function Menu() {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const toggleMenu = () => {
+ setIsExpanded(!isExpanded);
+ };
+
+ return (
+ <nav
+ className={`text-white fixed top-0 left-0 bottom-0 z-50 overflow-y-auto ${
+ isExpanded ? "bg-gray-800 overflow-y-auto w-64" : "overflow-hidden"
+ }`}
+ >
+ <div className="flex justify-between items-center p-4">
+ <div className={`text-2xl font-bold ${isExpanded ? "" : "sr-only"}`}>
+ Menu
+ </div>
+ <button
+ className="text-white focus:outline-none focus:text-white"
+ onClick={toggleMenu}
+ >
+ {isExpanded ? (
+ <HiOutlineX className="h-6 w-6" />
+ ) : (
+ <HiOutlineMenu className="h-6 w-6" />
+ )}
+ </button>
+ </div>
+ <ul className={`p-4 ${isExpanded ? "" : "hidden"}`}>
+ <li className={`my-2`}>
+ {" "}
+ <Link to="/">Classificar</Link>
+ </li>
+ <li className={`my-2`}>
+ <Link to="/train">Treinar</Link>
+ </li>
+ </ul>
+ </nav>
+ );
+}

src/index.tsx

@@ -2,15 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import { HashRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
 );
 root.render(
  <React.StrictMode>
- <HashRouter> {/* HashRouter é rota com # ex: google.com#/rota-aqui*/}
- <App />
- </HashRouter>
+ <App />
  </React.StrictMode>
 );

src/pages/home.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import SelectFileCard from "../components/selectFileCard/selectFileCard";
 import axios from "axios";
 import ResultTable from "../components/resultTable/resultTable";
+import { Menu } from "../components/menu/menu";
 
 export default function Home() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -27,7 +28,7 @@ export default function Home() {
  const handleSubmit = async () => {
  setIsLoading(true);
  let selectedData = data.map((row) => row[selectedColumn]);
- console.log(selectedData)
+ console.log(selectedData);
  console.log(selectedClassifier);
  const response = await axios
  .post("http://localhost:5000/classify", {
@@ -89,6 +90,8 @@ export default function Home() {
 
  return (
  <div className="bg-main-darker text-white min-h-screen flex flex-col">
+ <Menu />
+
  <div className="p-8 text-center font-roboto">
  <h1 className="text-3xl font-bold mb-6 mt-6">
  Linguif<span className="text-main-light">AI</span>

src/pages/train.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import SelectFileCard from "../components/selectFileCard/selectFileCard";
+import axios from "axios";
+import ResultTable from "../components/resultTable/resultTable";
+import { Menu } from "../components/menu/menu";
+
+export default function Train() {
+ const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+ const [data, setData] = useState<any[][]>([]);
+ const [header, setHeader] = useState<string[]>([]);
+
+ const [selectedColumn, setSelectedColumn] = useState<number>(0);
+ const [selectedLabel, setSelectedLabel] = useState<string>("");
+
+ const [result, setResult] = useState<{ [key: string]: any }>({});
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleChangeSelectedColumn = (event: any) => {
+ setSelectedColumn(event.target.value);
+ };
+
+ const handleChangeSelectedLabel = (event: any) => {
+ setSelectedLabel(event.target.value);
+ };
+
+ const handleSubmit = async () => {};
+
+ return (
+ <div className="bg-main-darker text-white min-h-screen flex flex-col">
+ <Menu />
+
+ <div className="p-8 text-center font-roboto">
+ <h1 className="text-3xl font-bold mb-6 mt-6">
+ Linguif<span className="text-main-light">AI</span>
+ </h1>
+
+ {
+ <SelectFileCard
+ selectedFile={selectedFile}
+ setSelectedFile={setSelectedFile}
+ setData={setData}
+ data={data}
+ setHeader={setHeader}
+ header={header}
+ />
+ }
+
+ <div className="w-1/3 relative mx-auto mt-24">
+ <select
+ className="w-full bg-main-dark border-2 border-main-lighter rounded-3xl py-2 px-4 hover:bg-main-darker text-white focus:outline-none h-14"
+ onChange={handleChangeSelectedColumn}
+ >
+ <option value="" disabled selected className="placeholder-gray-300">
+ Selecione a coluna de entrada
+ </option>
+ {header.length > 0 &&
+ header.map((column: string, index: number) => {
+ return <option value={index}>{column}</option>;
+ })}
+ </select>
+ </div>
+
+ <div className="w-1/3 relative mx-auto mt-10">
+ <select
+ className="w-full bg-main-dark border-2 border-main-lighter rounded-3xl py-2 px-4 hover:bg-main-darker text-white focus:outline-none h-14"
+ onChange={handleChangeSelectedColumn}
+ >
+ <option value="" disabled selected className="placeholder-gray-300">
+ Selecione a coluna de label
+ </option>
+ {header.length > 0 &&
+ header.map((column: string, index: number) => {
+ return <option value={index}>{column}</option>;
+ })}
+ </select>
+ </div>
+
+ <div className="w-1/4 relative mx-auto mt-10">
+ <button
+ className="w-full bg-main-dark text-white py-2 px-4 hover:bg-main-darker focus:outline-none border-2 border-main-lighter rounded-3xl h-14"
+ onClick={handleSubmit}
+ >
+ {isLoading ? "Carregando..." : "Treinar"}
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}

src/routes/elements.tsx

@@ -12,3 +12,4 @@ const Loadable = (Component: ElementType) => (props: any) => {
 };
 
 export const Home = Loadable(lazy(() => import("../pages/home")));
+export const Train = Loadable(lazy(() => import("../pages/train")));

src/routes/index.tsx

@@ -1,12 +1,16 @@
 import { Navigate, useRoutes } from "react-router-dom";
-import { Home } from "./elements";
+import { Home, Train } from "./elements";
 
 export default function Router() {
  return useRoutes([
  {
  path: "/",
  element: <Home />,
  },
+ {
+ path: "/train",
+ element: <Train />,
+ },
  { path: "*", element: <Navigate to="/404" replace /> },
  { path: "/404", element: <>404</> },
  ]);

yarn.lock

@@ -8377,6 +8377,11 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-icons@^4.12.0:
+ version "4.12.0"
+ resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
+ integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
+
 react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"