Merge pull request #105 from AOSSIE-Org/store-and-send_node

 `store_and_send` Node: Embedding & Pinecone Storage + Frontend Sync

Author: ManavSarkar

frontend/app/analyze/loading/page.tsx

@@ -6,6 +6,7 @@ import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Globe, Brain, Shield, CheckCircle, Database, Sparkles, Zap } from "lucide-react"
 import ThemeToggle from "@/components/theme-toggle"
+import axios from "axios"
 
 /**
  * Displays a multi-step animated loading and progress interface for the article analysis workflow.
@@ -54,47 +55,64 @@ export default function LoadingPage() {
   ]
 
   useEffect(() => {
-    // Get the article URL from sessionStorage
+  const runAnalysis = async () => {
     const storedUrl = sessionStorage.getItem("articleUrl")
     if (storedUrl) {
       setArticleUrl(storedUrl)
+
+      try {
+        const res = await axios.post("https://Thunder1245-perspective1.hf.space/api/process", {
+          url: storedUrl,
+        })
+
+        // Save response to sessionStorage
+        sessionStorage.setItem("analysisResult", JSON.stringify(res.data))
+
+        // optional logging
+        console.log("Analysis result saved")
+        console.log(res)
+      } catch (err) {
+        console.error("Failed to process article:", err)
+        router.push("/analyze") // fallback in case of error
+        return
+      }
+
+      // Progress and step simulation
+      const stepInterval = setInterval(() => {
+        setCurrentStep((prev) => {
+          if (prev < steps.length - 1) {
+            return prev + 1
+          } else {
+            clearInterval(stepInterval)
+            setTimeout(() => {
+              router.push("/analyze/results")
+            }, 2000)
+            return prev
+          }
+        })
+      }, 2000)
+
+      const progressInterval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev < 100) {
+            return prev + 1
+          }
+          return prev
+        })
+      }, 100)
+
+      return () => {
+        clearInterval(stepInterval)
+        clearInterval(progressInterval)
+      }
     } else {
-      // Redirect back if no URL found
       router.push("/analyze")
-      return
     }
+  }
+
+  runAnalysis()
+}, [router])
 
-    // Simulate processing steps
-    const stepInterval = setInterval(() => {
-      setCurrentStep((prev) => {
-        if (prev < steps.length - 1) {
-          return prev + 1
-        } else {
-          clearInterval(stepInterval)
-          // After all steps complete, redirect to results
-          setTimeout(() => {
-            router.push("/analyze/results")
-          }, 2000)
-          return prev
-        }
-      })
-    }, 2000)
-
-    // Progress animation
-    const progressInterval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev < 100) {
-          return prev + 1
-        }
-        return prev
-      })
-    }, 100)
-
-    return () => {
-      clearInterval(stepInterval)
-      clearInterval(progressInterval)
-    }
-  }, [router])
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-100/50 dark:from-slate-900 dark:via-slate-900/80 dark:to-indigo-950/50 transition-colors duration-300 overflow-hidden">

frontend/app/analyze/results/page.tsx

@@ -20,6 +20,7 @@ import BiasMeter from "@/components/bias-meter"
  * Provides an interactive interface for users to review an article's summary, explore alternative perspectives, verify factual claims, and engage in AI-assisted discussion. Includes responsive navigation, a bias visualization, and a curated list of references.
  */
 export default function AnalyzePage() {
+  const [analysisData, setAnalysisData] = useState(null)
   const [activeTab, setActiveTab] = useState("summary")
   const [message, setMessage] = useState("")
   const [isLoading, setIsLoading] = useState(true)
@@ -38,6 +39,14 @@ export default function AnalyzePage() {
     const timer = setTimeout(() => {
       setIsLoading(false)
     }, 1500)
+    const storedData = sessionStorage.getItem("analysisResult")
+    if (storedData) {
+      setAnalysisData(JSON.parse(storedData))
+    } else {
+      // fallback if user visits results page directly
+      // maybe redirect or show error
+      console.warn("No analysis result found")
+    }
 
     return () => clearTimeout(timer)
   }, [])
@@ -66,6 +75,12 @@ export default function AnalyzePage() {
 
   return (
     <div className="flex flex-col min-h-screen">
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Analysis Results</h1>
+      <pre className="bg-black p-4 rounded text-sm overflow-x-auto whitespace-pre-wrap">
+        {JSON.stringify(analysisData, null, 2)}
+      </pre>
+    </div>
       <header className="px-4 lg:px-6 h-14 md:h-16 flex items-center border-b backdrop-blur-sm bg-background/80 fixed w-full z-10">
         <Link className="flex items-center justify-center" href="/">
           <Globe className="h-5 w-5 md:h-6 md:w-6 mr-2 text-primary" />

frontend/components/bias-meter.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
 interface BiasMeterProps {
-  score: number
+  score: number;
 }
 
 /**
@@ -13,26 +13,28 @@ interface BiasMeterProps {
  */
 export default function BiasMeter({ score }: BiasMeterProps) {
   const getScoreColor = (score: number) => {
-    if (score <= 30) return "text-green-500"
-    if (score <= 60) return "text-yellow-500"
-    return "text-red-500"
-  }
+    if (score <= 30) return "text-green-500";
+    if (score <= 60) return "text-yellow-500";
+    return "text-red-500";
+  };
 
   const getScoreLabel = (score: number) => {
-    if (score <= 30) return "Low Bias"
-    if (score <= 60) return "Moderate Bias"
-    return "High Bias"
-  }
+    if (score <= 30) return "Low Bias";
+    if (score <= 60) return "Moderate Bias";
+    return "High Bias";
+  };
 
-  const circumference = 2 * Math.PI * 45
-  const strokeDasharray = circumference
-  const strokeDashoffset = circumference - (score / 100) * circumference
+  const circumference = 2 * Math.PI * 45;
+  const strokeDasharray = circumference;
+  const strokeDashoffset = circumference - (score / 100) * circumference;
 
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
         <h3 className="font-medium text-sm">Bias Score</h3>
-        <span className={`text-sm font-semibold ${getScoreColor(score)}`}>{score}/100</span>
+        <span className={`text-sm font-semibold ${getScoreColor(score)}`}>
+          {score}/100
+        </span>
       </div>
       <div className="flex items-center justify-center">
         <div className="relative w-24 h-24">
@@ -55,16 +57,22 @@ export default function BiasMeter({ score }: BiasMeterProps) {
               fill="transparent"
               strokeDasharray={strokeDasharray}
               strokeDashoffset={strokeDashoffset}
-              className={`transition-all duration-1000 ease-out ${getScoreColor(score)}`}
+              className={`transition-all duration-1000 ease-out ${getScoreColor(
+                score
+              )}`}
               strokeLinecap="round"
             />
           </svg>
           <div className="absolute inset-0 flex items-center justify-center">
-            <span className={`text-lg font-bold ${getScoreColor(score)}`}>{score}</span>
+            <span className={`text-lg font-bold ${getScoreColor(score)}`}>
+              {score}
+            </span>
           </div>
         </div>
       </div>
-      <p className="text-xs text-muted-foreground text-center">{getScoreLabel(score)}</p>
+      <p className="text-xs text-muted-foreground text-center">
+        {getScoreLabel(score)}
+      </p>
     </div>
-  )
+  );
 }