feat(frontend): add character counter and text validation to prevent OOM crashes

eduaid_web/src/components/FormValidation/CharacterCounter.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const CharacterCounter = ({ text, maxLength = 2500 }) => {
+  const count = text?.length || 0;
+  const isNearLimit = count > maxLength * 0.8;
+  const isOverLimit = count > maxLength;
+
+  let textColor = "text-[#E4E4E4]";
+  if (isOverLimit) {
+    textColor = "text-red-500 font-bold";
+  } else if (isNearLimit) {
+    textColor = "text-yellow-500";
+  }
+
+  return (
+    <div className={`text-xs text-right mt-1 transition-colors duration-300 ${textColor}`}>
+      {count} / {maxLength} characters
+      {isOverLimit && <span className="ml-2">Exceeds model capacity</span>}
+    </div>
+  );
+};
+
+export default CharacterCounter;

eduaid_web/src/pages/Text_Input.jsx

@@ -7,10 +7,13 @@ import { FaClipboard } from "react-icons/fa";
 import Switch from "react-switch";
 import { Link,useNavigate } from "react-router-dom";
 import apiClient from "../utils/apiClient";
+import CharacterCounter from "../components/FormValidation/CharacterCounter";
+import { validateTextInput } from "../utils/validation";
 
 const Text_Input = () => {
   const navigate = useNavigate();
   const [text, setText] = useState("");
+  const [validationError, setValidationError] = useState("");
   const [difficulty, setDifficulty] = useState("Easy Difficulty");
   const [numQuestions, setNumQuestions] = useState(10);
   const [loading, setLoading] = useState(false);
@@ -62,7 +65,16 @@ const Text_Input = () => {
       } finally {
         setLoading(false);
       }
-    } else if (text) {
+    } else {
+      // Validate text input before proceeding
+      const validation = validateTextInput(text);
+      if (!validation.isValid) {
+        setValidationError(validation.error);
+        setLoading(false);
+        return;
+      }
+      setValidationError("");
+
       // Proceed with existing functionality for local storage
       localStorage.setItem("textContent", text);
       localStorage.setItem("difficulty", difficulty);
@@ -178,6 +190,16 @@ const Text_Input = () => {
           />
           <style>{`textarea::-webkit-scrollbar { display: none; }`}</style>
         </div>
+
+        {/* Character Counter */}
+        <div className="mx-4 sm:mx-8">
+          <CharacterCounter text={text.trim()} maxLength={2500} />
+          {validationError && (
+            <div className="text-red-500 font-bold text-sm mt-2">
+              {validationError}
+            </div>
+          )}
+        </div>
 
         {/* Separator */}
         <div className="text-white text-center my-4 text-lg">or</div>
@@ -247,9 +269,12 @@ const Text_Input = () => {
           </Link>
           <button
             onClick={handleSaveToLocalStorage}
-            className="bg-black text-white text-lg sm:text-xl px-4 py-2 border-gradient flex justify-center items-center rounded-xl w-full sm:w-auto"
+            disabled={loading || text.trim().length > 2500}
+            className={`bg-black text-white text-lg sm:text-xl px-4 py-2 border-gradient flex justify-center items-center rounded-xl w-full sm:w-auto ${
+              text.trim().length > 2500 ? "opacity-50 cursor-not-allowed" : "hover:opacity-90 transition-opacity"
+            }`}
           >
-            Next
+            {loading ? "Processing..." : "Next"}
           </button>
         </div>
       </div>

eduaid_web/src/utils/validation.js

@@ -0,0 +1,15 @@
+export const validateTextInput = (text) => {
+  if (!text || text.trim().length === 0) {
+    return { isValid: false, error: "Please enter some text to generate questions." };
+  }
+
+  if (text.length < 50) {
+    return { isValid: false, error: "Text is too short. Please provide at least 50 characters." };
+  }
+
+  if (text.length > 2500) {
+    return { isValid: false, error: "Text exceeds the 2500 character limit. Please shorten your text." };
+  }
+
+  return { isValid: true, error: "" };
+};