Skip to content

F
FMS_Project_Frontend
Commit 42afe629 authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

Add ML model

parent 4a9a737a
Show whitespace changes
Inline Side-by-side
Showing with 407 additions and 4 deletions
packages/admin/pages/ml-model/index.tsx 0 → 100644
View file @ 42afe629
import * as React from "react";
import Head from "next/head";
import AppLayout from "@/src/components/layout";
import MLContent from "@/src/features/ml-model";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import ProtectedRoute from "../../src/features/protectedRoute";
export default function MLModel() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<ProtectedRoute role="admin">
<Head>
<title>{t("ml-model")}</title>
</Head>
<AppLayout>
<MLContent />
</AppLayout>
</ProtectedRoute>
</Fragment>
);
}
packages/admin/src/components/assets/custom-ant-icons/sidebar/ml-model-icon.tsx 0 → 100644
View file @ 42afe629
import React from "react";
import { BulbOutlined } from "@ant-design/icons";
const MlIcon = (props: any) => {
// const AboutIconSvg = () => (
// );
return (
<BulbOutlined style={{ fontSize: '19px', color: '#fadb14' }} className={"ExclamationCircleOutlined "}/>
// <Icon data-testid="arrow-left-icon" component={AboutIconSvg} {...props} />
);
};
export default MlIcon;
packages/admin/src/data/constant/app-constant.tsx
View file @ 42afe629
...@@ -5,4 +5,5 @@ export const TrapURL: string = `http://localhost:6644/api/rethink/data`; ...@@ -5,4 +5,5 @@ export const TrapURL: string = `http://localhost:6644/api/rethink/data`;
export const SettingURL: string = `http://localhost:6644/api/about`; export const SettingURL: string = `http://localhost:6644/api/about`;
export const AuthURL: string = "http://localhost:6644/auth/"; export const AuthURL: string = "http://localhost:6644/auth/";
export const UserURL: string = `http://localhost:6644/users/`; export const UserURL: string = `http://localhost:6644/users/`;
export const MLMODELURL: string = "http://192.168.24.47:7373/api/";
packages/admin/src/features/about/index.tsx
View file @ 42afe629
...@@ -104,6 +104,7 @@ export default function AboutContent() { ...@@ -104,6 +104,7 @@ export default function AboutContent() {
<section className="pb-20 bg-blueGray-200 -mt-24"> <section className="pb-20 bg-blueGray-200 -mt-24">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center"> <div className="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"> <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
<div className="px-4 py-5 flex-auto"> <div className="px-4 py-5 flex-auto">
......
packages/admin/src/features/ml-model/index.tsx 0 → 100644
View file @ 42afe629
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { useRouter } from "next/router";
import React, { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
import { Upload, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { sendFileToServer } from "../../services/ml-model-service";
import MetricsPopUp from "./metrics-pop-up";
export default function MLContent() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const router = useRouter();
const [selectedFile, setSelectedFile] = useState(null);
const [createObjectURL, setCreateObjectURL] = useState(null);
const [modalProps, setModalProps] = useState({
isOpen: false,
});
const handleFileChange = (info: any) => {
if (info.fileList.length > 0) {
const i = info.fileList[0].originFileObj;
setSelectedFile(i);
setCreateObjectURL(URL.createObjectURL(i));
}
// if (event.target.files && event.target.files[0]) {
// const i = event.target.files[0];
// setSelectedFile(i);
// setCreateObjectURL(URL.createObjectURL(i));
// }
};
const uploadFile = async () => {
if (selectedFile) {
const formData = new FormData();
formData.append("file", selectedFile);
console.log(formData);
sendFileToServer(formData);
}
};
return (
<>
<main>
<div className="relative pt-16 pb-32 flex content-center items-center justify-center min-h-screen-75">
<div
className="absolute top-0 w-full h-full bg-center bg-cover"
style={{
backgroundImage: "url('/images/ml-model.jpg')",
}}
>
<span
id="blackOverlay"
className="w-full h-full absolute opacity-75 bg-black"
></span>
</div>
<div className="container relative mx-auto">
<div className="items-center flex flex-wrap">
<div className="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
<div className="pr-12">
<h1 className="text-white font-semibold text-5xl"></h1>
<p className="mt-4 text-lg text-blueGray-200"></p>
</div>
</div>
</div>
</div>
<div
className="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-16"
style={{ transform: "translateZ(0)" }}
>
<svg
className="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</div>
<section className="pb-20 bg-blueGray-200 -mt-24">
<div className="container mx-auto px-4">
<div className="flex flex-wrap">
<div className="lg:pt-12 pt-6 w-full px-4 text-center">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
<div className="px-4 py-5 flex-auto">
<p className="mt-2 mb-4 text-blueGray-500">
{/* <label htmlFor="fileInput">
<input
id="fileInput"
type="file"
// accept=".csv"
onChange={handleFileChange}
style={{ display: "inline-block" }}
/>
<button
className="move active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
// type="move"
size="large"
borderRadius="32"
onClick={uploadFile}
>
{t("failures-feedback")}
</button>
</label> */}
<Upload
className="font-bold hover:shadow-md m-2 mt-3 shadow text-xs rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
customRequest={() => {}}
beforeUpload={() => false}
showUploadList={false}
onChange={handleFileChange}
// style={{ display: "block" }}
>
<Button icon={<UploadOutlined />}>
{t("Select File")}
</Button>
</Upload>
<button
className="move active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
// type="move"
size="large"
borderRadius="32"
onClick={uploadFile}
>
{t("failures-feedback")}
</button>
</p>
</div>
</div>
</div>
<div className="lg:pt-12 pt-6 w-full px-4 text-center">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
<div className="px-4 py-5 flex-auto">
<p className="mt-2 mb-4 text-blueGray-500">
<button
className="traity active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
// type="move"
size="large"
borderRadius="32"
onClick={uploadFile}
>
{t("reset-knowledge-base")}
</button>
</p>
</div>
</div>
</div>
<div className="lg:pt-12 pt-6 w-full px-4 text-center">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
<div className="px-4 py-5 flex-auto">
<p className="mt-2 mb-4 text-blueGray-500">
<button
className="secondary active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
// type="move"
size="large"
borderRadius="32"
onClick={uploadFile}
>
{t("train-model")}
</button>
</p>
</div>
</div>
</div>
<div className="lg:pt-12 pt-6 w-full px-4 text-center">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
<div className="px-4 py-5 flex-auto">
<p className="mt-2 mb-4 text-blueGray-500">
<button
className="link active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
// type="move"
size="large"
borderRadius="32"
onClick={() => setModalProps({ isOpen: true})}
>
{t("calc-metrics")}
</button>
<MetricsPopUp
modalProps={modalProps}
setModalProps={setModalProps}
/>
</p>
</div>
</div>
</div>
</div>
<div className="flex flex-wrap items-center mt-32">
<div className="w-full md:w-5/12 px-4 mr-auto ml-auto">
<h3 className="text-3xl mb-2 font-semibold leading-normal">
ffffffff
</h3>
<p className="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
ffffffff{" "}
</p>
</div>
<div className="w-full md:w-4/12 px-4 mr-auto ml-auto">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-blueGray-700">
<img
alt="..."
src="/images/ml2.jpg"
className="w-full align-middle rounded-t-lg"
/>
<blockquote className="relative">
<svg
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 583 95"
className="absolute left-0 w-full block h-95-px -top-94-px"
>
{/* <polygon
points="-30,95 583,95 583,65"
className="text-blueGray-700 fill-current"
></polygon> */}
</svg>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<section className="relative py-20">
<div
className="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
style={{ transform: "translateZ(0)" }}
>
<svg
className="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="text-white fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
<div className="container mx-auto px-4">
<div className="items-center flex flex-wrap">
<div className="w-full md:w-4/12 ml-auto mr-auto px-4">
<img
alt="..."
className="max-w-full rounded-lg shadow-lg"
src="/images/ml1.png"
/>
</div>
<div className="w-full md:w-5/12 ml-auto mr-auto px-4">
<div className="md:pr-12">
<h3 className="text-3xl font-semibold">lllllllllllllll</h3>
<p className="mt-4 text-lg leading-relaxed text-blueGray-500">
llllllllll
</p>
</div>
</div>
</div>
</div>
</section>
</main>
</>
);
}
packages/admin/src/features/ml-model/metrics-pop-up.tsx 0 → 100644
View file @ 42afe629
import React, { useState, useEffect } from "react";
import {
Button,
Card,
Col,
DatePicker,
Form,
Input,
Modal,
Row,
Select,
message,
} from "antd";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { UpdateUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
interface Props {
modalProps: any;
setModalProps: any;
}
export default function MetricsPopUp({ modalProps, setModalProps }: Props) {
const { t } = useTranslation(TranslationFiles.COMMON);
const [isModalOpen,setIsModalOpen] = useState(false);
const handleCancel = () => {
setModalProps(false,null);
};
useEffect(() => {
setIsModalOpen(modalProps.isOpen);
}, [modalProps])
return (
<Modal title="Metrics Details" visible={isModalOpen} onOk={handleCancel} onCancel={handleCancel}>
<div>
Hi
</div>
</Modal>
);
}
\ No newline at end of file
packages/admin/src/routes.tsx
View file @ 42afe629
...@@ -6,6 +6,7 @@ import SchedulingIcon from "@/src/components/assets/custom-ant-icons/sidebar/sch ...@@ -6,6 +6,7 @@ import SchedulingIcon from "@/src/components/assets/custom-ant-icons/sidebar/sch
import AboutIcon from "@/src/components/assets/custom-ant-icons/sidebar/about-icon"; import AboutIcon from "@/src/components/assets/custom-ant-icons/sidebar/about-icon";
import UsersIcon from "@/src/components/assets/custom-ant-icons/sidebar/users-icon"; import UsersIcon from "@/src/components/assets/custom-ant-icons/sidebar/users-icon";
import SetupIcon from "@/src/components/assets/custom-ant-icons/sidebar/setup-icon"; import SetupIcon from "@/src/components/assets/custom-ant-icons/sidebar/setup-icon";
import MlIcon from "@/src/components/assets/custom-ant-icons/sidebar/ml-model-icon";
type RoutesType = { type RoutesType = {
key: string; key: string;
...@@ -44,6 +45,11 @@ export const routes: Array<RoutesType> = [ ...@@ -44,6 +45,11 @@ export const routes: Array<RoutesType> = [
icon: <UsersIcon />, icon: <UsersIcon />,
label: "users", label: "users",
}, },
{
key: "ml-model",
icon: <MlIcon />,
label: "ml-model",
},
{ {
key: "setup", key: "setup",
icon: <SetupIcon />, icon: <SetupIcon />,
......
packages/admin/src/services/ml-model-service.tsx 0 → 100644
View file @ 42afe629
import axios from "axios";
import { MLMODELURL} from "../data/constant/app-constant";
import { message } from "antd";
export const sendFileToServer = async (data: any) => {
try {
// console.log(values);
const response = await axios.post(MLMODELURL+"csv/upload", data);
message.success("File uploaded Successfully "+ response);
return response;
} catch (error) {
message.error("error!!"+error);
}
};
packages/admin/src/styles/tailwind.css
View file @ 42afe629
...@@ -1515,7 +1515,29 @@ select { ...@@ -1515,7 +1515,29 @@ select {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgba(212, 212, 216, var(--tw-border-opacity)); border-color: rgba(212, 212, 216, var(--tw-border-opacity));
} }
.secondary {
background-color: #FFFFFF;
color: var(--primary-gray-700);
border: 1px solid #D0D5DD;
}
.traity {
background-color: var(--primary-indego-50);
color: #000f24;
border: 1px solid #D0D5DD;
}
.link {
background-color: rgb(42, 165, 73);
color: var(--primary-indego-50);
border: none;
box-shadow: none !important;
}
.move {
background-color: #6366f1;
color: var(--primary-indego-50);
border: none;
box-shadow: none !important;
}
.focus\:border-gray-500:focus { .focus\:border-gray-500:focus {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgba(113, 113, 122, var(--tw-border-opacity)); border-color: rgba(113, 113, 122, var(--tw-border-opacity));
......
packages/shared-library/src/buttons/styles.module.css
View file @ 42afe629
...@@ -52,24 +52,24 @@ ...@@ -52,24 +52,24 @@
.traity { .traity {
background-color: var(--primary-indego-50); background-color: var(--primary-indego-50);
color: var(--primary-blue-700); color: var(--primary-blue-700);
border: 1px solid var(--secondary-gray-100); border: 1px solid #D0D5DD;
} }
.traity:hover { .traity:hover {
background-color: var(--secondary-gray); background-color: var(--secondary-gray);
color: var(--primary-blue-700) !important; color: var(--primary-blue-700) !important;
border: 1px solid var(--secondary-gray) !important; border: 1px solid #D0D5DD;
} }
.link { .link {
background-color: var( --primary-blue-600); background-color: rgb(42, 165, 73);
color: var(--primary-indego-50); color: var(--primary-indego-50);
border: none; border: none;
box-shadow: none !important; box-shadow: none !important;
} }
.link:hover { .link:hover {
background-color: var(--primary-blue-700); background-color: rgb(90, 204, 118);
color: var(--secondary-gray-100) !important; color: var(--secondary-gray-100) !important;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab