added parrallel processing to the frontend with Promise and to the backend with asyncio

Author: ParagGhatage

backend/app/routes/routes.py

@@ -2,12 +2,12 @@
 from pydantic import BaseModel
 from app.modules.pipeline import run_scraper_pipeline
 from app.modules.pipeline import run_langgraph_workflow
-import json
 from app.modules.bias_detection.check_bias import check_bias
+import asyncio
+import json
 
 router = APIRouter()
 
-
 class URlRequest(BaseModel):
     url: str
 
@@ -18,16 +18,16 @@ async def home():
 
 @router.post("/bias")
 async def bias_detection(request: URlRequest):
-    content = run_scraper_pipeline(request.url)
-    bias_score = check_bias(content)
+    content = await asyncio.to_thread(run_scraper_pipeline,(request.url))
+    bias_score = await asyncio.to_thread(check_bias,(content))
     print(bias_score)
     return bias_score
 
 
 
 @router.post("/process")
 async def run_pipelines(request: URlRequest):
-    article_text = run_scraper_pipeline(request.url)
+    article_text = await asyncio.to_thread(run_scraper_pipeline,(request.url))
     print(json.dumps(article_text, indent=2))
-    data = run_langgraph_workflow(article_text)
+    data = await asyncio.to_thread(run_langgraph_workflow,(article_text))
     return data

frontend/app/analyze/loading/page.tsx

@@ -77,13 +77,19 @@ export default function LoadingPage() {
               }
             ),
             axios.post(
-              "https://Thunder1245-perspective-backend.hf.space/api/bias",
+              "http://Thunder1245-perspective-backend.hf.space/api/bias",
               {
                 url: storedUrl,
               }
             ),
           ]);
 
+
+          sessionStorage.setItem("BiasScore", JSON.stringify(biasRes.data));
+
+          console.log("Bias score saved");
+          console.log(biasRes);
+
           // Save response to sessionStorage
           sessionStorage.setItem(
             "analysisResult",
@@ -93,10 +99,7 @@ export default function LoadingPage() {
           console.log("Analysis result saved");
           console.log(processRes);
 
-          sessionStorage.setItem("biasScore", JSON.stringify(biasRes.data));
-
-          console.log("Bias score saved");
-          console.log(biasRes);
+          
           // optional logging
         } catch (err) {
           console.error("Failed to process article:", err);

frontend/app/analyze/results/page.tsx

@@ -5,13 +5,7 @@ import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import {
-  ArrowLeft,
-  Globe,
-  MessageSquare,
   Send,
-  ThumbsDown,
-  ThumbsUp,
-  Menu,
   Link as LinkIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -23,12 +17,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
 import BiasMeter from "@/components/bias-meter";
 
+
 /**
  * Renders the article analysis page with summary, perspectives, fact checks, bias meter, AI chat, and sources.
  */
@@ -40,7 +33,6 @@ export default function AnalyzePage() {
   const [activeTab, setActiveTab] = useState("summary");
   const [message, setMessage] = useState("");
   const [isLoading, setIsLoading] = useState(true);
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [messages, setMessages] = useState<{ role: string; content: string }[]>(
     [
       {
@@ -52,54 +44,39 @@ export default function AnalyzePage() {
   );
 
   useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 1500);
-    const storedData = sessionStorage.getItem("analysisResult");
     const storedBiasScore = sessionStorage.getItem("BiasScore");
+    const storedData = sessionStorage.getItem("analysisResult");
+    if (storedBiasScore && storedData){
+      setIsLoading(false);
+      }
+
     if (storedBiasScore) setBiasScore(JSON.parse(storedBiasScore).bias_score);
     else console.warn("No bias score found.");
 
     if (storedData) setAnalysisData(JSON.parse(storedData));
     else console.warn("No analysis result found");
-    return () => clearTimeout(timer);
+  
   }, []);
 
   useEffect(() => {
     if (isRedirecting.current) {
       return;
     }
 
-    const timer = setTimeout(() => setIsLoading(false), 1500);
+    
     const storedData = sessionStorage.getItem("analysisResult");
+    const storedBiasScore = sessionStorage.getItem("BiasScore");
 
-    if (storedData) {
-      const parsedData = JSON.parse(storedData);
-      const requiredFields = [
-        "cleaned_text",
-        "facts",
-        "sentiment",
-        "perspective",
-        "score",
-      ];
-      const isDataValid = requiredFields.every(
-        (field) => parsedData[field] !== undefined && parsedData[field] !== null
-      );
-
-      if (isDataValid) {
-        setAnalysisData(parsedData);
-      } else {
-        console.warn("Incomplete analysis data. Redirecting...");
-
-        isRedirecting.current = true;
-        router.push("/analyze");
-      }
-    } else {
-      console.warn("No analysis result found. Redirecting...");
-
-      isRedirecting.current = true;
-      router.push("/analyze");
+    if (storedBiasScore && storedData) {
+    // inside here TS knows storedBiasScore and storedData are strings
+    setBiasScore(JSON.parse(storedBiasScore).bias_score);
+    setAnalysisData(JSON.parse(storedData));
+    setIsLoading(false);
+  } else {
+    console.warn("No bias or data found. Redirecting...");
+    router.push("/analyze");
     }
 
-    return () => clearTimeout(timer);
   }, [router]);
 
   const handleSendMessage = (e: React.FormEvent) => {
@@ -120,7 +97,7 @@ export default function AnalyzePage() {
     }, 1000);
   };
 
-  if (isLoading || !analysisData) {
+  if (isLoading || !analysisData || !biasScore) {
     return (
       <div className="flex items-center justify-center h-screen">
         <div className="text-muted-foreground">Analyzing content...</div>
@@ -156,7 +133,7 @@ export default function AnalyzePage() {
           </Badge>
         </div>
         <div className="bg-card rounded-lg border p-4 mb-8">
-          <BiasMeter score={score} />
+          <BiasMeter score={biasScore} />
           <p className="text-sm mt-2">Bias Score: {biasScore}</p>
         </div>