From 2ffa4d87da7a40d00ca2163feb2f4c55f9970832 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thau=C3=A3=20Magalh=C3=A3es?= <thauanlucascpl@gmail.com>
Date: Mon, 17 Jun 2024 14:55:16 -0300
Subject: [PATCH] feat: minor adjusts added

---
 src/components/breadcumbs/breadcumbs.tsx      | 36 +++++++++++++++++
 .../selectFileCard/selectFileCard.tsx         |  1 +
 src/pages/about.tsx                           |  8 +++-
 src/pages/home.tsx                            |  6 ++-
 src/pages/train.tsx                           |  6 ++-
 src/pages/views/trainView.tsx                 | 39 +++++++++++++------
 6 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 src/components/breadcumbs/breadcumbs.tsx

diff --git a/src/components/breadcumbs/breadcumbs.tsx b/src/components/breadcumbs/breadcumbs.tsx
new file mode 100644
index 00000000..310fae92
--- /dev/null
+++ b/src/components/breadcumbs/breadcumbs.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface Crumb {
+    label: string;
+    path?: string;
+}
+
+interface BreadcrumbProps {
+    crumbs: Crumb[];
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ crumbs }) => {
+    const baseCrumb = { label: 'LinguifAI', path: '/' };
+    const allCrumbs = [baseCrumb, ...crumbs];
+
+    return (
+        <div className="p-4">
+            <nav aria-label="breadcrumb">
+                <ol className="flex space-x-2 text-lg">
+                    {allCrumbs.map((crumb, index) => (
+                        <li key={index} className={`flex items-center ${!crumb.path ? 'text-gray-500' : ''}`}>
+                            {index !== 0 && <span className="mx-2 text-gray-400">/</span>}
+                            {crumb.path ? (
+                                <Link to={crumb.path} className="text-blue-800 hover:underline font-semibold">{crumb.label}</Link>
+                            ) : (<span className="font-semibold">{crumb.label}</span>
+                            )}
+                        </li>
+                    ))}
+                </ol>
+            </nav>
+        </div>
+    );
+};
+
+export default Breadcrumb;
diff --git a/src/components/selectFileCard/selectFileCard.tsx b/src/components/selectFileCard/selectFileCard.tsx
index 30d01fe1..e02b3e6e 100644
--- a/src/components/selectFileCard/selectFileCard.tsx
+++ b/src/components/selectFileCard/selectFileCard.tsx
@@ -110,6 +110,7 @@ export default function SelectFileCard({
           onChange={handleFileChange}
         />
       </h2>
+      <p className="text-sm text-gray-600">Por favor, selecione um arquivo no formato .csv</p>
     </div>
   ) : (
     <div
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 13bb5f42..d2a9380a 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,8 +1,14 @@
+import Breadcrumb from "../components/breadcumbs/breadcumbs";
 import Layout from "./layout/layout";
 import AboutView from "./views/aboutView";
 
 export default function About() {
 
-  return <Layout><AboutView /></Layout>;
+  return (
+    <Layout>
+      <Breadcrumb crumbs={[{ label: "Sobre" }]} />
+      <AboutView />
+    </Layout>
+  )
 
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index edcda349..47a28c49 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,7 +1,11 @@
+import Breadcrumb from "../components/breadcumbs/breadcumbs";
 import Layout from "./layout/layout";
 import HomeView from "./views/homeView";
 
 
 export default function Home() {
-  return <Layout><HomeView /></Layout>;
+  return <Layout>
+    <Breadcrumb crumbs={[{ label: "Classificar" }]} />
+    <HomeView />
+  </Layout>;
 }
diff --git a/src/pages/train.tsx b/src/pages/train.tsx
index c20d55bf..9accde12 100644
--- a/src/pages/train.tsx
+++ b/src/pages/train.tsx
@@ -6,10 +6,14 @@ import { Menu } from "../components/menu/menu";
 import { ReactApexChartsDefaultOptions } from "../Shared/apexChartsOptions";
 import Layout from "./layout/layout";
 import TrainView from "./views/trainView";
+import Breadcrumb from "../components/breadcumbs/breadcumbs";
 
 export default function Train() {
 
   return (
-    <Layout><TrainView /></Layout>
+    <Layout>
+      <Breadcrumb crumbs={[{ label: "Treinar" }]} />
+      <TrainView />
+    </Layout>
   );
 }
diff --git a/src/pages/views/trainView.tsx b/src/pages/views/trainView.tsx
index 19be82ae..062f2965 100644
--- a/src/pages/views/trainView.tsx
+++ b/src/pages/views/trainView.tsx
@@ -168,7 +168,7 @@ export default function TrainView() {
                 const newProgress: number =
                     training_in_progress || training_progress === 100
                         ? training_progress
-                        : 0; 
+                        : 0;
                 updateLoadingProgress(newProgress);
 
                 setTrainLosses(train_losses);
@@ -205,6 +205,12 @@ export default function TrainView() {
         return () => clearInterval(interval);
     }, []);
 
+    const [trainingType, setTrainingType] = useState<string>("nb");
+
+    const handleTrainingTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        setTrainingType(event.target.value);
+    }
+
     return (
         <div className="p-8 text-center">
             <SelectFileCard
@@ -314,6 +320,23 @@ export default function TrainView() {
                     </div>
 
 
+
+                    <div className="w-1/2  mx-auto mt-10 mb-4">
+                        <label htmlFor="trainingType" className="block mb-2">
+                            Tipo de Treinamento
+                        </label>
+                        <select
+                            id="trainingType"
+                            className="w-full border-2 border-gray-500 rounded-xl py-2 px-4 hover:bg-gray-100 focus:outline-none h-14"
+                            onChange={handleTrainingTypeChange}
+                            value={trainingType}
+                        >
+                            <option value="nb">NB (Naive Bayes)</option>
+                            <option value="rnn">RNN (Recurrent Neural Network)</option>
+                        </select>
+                    </div>
+
+
                     <div className="w-1/2 relative mx-auto mt-10">
                         <div className="relative w-full">
                             {isLoading && (
@@ -330,19 +353,11 @@ export default function TrainView() {
                             )}
 
                             {!isLoading && <button
-                                className={`w-2/4 bg-blue-400 text-white py-2 px-4 hover:bg-blue-500 focus:outline-none border-2 border-blue-500 rounded-xl h-14`}
-                                onClick={handleNbSubmit}
-                                disabled={isLoading}
-                            >
-                                {isLoading ? "Carregando..." : "Treinar NB"}
-                            </button>}
-
-                            {!isLoading && <button
-                                className={`w-2/4 bg-blue-400 text-white py-2 px-4 hover:bg-blue-500 focus:outline-none border-2 border-blue-500 rounded-xl h-14`}
-                                onClick={handleRnnSubmit}
+                                className={`w-full bg-blue-400 text-white py-2 px-4 hover:bg-blue-500 focus:outline-none border-2 border-blue-500 rounded-xl h-14`}
+                                onClick={trainingType === "nb" ? handleNbSubmit : handleRnnSubmit}
                                 disabled={isLoading}
                             >
-                                {isLoading ? "Carregando..." : "Treinar RNN"}
+                                {isLoading ? "Carregando..." : "Treinar"}
                             </button>}
 
                             {hasTrained && train_losses.length > 0 && (