fix: dynamic compression ratio, CUD badge in navbar, slate-300 borders, matched output text size

frontend/src/components/BatchUpload.jsx

@@ -2,7 +2,7 @@ import { UploadCloud, Database } from "lucide-react";
 
 export default function DatasetLoader() {
   return (
-    <div className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-[#0d1326] p-5 shadow-sm dark:shadow-xl">
+    <div className="rounded-2xl border border-slate-300 dark:border-white/[0.07] bg-white dark:bg-[#0d1326] p-5 shadow-sm dark:shadow-xl">
       <div className="flex items-center gap-2 mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
         <Database size={12}/> Load Your Dataset
       </div>

frontend/src/components/DatasetToggle.jsx

@@ -7,7 +7,7 @@ export default function DatasetToggle({ value, onChange }) {
   ];
 
   return (
-    <div className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-[#0d1326] p-5 shadow-sm dark:shadow-xl">
+    <div className="rounded-2xl border border-slate-300 dark:border-white/[0.07] bg-white dark:bg-[#0d1326] p-5 shadow-sm dark:shadow-xl">
       <div className="flex items-center gap-2 mb-4 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
         <Database size={12}/> Analysis Dataset
       </div>

frontend/src/components/SummarizerWidget.jsx

@@ -116,7 +116,7 @@ export default function SummarizerWidget({
 
   return (
     <div className="w-full h-full flex flex-col">
-      <div className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-[#0d1326] shadow-sm dark:shadow-2xl flex-1 flex flex-col">
+      <div className="rounded-2xl border border-slate-300 dark:border-white/[0.07] bg-white dark:bg-[#0d1326] shadow-sm dark:shadow-2xl flex-1 flex flex-col">
         
         {/* Input and Output Split Area */}
         <div className="grid gap-0 lg:grid-cols-2 flex-1">
@@ -158,7 +158,7 @@ export default function SummarizerWidget({
              <div className="flex flex-col custom-scroll">
                 {summary ? (
                     <>
-                      <p className="text-[15px] leading-[1.85] text-slate-800 dark:text-slate-100 whitespace-pre-wrap">{summary.replace(/<n>/gi, '\n\n').replace(/[ \t]+/g, ' ').trim()}</p>
+                      <p className="text-lg leading-[1.85] text-slate-800 dark:text-slate-100 whitespace-pre-wrap">{summary.replace(/<n>/gi, '\n\n').replace(/[ \t]+/g, ' ').trim()}</p>
                       {extractedTags.length > 0 && (
                         <div className="mt-3 flex flex-wrap gap-1.5">
                           {extractedTags.map((tag, idx) => (

frontend/src/pages/Home.jsx

@@ -84,9 +84,9 @@ export default function Home() {
             <span className="font-black text-base tracking-tight text-slate-900 dark:text-white uppercase">Traffic</span>
             <span className="text-orange-400 font-black text-base uppercase">Intel</span>
           </div>
-          <span className="hidden sm:inline-flex ml-2 text-[10px] font-bold tracking-widest uppercase px-2.5 py-1 rounded-full border border-orange-500/30 bg-orange-500/10 text-orange-400">
-            LLM Summarization Demo
-          </span>
+          <div className="hidden sm:flex flex-col ml-2 justify-center">
+            <span className="text-[9px] font-bold tracking-widest uppercase text-slate-400 dark:text-slate-500">CUD · AAI Midterm Project</span>
+          </div>
         </div>
         <div className="flex items-center gap-3">
           <span className="hidden md:flex items-center gap-1.5 text-xs font-medium text-slate-500">
@@ -107,11 +107,7 @@ export default function Home() {
 
         {/* Hero Banner */}
         <div className="mb-8 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
-          <div className="space-y-3">
-            <span className="inline-flex items-center gap-2 rounded-full border border-orange-500/30 bg-orange-500/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-orange-400">
-              <span className="h-1.5 w-1.5 rounded-full bg-orange-500 dot-glow"></span>
-              CUD · AAI Midterm Project
-            </span>
+          <div className="space-y-2">
             <h1 className="text-4xl lg:text-5xl xl:text-6xl font-black tracking-tight text-slate-900 dark:text-white leading-none">
               Turn Traffic Chaos{" "}
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-amber-400">
@@ -128,7 +124,7 @@ export default function Home() {
               { label: "GCC Samples", value: "250+" },
               { label: "US Records",  value: "5K+"  }
             ].map(s => (
-              <div key={s.label} className="text-center bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/[0.06] rounded-xl px-5 py-3">
+              <div key={s.label} className="text-center bg-slate-100 dark:bg-white/5 border border-slate-300 dark:border-white/[0.07] rounded-xl px-5 py-3">
                 <div className="text-2xl font-black text-slate-900 dark:text-white">{s.value}</div>
                 <div className="text-[10px] uppercase tracking-widest font-bold text-slate-500 dark:text-slate-500">{s.label}</div>
               </div>
@@ -137,7 +133,7 @@ export default function Home() {
         </div>
 
         {/* 3-Column Main Grid */}
-        <div className="grid grid-cols-1 xl:grid-cols-[1fr_340px_300px] gap-5 items-stretch">
+        <div className="grid grid-cols-1 xl:grid-cols-[1fr_340px_300px] gap-5 items-stretch border-t border-slate-200 dark:border-white/[0.05] pt-6">
 
           {/* Column 1: Main Summarizer Widget */}
           <div className="h-full min-h-0">
@@ -154,7 +150,7 @@ export default function Home() {
 
           {/* Column 2: Dataset Preview */}
           <div className="h-full flex flex-col min-h-0">
-            <div className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-[#0d1326] shadow-sm dark:shadow-2xl flex flex-col flex-1 overflow-hidden">
+            <div className="rounded-2xl border border-slate-300 dark:border-white/[0.07] bg-white dark:bg-[#0d1326] shadow-sm dark:shadow-2xl flex flex-col flex-1 overflow-hidden">
               <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b border-slate-100 dark:border-white/[0.05]">
                 <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-400">Dataset Preview</h3>
                 <span className="rounded-full bg-slate-100 dark:bg-white/5 px-3 py-1 text-[11px] font-bold text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/[0.08]">

src/models/abstractive.py

@@ -49,21 +49,26 @@ def generate_summary(text: str, model_name: str, config_path: str = "config.yaml
     source_text = f"{gen.prompt_prefix}{' '.join(str(text).split())}"
     encoded = tokenizer(source_text, truncation=True, max_length=gen.max_input_tokens, return_tensors="pt")
     encoded = {k: v.to(get_device()) for k, v in encoded.items()}
-    actual_max_tokens = max_new_tokens or gen.max_new_tokens
-    actual_min_tokens = gen.min_new_tokens
-    
+
+    # Dynamically cap max_new_tokens at 55 % of input length to enforce compression.
+    # This prevents the model from echoing short inputs verbatim.
+    input_len = encoded["input_ids"].shape[-1]
+    dynamic_max = max(gen.min_new_tokens, min(int(input_len * 0.55), gen.max_new_tokens))
+    actual_max_tokens = max_new_tokens or dynamic_max
+
     with torch.inference_mode():
         output_ids = model.generate(
             **encoded,
-            min_new_tokens=actual_min_tokens,
+            min_new_tokens=gen.min_new_tokens,
             max_new_tokens=actual_max_tokens,
             num_beams=gen.num_beams,
-            length_penalty=gen.length_penalty,
-            no_repeat_ngram_size=gen.no_repeat_ngram_size,
-            early_stopping=bool(gen.early_stopping),
+            length_penalty=2.0,          # strongly prefers shorter outputs
+            no_repeat_ngram_size=4,      # blocks 4-gram repetition / copy
+            early_stopping=True,
         )
     output_text = " ".join(tokenizer.decode(output_ids[0], skip_special_tokens=True).split())
-    # Post-processing filters for common model hallucinations
+
+    # Post-processing: strip known hallucinations
     hallucinations = [
         "For confidential support call the Samaritans in the UK on 08457 90 90 90, visit a local Samaritans branch or click here for details.",
         "For confidential support call the Samaritans",
@@ -73,8 +78,10 @@ def generate_summary(text: str, model_name: str, config_path: str = "config.yaml
     ]
     for h in hallucinations:
         output_text = output_text.replace(h, "").strip()
+
     return " ".join(output_text.split())
 
+
 def available_abstractive_models(config_path: str = "config.yaml") -> List[str]:
     cfg = load_config(config_path)
     return [name for name, meta in cfg["models"].items() if meta.get("enabled", False)]