From a534126c61f7a523dac104cc793064c39df601dd Mon Sep 17 00:00:00 2001 From: Carlos Mesquita Date: Wed, 31 Jul 2024 20:44:46 +0100 Subject: [PATCH] training.tsx still a bit messy, all that is left is to retrieve data from firestore /training and /walkthrough and render it --- package-lock.json | 116 ++++ package.json | 5 +- src/components/AIDetection.tsx | 24 +- src/components/Sidebar.tsx | 4 + .../TrainingContent/AnimatedHighlight.tsx | 23 + src/components/TrainingContent/Exercise.tsx | 84 +++ .../TrainingContent/ExerciseWalkthrough.tsx | 287 +++++++++ .../TrainingContent/TrainingInterfaces.ts | 50 ++ src/pages/api/training/index.ts | 50 ++ src/pages/record.tsx | 189 +++--- src/pages/training.tsx | 553 ++++++++++++++++++ src/stores/recordStore.ts | 4 + src/stores/trainingContentStore.ts | 18 + tailwind.config.js | 5 +- tsconfig.json | 5 +- yarn.lock | 468 ++++++++------- 16 files changed, 1600 insertions(+), 285 deletions(-) create mode 100644 src/components/TrainingContent/AnimatedHighlight.tsx create mode 100644 src/components/TrainingContent/Exercise.tsx create mode 100644 src/components/TrainingContent/ExerciseWalkthrough.tsx create mode 100644 src/components/TrainingContent/TrainingInterfaces.ts create mode 100644 src/pages/api/training/index.ts create mode 100644 src/pages/training.tsx create mode 100644 src/stores/trainingContentStore.ts diff --git a/package-lock.json b/package-lock.json index 1f18f099..8bde9dc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@paypal/paypal-js": "^7.1.0", "@paypal/react-paypal-js": "^8.1.3", "@react-pdf/renderer": "^3.1.14", + "@react-spring/web": "^9.7.4", "@tanstack/react-table": "^8.10.1", "@types/node": "18.13.0", "@types/react": "18.0.27", @@ -2219,6 +2220,72 @@ "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.5.0.tgz", "integrity": "sha512-XsVRkt0hQ60I4e3leAVt+aZR3KJCaJd179BfJHAv4F4x6Vq3yqkry8lcbUWKGKDw1j3/8sW4FsgGR41SFvsG9A==" }, + "node_modules/@react-spring/animated": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.4.tgz", + "integrity": "sha512-7As+8Pty2QlemJ9O5ecsuPKjmO0NKvmVkRR1n6mEotFgWar8FKuQt2xgxz3RTgxcccghpx1YdS1FCdElQNexmQ==", + "dependencies": { + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.4.tgz", + "integrity": "sha512-GzjA44niEJBFUe9jN3zubRDDDP2E4tBlhNlSIkTChiNf9p4ZQlgXBg50qbXfSXHQPHak/ExYxwhipKVsQ/sUTw==", + "dependencies": { + "@react-spring/animated": "~9.7.4", + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.4.tgz", + "integrity": "sha512-mqDI6rW0Ca8IdryOMiXRhMtVGiEGLIO89vIOyFQXRIwwIMX30HLya24g9z4olDvFyeDW3+kibiKwtZnA4xhldA==" + }, + "node_modules/@react-spring/shared": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.4.tgz", + "integrity": "sha512-bEPI7cQp94dOtCFSEYpxvLxj0+xQfB5r9Ru1h8OMycsIq7zFZon1G0sHrBLaLQIWeMCllc4tVDYRTLIRv70C8w==", + "dependencies": { + "@react-spring/rafz": "~9.7.4", + "@react-spring/types": "~9.7.4" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.4.tgz", + "integrity": "sha512-iQVztO09ZVfsletMiY+DpT/JRiBntdsdJ4uqk3UJFhrhS8mIC9ZOZbmfGSRs/kdbNPQkVyzucceDicQ/3Mlj9g==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.4.tgz", + "integrity": "sha512-UMvCZp7I5HCVIleSa4BwbNxynqvj+mJjG2m20VO2yPoi2pnCYANy58flvz9v/YcXTAvsmL655FV3pm5fbr6akA==", + "dependencies": { + "@react-spring/animated": "~9.7.4", + "@react-spring/core": "~9.7.4", + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", @@ -11551,6 +11618,55 @@ "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.5.0.tgz", "integrity": "sha512-XsVRkt0hQ60I4e3leAVt+aZR3KJCaJd179BfJHAv4F4x6Vq3yqkry8lcbUWKGKDw1j3/8sW4FsgGR41SFvsG9A==" }, + "@react-spring/animated": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.4.tgz", + "integrity": "sha512-7As+8Pty2QlemJ9O5ecsuPKjmO0NKvmVkRR1n6mEotFgWar8FKuQt2xgxz3RTgxcccghpx1YdS1FCdElQNexmQ==", + "requires": { + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + } + }, + "@react-spring/core": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.4.tgz", + "integrity": "sha512-GzjA44niEJBFUe9jN3zubRDDDP2E4tBlhNlSIkTChiNf9p4ZQlgXBg50qbXfSXHQPHak/ExYxwhipKVsQ/sUTw==", + "requires": { + "@react-spring/animated": "~9.7.4", + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + } + }, + "@react-spring/rafz": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.4.tgz", + "integrity": "sha512-mqDI6rW0Ca8IdryOMiXRhMtVGiEGLIO89vIOyFQXRIwwIMX30HLya24g9z4olDvFyeDW3+kibiKwtZnA4xhldA==" + }, + "@react-spring/shared": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.4.tgz", + "integrity": "sha512-bEPI7cQp94dOtCFSEYpxvLxj0+xQfB5r9Ru1h8OMycsIq7zFZon1G0sHrBLaLQIWeMCllc4tVDYRTLIRv70C8w==", + "requires": { + "@react-spring/rafz": "~9.7.4", + "@react-spring/types": "~9.7.4" + } + }, + "@react-spring/types": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.4.tgz", + "integrity": "sha512-iQVztO09ZVfsletMiY+DpT/JRiBntdsdJ4uqk3UJFhrhS8mIC9ZOZbmfGSRs/kdbNPQkVyzucceDicQ/3Mlj9g==" + }, + "@react-spring/web": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.4.tgz", + "integrity": "sha512-UMvCZp7I5HCVIleSa4BwbNxynqvj+mJjG2m20VO2yPoi2pnCYANy58flvz9v/YcXTAvsmL655FV3pm5fbr6akA==", + "requires": { + "@react-spring/animated": "~9.7.4", + "@react-spring/core": "~9.7.4", + "@react-spring/shared": "~9.7.4", + "@react-spring/types": "~9.7.4" + } + }, "@rushstack/eslint-patch": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", diff --git a/package.json b/package.json index 74a71187..a4d592bd 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@paypal/paypal-js": "^7.1.0", "@paypal/react-paypal-js": "^8.1.3", "@react-pdf/renderer": "^3.1.14", + "@react-spring/web": "^9.7.4", "@tanstack/react-table": "^8.10.1", "@types/node": "18.13.0", "@types/react": "18.0.27", @@ -67,6 +68,7 @@ "react-select": "^5.7.5", "react-string-replace": "^1.1.0", "react-toastify": "^9.1.2", + "react-tooltip": "^5.27.1", "react-xarrows": "^2.0.2", "read-excel-file": "^5.7.1", "short-unique-id": "5.0.2", @@ -77,8 +79,7 @@ "use-file-picker": "^2.1.0", "uuid": "^9.0.0", "wavesurfer.js": "^6.6.4", - "zustand": "^4.3.6", - "react-tooltip": "^5.27.1" + "zustand": "^4.3.6" }, "devDependencies": { "@types/blob-stream": "^0.1.33", diff --git a/src/components/AIDetection.tsx b/src/components/AIDetection.tsx index 4860ccde..29496800 100644 --- a/src/components/AIDetection.tsx +++ b/src/components/AIDetection.tsx @@ -9,7 +9,7 @@ import SegmentedProgressBar from "./SegmentedProgressBar"; // Colors and texts scrapped from gpt's zero react bundle const AIDetection: React.FC = ({ predicted_class, confidence_category, class_probabilities, sentences }) => { const probabilityTooltipContent = ` - GTP's Zero deep learning model predicts the
+ Encoach's deep learning model predicts the
probability this text has been entirely
generated by AI. For instance, a 40% AI
probability does not indicate that the text
@@ -19,7 +19,7 @@ const AIDetection: React.FC = ({ predicted_class, confide `; const confidenceTooltipContent = ` Confidence scores are a safeguard to better
- understand AI identification results. GTP Zero
+ understand AI identification results. Encoach
trained it's deep learning model on a diverse
dataset of millions of human and AI-written
documents. Green scores indicate that you can scan
@@ -32,19 +32,19 @@ const AIDetection: React.FC = ({ predicted_class, confide const confidenceKeywords = ["moderately", "highly", "confident", "uncertain"]; var confidence = { low: { - ai: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would be considered", - human: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would likely be considered", - mixed: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would likely be a" + ai: "Encoach is uncertain about this text. If Encoach had to classify it, it would be considered", + human: "Encoach is uncertain about this text. If Encoach had to classify it, it would likely be considered", + mixed: "Encoach is uncertain about this text. If Encoach had to classify it, it would likely be a" }, medium: { - ai: "GPT Zero is moderately confident this text was", - human: "GPT Zero is moderately confident this text is entirely", - mixed: "GPT Zero is moderately confident this text is a" + ai: "Encoach is moderately confident this text was", + human: "Encoach is moderately confident this text is entirely", + mixed: "Encoach is moderately confident this text is a" }, high: { - ai: "GPT Zero is highly confident this text was", - human: "GPT Zero is highly confident this text is entirely", - mixed: "GPT Zero is highly confident this text is a" + ai: "Encoach is highly confident this text was", + human: "Encoach is highly confident this text is entirely", + mixed: "Encoach is highly confident this text is a" } } var classPrediction = { @@ -107,7 +107,7 @@ const AIDetection: React.FC = ({ predicted_class, confide
-

GPT Zero AI Detection Results

+

Encoach Detection Results

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 42f3b2c8..15852575 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -14,6 +14,7 @@ import { BsClipboardData, BsFileLock, } from "react-icons/bs"; +import { CiDumbbell } from "react-icons/ci"; import {RiLogoutBoxFill} from "react-icons/ri"; import {SlPencil} from "react-icons/sl"; import {FaAward} from "react-icons/fa"; @@ -109,6 +110,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u {checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (