-
- )}
+ - Chat: "{conversation.name}" -
-
+
+
+
+
+
+
+
+
+
+
+
+
+ Diagnose
+
+
+
+
+
+ How it works?
+
+
+
+
+
+ Contact
+
+
+
+
+
+ Privacy
+
+
+
+
+
+ {!user ? (
+ <>
+
+ Login
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/dermit/src/components/Message.jsx b/dermit/src/components/Message.jsx
index f0ed4ea..e82c7a2 100644
--- a/dermit/src/components/Message.jsx
+++ b/dermit/src/components/Message.jsx
@@ -14,14 +14,14 @@ export function Message({ message }) {
className={classNames(
"mt-1 mb-1 flex",
message.is_response
- ? "justify-end"
- : "justify-start"
+ ? "justify-start"
+ : "justify-end"
)}
>
+
);
-}
\ No newline at end of file
+}
diff --git a/dermit/src/components/Header/Acme.jsx b/dermit/src/components/Header/Acme.jsx
new file mode 100644
index 0000000..8cf9352
--- /dev/null
+++ b/dermit/src/components/Header/Acme.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+const AcmeLogo = () => (
+
+);
+
+export default AcmeLogo
\ No newline at end of file
diff --git a/dermit/src/components/Header/Nav.jsx b/dermit/src/components/Header/Nav.jsx
new file mode 100644
index 0000000..074e92d
--- /dev/null
+++ b/dermit/src/components/Header/Nav.jsx
@@ -0,0 +1,86 @@
+import React, {useContext} from "react";
+import { Link, Outlet } from "react-router-dom";
+import { AuthContext } from "../../contexts/AuthContext";
+
+const Nav = () => {
+ const { user, logout } = useContext(AuthContext);
+ return (
+
+ );
+};
+
+export default Nav;
diff --git a/dermit/src/components/Header/NavBar.jsx b/dermit/src/components/Header/NavBar.jsx
new file mode 100644
index 0000000..3fc5f56
--- /dev/null
+++ b/dermit/src/components/Header/NavBar.jsx
@@ -0,0 +1,92 @@
+import React, { useContext } from "react";
+import { Link, Outlet } from "react-router-dom";
+import { AuthContext } from "../../contexts/AuthContext";
+import { startCase } from "lodash";
+
+import {
+ Navbar,
+ NavbarBrand,
+ NavbarContent,
+ NavbarItem,
+ Button,
+} from "@nextui-org/react";
+
+export default function NavBar() {
+ const { user, logout } = useContext(AuthContext);
+
+ return (
+
+ {conversation && (
+
- Chat: "{conversation.name}"
+ )} + The WebSocket is currently {connectionStatus} +
-
-
-
+
+
-
-
-
+
+
+
DermIT
+ +
+
+
+
+
+
+ + {startCase(user.username)[0]} +
+
diff --git a/dermit/src/components/UI/Dashboard.jsx b/dermit/src/components/UI/Dashboard.jsx
index 4684158..bcd8d90 100644
--- a/dermit/src/components/UI/Dashboard.jsx
+++ b/dermit/src/components/UI/Dashboard.jsx
@@ -1,89 +1,16 @@
-import React, {useContext} from "react";
-import { Link, Outlet } from "react-router-dom";
-
-import { AuthContext } from "../../contexts/AuthContext";
+import React from "react";
+import { Outlet } from "react-router-dom";
import { ToastContainer } from "react-toastify";
+import NavBar from "../Header/NavBar";
export default function Dashboard() {
- const { user, logout } = useContext(AuthContext);
+
return (
-
-
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CvTest;
diff --git a/dermit/src/components/diagnose/cv/DetectedSymptoms.jsx b/dermit/src/components/diagnose/cv/DetectedSymptoms.jsx
new file mode 100644
index 0000000..540d546
--- /dev/null
+++ b/dermit/src/components/diagnose/cv/DetectedSymptoms.jsx
@@ -0,0 +1,131 @@
+
+import { useState } from "react";
+import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io";
+import { MdOutlineCancel } from "react-icons/md";
+import {
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ useDisclosure,
+ } from "@nextui-org/react";
+import { truncate } from "lodash";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+
+
+
+const DetectedSymptoms = ({resp}) => {
+
+ const symptomsURL = "http://localhost:8000/static/chat/images/output";
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const [modalValue, setModalValue] = useState({});
+ const handleModalValue = (image) => {
+ setModalValue(image);
+ };
+
+ return (
+
+
+ {(onClose) => (
+ <>
+
+ {`${user.username}_${modalValue.file.name}`}
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default UploadImageModal;
diff --git a/dermit/src/components/diagnose/rag/RagTest.jsx b/dermit/src/components/diagnose/rag/RagTest.jsx
new file mode 100644
index 0000000..f6f5ce1
--- /dev/null
+++ b/dermit/src/components/diagnose/rag/RagTest.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const RagTest = () => {
+ return (
+
+ {
+ actions.setSubmitting(false);
+ setFormValues(values);
+ navigate('/diagnose/cv');
+ }}
+ >
+
+
+
+ );
+};
+
+export default QnA;
+
diff --git a/dermit/src/components/diagnose/survey/useMultiStepForm.jsx b/dermit/src/components/diagnose/survey/useMultiStepForm.jsx
new file mode 100644
index 0000000..d85e8da
--- /dev/null
+++ b/dermit/src/components/diagnose/survey/useMultiStepForm.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+export function useMultiStepForm(formSteps) {
+ // formSteps are list of React Elements
+ const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+ function next() {
+ setCurrentStepIndex((i) => {
+ if (i >= formSteps.length - 1) return i;
+ return i + 1;
+ });
+ }
+
+ function back() {
+ setCurrentStepIndex((i) => {
+ if (i <= 0) return i;
+ return i - 1;
+ });
+ }
+
+ function goTo(index) {
+ setCurrentStepIndex(index);
+ }
+
+ return {
+ currentStepIndex,
+ formSteps,
+ formStep: formSteps[currentStepIndex],
+ isFirstStep: currentStepIndex === 0,
+ isLastStep: currentStepIndex === formSteps.length - 1,
+ goTo,
+ next,
+ back,
+ };
+}
diff --git a/dermit/src/components/landing/Home.jsx b/dermit/src/components/landing/Home.jsx
new file mode 100644
index 0000000..6918305
--- /dev/null
+++ b/dermit/src/components/landing/Home.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+const Home = () => {
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/dermit/src/components/Homepage.jsx b/dermit/src/components/landing/Homepage.jsx
similarity index 97%
rename from dermit/src/components/Homepage.jsx
rename to dermit/src/components/landing/Homepage.jsx
index 4f2e91f..2555172 100644
--- a/dermit/src/components/Homepage.jsx
+++ b/dermit/src/components/landing/Homepage.jsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useFormik } from "formik";
import { useNavigate } from "react-router-dom";
-import { AuthContext } from "../contexts/AuthContext";
+import { AuthContext } from "../../contexts/AuthContext";
export default function Conversations() {
const { user, authAxios } = useContext(AuthContext);
@@ -14,7 +14,7 @@ export default function Conversations() {
const res = await fetch("http://127.0.0.1:8000/api/conversations/", {
headers: {
Authorization: `Token ${user?.token}`,
- },
+ },
});
const data = await res.json();
setConvers(data);
diff --git a/dermit/src/components/userDashboard/UserDashboardLayout.jsx b/dermit/src/components/userDashboard/UserDashboardLayout.jsx
new file mode 100644
index 0000000..1d92523
--- /dev/null
+++ b/dermit/src/components/userDashboard/UserDashboardLayout.jsx
@@ -0,0 +1,86 @@
+import { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useFormik } from "formik";
+import { useNavigate } from "react-router-dom";
+import { AuthContext } from "../../contexts/AuthContext";
+
+export default function UserDashboardLayout() {
+ const { user, authAxios } = useContext(AuthContext);
+ const [error, setError] = useState(null);
+ const [convers, setConvers] = useState([]);
+ const navigate = useNavigate();
+ useEffect(() => {
+ async function fetchConvers() {
+ const res = await fetch("http://127.0.0.1:8000/api/conversations/", {
+ headers: {
+ Authorization: `Token ${user?.token}`,
+ },
+ });
+ const data = await res.json();
+ setConvers(data);
+ }
+ fetchConvers();
+ }, []);
+
+ const formik = useFormik({
+ initialValues: {
+ name: ""
+ },
+ onSubmit: async (values, { setSubmitting }) => {
+ setSubmitting(true);
+ const { name } = values;
+ const res = await authAxios.post(`conversations/`, { name });
+ if (res.error && res.data) {
+ if (res.data && res.data.detail) {
+ setError(res.data.detail);
+ }
+ } else {
+ navigate(`/chats/${res.data.id}/`);
+ }
+ setSubmitting(false);
+ }
+ });
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/dermit/src/index.css b/dermit/src/index.css
index c6f136f..849b4ee 100644
--- a/dermit/src/index.css
+++ b/dermit/src/index.css
@@ -6,4 +6,11 @@ body {
margin: 0;
padding: 0;
box-sizing: border-box;
+ overflow-x: hidden;
+}
+
+@layer components{
+ .dragClass{
+ @apply bg-emerald-600/10 *:opacity-60
+}
}
\ No newline at end of file
diff --git a/dermit/tailwind.config.js b/dermit/tailwind.config.js
index d37737f..a08c93f 100644
--- a/dermit/tailwind.config.js
+++ b/dermit/tailwind.config.js
@@ -1,12 +1,21 @@
+const {nextui} = require("@nextui-org/react");
+
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
+ "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
- extend: {},
- },
- plugins: [],
+ extend: {
+ colors: {
+ primaryBlue: "#3498db",
+ primaryGray: "#eaeaea",
+ primaryGreen: "#0A6847",
+ },
+ },
+},
+ plugins: [nextui()],
}
+
diff --git a/dermit/src/components/diagnose/cv/CvTest.jsx b/dermit/src/components/diagnose/cv/CvTest.jsx
new file mode 100644
index 0000000..6b5b877
--- /dev/null
+++ b/dermit/src/components/diagnose/cv/CvTest.jsx
@@ -0,0 +1,223 @@
+import React, { useRef, useState, useEffect } from "react";
+import { useContext } from "react";
+import { AIModelContext } from "../../../contexts/AIModelContext";
+import { AuthContext } from "../../../contexts/AuthContext";
+import { useNavigate } from "react-router-dom";
+import { IoImages } from "react-icons/io5";
+import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io";
+import { GrUploadOption } from "react-icons/gr";
+import { MdOutlineCancel } from "react-icons/md";
+import { ToastContainer, toast } from "react-toastify";
+import {
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ useDisclosure,
+} from "@nextui-org/react";
+import { truncate } from "lodash";
+import UploadImage from "./UploadImage";
+import DetectedSymptoms from "./DetectedSymptoms";
+
+const CvTest = () => {
+ const symptomsURL = "http://localhost:8000/static/chat/images/output";
+ const { user, authAxios } = useContext(AuthContext);
+ const imageHandler = useRef(null);
+ const [filesList, setFilesList] = useState([]);
+ const [isUploading, setIsUploading] = useState(false);
+ const navigate = useNavigate();
+ const { formValues, setFormValues } = useContext(AIModelContext);
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const [resp, setResp] = useState([]);
+
+
+ const dragEnter = () => {
+ imageHandler.current.classList.add("dragClass");
+ };
+ const dragLeave = () => {
+ imageHandler.current.classList.remove("dragClass");
+ };
+ const drop = () => {
+ imageHandler.current.classList.remove("dragClass");
+ };
+ const clearQueue = () => {
+ filesList.forEach((image) => {
+ console.log("image.name: ", image.file.name);
+ URL.revokeObjectURL(image.preview);
+ });
+ setFilesList([]);
+ toast.warn("Image Queue Cleared", {
+ autoClose: 3000,
+ position: "top-center",
+ });
+ };
+ const onFileDrop = (e) => {
+ // e.target.files returns FileList object which doesn't have all the property of an array
+ const files = [...e.target.files]; // spread operator (...) converts this FileList to an actual array object
+ // Now filter each files for supported image format
+ // If right format then append the to fileList state based on its previous value
+
+ const acceptedFiles = files.filter((element) => {
+ return (
+ element.type === "image/png" ||
+ element.type === "image/jpeg" ||
+ element.type === "image/jpg"
+ );
+ });
+
+ if (acceptedFiles.length > 0) {
+ const filesWithPreview = acceptedFiles.map((file) => {
+ console.log("file: ", file);
+
+ return {
+ file,
+ preview: URL.createObjectURL(file),
+ };
+ });
+ console.log("acceptedFiles: ", filesWithPreview);
+ setFilesList((prevList) => [...prevList, ...filesWithPreview]);
+ } else {
+ toast.error(`Please upload image(s) in supported formats`, {
+ autoClose: 3000,
+ position: "top-center",
+ newestOnTop: true,
+ });
+ }
+ };
+ useEffect(() => {
+ if (filesList.length > 0) {
+ console.log("ue", filesList);
+ console.log("ue", typeof filesList);
+ toast.success(`${filesList.length} images are uploaded`, {
+ autoClose: 3000,
+ position: "top-center",
+ });
+ }
+ }, [filesList]);
+
+ const handleSubmit = async (event) => {
+ setResp([]);
+ event.preventDefault();
+ setIsUploading(true);
+ setTimeout(() => {}, 2000);
+ const formData = new FormData();
+
+ filesList.forEach((image) => {
+ formData.append("image", image.file);
+ });
+
+ formData.entries().forEach((e) => console.log(e));
+
+ try {
+ const response = await authAxios.post("images/upload/", formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: `Token ${user.token}`,
+ },
+ });
+
+ if (response.status !== 201) {
+ throw new Error(response.data || "Upload failed");
+ }
+ console.log(response);
+ setResp(response.data);
+ toast.success(`${response.data}`, {
+ autoClose: 3000,
+ position: "top-center",
+ newestOnTop: true,
+ });
+ } catch (error) {
+ console.error("Error uploading image:", error);
+ } finally {
+ setIsUploading(false);
+ }
+ };
+
+ const removeImage = (image) => {
+ console.log(`removing ${image.file.name}`);
+ URL.revokeObjectURL(image.preview);
+ const updatedList = filesList.filter((img) => {
+ return img.file.name !== image.file.name;
+ });
+ setFilesList(updatedList);
+ };
+
+ const handleModalValue = (image) => {
+ setModalValue(image);
+ };
+
+ // TODO: Remove duplicate images
+ // TODO: Add Identified Symptoms
+
+ return (
+ <>
+
+
+
+
+ Upload Images
+ +
+
+
+
+
+
+
+ Drag & Drop you images here
++ * .png .jpg .jpeg + supported +
+
+
+
+
+
+
+ {resp.map((data, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+ {(onClose) => (
+ <>
+
+ {`${modalValue.img_name}`}
+
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ )
+}
+
+export default DetectedSymptoms
\ No newline at end of file
diff --git a/dermit/src/components/diagnose/cv/UploadImage.jsx b/dermit/src/components/diagnose/cv/UploadImage.jsx
new file mode 100644
index 0000000..77a7e4f
--- /dev/null
+++ b/dermit/src/components/diagnose/cv/UploadImage.jsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { MdOutlineCancel } from "react-icons/md";
+import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io";
+import {
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ useDisclosure,
+} from "@nextui-org/react";
+import { truncate } from "lodash";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+
+const UploadImage = ({ filesList, user, removeImage }) => {
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const [modalValue, setModalValue] = useState({});
+ const handleModalValue = (image) => {
+ setModalValue(image);
+ };
+ return (
+ + Detected Symptoms +
+
+
+ {resp.length > 0 && (
+ <>
+
+ 
+
+
+
+
+
+
+ + {truncate(`${data.img_name}`, { + length: 15, + })} + {data.img_name.slice(-5, data.img_name.length)} +
+
+ 
+
+ + detected classes: + {modalValue.cls_name.map((cls, index) => { + return {" "}{cls} {" "}; + })} +
+ +
+
+ {filesList.map((image, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+ {(onClose) => (
+ <>
+
+ {`${user.username}_${modalValue.file.name}`}
+
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ );
+};
+
+export default UploadImage;
diff --git a/dermit/src/components/diagnose/cv/UploadImageModal.jsx b/dermit/src/components/diagnose/cv/UploadImageModal.jsx
new file mode 100644
index 0000000..9106b3f
--- /dev/null
+++ b/dermit/src/components/diagnose/cv/UploadImageModal.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+const UploadImageModal = () => {
+ return (
+ Uploaded Images
+
+
+ {filesList.length > 0 && (
+ <>
+
+ 
+
+ {
+ removeImage(image);
+ }}
+ />
+
+
+
+
+
+
+
+ + {truncate(`${user.username}_${image.file.name}`, { + length: 15, + })} + {image.file.name.slice(-5, image.file.name.length)} +
+{Math.floor(image.file.size / 1024)} KB
+
+ 
+
+ + size: {Math.floor(modalValue.file.size / 1024)} KB +
+ +
+
+
+ + size: {Math.floor(modalValue.file.size / 1024)} KB +
+ +RagTest
+ )
+}
+
+export default RagTest
\ No newline at end of file
diff --git a/dermit/src/components/diagnose/survey/Q1.jsx b/dermit/src/components/diagnose/survey/Q1.jsx
new file mode 100644
index 0000000..0eff73f
--- /dev/null
+++ b/dermit/src/components/diagnose/survey/Q1.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Field, ErrorMessage , Formik } from "formik";
+const Q1 = () => {
+ return (
+ <>
+ Question 1
+
+
+
+
+
+
+
+ );
+};
+
+export default Q1;
diff --git a/dermit/src/components/diagnose/survey/Q2.jsx b/dermit/src/components/diagnose/survey/Q2.jsx
new file mode 100644
index 0000000..bc2dc4e
--- /dev/null
+++ b/dermit/src/components/diagnose/survey/Q2.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Field, ErrorMessage , Formik } from "formik";
+const Q2 = () => {
+ return (
+ <>
+ Question 1
+
+
+
+
+
+
+
+ );
+};
+
+export default Q2;
\ No newline at end of file
diff --git a/dermit/src/components/diagnose/survey/Q3.jsx b/dermit/src/components/diagnose/survey/Q3.jsx
new file mode 100644
index 0000000..30e4ad5
--- /dev/null
+++ b/dermit/src/components/diagnose/survey/Q3.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Field, ErrorMessage , Formik } from "formik";
+
+const Q3 = () => {
+ return (
+ <>
+ Question 1
+
+
+
+
+
+
+
+ );
+};
+
+export default Q3;
\ No newline at end of file
diff --git a/dermit/src/components/diagnose/survey/QnA.jsx b/dermit/src/components/diagnose/survey/QnA.jsx
new file mode 100644
index 0000000..b12866c
--- /dev/null
+++ b/dermit/src/components/diagnose/survey/QnA.jsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { Form, Formik } from "formik";
+import { useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import { AIModelContext } from "../../../contexts/AIModelContext";
+import { useMultiStepForm } from "./useMultiStepForm";
+import * as Yup from "yup";
+import Q1 from "./Q1";
+import Q2 from "./Q2";
+import Q3 from "./Q3";
+
+
+// Form TO DO
+// 1. Individual question is not required (list of react nodes [Q1, Q2, Q3]), render the form with json
+// 2. Console log on CV is logging twice
+// 3. Fix current validation -> May need to implement a state manager because there are individual radio fields i.e. 3 * 5 fields
+//
+
+
+const QnA = () => {
+ const navigate = useNavigate();
+ const {
+ formSteps,
+ currentStepIndex,
+ formStep,
+ next,
+ back,
+ isFirstStep,
+ isLastStep,
+ } = useMultiStepForm([
+
+ + Revolutionizing Dermatology with AI +
++ Your one-stop solution for dermatological care. +
++ With emerging advancements in artificial intelligence, DermIT aims + to provide you with a doctor-like environment right at your + fingertips. Our platform utilizes cutting-edge AI technologies to + offer accurate diagnoses, comprehensive reports, and personalized + treatment recommendations. +
+
+
+ + How it works? +
++ Experience full diagnosis in just 4 simple steps, only possible with + state-of-the-art multi-model AI! +
+-
+
- Sing up and get started with diagnose me +
- Answer a few question related to you lifestyle habits +
- Upload images to our Computer Vision model +
- Explain your concerns to the DermIT engine + +
+
+
+ );
+}
\ No newline at end of file
diff --git a/dermit/src/contexts/AIModelContext.jsx b/dermit/src/contexts/AIModelContext.jsx
new file mode 100644
index 0000000..97e4f02
--- /dev/null
+++ b/dermit/src/contexts/AIModelContext.jsx
@@ -0,0 +1,24 @@
+import { createContext, useState } from "react";
+
+
+export const AIModelContext = createContext();
+
+export const AIModelContextProvider = ({ children }) => {
+ const [formValues, setFormValues] = useState({
+ formVal1: "",
+ formVal2: "",
+ formVal3: "",
+ });
+
+ const [CVValue, setCVValue] = useState({
+ symptom1: "acne",
+ symptom2: "acne 2",
+ symptom3: "acne 3",
+ });
+
+ return (
+
+
+ Your Previous Conversations:
+ {convers + .map((c, i) => ( + +{i+1}. {c.name}
+
+ ))}
+ +
+
+