Fixes issue #138 #150 #151

.gitignore

@@ -18,7 +18,11 @@ backend/tokenizers
 backend/sample_input.py
 extension/pdfjs-3.9.179-dist
 backend/s2v_old
+<<<<<<< HEAD
+_pycache_/
+=======
 __pycache__/
+>>>>>>> 921717bd20401a9c54dc748b4c3a252aa7823fae
 *.pyc
 extension/dist
 extension/node_modules

backend/server.py

@@ -21,6 +21,7 @@
 from httplib2 import Http
 from oauth2client import client, file, tools
 from mediawikiapi import MediaWikiAPI
+# from mediawikiapi.exceptions import PageError
 
 app = Flask(__name__)
 CORS(app)
@@ -46,6 +47,15 @@ def process_input_text(input_text, use_mediawiki):
     return input_text
 
 
+# def process_input_text(input_text, use_mediawiki):
+#     try:
+#         if use_mediawiki == 1:
+#             input_text = mediawikiapi.summary(input_text, 8)
+#         return input_text
+#     except PageError:
+#         return f"No matching Wikipedia page found for: {input_text}"
+
+
 @app.route("/get_mcq", methods=["POST"])
 def get_mcq():
     data = request.get_json()

eduaid_web/.env

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:5000

eduaid_web/package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@material/icon-button": "^14.0.0",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,6 +19,7 @@
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "react-switch": "^7.0.0",
+    "styled-components": "^6.1.14",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

eduaid_web/src/Utils/Historysidebar.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import "../index.css";
+import logo from "../assets/aossie_logo.png";
+import { FaArrowRight } from "react-icons/fa";
+
+const Historysidebar = () => {
+  const getQuizzesFromLocalStorage = () => {
+    const quizzes = localStorage.getItem("last5Quizzes");
+    return quizzes ? JSON.parse(quizzes) : [];
+  };
+
+  const [quizzes, setQuizzes] = React.useState(getQuizzesFromLocalStorage());
+
+  const handleQuizClick = (quiz) => {
+    localStorage.setItem("qaPairs", JSON.stringify(quiz.qaPair));
+    window.location.href = "/output";
+  };
+
+  const handleClearQuizzes = () => {
+    localStorage.removeItem("last5Quizzes");
+    setQuizzes([]);
+  };
+
+  const truncateText = (text, maxLength) => {
+    return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
+  };
+
+  return (
+    <div className="w-96 h-full bg-[#02000F] p-4 flex flex-col">
+      {/* Sidebar Header */}
+      <div className="flex items-center mb-4">
+        <img src={logo} alt="logo" className="w-16" />
+
+      </div>
+
+      <div className="text-white mb-4">
+        <div className="text-xl font-bold">Previous Quizzes</div>
+        <div className="text-sm">Your recent generated quizzes</div>
+      </div>
+
+      {/* Quiz List */}
+      <div className="flex-1 overflow-y-auto">
+        {quizzes.length === 0 ? (
+          <div className="text-center text-white text-sm">
+            No quizzes available
+          </div>
+        ) : (
+          <ul className="space-y-2">
+            {quizzes.slice().reverse().map((quiz, index) => (
+              <li
+                key={index}
+                className="bg-[#202838] p-4 rounded-lg text-white cursor-pointer border-dotted border-2 border-[#7600F2] flex flex-col"
+                onClick={() => handleQuizClick(quiz)}
+              >
+                <div className="font-bold flex justify-between items-center">
+                  <span>
+                    {quiz.difficulty} - {quiz.numQuestions} Questions
+                  </span>
+                  <FaArrowRight className="text-[#7600F2]" size={20} />
+                </div>
+                <div
+                  className="text-sm text-gray-300 mt-2 truncate break-words"
+                  title={quiz.data || "Not provided"}
+                >
+                  <strong>Topic:</strong>{" "}
+                  {truncateText(quiz.data || "Not provided", 100)}
+                </div>
+                <div className="text-sm text-gray-300 mt-1">
+                  <strong>Date:</strong> {quiz.date}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Footer Buttons */}
+      <div className="mt-4 flex gap-4">
+        <button
+          onClick={handleClearQuizzes}
+          className="bg-black text-white px-4 py-2 rounded-md"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Historysidebar;

eduaid_web/src/Utils/Loader.jsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Loader = () => {
+  return (
+    <StyledWrapper>
+      <div id="wifi-loader">
+        <svg className="circle-outer" viewBox="0 0 86 86">
+          <circle className="back" cx={43} cy={43} r={40} />
+          <circle className="front" cx={43} cy={43} r={40} />
+          <circle className="new" cx={43} cy={43} r={40} />
+        </svg>
+        <svg className="circle-middle" viewBox="0 0 60 60">
+          <circle className="back" cx={30} cy={30} r={27} />
+          <circle className="front" cx={30} cy={30} r={27} />
+        </svg>
+        <svg className="circle-inner" viewBox="0 0 34 34">
+          <circle className="back" cx={17} cy={17} r={14} />
+          <circle className="front" cx={17} cy={17} r={14} />
+        </svg>
+        <div className="text" data-text="Generating..." />
+      </div>
+    </StyledWrapper>
+  );
+}
+
+const StyledWrapper = styled.div`
+  #wifi-loader {
+    --background: #62abff;
+    --front-color: #4f29f0;
+    --back-color: #c3c8de;
+    --text-color: #414856;
+    width: 64px;
+    height: 64px;
+    border-radius: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #wifi-loader svg {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #wifi-loader svg circle {
+    position: absolute;
+    fill: none;
+    stroke-width: 6px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transform: rotate(-100deg);
+    transform-origin: center;
+  }
+  #wifi-loader svg circle.back {
+    stroke: var(--back-color);
+  }
+  #wifi-loader svg circle.front {
+    stroke: var(--front-color);
+  }
+  #wifi-loader svg.circle-outer {
+    height: 86px;
+    width: 86px;
+  }
+  #wifi-loader svg.circle-outer circle {
+    stroke-dasharray: 62.75 188.25;
+  }
+  #wifi-loader svg.circle-outer circle.back {
+    animation: circle-outer135 1.8s ease infinite 0.3s;
+  }
+  #wifi-loader svg.circle-outer circle.front {
+    animation: circle-outer135 1.8s ease infinite 0.15s;
+  }
+  #wifi-loader svg.circle-middle {
+    height: 60px;
+    width: 60px;
+  }
+  #wifi-loader svg.circle-middle circle {
+    stroke-dasharray: 42.5 127.5;
+  }
+  #wifi-loader svg.circle-middle circle.back {
+    animation: circle-middle6123 1.8s ease infinite 0.25s;
+  }
+  #wifi-loader svg.circle-middle circle.front {
+    animation: circle-middle6123 1.8s ease infinite 0.1s;
+  }
+  #wifi-loader svg.circle-inner {
+    height: 34px;
+    width: 34px;
+  }
+  #wifi-loader svg.circle-inner circle {
+    stroke-dasharray: 22 66;
+  }
+  #wifi-loader svg.circle-inner circle.back {
+    animation: circle-inner162 1.8s ease infinite 0.2s;
+  }
+  #wifi-loader svg.circle-inner circle.front {
+    animation: circle-inner162 1.8s ease infinite 0.05s;
+  }
+  #wifi-loader .text {
+    position: absolute;
+    bottom: -40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // text-transform: Uppercase;
+    font-weight: 500;
+    font-size: 20px;
+    letter-spacing: 0.2px;
+  }
+  #wifi-loader .text::before, #wifi-loader .text::after {
+    content: attr(data-text);
+  }
+  #wifi-loader .text::before {
+    color: var(--text-color);
+  }
+  #wifi-loader .text::after {
+    color: var(--front-color);
+    animation: text-animation76 3.6s ease infinite;
+    position: absolute;
+    left: 0;
+  }
+  @keyframes circle-outer135 {
+    0% {
+      stroke-dashoffset: 25;
+    }
+    25% {
+      stroke-dashoffset: 0;
+    }
+    65% {
+      stroke-dashoffset: 301;
+    }
+    80% {
+      stroke-dashoffset: 276;
+    }
+    100% {
+      stroke-dashoffset: 276;
+    }
+  }
+  @keyframes circle-middle6123 {
+    0% {
+      stroke-dashoffset: 17;
+    }
+    25% {
+      stroke-dashoffset: 0;
+    }
+    65% {
+      stroke-dashoffset: 204;
+    }
+    80% {
+      stroke-dashoffset: 187;
+    }
+    100% {
+      stroke-dashoffset: 187;
+    }
+  }
+  @keyframes circle-inner162 {
+    0% {
+      stroke-dashoffset: 9;
+    }
+    25% {
+      stroke-dashoffset: 0;
+    }
+    65% {
+      stroke-dashoffset: 106;
+    }
+    80% {
+      stroke-dashoffset: 97;
+    }
+    100% {
+      stroke-dashoffset: 97;
+    }
+  }
+  @keyframes text-animation76 {
+    0% {
+      clip-path: inset(0 100% 0 0);
+    }
+    50% {
+      clip-path: inset(0);
+    }
+    100% {
+      clip-path: inset(0 0 0 100%);
+    }
+  }`;
+
+export default Loader;