Hardik/sof 215 summary page backend integration in extension

client/src/pages/SummaryPage.jsx

@@ -116,7 +116,6 @@ const SummaryPage = () => {
     console.log("req summ:  ", reqSummary);
 
     if (!reqSummary) {
-      console.log("hii: ");
       const res = axios.post(
         `${process.env.REACT_APP_API_URL}/summaries/generate`,
         {

extension/contentScript.js

@@ -21,9 +21,16 @@ function add_element(tag, attr_tag, attr_name, value) {
   return element;
 }
 
+let container;
+
 async function main() {
+  if (container) {
+    console.log(container);
+    container.remove();
+  }
+  if (!window.location.href.match(/.*youtube.com\/watch\/.*/)) return;
+
   add_css(`
-
   #ext-container {
     border-radius: 10px;
     display: flex;
@@ -141,6 +148,7 @@ async function main() {
     outline: none;
     font-size: 12px;
     padding: 15px;    
+    cursor: pointer;
   }
 
   #notes-entry-box, #ai-chat-entry-box{
@@ -218,20 +226,25 @@ async function main() {
 
   #save-button{
     border-radius: 5px;
-    background-color: rgba(169, 32, 30,0.9);
+    background-color: rgba(152, 32, 30,0.9);
     margin: 10px;
     padding: 10px;
     position: relative;
-    left: 25px;
+    left: 20px;
     color: white;
     cursor: pointer
   }
+
+  #save-button:hover{
+    background-color: rgba(180, 32, 30,1);
+    scale: 1.02;
+  }
 
   }
 
   `);
 
-  const container = add_element("div", "id", "ext-container", "");
+  container = add_element("div", "id", "ext-container", "");
 
   const t_icon = add_element(
     "div",
@@ -310,9 +323,7 @@ async function main() {
   );
 
   save_button.appendChild(save_icon);
-  save_button.innerHTML += "Save";
-
-  // save_button.onclick = async () => {
+  // save_button.innerHTML += "Save";
 
   navbar.appendChild(save_button);
   container.appendChild(navbar);
@@ -480,6 +491,28 @@ async function main() {
     }
   });
 
+  save_button.onclick = async function () {
+    if (summary_text) {
+      try {
+        const response = await fetch("http://localhost:5000/summaries/save", {
+          method: "POST",
+          mode: "cors",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            summaryBody: summary_text,
+            videoId: getVideoId(window.location.href),
+            userId: userId,
+          }),
+        });
+      } catch (error) {
+        console.error("Error saving summary:", error);
+      }
+    }
+  };
+
   ai_chat_entry_button.addEventListener("click", async () => {
     const AiQues = document.getElementById("ai-chat-entry-box").value.trim();
     let answer = null;
@@ -740,3 +773,16 @@ const observer = new MutationObserver((mutationsList, observer) => {
 const targetNode = document.body;
 const config = { childList: true, subtree: true };
 observer.observe(targetNode, config);
+
+const observeUrlChange = () => {
+  let oldHref = document.location.href;
+  const observer = new MutationObserver((mutations) => {
+    if (oldHref !== document.location.href) {
+      oldHref = document.location.href;
+      main();
+    }
+  });
+  observer.observe(targetNode, { childList: true, subtree: true });
+};
+
+window.onload = observeUrlChange;

server/controllers/summary.js

@@ -11,8 +11,7 @@ const generateSummary = async (req, res) => {
     const url = "https://www.youtube.com/watch?v=" + videoId;
     console.log(url);
     const summary = await redisClient.get(videoId);
-
-    if (summary) {
+    if (summary !== "" && summary !== null) {
       console.log("Cache hit");
       return res.status(200).json({
         summary: JSON.parse(summary),
@@ -28,11 +27,17 @@ const generateSummary = async (req, res) => {
     ]);
 
     const dataToSend = await pythonProcess.stdout.toString();
-    await redisClient.set(videoId, JSON.stringify(dataToSend));
-    res.status(200).json({
-      summary: dataToSend,
-      message: "Summary generated successfully",
-    });
+    const data = await JSON.parse(dataToSend);
+
+    if (data.summary) {
+      await redisClient.set(videoId, JSON.stringify(dataToSend));
+      res.status(200).json({
+        summary: dataToSend,
+        message: "Summary generated successfully",
+      });
+    } else {
+      res.status(400).send({ message: "Error in getting summary" });
+    }
   } catch (error) {
     res.status(400).send({ message: error.message });
   }
@@ -103,28 +108,28 @@ const fetchOneSummary = async (req, res) => {
 };
 
 const fetchFavSummaries = async (req, res) => {
-    try {
-        const { userId } = req.query;
-        if (!userId) return res.status(400).send("User ID is required");
+  try {
+    const { userId } = req.query;
+    if (!userId) return res.status(400).send("User ID is required");
 
-        // Find user with the given user ID
-        const user = await User.findById(userId);
+    // Find user with the given user ID
+    const user = await User.findById(userId);
 
-        if (!user) {
-            return res.status(400).send("User not found");
-        }
+    if (!user) {
+      return res.status(400).send("User not found");
+    }
 
-        // console.log(user.summaries);
+    // console.log(user.summaries);
 
     // Extract summary IDs from the user document where favorite is true
     const summaryIds = user.summaries
       .filter((summary) => summary.favorite === true)
       .map((summary) => summary.summaryId);
 
-        // console.log(summaryIds);
+    // console.log(summaryIds);
 
-        // Fetch summaries from the Summary schema based on the summary IDs
-        const summaries = await Summary.find({ _id: { $in: summaryIds } });
+    // Fetch summaries from the Summary schema based on the summary IDs
+    const summaries = await Summary.find({ _id: { $in: summaryIds } });
 
     console.log("Found the following summaries:");
     console.log(summaries);

server/controllers/transcript.js

@@ -1,14 +1,15 @@
 // import {spawn} from 'child_process'
 const { spawnSync } = require("child_process");
-
 const formidable = require("formidable");
 const fs = require("fs");
 const path = require("path");
+const redisClient = require("../redisConfig");
 
 // Your other codes
 
 const getTs = async (req, res) => {
-  const form = formidable({ multiples: true });
+  const form = formidable({});
+
   let oldPath;
   let newPath;
   form.parse(req, (err, fields, files) => {
@@ -68,14 +69,26 @@ const getTranscript = async (req, res) => {
       return res.status(400).json({ message: "URL is required" });
     }
 
+    const transcript = await redisClient.get("transcript-" + url);
+    if (transcript) {
+      console.log("Cache hit for transcript");
+      return res.status(200).json({
+        transcript: JSON.parse(transcript),
+        message: "Transcript generated successfully",
+      });
+    }
+    console.log("Cache miss, generating transcript...");
+
     const pythonProcess = spawnSync("python", [
       "../condense/transcript.py",
       "--url",
       url,
     ]);
 
     const dataToSend = await pythonProcess.stdout.toString();
+
     if (dataToSend) {
+      await redisClient.set("transcript-" + url, JSON.stringify(dataToSend));
       res.status(200).json({
         transcript: dataToSend,
         message: "Transcript generated successfully",