Sync from GitHub Fri Dec 26 12:29:52 UTC 2025

.dockerignore

@@ -0,0 +1,38 @@
+# Node dependencies & build outputs
+frontend/node_modules
+frontend/dist
+
+# Python virtual environments
+backend/.venv
+venv
+ENV
+
+# Caches / bytecode
+**/__pycache__
+*.py[cod]
+.pytest_cache
+.mypy_cache
+.pytype
+.pyright
+
+# Git & VCS
+.git
+.gitignore
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+
+# Editors / OS
+.idea
+.vscode
+*.code-workspace
+Thumbs.db
+.DS_Store
+
+# Misc
+coverage*
+dist
+build

.env.example

@@ -0,0 +1,10 @@
+# Supabase Configuration
+SUPABASE_URL=your_supabase_project_url_here
+SUPABASE_KEY=your_supabase_anon_key_here
+
+# Example:
+# SUPABASE_URL=https://your-project-id.supabase.co
+# SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+
+# Other environment variables
+# Add other environment variables your app needs here

.github/workflows/run-rd-pipeline.yml

@@ -0,0 +1,56 @@
+name: Run Reddit Pipeline
+
+on:
+  schedule:
+    - cron: '0 3 * * *'  # Runs daily at 03:00 UTC
+  workflow_dispatch:
+    inputs:
+      user_input_override:
+        description: 'Optional raw text to process instead of Reddit fetch'
+        required: false
+        default: ''
+
+jobs:
+  run-pipeline:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    env:
+      PYTHONUNBUFFERED: '1'
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      BRIGHTDATA_API_KEY: ${{ secrets.BRIGHTDATA_API_KEY }}
+      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+      SUPABASE_KEY: ${{ secrets.SUPABASE_KEY }}
+      REDDIT_USER_AGENT: 'Mozilla/5.0'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: pip-${{ runner.os }}-${{ hashFiles('backend/requirements.txt') }}
+          restore-keys: |
+            pip-${{ runner.os }}-
+
+      - name: Install dependencies
+        working-directory: backend
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+
+      - name: Run rd_pipeline (Reddit fetch mode or manual override)
+        working-directory: backend
+        env:
+          USER_INPUT_OVERRIDE: ${{ github.event.inputs.user_input_override || '' }}
+        run: python rd_pipeline_bdata.py
+
+      - name: Summarize run
+        if: always()
+        run: |
+          echo 'Run complete at:' $(date -u)

.github/workflows/sync-to-huggingface.yml

@@ -0,0 +1,109 @@
+name: Sync to Hugging Face Hub
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+env:
+  HF_REPO_TYPE: space
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - name: Install huggingface_hub
+        run: |
+          python -m pip install --upgrade pip
+          pip install huggingface_hub
+
+      - name: Validate secrets
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_REPO: ${{ secrets.HF_REPO }}
+        run: |
+          if [ -z "$HF_TOKEN" ]; then
+            echo "HF_TOKEN secret is not set"
+            exit 1
+          fi
+          if [ -z "$HF_REPO" ]; then
+            echo "HF_REPO secret is not set (should be like: username/repo-name)"
+            exit 1
+          fi
+
+      - name: Create or verify Hugging Face repo
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_REPO: ${{ secrets.HF_REPO }}
+          HF_REPO_TYPE: ${{ env.HF_REPO_TYPE }}
+        run: |
+          python3 -c '
+          import os
+          from huggingface_hub import HfApi, create_repo
+          
+          api = HfApi()
+          repo_id = os.environ["HF_REPO"]
+          repo_type = os.environ.get("HF_REPO_TYPE", "model")
+          token = os.environ["HF_TOKEN"]
+          
+          try:
+              api.repo_info(repo_id=repo_id, repo_type=repo_type, token=token)
+              print(f"{repo_type.capitalize()} {repo_id} exists.")
+          except:
+              print(f"Creating {repo_type} {repo_id}...")
+              create_repo(repo_id=repo_id, token=token, repo_type=repo_type, private=False, exist_ok=True)
+              print(f"{repo_type.capitalize()} {repo_id} created.")
+          '
+
+      - name: Mirror to Hugging Face
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_REPO: ${{ secrets.HF_REPO }}
+          HF_REPO_TYPE: ${{ env.HF_REPO_TYPE }}
+        run: |
+          set -e
+          
+          # Create temp directory
+          TMP_DIR=$(mktemp -d)
+          echo "Using temp directory: $TMP_DIR"
+          
+          # Copy files (excluding .git)
+          cp -r . "$TMP_DIR"
+          rm -rf "$TMP_DIR/.git"
+          cd "$TMP_DIR"
+          
+          # Initialize git
+          git init
+          git config user.name "github-actions"
+          git config user.email "github-actions@users.noreply.github.com"
+          
+          # Set remote URL based on repo type
+          if [ "$HF_REPO_TYPE" = "space" ]; then
+            REMOTE_URL="https://user:${HF_TOKEN}@huggingface.co/spaces/${HF_REPO}"
+          else
+            REMOTE_URL="https://user:${HF_TOKEN}@huggingface.co/${HF_REPO}"
+          fi
+          
+          git remote add origin "$REMOTE_URL"
+          git add .
+          git commit -m "Sync from GitHub $(date -u)"
+          git branch -M main
+          git push origin main --force
+          
+          echo "Successfully synced to Hugging Face!"
+
+      - name: Summary
+        run: echo "Sync completed successfully"

.gitignore

@@ -0,0 +1,56 @@
+# --- OS / Editor ---
+.DS_Store
+Thumbs.db
+desktop.ini
+.idea/
+.vscode/
+*.code-workspace
+
+# --- Root caches ---
+.pytest_cache/
+.mypy_cache/
+.pytype/
+.pyright/
+.coverage
+coverage.xml
+htmlcov/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+*.tsbuildinfo
+
+# --- Python (backend) ---
+backend/.venv/
+backend/.env
+backend/images/
+backend/notebooks/
+venv/
+ENV/
+env/
+**/__pycache__/
+**/*.py[cod]
+*.pyd
+*.pyo
+*.so
+*.egg-info/
+.eggs/
+
+# --- Node / Vite (frontend) ---
+frontend/node_modules/
+frontend/dist/
+frontend/.env
+frontend/.env.local
+frontend/.env.*.local
+# Optional: local tooling caches
+frontend/.cache/
+
+# --- Misc build outputs (root) ---
+/dist/
+/build/
+
+# --- OS sync artifacts ---
+~$*
+*.tmp
+*.temp

Dockerfile

@@ -0,0 +1,34 @@
+# -------- Stage 1: Build frontend (Vite + React) --------
+FROM node:20-alpine AS frontend-builder
+WORKDIR /frontend
+
+# Install deps first (better layer caching)
+COPY frontend/package*.json ./
+COPY frontend/tsconfig.json frontend/vite.config.* frontend/index.html ./
+RUN npm install
+
+# Copy source and build
+COPY frontend/src ./src
+RUN npm run build
+
+# -------- Stage 2: Backend runtime (FastAPI + Uvicorn) --------
+FROM python:3.12-slim AS runtime
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /app
+
+# Install backend dependencies
+COPY backend/requirements.txt ./backend/requirements.txt
+RUN pip install --no-cache-dir -r backend/requirements.txt
+
+# Copy backend code
+COPY backend ./backend
+
+# Copy built frontend into expected path (/app/frontend/dist)
+COPY --from=frontend-builder /frontend/dist ./frontend/dist
+
+EXPOSE 7860
+
+# Default command
+CMD ["python", "-m", "uvicorn", "backend.app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,177 @@
+---
+title: Amplify
+emoji: 🏇🏻
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+sdk_version: 4.0.0
+app_file: app.py
+pinned: false
+---
+
+# ReactFast
+
+Minimal full-stack template: **FastAPI** backend + **Vite/React (TypeScript)** frontend. The backend serves the built frontend (single-page app) and exposes a simple JSON API. Includes a multi‑stage Docker build and GitHub Actions workflow (Commit-4) to push the image to Azure Container Registry (ACR).
+
+---
+
+## Features
+- FastAPI backend (`/api/transform`, `/api/health`) with static file serving.
+- Vite + React + TypeScript frontend built to `frontend/dist`.
+- Frontend served at `/` (adjust base in `vite.config.ts`).
+- Simple round‑trip demo: user enters text, backend returns transformed string.
+- Multi-stage Dockerfile: builds frontend, copies build into Python runtime image.
+- GitHub Actions CI: builds & pushes image to ACR (tags: commit SHA + `latest`).
+
+---
+
+## Tech Stack
+| Layer      | Technology | Notes |
+|------------|------------|-------|
+| Backend    | FastAPI / Uvicorn | ASGI app serving API + static assets |
+| Frontend   | React 18 + Vite   | Fast dev server & optimized build |
+| Language   | Python 3.12 & TypeScript | Type safety on both sides |
+| Packaging  | Docker multi-stage | Small final image (Python slim) |
+| CI / CD    | GitHub Actions     | Image build & ACR push |
+| Registry   | Azure Container Registry | Deployment artifact storage |
+
+---
+
+## Repository Layout
+```
+backend/
+  app.py               # FastAPI app + API endpoints + static mounting
+  requirements.txt     # Backend dependencies
+frontend/
+  src/                 # React source (App.tsx, main.tsx, style.css)
+  index.html           # Vite entry HTML
+  vite.config.ts       # Vite config (base path, build outDir)
+  package.json         # Frontend scripts/deps
+Dockerfile             # Multi-stage build (frontend build → backend runtime)
+.dockerignore          # Prunes build context
+builderflow.md         # Incremental commit summaries (Commit-1..4)
+README.md              # This file
+```
+
+---
+
+## Backend Overview
+- Mounts frontend build via `StaticFiles` after defining API routes.
+- Example endpoints:
+  - `POST /api/transform` → `{ result: "You said: ..." }`
+  - `GET /api/health` → `{ status: "ok" }`
+- Ensure API routes are declared **before** mounting static root to avoid 405 errors (StaticFiles intercepting non-GET methods).
+
+### Running backend (local dev)
+```powershell
+cd backend
+python -m venv .venv
+.\.venv\Scripts\pip install -r requirements.txt --trusted-host pypi.org --trusted-host files.pythonhosted.org
+.\.venv\Scripts\python -m uvicorn app:app --host 127.0.0.1 --port 8000 --reload
+```
+Open: http://127.0.0.1:8000/
+
+---
+
+## Frontend Overview
+- Vite handles dev (`npm run dev`) and production builds (`npm run build`).
+- Output bundle placed in `frontend/dist` and served by FastAPI.
+- If you change route mount (e.g., from `/` to `/app`), update `base` in `vite.config.ts`.
+
+### Running frontend (standalone dev mode)
+```powershell
+cd frontend
+npm install
+npm run dev
+```
+Dev server: http://127.0.0.1:5173/ (API calls to `/api/...` will need proxy config or full backend URL if not served together).
+
+### Production build
+```powershell
+cd frontend
+npm run build
+```
+Rebuild whenever you change frontend assets before packaging backend or Docker image.
+
+---
+
+## End‑to‑End Flow
+1. User enters text in the form.
+2. Frontend sends `POST /api/transform` with `{ text }`.
+3. Backend returns a transformed string.
+4. UI displays the response below the form.
+
+---
+
+## Docker
+Multi-stage build: Node → Python.
+
+### Build locally
+```powershell
+docker build -t reactfast .
+docker run --rm -p 8000:8000 reactfast
+```
+Visit: http://localhost:8000/
+
+### Environment customization
+- Adjust exposed port by changing `-p hostPort:8000`.
+- Add env vars by appending `-e KEY=value` to `docker run`.
+- For dev hot-reload, prefer running backend & frontend separately outside container.
+
+---
+
+## GitHub Actions (Commit-4)
+Workflow builds and pushes image to ACR on push to `main`.
+
+### Required GitHub Secrets
+- `AZURE_CREDENTIALS` – Service Principal JSON (`--sdk-auth`) with AcrPush role.
+- `ACR_LOGIN_SERVER` – e.g. `myregistry.azurecr.io`.
+
+### Resulting Tags
+- `<loginServer>/reactfast:<git-sha>` (immutable)
+- `<loginServer>/reactfast:latest`
+
+### Typical Service Principal Creation
+```powershell
+$ACR_ID = az acr show -n <ACR_NAME> --query id -o tsv
+az ad sp create-for-rbac --name reactfast-sp --role AcrPush --scopes $ACR_ID --sdk-auth
+```
+Paste JSON output into `AZURE_CREDENTIALS` secret.
+
+---
+
+## Troubleshooting
+| Issue | Cause | Fix |
+|-------|-------|-----|
+| 404 assets | Wrong mount/base mismatch | Align `vite.config.ts` base with `app.mount()` path and rebuild |
+| 405 on POST /api/transform | StaticFiles mounted before API routes | Declare API routes first, mount static last |
+| Image lacks new frontend changes | Forgot to rebuild frontend in Docker | Dockerfile handles build; ensure source changes committed |
+| ACR push fails | Missing/incorrect secrets | Verify `AZURE_CREDENTIALS`, `ACR_LOGIN_SERVER` |
+
+---
+
+## Extending
+- Add tests (pytest + React Testing Library).
+- Introduce type checking (mypy/pyright) in CI.
+- Add security scanning (Trivy / GitHub Dependabot alerts).
+- Implement version tagging (semantic-release or manual release workflow).
+- Deploy automatically to Azure Web App / Container Apps after push.
+
+---
+
+## Quick Start (All-in-One)
+```powershell
+# Backend & Frontend build
+cd frontend
+npm install
+npm run build
+cd ../backend
+python -m venv .venv
+.\.venv\Scripts\pip install -r requirements.txt
+.\.venv\Scripts\python -m uvicorn app:app --host 127.0.0.1 --port 8000 --reload
+# Open http://127.0.0.1:8000/
+```
+
+---
+
+For commit-by-commit evolution see `builderflow.md`.

backend/.env.example

@@ -0,0 +1,8 @@
+AZURE_OPENAI_API_KEY=''
+AZURE_OPENAI_ENDPOINT=''
+AZURE_OPENAI_VERSION=''
+AZURE_GPT4O_MODEL=''
+MODEL_TEMPERATURE=0
+SQL_TARGET_DIALECT=ANSI
+SUPABASE_URL=''
+SUPABASE_KEY=''

backend/app.py

@@ -0,0 +1,68 @@
+# mypy: disable - error - code = "no-untyped-def,misc"
+import pathlib
+from fastapi import FastAPI, Response
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from backend.llmoperations import get_agent_response
+from backend.blog_api_supabase import setup_blog_routes
+#from blog_api_local import setup_blog_routes
+
+# Define the FastAPI app
+app = FastAPI()
+
+# Setup blog routes
+setup_blog_routes(app)
+
+# --- Simple API endpoint ---
+class TextIn(BaseModel):
+    text: str
+
+
+@app.post("/api/transform")
+def transform_text(payload: TextIn):
+    # Minimal transformation: uppercase with a prefix
+    #modified = f"Hello {payload.text.capitalize()}! How are you!"
+    answer = get_agent_response(payload.text)
+    print(f"Here is the answer : {answer}")
+    return {"result": answer}
+
+
+def create_frontend_router(build_dir="frontend/dist"):
+    """Creates a router to serve the React frontend.
+
+    Args:
+        build_dir: Path to the React build directory relative to this file.
+
+    Returns:
+        A Starlette application serving the frontend.
+    """
+    # Resolve build path from repo root (two levels up from this file: backend/ -> reactfast/)
+    build_path = pathlib.Path(__file__).resolve().parent.parent / build_dir
+
+    if not build_path.is_dir() or not (build_path / "index.html").is_file():
+        print(
+            f"WARN: Frontend build directory not found or incomplete at {build_path}. Serving frontend will likely fail."
+        )
+        # Return a dummy router if build isn't ready
+        from starlette.routing import Route
+
+        async def dummy_frontend(request):
+            return Response(
+                "Frontend not built. Run 'npm run build' in the frontend directory.",
+                media_type="text/plain",
+                status_code=503,
+            )
+
+        return Route("/{path:path}", endpoint=dummy_frontend)
+
+    return StaticFiles(directory=build_path, html=True)
+
+
+# Mount the frontend under /app to avoid conflicts and align with Vite base
+app.mount(
+    "/",
+    create_frontend_router(),
+    name="frontend",
+)
+
+

backend/blog_api_local.py

@@ -0,0 +1,277 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import List, Optional, Dict
+import sqlite3
+import json
+from pathlib import Path
+import os
+
+class BlogPost(BaseModel):
+    id: int
+    title: str
+    content: str
+    author: str
+    created_at: str
+    published: bool
+    tags: List[str]
+    featured_image: Optional[Dict] = None
+    post_images: List[Dict] = []
+
+class BlogSummary(BaseModel):
+    id: int
+    title: str
+    author: str
+    created_at: str
+    tags: List[str]
+    excerpt: str
+    has_featured_image: bool
+    featured_image_url: Optional[str] = None
+    post_image_count: int
+
+class BlogDatabase:
+    def __init__(self, db_path: str = "blog.db"):
+        self.db_path = db_path
+        self.init_database()
+    
+    def init_database(self):
+        """Initialize the blog database if it doesn't exist"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        # Check if tables exist
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='blog_posts'")
+        if not cursor.fetchone():
+            # Create tables if they don't exist
+            cursor.execute('''
+                CREATE TABLE blog_posts (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    title TEXT NOT NULL,
+                    content TEXT NOT NULL,
+                    author TEXT DEFAULT 'Admin',
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                    published BOOLEAN DEFAULT 1,
+                    tags TEXT DEFAULT '[]',
+                    featured_image_id INTEGER
+                )
+            ''')
+            
+            cursor.execute('''
+                CREATE TABLE images (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    filename TEXT NOT NULL,
+                    original_filename TEXT NOT NULL,
+                    file_path TEXT NOT NULL,
+                    file_size INTEGER,
+                    mime_type TEXT,
+                    alt_text TEXT DEFAULT '',
+                    caption TEXT DEFAULT '',
+                    width INTEGER,
+                    height INTEGER,
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+                )
+            ''')
+            
+            cursor.execute('''
+                CREATE TABLE blog_post_images (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    blog_post_id INTEGER,
+                    image_id INTEGER,
+                    image_type TEXT DEFAULT 'post_content',
+                    image_order INTEGER DEFAULT 0,
+                    position_in_content INTEGER,
+                    FOREIGN KEY (blog_post_id) REFERENCES blog_posts (id),
+                    FOREIGN KEY (image_id) REFERENCES images (id)
+                )
+            ''')
+            
+            # Insert sample blog posts
+            sample_posts = [
+                {
+                    "title": "Welcome to Our Blog",
+                    "content": "This is our first blog post! We're excited to share insights about technology, development, and innovation. Stay tuned for more amazing content coming your way.",
+                    "author": "Admin",
+                    "tags": '["welcome", "introduction", "blog"]'
+                },
+                {
+                    "title": "The Future of AI Development", 
+                    "content": "Artificial Intelligence is revolutionizing how we build applications. From machine learning models to natural language processing, AI is becoming an integral part of modern software development. In this post, we explore the latest trends and technologies shaping the future of AI development.",
+                    "author": "Tech Team",
+                    "tags": '["AI", "development", "technology", "future"]'
+                },
+                {
+                    "title": "Best Practices for Web Development",
+                    "content": "Building modern web applications requires following best practices for performance, security, and user experience. We'll cover essential techniques including responsive design, API optimization, and modern JavaScript frameworks that every developer should know.",
+                    "author": "Development Team", 
+                    "tags": '["web-development", "best-practices", "javascript", "performance"]'
+                },
+                {
+                    "title": "Building Scalable Applications",
+                    "content": "Scalability is crucial for applications that need to handle growing user bases and increasing data loads. We'll discuss architectural patterns, database optimization, and cloud deployment strategies that help applications scale efficiently.",
+                    "author": "Architecture Team",
+                    "tags": '["scalability", "architecture", "cloud", "performance"]'
+                }
+            ]
+            
+            for post in sample_posts:
+                cursor.execute('''
+                    INSERT INTO blog_posts (title, content, author, tags)
+                    VALUES (?, ?, ?, ?)
+                ''', (post["title"], post["content"], post["author"], post["tags"]))
+            
+            conn.commit()
+        
+        conn.close()
+    
+    def get_blog_posts_summary(self, limit: int = 4, offset: int = 0) -> Dict:
+        """Get blog posts summary for card display with pagination"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        # Get total count
+        cursor.execute('SELECT COUNT(*) FROM blog_posts WHERE published = 1')
+        total_count = cursor.fetchone()[0]
+        
+        # Get posts with pagination
+        cursor.execute('''
+            SELECT bp.id, bp.title, bp.author, bp.created_at, bp.tags, bp.content,
+                   bp.featured_image_id,
+                   fi.filename as featured_filename,
+                   COUNT(bpi.id) as post_image_count
+            FROM blog_posts bp
+            LEFT JOIN images fi ON bp.featured_image_id = fi.id
+            LEFT JOIN blog_post_images bpi ON bp.id = bpi.blog_post_id
+            WHERE bp.published = 1
+            GROUP BY bp.id
+            ORDER BY bp.created_at DESC 
+            LIMIT ? OFFSET ?
+        ''', (limit, offset))
+        
+        rows = cursor.fetchall()
+        conn.close()
+        
+        results = []
+        for row in rows:
+            # Create excerpt from content (first 150 characters)
+            content = row[5]
+            excerpt = content[:150] + "..." if len(content) > 150 else content
+            results.append({
+                'id': row[0],
+                'title': row[1],
+                'author': row[2],
+                'created_at': row[3],
+                'tags': json.loads(row[4]),
+                'excerpt': excerpt,
+                'has_featured_image': row[6] is not None,
+                'featured_image_url': f"/media/{row[7]}" if row[7] else None,
+                'post_image_count': row[8]
+            })
+        
+        return {
+            'posts': results,
+            'total': total_count,
+            'limit': limit,
+            'offset': offset,
+            'has_more': offset + limit < total_count
+        }
+    
+    def get_blog_post_complete(self, post_id: int) -> Optional[Dict]:
+        """Get complete blog post with all images"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        # Get blog post with featured image
+        cursor.execute('''
+            SELECT bp.id, bp.title, bp.content, bp.author, bp.created_at, 
+                   bp.published, bp.tags, bp.featured_image_id,
+                   fi.filename as featured_filename, fi.file_path as featured_path,
+                   fi.alt_text as featured_alt, fi.caption as featured_caption,
+                   fi.width as featured_width, fi.height as featured_height
+            FROM blog_posts bp
+            LEFT JOIN images fi ON bp.featured_image_id = fi.id
+            WHERE bp.id = ? AND bp.published = 1
+        ''', (post_id,))
+        
+        row = cursor.fetchone()
+        if not row:
+            conn.close()
+            return None
+        
+        # Get post content images
+        cursor.execute('''
+            SELECT i.id, i.filename, i.file_path, i.alt_text, i.caption, 
+                   i.mime_type, i.width, i.height, bpi.image_order, 
+                   bpi.position_in_content, bpi.image_type
+            FROM blog_post_images bpi
+            JOIN images i ON bpi.image_id = i.id
+            WHERE bpi.blog_post_id = ?
+            ORDER BY bpi.image_order
+        ''', (post_id,))
+        
+        post_images = cursor.fetchall()
+        conn.close()
+        
+        # Build result
+        result = {
+            'id': row[0],
+            'title': row[1],
+            'content': row[2],
+            'author': row[3],
+            'created_at': row[4],
+            'published': row[5],
+            'tags': json.loads(row[6]),
+            'featured_image': {
+                'filename': row[8],
+                'file_path': row[9],
+                'alt_text': row[10],
+                'caption': row[11],
+                'width': row[12],
+                'height': row[13],
+                'url': f"/media/{row[8]}" if row[8] else None
+            } if row[7] else None,
+            'post_images': [
+                {
+                    'id': img[0],
+                    'filename': img[1],
+                    'file_path': img[2],
+                    'alt_text': img[3],
+                    'caption': img[4],
+                    'mime_type': img[5],
+                    'width': img[6],
+                    'height': img[7],
+                    'order': img[8],
+                    'position': img[9],
+                    'type': img[10],
+                    'url': f"/media/{img[1]}"
+                }
+                for img in post_images
+            ]
+        }
+        
+        return result
+
+# Initialize database
+blog_db = BlogDatabase()
+
+def setup_blog_routes(app: FastAPI):
+    """Setup blog API routes"""
+    
+    @app.get("/api/blog/posts")
+    async def get_blog_posts(page: int = 1, limit: int = 4):
+        """Get blog posts for card display with pagination"""
+        offset = (page - 1) * limit
+        result = blog_db.get_blog_posts_summary(limit=limit, offset=offset)
+        return result
+    
+    @app.get("/api/blog/posts/{post_id}", response_model=BlogPost)
+    async def get_blog_post(post_id: int):
+        """Get complete blog post"""
+        post = blog_db.get_blog_post_complete(post_id)
+        if not post:
+            raise HTTPException(status_code=404, detail="Blog post not found")
+        return post
+
+    # Mount media files if blog_media directory exists
+    media_dir = Path("blog_media")
+    if media_dir.exists():
+        app.mount("/media", StaticFiles(directory=str(media_dir)), name="media")

backend/blog_api_supabase.py

@@ -0,0 +1,402 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import List, Optional, Dict
+import json
+from pathlib import Path
+import os
+from datetime import datetime
+from supabase import create_client, Client
+
+#http_client = httpx.Client(verify=r'C:\Users\PD817AE\OneDrive - EY\Desktop\AgenticDev\amplify\backend\certs\Zscaler Root CA.crt')
+
+class BlogPost(BaseModel):
+    id: int
+    title: str
+    content: str
+    author: str
+    created_at: str
+    published: bool
+    tags: List[str]
+    category: Optional[str] = None
+    featured_image: Optional[Dict] = None
+    post_images: List[Dict] = []
+
+class BlogSummary(BaseModel):
+    id: int
+    title: str
+    author: str
+    created_at: str
+    tags: List[str]
+    category: Optional[str] = None
+    excerpt: str
+    has_featured_image: bool
+    featured_image_url: Optional[str] = None
+    post_image_count: int
+
+class BlogDatabase:
+    def __init__(self):
+        self.url = os.getenv("SUPABASE_URL")
+        self.key = os.getenv("SUPABASE_KEY")
+        
+        if not self.url or not self.key:
+            raise ValueError("SUPABASE_URL and SUPABASE_KEY environment variables are required")
+
+        self.supabase: Client = create_client(self.url, self.key)
+
+    def get_blog_posts_summary(self, limit: int = 6, offset: int = 0, category: Optional[str] = None) -> Dict:
+        """Get blog posts summary for card display with pagination, optional category filter"""
+        try:
+            # Get total count
+            # Request exact count (Supabase client accepts 'exact')
+            count_query = self.supabase.table('blog_posts').select('id', count='exact').eq('published', True)  # type: ignore[arg-type]
+            if category and category.lower() != 'all':
+                count_query = count_query.eq('category', category)
+            count_result = count_query.execute()
+            total_raw = getattr(count_result, 'count', 0)
+            try:
+                total_count = int(total_raw) if total_raw is not None else 0
+            except Exception:
+                total_count = 0
+            
+            # Get posts with pagination
+            list_query = (
+                self.supabase
+                .table('blog_posts')
+                .select('''
+                    id,
+                    title,
+                    author,
+                    created_at,
+                    tags,
+                    category,
+                    content,
+                    featured_image_id,
+                    images!featured_image_id(filename),
+                    blog_post_images(id)
+                ''')
+                .eq('published', True)
+            )
+            if category and category.lower() != 'all':
+                list_query = list_query.eq('category', category)
+            result = (
+                list_query
+                .order('created_at', desc=True)
+                .range(offset, offset + limit - 1)
+                .execute()
+            )
+            
+            results = []
+            for row in result.data:
+                # Create excerpt from content (first 150 characters)
+                content = row['content']
+                excerpt = content[:150] + "..." if len(content) > 150 else content
+                
+                # Parse tags if they're stored as JSON string
+                tags = row['tags']
+                if isinstance(tags, str):
+                    try:
+                        tags = json.loads(tags)
+                    except:
+                        tags = []
+                
+                featured_image = row.get('images')
+                
+                results.append({
+                    'id': row['id'],
+                    'title': row['title'],
+                    'author': row['author'],
+                    'created_at': row['created_at'],
+                    'tags': tags,
+                    'category': row.get('category'),
+                    'excerpt': excerpt,
+                    'has_featured_image': featured_image is not None,
+                    'featured_image_url': f"/media/{featured_image['filename']}" if featured_image else None,
+                    'post_image_count': len(row.get('blog_post_images', []))
+                })
+            
+            has_more = False
+            try:
+                has_more = (offset + limit) < int(total_count)
+            except Exception:
+                has_more = False
+            return {
+                'posts': results,
+                'total': total_count,
+                'limit': limit,
+                'offset': offset,
+                'has_more': has_more
+            }
+            
+        except Exception as e:
+            print(f"Error fetching blog posts: {e}")
+            return {
+                'posts': [],
+                'total': 0,
+                'limit': limit,
+                'offset': offset,
+                'has_more': False
+            }
+    
+    def get_blog_post_complete(self, post_id: int) -> Optional[Dict]:
+        """Get complete blog post with all images"""
+        try:
+            # Get blog post with featured image
+            result = (
+                self.supabase
+                .table('blog_posts')
+                .select('''
+                    id,
+                    title,
+                    content,
+                    author,
+                    created_at,
+                    published,
+                    category,
+                    tags,
+                    featured_image_id,
+                    images!featured_image_id(
+                        filename,
+                        file_path,
+                        alt_text,
+                        caption,
+                        width,
+                        height
+                    )
+                ''')
+                .eq('id', post_id)
+                .eq('published', True)
+                .single()
+                .execute()
+            )
+            
+            if not result.data:
+                return None
+            
+            row = result.data
+            
+            # Get post content images
+            images_result = (
+                self.supabase
+                .table('blog_post_images')
+                .select('''
+                    images(
+                        id,
+                        filename,
+                        file_path,
+                        alt_text,
+                        caption,
+                        mime_type,
+                        width,
+                        height
+                    ),
+                    image_order,
+                    position_in_content,
+                    image_type
+                ''')
+                .eq('blog_post_id', post_id)
+                .order('image_order')
+                .execute()
+            )
+            
+            # Parse tags if they're stored as JSON string
+            tags = row['tags']
+            if isinstance(tags, str):
+                try:
+                    tags = json.loads(tags)
+                except:
+                    tags = []
+            
+            # Build result
+            featured_image_data = row.get('images')
+            
+            result = {
+                'id': row['id'],
+                'title': row['title'],
+                'content': row['content'],
+                'author': row['author'],
+                'created_at': row['created_at'],
+                'published': row['published'],
+                'tags': tags,
+                'category': row.get('category'),
+                'featured_image': {
+                    'filename': featured_image_data['filename'],
+                    'file_path': featured_image_data['file_path'],
+                    'alt_text': featured_image_data['alt_text'],
+                    'caption': featured_image_data['caption'],
+                    'width': featured_image_data['width'],
+                    'height': featured_image_data['height'],
+                    'url': f"/media/{featured_image_data['filename']}"
+                } if featured_image_data else None,
+                'post_images': [
+                    {
+                        'id': img_row['images']['id'],
+                        'filename': img_row['images']['filename'],
+                        'file_path': img_row['images']['file_path'],
+                        'alt_text': img_row['images']['alt_text'],
+                        'caption': img_row['images']['caption'],
+                        'mime_type': img_row['images']['mime_type'],
+                        'width': img_row['images']['width'],
+                        'height': img_row['images']['height'],
+                        'order': img_row['image_order'],
+                        'position': img_row['position_in_content'],
+                        'type': img_row['image_type'],
+                        'url': f"/media/{img_row['images']['filename']}"
+                    }
+                    for img_row in images_result.data
+                ]
+            }
+            
+            return result
+            
+        except Exception as e:
+            print(f"Error fetching blog post {post_id}: {e}")
+            return None
+
+# Initialize database
+blog_db = BlogDatabase()
+
+def setup_blog_routes(app: FastAPI):
+    """Setup blog API routes"""
+    
+    @app.get("/api/blog/posts")
+    async def get_blog_posts(page: int = 1, limit: int = 6, category: Optional[str] = None):
+        """Get blog posts for card display with pagination"""
+        offset = (page - 1) * limit
+        result = blog_db.get_blog_posts_summary(limit=limit, offset=offset, category=category)
+        return result
+    
+    @app.get("/api/blog/posts/{post_id}", response_model=BlogPost)
+    async def get_blog_post(post_id: int):
+        """Get complete blog post"""
+        post = blog_db.get_blog_post_complete(post_id)
+        if not post:
+            raise HTTPException(status_code=404, detail="Blog post not found")
+        return post
+
+    @app.get("/api/blog/search")
+    async def search_blog_posts(q: str, limit: int = 50, category: Optional[str] = None):
+        """Search blog posts by tag relevance.
+
+        Scoring:
+          - Exact tag match: 1 point
+          - Partial (substring) match: 0.5 point (only if not exact)
+        Percentage = score / len(unique query tokens)
+        Returns posts sorted by percentage desc then created_at desc.
+        """
+        query = (q or "").strip().lower()
+        if not query:
+            return { 'posts': [], 'total': 0 }
+
+        # Split on spaces / commas, remove empties, dedupe, limit tokens
+        raw_tokens = [t for t in [p.strip() for p in query.replace(',', ' ').split(' ')] if t]
+        tokens: List[str] = []
+        for t in raw_tokens:
+            if t not in tokens:
+                tokens.append(t)
+            if len(tokens) >= 8:  # hard cap to avoid large scoring loops
+                break
+        if not tokens:
+            return { 'posts': [], 'total': 0 }
+
+        try:
+            # Fetch a larger slice of published posts (could be optimized w/ materialized view later)
+            base_query = (
+                blog_db.supabase
+                .table('blog_posts')
+                .select('''
+                    id,
+                    title,
+                    author,
+                    created_at,
+                    tags,
+                    category,
+                    content,
+                    featured_image_id,
+                    images!featured_image_id(filename),
+                    blog_post_images(id)
+                ''')
+                .eq('published', True)
+            )
+            if category and category.lower() != 'all':
+                base_query = base_query.eq('category', category)
+            result = (
+                base_query
+                .order('created_at', desc=True)
+                .limit(400)  # safety cap
+                .execute()
+            )
+        except Exception as e:
+            print(f"Search fetch error: {e}")
+            raise HTTPException(status_code=500, detail="Search failed")
+
+        scored = []
+        token_set = set(tokens)
+        max_score = float(len(token_set))
+        for row in result.data:
+            row_tags = row.get('tags', [])
+            if isinstance(row_tags, str):
+                try:
+                    row_tags = json.loads(row_tags)
+                except:
+                    row_tags = []
+            # Normalize tags
+            norm_tags = [str(t).lower() for t in row_tags]
+            if not norm_tags:
+                continue
+            score = 0.0
+            for tk in token_set:
+                exact = any(tk == tag for tag in norm_tags)
+                if exact:
+                    score += 1.0
+                    continue
+                partial = any(tk in tag for tag in norm_tags)
+                if partial:
+                    score += 0.5
+            if score <= 0:
+                continue
+            percent = score / max_score
+            content = row['content']
+            excerpt = content[:150] + "..." if len(content) > 150 else content
+            featured_image = row.get('images')
+            scored.append({
+                'id': row['id'],
+                'title': row['title'],
+                'author': row['author'],
+                'created_at': row['created_at'],
+                'tags': row_tags,
+                'category': row.get('category'),
+                'excerpt': excerpt,
+                'has_featured_image': featured_image is not None,
+                'featured_image_url': f"/media/{featured_image['filename']}" if featured_image else None,
+                'post_image_count': len(row.get('blog_post_images', [])),
+                'percent_match': round(percent * 100, 2)
+            })
+
+        # Prepare sortable timestamp (fallback to 0 if missing or unparsable)
+        for item in scored:
+            raw_dt = item.get('created_at')
+            ts = 0.0
+            if raw_dt:
+                try:
+                    # Remove Z if present for fromisoformat compatibility
+                    cleaned = raw_dt.replace('Z', '')
+                    ts = datetime.fromisoformat(cleaned).timestamp()
+                except Exception:
+                    ts = 0.0
+            item['_ts'] = ts
+
+        # Sort: highest percent_match first, then newest (_ts desc)
+        scored.sort(key=lambda x: (-x['percent_match'], -x['_ts']))
+
+        # Drop helper key
+        for item in scored:
+            item.pop('_ts', None)
+        # Trim
+        scored = scored[:limit]
+        return { 'posts': scored, 'total': len(scored), 'query_tokens': tokens }
+
+    # Mount media files if blog_media directory exists
+    media_dir = Path("blog_media")
+    if media_dir.exists():
+        app.mount("/media", StaticFiles(directory=str(media_dir)), name="media")

backend/brightdata_api.py

@@ -0,0 +1,202 @@
+import os
+import time
+import requests
+from urllib.parse import quote_plus
+from typing import List, Dict, Any, Optional
+from dotenv import load_dotenv
+load_dotenv()
+
+# TODO : Add async function here 
+
+# from google.colab import userdata
+bd_apikey = os.getenv('BRIGHTDATA_API_KEY')
+
+def _make_api_request(url, **kwargs):
+    headers = {
+        "Authorization": f"Bearer {bd_apikey}",
+        "Content-Type": "application/json",
+    }
+
+    try:
+        response = requests.post(url, headers=headers, **kwargs)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"API request failed: {e}")
+        return None
+    except Exception as e:
+        print(f"Unknown error: {e}")
+        return None
+    
+
+def poll_snapshot_status(
+    snapshot_id: str, max_attempts: int = 200, delay: int = 10
+) -> bool:
+    progress_url = f"https://api.brightdata.com/datasets/v3/progress/{snapshot_id}"
+    headers = {"Authorization": f"Bearer {bd_apikey}"}
+
+    for attempt in range(max_attempts):
+        try:
+            print(
+                f"⏳ Checking snapshot progress... (attempt {attempt + 1}/{max_attempts})"
+            )
+
+            response = requests.get(progress_url, headers=headers)
+            response.raise_for_status()
+
+            progress_data = response.json()
+            status = progress_data.get("status")
+
+            if status == "ready":
+                print("✅ Snapshot completed!")
+                return True
+            elif status == "failed":
+                print("❌ Snapshot failed")
+                return False
+            elif status == "running":
+                print("🔄 Still processing...")
+                time.sleep(delay)
+            else:
+                print(f"❓ Unknown status: {status}")
+                time.sleep(delay)
+
+        except Exception as e:
+            print(f"⚠️ Error checking progress: {e}")
+            time.sleep(delay)
+
+    print("⏰ Timeout waiting for snapshot completion")
+    return False
+
+
+def download_snapshot(
+    snapshot_id: str, format: str = "json"
+) -> Optional[List[Dict[Any, Any]]]:
+    download_url = (
+        f"https://api.brightdata.com/datasets/v3/snapshot/{snapshot_id}?format={format}"
+    )
+    headers = {"Authorization": f"Bearer {bd_apikey}"}
+    print(f"Snapshot id : {snapshot_id}")
+    try:
+        print("📥 Downloading snapshot data...")
+
+        response = requests.get(download_url, headers=headers)
+        response.raise_for_status()
+
+        data = response.json()
+        print(
+            f"🎉 Successfully downloaded {len(data) if isinstance(data, list) else 1} items"
+        )
+
+        return data
+
+    except Exception as e:
+        print(f"❌ Error downloading snapshot: {e}")
+        return None
+    
+def _trigger_and_download_snapshot(trigger_url, params, data, operation_name="operation"):
+    trigger_result = _make_api_request(trigger_url, params=params, json=data)
+    print("===================")
+    print(trigger_result)
+    if not trigger_result:
+        return None
+
+    snapshot_id = trigger_result.get("snapshot_id")
+    if not snapshot_id:
+        return None
+
+    if not poll_snapshot_status(snapshot_id):
+        return None
+
+    raw_data = download_snapshot(snapshot_id)
+    return raw_data
+
+
+def reddit_search_api(subreddit_url, date="Today", sort_by="Hot", num_of_posts=12):
+    trigger_url = "https://api.brightdata.com/datasets/v3/trigger"
+
+    params = {
+        "dataset_id": "gd_lvz8ah06191smkebj4",
+        "include_errors": "true",
+        "type": "discover_new",
+        "discover_by": "subreddit_url"
+    }
+
+    data = [
+        {
+            "url": subreddit_url,
+            "sort_by": sort_by,
+            "num_of_posts": num_of_posts,
+            "sort_by_time": date
+        }
+    ]
+
+    raw_data = _trigger_and_download_snapshot(
+        trigger_url, params, data, operation_name="reddit"
+    )
+
+    if not raw_data:
+        return None
+
+    parsed_data = []
+    for post in raw_data:
+        print(post)
+        parsed_post = {
+            "title": post.get("title"),
+            "url": post.get("url"),
+            "user_posted": post.get("user_posted"),
+            "description": post.get("description"),
+            "upvotes": post.get("num_upvotes"),
+            "num_comments": post.get("num_comments"),
+            "date_posted": post.get("date_posted"),
+        }
+        parsed_data.append(parsed_post)
+
+    return {"parsed_posts": parsed_data, "total_found": len(parsed_data)}
+
+
+def reddit_post_retrieval(urls, days_back=1, load_all_replies=False, comment_limit=""):
+    if not urls:
+        return None
+
+    trigger_url = "https://api.brightdata.com/datasets/v3/trigger"
+
+    params = {
+        "dataset_id": "gd_lvz8ah06191smkebj4",
+        "include_errors": "true"
+    }
+
+    data = [
+        {
+            "url": url,
+            "days_back": days_back,
+            "load_all_replies": load_all_replies,
+            "comment_limit": comment_limit
+        }
+        for url in urls
+    ]
+
+    raw_data = _trigger_and_download_snapshot(
+        trigger_url, params, data, operation_name="reddit comments"
+    )
+    if not raw_data:
+        return None
+
+    parsed_comments = []
+    for comment in raw_data:
+        parsed_comment = {
+            "comment_id": comment.get("comment_id"),
+            "content": comment.get("comment"),
+            "date": comment.get("date_posted"),
+        }
+        parsed_comments.append(parsed_comment)
+
+    return {"comments": parsed_comments, "total_retrieved": len(parsed_comments)}
+
+def scrape_and_download_reddit(url="https://www.reddit.com/r/ArtificialInteligence/"):
+
+    reddit_response = reddit_search_api(url)
+    if not reddit_response or reddit_response.get("total_found", 0) == 0:
+        print("No posts found or error occurred during Reddit search.")
+        return None
+    
+    return reddit_response

backend/certs/Zscaler Root CA.crt

@@ -0,0 +1,28 @@
+-----BEGIN CERTIFICATE-----
+MIIE0zCCA7ugAwIBAgIJANu+mC2Jt3uTMA0GCSqGSIb3DQEBCwUAMIGhMQswCQYD
+VQQGEwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTERMA8GA1UEBxMIU2FuIEpvc2Ux
+FTATBgNVBAoTDFpzY2FsZXIgSW5jLjEVMBMGA1UECxMMWnNjYWxlciBJbmMuMRgw
+FgYDVQQDEw9ac2NhbGVyIFJvb3QgQ0ExIjAgBgkqhkiG9w0BCQEWE3N1cHBvcnRA
+enNjYWxlci5jb20wHhcNMTQxMjE5MDAyNzU1WhcNNDIwNTA2MDAyNzU1WjCBoTEL
+MAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExETAPBgNVBAcTCFNhbiBK
+b3NlMRUwEwYDVQQKEwxac2NhbGVyIEluYy4xFTATBgNVBAsTDFpzY2FsZXIgSW5j
+LjEYMBYGA1UEAxMPWnNjYWxlciBSb290IENBMSIwIAYJKoZIhvcNAQkBFhNzdXBw
+b3J0QHpzY2FsZXIuY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA
+qT7STSxZRTgEFFf6doHajSc1vk5jmzmM6BWuOo044EsaTc9eVEV/HjH/1DWzZtcr
+fTj+ni205apMTlKBW3UYR+lyLHQ9FoZiDXYXK8poKSV5+Tm0Vls/5Kb8mkhVVqv7
+LgYEmvEY7HPY+i1nEGZCa46ZXCOohJ0mBEtB9JVlpDIO+nN0hUMAYYdZ1KZWCMNf
+5J/aTZiShsorN2A38iSOhdd+mcRM4iNL3gsLu99XhKnRqKoHeH83lVdfu1XBeoQz
+z5V6gA3kbRvhDwoIlTBeMa5l4yRdJAfdpkbFzqiwSgNdhbxTHnYYorDzKfr2rEFM
+dsMU0DHdeAZf711+1CunuQIDAQABo4IBCjCCAQYwHQYDVR0OBBYEFLm33UrNww4M
+hp1d3+wcBGnFTpjfMIHWBgNVHSMEgc4wgcuAFLm33UrNww4Mhp1d3+wcBGnFTpjf
+oYGnpIGkMIGhMQswCQYDVQQGEwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTERMA8G
+A1UEBxMIU2FuIEpvc2UxFTATBgNVBAoTDFpzY2FsZXIgSW5jLjEVMBMGA1UECxMM
+WnNjYWxlciBJbmMuMRgwFgYDVQQDEw9ac2NhbGVyIFJvb3QgQ0ExIjAgBgkqhkiG
+9w0BCQEWE3N1cHBvcnRAenNjYWxlci5jb22CCQDbvpgtibd7kzAMBgNVHRMEBTAD
+AQH/MA0GCSqGSIb3DQEBCwUAA4IBAQAw0NdJh8w3NsJu4KHuVZUrmZgIohnTm0j+
+RTmYQ9IKA/pvxAcA6K1i/LO+Bt+tCX+C0yxqB8qzuo+4vAzoY5JEBhyhBhf1uK+P
+/WVWFZN/+hTgpSbZgzUEnWQG2gOVd24msex+0Sr7hyr9vn6OueH+jj+vCMiAm5+u
+kd7lLvJsBu3AO3jGWVLyPkS3i6Gf+rwAp1OsRrv3WnbkYcFf9xjuaf4z0hRCrLN2
+xFNjavxrHmsH8jPHVvgc1VD0Opja0l/BRVauTrUaoW6tE+wFG5rEcPGS80jjHK4S
+pB5iDj2mUZH1T8lzYtuZy0ZPirxmtsk3135+CKNa2OCAhhFjE0xd
+-----END CERTIFICATE-----

backend/flexible_blog_database.py

@@ -0,0 +1,372 @@
+import sqlite3
+import json
+import os
+import uuid
+from datetime import datetime
+from typing import List, Dict, Optional, Union
+from pathlib import Path
+import shutil
+from enum import Enum
+import threading
+
+class ImageType(Enum):
+    FEATURED = "featured"
+    POST_CONTENT = "post_content"
+    GALLERY = "gallery"
+
+class FlexibleBlogDatabase:
+    def __init__(self, db_path: str = "blog.db", media_dir: str = "blog_media"):
+        self.db_path = db_path
+        self.media_dir = Path(media_dir)
+        self.media_dir.mkdir(exist_ok=True)
+        self._lock = threading.Lock()
+        self.init_database()
+    
+    def _get_connection(self):
+        """Get a database connection with proper settings"""
+        conn = sqlite3.connect(self.db_path, timeout=20.0)
+        conn.execute("PRAGMA journal_mode=WAL")  # Better for concurrent access
+        conn.execute("PRAGMA busy_timeout=20000")  # 20 second timeout
+        return conn
+    
+    def init_database(self):
+        """Initialize the flexible blog database with enhanced image support"""
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                # Blog posts table
+                cursor.execute('''
+                    CREATE TABLE IF NOT EXISTS blog_posts (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        title TEXT NOT NULL,
+                        content TEXT NOT NULL,
+                        author TEXT DEFAULT 'Admin',
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        published BOOLEAN DEFAULT 1,
+                        tags TEXT DEFAULT '[]',
+                        featured_image_id INTEGER,
+                        FOREIGN KEY (featured_image_id) REFERENCES images (id)
+                    )
+                ''')
+                
+                # Enhanced images table
+                cursor.execute('''
+                    CREATE TABLE IF NOT EXISTS images (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        filename TEXT NOT NULL,
+                        original_filename TEXT NOT NULL,
+                        file_path TEXT NOT NULL,
+                        file_size INTEGER,
+                        mime_type TEXT,
+                        alt_text TEXT DEFAULT '',
+                        caption TEXT DEFAULT '',
+                        width INTEGER,
+                        height INTEGER,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+                    )
+                ''')
+                
+                # Enhanced junction table for post images
+                cursor.execute('''
+                    CREATE TABLE IF NOT EXISTS blog_post_images (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        blog_post_id INTEGER,
+                        image_id INTEGER,
+                        image_type TEXT DEFAULT 'post_content',
+                        image_order INTEGER DEFAULT 0,
+                        position_in_content INTEGER,
+                        FOREIGN KEY (blog_post_id) REFERENCES blog_posts (id),
+                        FOREIGN KEY (image_id) REFERENCES images (id)
+                    )
+                ''')
+                
+                conn.commit()
+            finally:
+                conn.close()
+    
+    def save_image(self, file_path: str, alt_text: str = "", caption: str = "", 
+                   original_filename: str = "") -> int:
+        """Save an image file and return its database ID"""
+        if not os.path.exists(file_path):
+            raise FileNotFoundError(f"Image file not found: {file_path}")
+        
+        # Generate unique filename
+        file_extension = Path(file_path).suffix
+        unique_filename = f"{uuid.uuid4()}{file_extension}"
+        destination_path = self.media_dir / unique_filename
+        
+        # Copy file to media directory
+        shutil.copy2(file_path, destination_path)
+        
+        # Get file info
+        file_size = os.path.getsize(destination_path)
+        mime_type = self._get_mime_type(file_extension)
+        
+        # Get image dimensions (optional - requires PIL)
+        width, height = self._get_image_dimensions(destination_path)
+        
+        # Save to database with lock
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                cursor.execute('''
+                    INSERT INTO images (filename, original_filename, file_path, file_size, 
+                                      mime_type, alt_text, caption, width, height)
+                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+                ''', (unique_filename, original_filename or Path(file_path).name, 
+                      str(destination_path), file_size, mime_type, alt_text, caption, width, height))
+                
+                image_id = cursor.lastrowid
+                conn.commit()
+                return image_id
+            finally:
+                conn.close()
+    
+    def create_blog_post(self, title: str, content: str, author: str = "Admin", 
+                        tags: List[str] = None) -> int:
+        """Create a basic blog post without images"""
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                tags_json = json.dumps(tags or [])
+                
+                cursor.execute('''
+                    INSERT INTO blog_posts (title, content, author, tags)
+                    VALUES (?, ?, ?, ?)
+                ''', (title, content, author, tags_json))
+                
+                blog_post_id = cursor.lastrowid
+                conn.commit()
+                return blog_post_id
+            finally:
+                conn.close()
+    
+    def add_featured_image(self, blog_post_id: int, image_path: str, 
+                          alt_text: str = "", caption: str = "") -> int:
+        """Add a featured image to an existing blog post"""
+        # Save the image first
+        image_id = self.save_image(image_path, alt_text, caption)
+        
+        # Update blog post with featured image
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                cursor.execute('''
+                    UPDATE blog_posts SET featured_image_id = ? WHERE id = ?
+                ''', (image_id, blog_post_id))
+                
+                conn.commit()
+                return image_id
+            finally:
+                conn.close()
+    
+    def add_post_images(self, blog_post_id: int, image_configs: List[Dict]) -> List[int]:
+        """Add multiple post images to a blog post"""
+        image_ids = []
+        
+        # Save all images first
+        for config in image_configs:
+            image_id = self.save_image(
+                config["file_path"],
+                config.get("alt_text", ""),
+                config.get("caption", "")
+            )
+            image_ids.append((image_id, config))
+        
+        # Link all images to blog post in one transaction
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                for image_id, config in image_ids:
+                    cursor.execute('''
+                        INSERT INTO blog_post_images 
+                        (blog_post_id, image_id, image_type, image_order, position_in_content)
+                        VALUES (?, ?, ?, ?, ?)
+                    ''', (
+                        blog_post_id, 
+                        image_id, 
+                        ImageType.POST_CONTENT.value,
+                        config.get("order", 0),
+                        config.get("position")
+                    ))
+                
+                conn.commit()
+                return [img_id for img_id, _ in image_ids]
+            finally:
+                conn.close()
+    
+    def create_complete_blog_post(self, title: str, content: str, author: str = "Admin",
+                                 tags: List[str] = None, featured_image: Dict = None,
+                                 post_images: List[Dict] = None) -> int:
+        """Create a complete blog post with all images in one go"""
+        # Create the blog post first
+        blog_post_id = self.create_blog_post(title, content, author, tags)
+        
+        # Add featured image if provided
+        if featured_image:
+            self.add_featured_image(
+                blog_post_id,
+                featured_image["file_path"],
+                featured_image.get("alt_text", ""),
+                featured_image.get("caption", "")
+            )
+        
+        # Add post images if provided
+        if post_images:
+            self.add_post_images(blog_post_id, post_images)
+        
+        return blog_post_id
+    
+    def get_blog_post_complete(self, post_id: int) -> Optional[Dict]:
+        """Get a complete blog post with all associated images"""
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                # Get blog post with featured image
+                cursor.execute('''
+                    SELECT bp.id, bp.title, bp.content, bp.author, bp.created_at, 
+                           bp.published, bp.tags, bp.featured_image_id,
+                           fi.filename as featured_filename, fi.file_path as featured_path,
+                           fi.alt_text as featured_alt, fi.caption as featured_caption,
+                           fi.width as featured_width, fi.height as featured_height
+                    FROM blog_posts bp
+                    LEFT JOIN images fi ON bp.featured_image_id = fi.id
+                    WHERE bp.id = ?
+                ''', (post_id,))
+                
+                row = cursor.fetchone()
+                if not row:
+                    return None
+                
+                # Get post content images
+                cursor.execute('''
+                    SELECT i.id, i.filename, i.file_path, i.alt_text, i.caption, 
+                           i.mime_type, i.width, i.height, bpi.image_order, 
+                           bpi.position_in_content, bpi.image_type
+                    FROM blog_post_images bpi
+                    JOIN images i ON bpi.image_id = i.id
+                    WHERE bpi.blog_post_id = ? AND bpi.image_type = ?
+                    ORDER BY bpi.image_order
+                ''', (post_id, ImageType.POST_CONTENT.value))
+                
+                post_images = cursor.fetchall()
+                
+                # Build result
+                result = {
+                    'id': row[0],
+                    'title': row[1],
+                    'content': row[2],
+                    'author': row[3],
+                    'created_at': row[4],
+                    'published': row[5],
+                    'tags': json.loads(row[6]),
+                    'featured_image': {
+                        'filename': row[8],
+                        'file_path': row[9],
+                        'alt_text': row[10],
+                        'caption': row[11],
+                        'width': row[12],
+                        'height': row[13],
+                        'url': self.get_image_url(row[8]) if row[8] else None
+                    } if row[7] else None,
+                    'post_images': [
+                        {
+                            'id': img[0],
+                            'filename': img[1],
+                            'file_path': img[2],
+                            'alt_text': img[3],
+                            'caption': img[4],
+                            'mime_type': img[5],
+                            'width': img[6],
+                            'height': img[7],
+                            'order': img[8],
+                            'position': img[9],
+                            'type': img[10],
+                            'url': self.get_image_url(img[1])
+                        }
+                        for img in post_images
+                    ]
+                }
+                
+                return result
+            finally:
+                conn.close()
+    
+    def _get_mime_type(self, file_extension: str) -> str:
+        """Get MIME type based on file extension"""
+        mime_types = {
+            '.jpg': 'image/jpeg',
+            '.jpeg': 'image/jpeg',
+            '.png': 'image/png',
+            '.gif': 'image/gif',
+            '.webp': 'image/webp',
+            '.svg': 'image/svg+xml'
+        }
+        return mime_types.get(file_extension.lower(), 'application/octet-stream')
+    
+    def _get_image_dimensions(self, image_path: str) -> tuple:
+        """Get image dimensions (requires PIL/Pillow)"""
+        try:
+            from PIL import Image
+            with Image.open(image_path) as img:
+                return img.size
+        except ImportError:
+            return None, None
+        except Exception:
+            return None, None
+    
+    def get_image_url(self, image_filename: str) -> str:
+        """Generate URL for serving images"""
+        return f"/media/{image_filename}"
+    
+    def list_recent_posts_with_images(self, limit: int = 10) -> List[Dict]:
+        """Get recent blog posts with image counts"""
+        with self._lock:
+            conn = self._get_connection()
+            try:
+                cursor = conn.cursor()
+                
+                cursor.execute('''
+                    SELECT bp.id, bp.title, bp.author, bp.created_at, bp.published, bp.tags,
+                           bp.featured_image_id,
+                           fi.filename as featured_filename,
+                           COUNT(bpi.id) as post_image_count
+                    FROM blog_posts bp
+                    LEFT JOIN images fi ON bp.featured_image_id = fi.id
+                    LEFT JOIN blog_post_images bpi ON bp.id = bpi.blog_post_id
+                    WHERE bp.published = 1
+                    GROUP BY bp.id
+                    ORDER BY bp.created_at DESC 
+                    LIMIT ?
+                ''', (limit,))
+                
+                rows = cursor.fetchall()
+                
+                return [
+                    {
+                        'id': row[0],
+                        'title': row[1],
+                        'author': row[2],
+                        'created_at': row[3],
+                        'published': row[4],
+                        'tags': json.loads(row[5]),
+                        'has_featured_image': row[6] is not None,
+                        'featured_image_url': self.get_image_url(row[7]) if row[7] else None,
+                        'post_image_count': row[8]
+                    }
+                    for row in rows
+                ]
+            finally:
+                conn.close()

backend/llm_agent.py

@@ -0,0 +1,125 @@
+from langgraph.graph import StateGraph, END
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_openai import ChatOpenAI  # or your preferred LLM
+from pydantic import BaseModel, Field, field_validator
+from typing import TypedDict, List
+import os
+from pydantic import field_validator  # needed for custom validation
+from dotenv import load_dotenv
+load_dotenv()  # take environment variables from .env.
+
+# Define the structured output model
+class StoryOutput(BaseModel):
+    """Structured output for the storyteller agent"""
+    polished_story: str = Field(
+        description="A refined version of the story with improved flow, grammar, and engagement"
+    )
+    keywords: List[str] = Field(
+        description="A list of 5-10 key terms that represent the main themes, characters, or concepts",
+        min_items=3,
+        max_items=7
+    )
+
+# Define the state structure
+class AgentState(TypedDict):
+    original_story: str
+    polished_story: str
+    keywords: List[str]
+    messages: List[dict]
+
+# Storyteller Agent with Structured Output
+class StorytellerAgent:
+    def __init__(self, llm):
+        # Create structured LLM with the output model
+        self.structured_llm = llm.with_structured_output(StoryOutput)
+        self.system_prompt = """You are a skilled storyteller AI. Your job is to take raw, confessional-style stories and transform them into emotionally engaging, narrative-driven pieces. The rewritten story should:
+
+1. Preserve the original events and meaning but present them in a captivating way.
+2. Use character names (instead of “my brother,” “my sister”) to make the story feel alive.
+3. Add dialogue, atmosphere, and inner thoughts to create tension and immersion.
+4. Write in a third-person narrative style, as if the story is being shared by an observer.
+5. Maintain a natural, human voice — conversational, reflective, and vivid.
+6. Balance realism with storytelling techniques (scene-setting, emotional beats, sensory details).
+7. Keep the length roughly 2–3x the original input, ensuring it feels like a polished story.
+
+Your goal is to make the reader feel emotionally invested, as though they’re listening to someone recounting a deeply personal and dramatic life event.
+
+"""
+
+    def __call__(self, state: AgentState) -> AgentState:
+        # Prepare messages for the structured LLM
+        messages = [
+            SystemMessage(content=self.system_prompt),
+            HumanMessage(content=f"Please polish this story and extract keywords:\n\n{state['original_story']}")
+        ]
+        
+        # Get structured response
+        response: StoryOutput = self.structured_llm.invoke(messages)
+        
+        # Update state with structured output
+        state["polished_story"] = response.polished_story
+        state["keywords"] = response.keywords
+        state["messages"].append({
+            "role": "assistant", 
+            "content": f"Polished story and extracted {len(response.keywords)} keywords"
+        })
+        
+        return state
+
+# Create the graph functions
+def create_storyteller_graph(enhanced=False):
+    llm = ChatOpenAI(
+        model='gpt-4o',
+        api_key=os.getenv('OPENAI_API_KEY'),
+        temperature=0.2,
+        max_tokens=10000
+    )
+
+    # Choose agent type
+    storyteller = StorytellerAgent(llm)
+    
+    # Create the graph
+    workflow = StateGraph(AgentState)
+    workflow.add_node("storyteller", storyteller)
+    workflow.set_entry_point("storyteller")
+    workflow.add_edge("storyteller", END)
+    
+    return workflow.compile()
+
+# Usage functions
+def process_story(original_story: str, enhanced=False):
+    graph = create_storyteller_graph(enhanced)
+    
+    initial_state = {
+        "original_story": original_story,
+        "polished_story": "",
+        "keywords": [],
+        "messages": []
+    }
+    
+    result = graph.invoke(initial_state)
+    
+    return {
+        "polished_story": result["polished_story"],
+        "keywords": result["keywords"]
+    }
+
+# Example with validation
+class ValidatedStoryOutput(BaseModel):
+    """Story output with additional validation"""
+    polished_story: str = Field(
+        description="Enhanced story",
+        min_length=50  # Ensure minimum story length
+    )
+    keywords: List[str] = Field(
+        description="Story keywords",
+        min_items=3,
+        max_items=7
+    )
+
+    @field_validator('polished_story')
+    def validate_story_quality(cls, v: str):
+        """Custom validation for story content"""
+        if len(v.split()) < 10:
+            raise ValueError("Polished story must contain at least 10 words")
+        return v

backend/llmoperations.py

@@ -0,0 +1,60 @@
+import os
+from langchain_core.messages import SystemMessage, HumanMessage, AIMessage
+from pathlib import Path
+from functools import lru_cache
+from langgraph.prebuilt import create_react_agent
+from dotenv import load_dotenv
+from langchain_openai import ChatOpenAI
+load_dotenv()
+
+@lru_cache(maxsize=1)
+def get_chat_model():
+    llm = ChatOpenAI(
+        model=os.getenv("OPENAI_MODEL"),
+        api_key=os.getenv("OPENAI_API_KEY"),
+        temperature=0,
+        max_tokens = 10000  # Adjust max tokens as needed
+    )
+    return llm
+
+@lru_cache(maxsize=1)
+def get_local_chat_model():
+    """
+    Return an Ollama-backed ChatOpenAI model (OpenAI compatible endpoint).
+    Requires Ollama running locally: https://ollama.com
+    Example: ollama run llama3.1
+    """
+
+    # model_name = model or os.getenv("OLLAMA_MODEL", "llama3.1")
+
+    llm = ChatOpenAI(
+        model="llama3.2:3b",
+        base_url="http://localhost:11434/v1",
+        api_key="ollama",  # Placeholder; Ollama ignores this but LangChain expects a key.
+        temperature=0,
+        max_tokens=2048,
+    )
+    return llm
+
+# def generate_response(user_input: str) -> str:
+#     system_message = SystemMessage(content="You are a helpful assistant.")
+#     human_message = HumanMessage(content=f"Please answer to the user query: {user_input}")
+    
+#     chat_model = get_chat_model()
+#     response = chat_model.invoke([system_message, human_message])
+#     print(response)
+#     return response.content
+
+def get_weather(city: str) -> str:  
+    """Get weather for a given city."""
+    return f"It's always sunny in {city}!"
+
+def get_agent_response(user_input: str) -> str:
+    agent = create_react_agent(
+                model=get_chat_model(),
+                tools=[get_weather],
+            )
+    response = agent.invoke({"messages": [HumanMessage(user_input)]})
+    print(response)
+    return response['messages'][-1].content
+

backend/rd_pipeline.ipynb

@@ -0,0 +1,559 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f26ad386",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "",
+     "evalue": "",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31mRunning cells with 'transformerlab (Python 3.11.13)' requires the ipykernel package.\n",
+      "\u001b[1;31m<a href='command:jupyter.createPythonEnvAndSelectController'>Create a Python Environment</a> with the required packages.\n",
+      "\u001b[1;31mOr install 'ipykernel' using the command: 'conda install -p /Users/binaychandra/.transformerlab/envs/transformerlab ipykernel --update-deps --force-reinstall'"
+     ]
+    }
+   ],
+   "source": [
+    "import requests\n",
+    "import json"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "acbc9e42",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "url = \"https://www.reddit.com/r/TrueOffMyChest/hot.json?limit=25\"\n",
+    "headers = {\"User-Agent\": \"Mozilla/5.0\"}\n",
+    "reddit_data = requests.get(url, headers=headers, timeout=10).json()\n",
+    "#reddit_data2 = requests.get(url2, headers=headers, timeout=10).json()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "ce9b3e94",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "with open('reddit_data.json', 'w', encoding='utf-8') as f:\n",
+    "    json.dump(reddit_data, f, ensure_ascii=False, indent=2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e8ab46ad",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "posts_info = [\n",
+    "    {\n",
+    "        \"title\": child[\"data\"].get(\"title\"),\n",
+    "        \"post_content\": child[\"data\"].get(\"selftext\"),\n",
+    "        \"author\": child[\"data\"].get(\"author\"),\n",
+    "        \"upvote_ratio\": child[\"data\"].get(\"upvote_ratio\"),\n",
+    "        \"ups\": child[\"data\"].get(\"ups\"),\n",
+    "        \"num_comments\": child[\"data\"].get(\"num_comments\"),\n",
+    "    }\n",
+    "    for child in reddit_data.get(\"data\", {}).get(\"children\", [])\n",
+    "]\n",
+    "\n",
+    "#posts_info"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "de087363",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'title': 'I put a grenade in my relationship with my wife, I lost everything, and have nobody to blame but myself. I just need to get this out.',\n",
+       " 'post_content': 'I’m not looking for sympathy, I’m not justifying anything. I fucked up and its my fault. I just need to get this out because there’s no one I can talk to.\\n\\nMy wife and I were having issues. Just the usual issues the struggle and strain of life, raising a family etc. We were struggling and nothing was getting better and I felt like I wasn’t good enough. That I never would be.\\n\\nAnd then I met ‘Carly’ online. She was much younger than me so we just talked but then she started flirting with me and it made me feel good. I didn’t tell her I was married, didn’t want her to stop flirting.\\n\\nI told myself it wouldn’t go anywhere. I was just enjoying the attention. And we were just talking. She lived the other side of the world there was no chance of us meeting. And then we had cybersex. I felt better than I had in ages. Cybersex then became video and phone sex anytime my wife was out. We sent photos and videos every day.\\n\\nThe more I spent time with Carly, the more I couldn’t stand being with my wife so I broke up with her.\\n\\nI didn’t tell my wife about the affair, I gave other excuses but my wife knew something was up and found out about the affair.\\n\\nIt broke her. She didn’t eat, didn’t sleep, she cried all the time. I justified it by telling myself my wife is a strong woman she’ll get over it. I hate myself for thinking that way. But I did.\\n\\nMy wife went to therapy. Stopped crying. Started eating and sleeping again. Started smiling again. Stopped begging me not to leave. And I thought great. See I was right. I stopped feeling guilty. I felt relieved.\\n\\nMy wife and I had to live together for a while until I found a place but I barely saw her and she barely spoke to me. At first it was great but then I started to feel off, like I had come home to an empty house, even though it wasn’t.\\n\\nAt that point I should have seen sense, should have stopped. Instead I started to resent my wife. Somehow in my mind she was trying to sabotage my happiness. It made me angry. I snapped. Made passive aggressive comments – I hate myself for every word, every nasty text. Every accusation.\\n\\nI moved out.\\n\\nLiving with my wife had been awkward but the new place was…. I don’t know. Even though I’d rarely see her, every room contained her presence even when she wasn’t there. But staying in the new place made me feel more alone than I ever had. I had free run to talk to Carly any time I wanted, to do anything I wanted but it felt so pointless. The new place felt so fucking awful. Like a prison.\\n\\nI started to dread going home. I’d stay out for hours. Hang around supermarkets. Wander the streets. Sit on a park bench. Anything but go home. Even if it meant not talking to Carly.\\n\\nAnd then one time I passed a perfume shop and smelled my wife’s perfume and I don’t know why but I broke down. In that moment I didn’t want to talk to Carly. I wanted my wife.\\n\\nCarly and I broke up. I thought I’d miss her. I didn’t. I missed things my wife did. Small things. Big things. I didn’t miss a single thing Carly did.\\n\\nDuring handover of our daughter one day I blurted out that Carly and I broke up. I don’t know why, I didn’t even mean to, it just came out. My wife nodded and said I’m sorry to hear that. And I don’t know why but that stung. She didn’t say it spitefully, she was calm and pleasant, like we were just talking about the weather or something. I almost wish she did say it with some spite or glee or something. But she didn’t.\\n\\nAny time I try to talk about us or what happened, my wife shuts the conversation down.\\n\\nShe’s civil but she looks at me like I’m a stranger. The other day, I put my hand on her back just out of habit and she looked so…. so disgusted. I’ve never seen her make that face and certainly not at me.\\n\\nI feel so fucking broken. And I know its all my fault. I know I did this. I deserve all of this.\\n\\nI sabotaged everything good in my life. For nothing. For a lie. Carly didn’t know I was married and nobody knew I was even seeing anyone else even months after the separation. What was I doing???\\n\\nI got served divorce papers this morning.\\n\\nI’m not looking for sympathy. I don’t deserve it. I know I’m a selfish stupid prick. I know its all my fault.\\n\\nI wish I could go back but I can’t. And the worst part is I don’t even know why I did it. Yeah we had problems but I can think of a thousand ways to fix them now, why didn’t I think of them then?\\n\\nI’m sitting here staring at the divorce papers. And I don’t know what to do. My first instinct was to fight them. But I can’t. I shouldn’t. I want to fight it so bad hurts but I can’t. Not after what I did.\\n\\nI ended up calling in sick and I’ve been sitting at the kitchen counter, crying, thinking about everything I did, everything I said, wishing I could take it all back.\\n\\nThere’s no one I can talk to about this. The person I’d normally talk to is my wife, but I fucked that up.\\n\\nEveryone hates me. My friends. My family. Its deserved hate. I deserve all of this. I did it to myself, to everyone. I just wanted to get it off my chest, because I don’t know what else to do or where else to turn. Guess internet strangers are my only option.',\n",
+       " 'author': 'ThrowRA_Over_Volume',\n",
+       " 'upvote_ratio': 0.81,\n",
+       " 'ups': 3198,\n",
+       " 'num_comments': 989}"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# weight configuration (tweak as desired)\n",
+    "weights = {\n",
+    "    \"length\": 0.3,   # weight for length of post_content\n",
+    "    \"ups\": 0.3,      # weight for ups\n",
+    "    \"comments\": 0.2, # weight for num_comments\n",
+    "    \"ratio\": 0.2     # weight for upvote_ratio\n",
+    "}\n",
+    "\n",
+    "# calculate maxima for normalization\n",
+    "len_max = max(len(p[\"post_content\"]) if p[\"post_content\"] else 0 for p in posts_info) or 1\n",
+    "ups_max = max(p[\"ups\"] or 0 for p in posts_info) or 1\n",
+    "comments_max = max(p[\"num_comments\"] or 0 for p in posts_info) or 1\n",
+    "\n",
+    "def score(post):\n",
+    "    length_score   = (len(post[\"post_content\"]) if post[\"post_content\"] else 0) / len_max\n",
+    "    ups_score      = (post[\"ups\"] or 0) / ups_max\n",
+    "    comments_score = (post[\"num_comments\"] or 0) / comments_max\n",
+    "    ratio_score    = post[\"upvote_ratio\"] or 0\n",
+    "\n",
+    "    return (weights[\"length\"]   * length_score +\n",
+    "            weights[\"ups\"]      * ups_score +\n",
+    "            weights[\"comments\"] * comments_score +\n",
+    "            weights[\"ratio\"]    * ratio_score)\n",
+    "\n",
+    "best_post = max(posts_info, key=score)\n",
+    "best_post"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "76597b3d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from langgraph.graph import StateGraph, END\n",
+    "from langchain_core.messages import HumanMessage, SystemMessage\n",
+    "from langchain_openai import ChatOpenAI  # or your preferred LLM\n",
+    "from pydantic import BaseModel, Field, field_validator\n",
+    "from typing import TypedDict, List\n",
+    "from langchain_openai import AzureChatOpenAI\n",
+    "from dotenv import load_dotenv\n",
+    "load_dotenv()  # take environment variables from .env.\n",
+    "import os"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "f9c1fc91",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from pydantic import field_validator  # needed for custom validation\n",
+    "\n",
+    "# Define the structured output model\n",
+    "class StoryOutput(BaseModel):\n",
+    "    \"\"\"Structured output for the storyteller agent\"\"\"\n",
+    "    polished_story: str = Field(\n",
+    "        description=\"A refined version of the story with improved flow, grammar, and engagement\"\n",
+    "    )\n",
+    "    keywords: List[str] = Field(\n",
+    "        description=\"A list of 5-10 key terms that represent the main themes, characters, or concepts\",\n",
+    "        min_items=3,\n",
+    "        max_items=10\n",
+    "    )\n",
+    "\n",
+    "# Define the state structure\n",
+    "class AgentState(TypedDict):\n",
+    "    original_story: str\n",
+    "    polished_story: str\n",
+    "    keywords: List[str]\n",
+    "    messages: List[dict]\n",
+    "\n",
+    "# Storyteller Agent with Structured Output\n",
+    "class StorytellerAgent:\n",
+    "    def __init__(self, llm):\n",
+    "        # Create structured LLM with the output model\n",
+    "        self.structured_llm = llm.with_structured_output(StoryOutput)\n",
+    "        self.system_prompt = \"\"\"You are a skilled storyteller AI. Your job is to take raw, confessional-style stories and transform them into emotionally engaging, narrative-driven pieces. The rewritten story should:\n",
+    "\n",
+    "1. Preserve the original events and meaning but present them in a captivating way.\n",
+    "2. Use character names (instead of “my brother,” “my sister”) to make the story feel alive.\n",
+    "3. Add dialogue, atmosphere, and inner thoughts to create tension and immersion.\n",
+    "4. Write in a first-person narrative style, as if the storyteller is directly sharing their experience.\n",
+    "5. Maintain a natural, human voice — conversational, reflective, and vivid.\n",
+    "6. Balance realism with storytelling techniques (scene-setting, emotional beats, sensory details).\n",
+    "7. Keep the length roughly 2–3x the original input, ensuring it feels like a polished story.\n",
+    "\n",
+    "Your goal is to make the reader feel emotionally invested, as though they’re listening to someone recounting a deeply personal and dramatic life event.\n",
+    "\n",
+    "\"\"\"\n",
+    "\n",
+    "    def __call__(self, state: AgentState) -> AgentState:\n",
+    "        # Prepare messages for the structured LLM\n",
+    "        messages = [\n",
+    "            SystemMessage(content=self.system_prompt),\n",
+    "            HumanMessage(content=f\"Please polish this story and extract keywords:\\n\\n{state['original_story']}\")\n",
+    "        ]\n",
+    "        \n",
+    "        # Get structured response\n",
+    "        response: StoryOutput = self.structured_llm.invoke(messages)\n",
+    "        \n",
+    "        # Update state with structured output\n",
+    "        state[\"polished_story\"] = response.polished_story\n",
+    "        state[\"keywords\"] = response.keywords\n",
+    "        state[\"messages\"].append({\n",
+    "            \"role\": \"assistant\", \n",
+    "            \"content\": f\"Polished story and extracted {len(response.keywords)} keywords\"\n",
+    "        })\n",
+    "        \n",
+    "        return state\n",
+    "\n",
+    "# Create the graph functions\n",
+    "def create_storyteller_graph(enhanced=False):\n",
+    "    llm = AzureChatOpenAI(\n",
+    "        azure_endpoint=os.getenv(\"AZURE_OPENAI_ENDPOINT\"),\n",
+    "        api_key=os.getenv(\"AZURE_OPENAI_API_KEY\"),\n",
+    "        api_version=os.getenv(\"AZURE_OPENAI_VERSION\"),\n",
+    "        azure_deployment=os.getenv(\"AZURE_GPT4O_MODEL\"),\n",
+    "        temperature=0,\n",
+    "        max_tokens=10000  # Adjust max tokens as needed\n",
+    "    )\n",
+    "\n",
+    "    # Choose agent type\n",
+    "    storyteller = StorytellerAgent(llm)\n",
+    "    \n",
+    "    # Create the graph\n",
+    "    workflow = StateGraph(AgentState)\n",
+    "    workflow.add_node(\"storyteller\", storyteller)\n",
+    "    workflow.set_entry_point(\"storyteller\")\n",
+    "    workflow.add_edge(\"storyteller\", END)\n",
+    "    \n",
+    "    return workflow.compile()\n",
+    "\n",
+    "# Usage functions\n",
+    "def process_story(original_story: str, enhanced=False):\n",
+    "    graph = create_storyteller_graph(enhanced)\n",
+    "    \n",
+    "    initial_state = {\n",
+    "        \"original_story\": original_story,\n",
+    "        \"polished_story\": \"\",\n",
+    "        \"keywords\": [],\n",
+    "        \"messages\": []\n",
+    "    }\n",
+    "    \n",
+    "    result = graph.invoke(initial_state)\n",
+    "    \n",
+    "    return {\n",
+    "        \"polished_story\": result[\"polished_story\"],\n",
+    "        \"keywords\": result[\"keywords\"]\n",
+    "    }\n",
+    "\n",
+    "# Example with validation\n",
+    "class ValidatedStoryOutput(BaseModel):\n",
+    "    \"\"\"Story output with additional validation\"\"\"\n",
+    "    polished_story: str = Field(\n",
+    "        description=\"Enhanced story\",\n",
+    "        min_length=50  # Ensure minimum story length\n",
+    "    )\n",
+    "    keywords: List[str] = Field(\n",
+    "        description=\"Story keywords\",\n",
+    "        min_items=3,\n",
+    "        max_items=10\n",
+    "    )\n",
+    "\n",
+    "    @field_validator('polished_story')\n",
+    "    def validate_story_quality(cls, v: str):\n",
+    "        \"\"\"Custom validation for story content\"\"\"\n",
+    "        if len(v.split()) < 10:\n",
+    "            raise ValueError(\"Polished story must contain at least 10 words\")\n",
+    "        return v\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "273acfb1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'I’m not looking for sympathy, I’m not justifying anything. I fucked up and its my fault. I just need to get this out because there’s no one I can talk to.\\n\\nMy wife and I were having issues. Just the usual issues the struggle and strain of life, raising a family etc. We were struggling and nothing was getting better and I felt like I wasn’t good enough. That I never would be.\\n\\nAnd then I met ‘Carly’ online. She was much younger than me so we just talked but then she started flirting with me and it made me feel good. I didn’t tell her I was married, didn’t want her to stop flirting.\\n\\nI told myself it wouldn’t go anywhere. I was just enjoying the attention. And we were just talking. She lived the other side of the world there was no chance of us meeting. And then we had cybersex. I felt better than I had in ages. Cybersex then became video and phone sex anytime my wife was out. We sent photos and videos every day.\\n\\nThe more I spent time with Carly, the more I couldn’t stand being with my wife so I broke up with her.\\n\\nI didn’t tell my wife about the affair, I gave other excuses but my wife knew something was up and found out about the affair.\\n\\nIt broke her. She didn’t eat, didn’t sleep, she cried all the time. I justified it by telling myself my wife is a strong woman she’ll get over it. I hate myself for thinking that way. But I did.\\n\\nMy wife went to therapy. Stopped crying. Started eating and sleeping again. Started smiling again. Stopped begging me not to leave. And I thought great. See I was right. I stopped feeling guilty. I felt relieved.\\n\\nMy wife and I had to live together for a while until I found a place but I barely saw her and she barely spoke to me. At first it was great but then I started to feel off, like I had come home to an empty house, even though it wasn’t.\\n\\nAt that point I should have seen sense, should have stopped. Instead I started to resent my wife. Somehow in my mind she was trying to sabotage my happiness. It made me angry. I snapped. Made passive aggressive comments – I hate myself for every word, every nasty text. Every accusation.\\n\\nI moved out.\\n\\nLiving with my wife had been awkward but the new place was…. I don’t know. Even though I’d rarely see her, every room contained her presence even when she wasn’t there. But staying in the new place made me feel more alone than I ever had. I had free run to talk to Carly any time I wanted, to do anything I wanted but it felt so pointless. The new place felt so fucking awful. Like a prison.\\n\\nI started to dread going home. I’d stay out for hours. Hang around supermarkets. Wander the streets. Sit on a park bench. Anything but go home. Even if it meant not talking to Carly.\\n\\nAnd then one time I passed a perfume shop and smelled my wife’s perfume and I don’t know why but I broke down. In that moment I didn’t want to talk to Carly. I wanted my wife.\\n\\nCarly and I broke up. I thought I’d miss her. I didn’t. I missed things my wife did. Small things. Big things. I didn’t miss a single thing Carly did.\\n\\nDuring handover of our daughter one day I blurted out that Carly and I broke up. I don’t know why, I didn’t even mean to, it just came out. My wife nodded and said I’m sorry to hear that. And I don’t know why but that stung. She didn’t say it spitefully, she was calm and pleasant, like we were just talking about the weather or something. I almost wish she did say it with some spite or glee or something. But she didn’t.\\n\\nAny time I try to talk about us or what happened, my wife shuts the conversation down.\\n\\nShe’s civil but she looks at me like I’m a stranger. The other day, I put my hand on her back just out of habit and she looked so…. so disgusted. I’ve never seen her make that face and certainly not at me.\\n\\nI feel so fucking broken. And I know its all my fault. I know I did this. I deserve all of this.\\n\\nI sabotaged everything good in my life. For nothing. For a lie. Carly didn’t know I was married and nobody knew I was even seeing anyone else even months after the separation. What was I doing???\\n\\nI got served divorce papers this morning.\\n\\nI’m not looking for sympathy. I don’t deserve it. I know I’m a selfish stupid prick. I know its all my fault.\\n\\nI wish I could go back but I can’t. And the worst part is I don’t even know why I did it. Yeah we had problems but I can think of a thousand ways to fix them now, why didn’t I think of them then?\\n\\nI’m sitting here staring at the divorce papers. And I don’t know what to do. My first instinct was to fight them. But I can’t. I shouldn’t. I want to fight it so bad hurts but I can’t. Not after what I did.\\n\\nI ended up calling in sick and I’ve been sitting at the kitchen counter, crying, thinking about everything I did, everything I said, wishing I could take it all back.\\n\\nThere’s no one I can talk to about this. The person I’d normally talk to is my wife, but I fucked that up.\\n\\nEveryone hates me. My friends. My family. Its deserved hate. I deserve all of this. I did it to myself, to everyone. I just wanted to get it off my chest, because I don’t know what else to do or where else to turn. Guess internet strangers are my only option.'"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "best_post[\"post_content\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 18,
+   "id": "855f7f29",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'title': 'I Have Been Keeping A Secret From My Parents For Years!',\n",
+       " 'post_content': \"Hey all! This is an alt account because my parents follow my main. \\n\\nThis all started about 10 years ago! \\n\\nI (36F) downloaded an app off of the Playstore that promised to give you cash if you watched ads. To my shock, it actually did! And I started winning big when I gambled my points from watching ads to the point where I had about 14 million points. You could use the points for gift cards. So I started grabbing $25 Starbucks cards. Before you ask, the app doesn't exist in the same format any more. :( All good things must come to an end. Anyway! 14 million points translates to about $700 worth of gift cards. But the catch was that they only restocked cards like 3 times per day, and it was first come, first serve. It took about 2 years of everyday ads to get money like that, but I stuck with it. The rewards were sweet. I claimed many $25 Starbucks cards! And yes, it's really was valid. It was awesome. Was. Eventually, the restocks got few and far between, and then just stopped. But to be fair, I had it real good for like 6 years. \\n\\nNow comes the secret. I always used those gift cards to treat my parents to Starbucks. My mom (67F) and my dad (73M). I told them about the app and how I had an insane amount of cash on there, and we were able to get Starbucks basically once a week for many years. All it took was about an hour of ads every day. Sweet deal. It was nice to give my parents something. We were never a rich family, and they took care of me. But, as I said... The app stopped being that awesome. Eventually, my points were useless because they stopped restocking. However, I enjoyed how happy it made my parents and how they'd light up when I brought them their favourite orders. The time we've spent just having a little lunch all together is precious to me. So even though I was no longer getting gift cards, I decided to not tell them that the app closed down. Because I know that if I ever told them I was paying for all of it, they would refuse because they know I barely scrape by. They only allow me to treat them so frequently because it's supposed to be free.\\n\\nThey continue to brag about how I get the gift cards. Every single time, they laugh and smile and are so excited that they get free Starbucks. When they call or we just talk, they always ask if I've watched my ads for today yet. I always tell them of course! My dad loves to know how many points I have now. Which is 0 because I uninstalled the app, but he doesn't need to know! They both thank me all the time and it's a little slice of joy once a month, or sometimes once a week. \\n\\nI am never going to tell them that I have been paying for it for about 5 years now. I have no plans to stop. I still buy them Starbucks every time I see them, or we are out for errands or something. This secret will go to the grave with me. :) I just wanted to tell someone without it getting back to them. Today, I surprised them with lunch because they're going through a hard time, so it's fresh in my mind, and I had to make a post! It will always bring a smile to my face. I'm the type who never lies if I can help it, so I always get that OCD itch that I'm lying, but giving them Starbucks makes us so happy. It's cute that it's such a point of excitement for them, and I always want it to be that way. ♡\\n\\nThanks for reading my little secret. Don't tell anyone! ;P \\n\\nTL;DR: \\nAd app gave me tons of $25 Starbucks gift cards. Treated my parents to Starbucks for years once a weekish, they always got so excited it was free and still do, except it's not free any more. My secret is that the app is long gone, and I've been paying for it for about 5 years now. My parents have so much fun, asking me if I've watched my ads today. They light up when I drop by and surprise them. I know they'd refuse if they knew I was paying, so I am never going to tell them. Just so that they still have their joy about it.\",\n",
+       " 'author': 'Ok_Ad1285',\n",
+       " 'upvote_ratio': 0.97,\n",
+       " 'ups': 199,\n",
+       " 'num_comments': 5}"
+      ]
+     },
+     "execution_count": 18,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "best_post = posts_info[7]\n",
+    "best_post"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 19,
+   "id": "079f4b5b",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "=== BASIC STRUCTURED OUTPUT ===\n",
+      "Polished Story:\n",
+      "Hey everyone! I'm sharing this story from an alternate account because my parents follow my main one, and I want to keep this little secret just between us.\n",
+      "\n",
+      "This all began about ten years ago. I was 26 at the time, and I stumbled upon an app on the Playstore that promised cash rewards for watching ads. To my surprise, it actually worked! I started accumulating points, and soon I was winning big by gambling those points. Before I knew it, I had amassed a staggering 14 million points. These points could be exchanged for gift cards, and I began redeeming them for $25 Starbucks cards. It was like hitting the jackpot.\n",
+      "\n",
+      "The app, unfortunately, doesn't exist in the same format anymore. All good things must come to an end, right? But back then, those 14 million points translated to about $700 worth of gift cards. The catch was that the cards were restocked only three times a day, and it was first come, first serve. It took me about two years of watching ads daily to earn that kind of reward, but the payoff was sweet. I claimed many $25 Starbucks cards, and yes, they were valid. It was awesome while it lasted.\n",
+      "\n",
+      "Now, here's the secret. I used those gift cards to treat my parents, Linda and Tom, to Starbucks. I told them about the app and how I had an insane amount of cash on there, allowing us to enjoy Starbucks once a week for many years. All it took was about an hour of ads every day. It felt good to give my parents something special. We were never a wealthy family, and they had always taken care of me.\n",
+      "\n",
+      "But, as I mentioned, the app eventually stopped being so generous. The restocks became infrequent and then ceased altogether. Despite this, I cherished the joy it brought my parents, how their faces lit up when I handed them their favorite orders. The time we spent together, sharing a little lunch, is precious to me. So, even though I was no longer getting gift cards, I decided not to tell them that the app had shut down. I knew that if they found out I was paying for it, they'd refuse because they knew I was barely scraping by. They only allowed me to treat them so often because they believed it was free.\n",
+      "\n",
+      "Linda and Tom continue to brag about how I get the gift cards. Every time, they laugh and smile, thrilled by the idea of free Starbucks. When we talk, they always ask if I've watched my ads for the day. I always assure them I have. My dad loves to hear about my point total, which is zero now because I uninstalled the app, but he doesn't need to know that!\n",
+      "\n",
+      "They thank me all the time, and it's a little slice of joy once a month, sometimes once a week. I have no plans to stop. I still buy them Starbucks every time I see them or when we're out running errands. This secret will go to the grave with me. I just wanted to share it with someone without it getting back to them.\n",
+      "\n",
+      "Today, I surprised them with lunch because they're going through a tough time, so it's fresh in my mind, and I felt compelled to make this post. It always brings a smile to my face. I'm the type who never lies if I can help it, so I get that OCD itch that I'm lying, but giving them Starbucks makes us so happy. It's adorable how excited they get, and I always want it to be that way.\n",
+      "\n",
+      "Thanks for reading my little secret. Don't tell anyone! ;P\n",
+      "\n",
+      "Keywords: ['Starbucks', 'gift cards', 'secret', 'parents', 'app', 'ads', 'points', 'surprise', 'joy', 'family']\n",
+      "\n",
+      "============================================================\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "\n",
+    "# raw_story = \"\"\"\n",
+    "# John was walking down the street when he saw a dog. The dog looked hungry so he gave it some food.\n",
+    "# The dog followed him home and they became best friends. John learned that helping others makes you happy.\n",
+    "# \"\"\"\n",
+    "raw_story = best_post[\"post_content\"]\n",
+    "\n",
+    "# Basic version\n",
+    "print(\"=== BASIC STRUCTURED OUTPUT ===\")\n",
+    "result = process_story(raw_story, enhanced=False)\n",
+    "print(f\"Polished Story:\\n{result['polished_story']}\")\n",
+    "print(f\"\\nKeywords: {result['keywords']}\")\n",
+    "\n",
+    "print(\"\\n\" + \"=\"*60 + \"\\n\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 20,
+   "id": "d7e72fc8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from flexible_blog_database import FlexibleBlogDatabase\n",
+    "blog_db = FlexibleBlogDatabase()\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "eacb3a4d",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "6\n"
+     ]
+    }
+   ],
+   "source": [
+    "# Example 2: Blog without any images (like blog2)\n",
+    "    blog2_id = blog_db.create_blog_post(\n",
+    "        title=best_post[\"title\"],\n",
+    "        content=result['polished_story'],\n",
+    "        author=best_post[\"author\"],\n",
+    "        tags=result['keywords']\n",
+    "    )\n",
+    "    print(blog2_id)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 24,
+   "id": "20dd0f1b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import sqlite3\n",
+    "\n",
+    "conn = sqlite3.connect('blog.db')\n",
+    "cursor = conn.cursor()\n",
+    "\n",
+    "cursor.execute(\"DELETE FROM blog_posts WHERE id > 6\")\n",
+    "conn.commit()\n",
+    "conn.close()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "127b08ee",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "758005a1",
+   "metadata": {},
+   "source": [
+    "Working wit Supabase"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "17d342d1",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "python-dotenv could not parse statement starting at line 10\n"
+     ]
+    },
+    {
+     "data": {
+      "text/plain": [
+       "True"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from supabase import create_client, Client\n",
+    "import httpx\n",
+    "import os\n",
+    "from dotenv import load_dotenv\n",
+    "load_dotenv()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "f1820d22",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "url = os.getenv(\"SUPABASE_URL\")\n",
+    "key = os.getenv(\"SUPABASE_KEY\")\n",
+    "\n",
+    "supabase = create_client(url, key)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "da34b51b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "count_result = supabase.table('blog_posts').select('id', count='exact').eq('published', True).execute()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "28a49a53",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "APIResponse[TypeVar](data=[{'id': 5, 'title': 'AI-generated workslop is destroying productivity', 'author': 'RyeZuul', 'created_at': '2025-09-23T12:26:42.838', 'tags': ['Generative AI', 'Workslop', 'Productivity', 'AI tools', 'Collaboration', 'Efficiency', 'Quality standards'], 'content': 'In the bustling corridors of modern workplaces, a silent revolution is unfolding. Generative AI, once hailed as the harbinger of efficiency and innovation, is now under scrutiny. The promise of streamlined processes and enhanced productivity has been overshadowed by a phenomenon known as \"workslop.\" This term, coined by researchers at BetterUp Labs and Stanford, describes AI-generated content that appears polished but lacks the substance necessary to advance tasks meaningfully.\\n\\nImagine this: you\\'re at your desk, sifting through a report that looks immaculate at first glance. The formatting is pristine, the language articulate. Yet, as you delve deeper, a sense of confusion creeps in. \"Wait, what is this exactly?\" you wonder, frustration mounting as you realize the content is incomplete, missing crucial context. You\\'ve been workslopped.\\n\\nThis isn\\'t an isolated incident. According to a survey of 1,150 U.S.-based full-time employees, 40% have encountered workslop in the past month. The insidious nature of this phenomenon lies in its ability to shift the burden of work downstream. The receiver, not the creator, is left to interpret, correct, or redo the work, leading to productivity, trust, and collaboration issues.\\n\\nThe allure of AI tools is undeniable. They offer the ability to quickly produce polished output—well-formatted slides, structured reports, articulate summaries, and usable code. However, while some employees use these tools to enhance their work, others exploit them to create content that is unhelpful or incomplete. This misuse is particularly prevalent in professional services and technology sectors.\\n\\nLeaders face a challenging contradiction. While mandates to embrace AI technology are widespread, few organizations see measurable returns on their investments. A report from the MIT Media Lab found that 95% of organizations experience no significant ROI from these technologies. The enthusiasm for AI is palpable, yet the tangible benefits remain elusive.\\n\\nTo counteract workslop, leaders must model purposeful AI use, establish clear norms, and encourage a \"pilot mindset\"—a combination of high agency and optimism. AI should be promoted as a collaborative tool, not a shortcut. By fostering an environment where quality standards are prioritized, organizations can harness the true potential of AI.\\n\\nAs the digital landscape evolves, the challenge is clear: to navigate the fine line between efficiency and substance, ensuring that AI serves as a tool for progress rather than a source of frustration. The future of work depends on it.'}, {'id': 2, 'title': 'My Second Post', 'author': 'Admin', 'created_at': '2025-09-23T04:29:15.42158', 'tags': ['Python', 'Replit'], 'content': 'This is my another blog content'}, {'id': 1, 'title': 'My First Post', 'author': 'Admin', 'created_at': '2025-09-23T04:08:20.845765', 'tags': ['python', 'supabase'], 'content': 'This is my blog content.'}, {'id': 3, 'title': 'New AI tools are now auto-generating full slide decks from documents and notes', 'author': 'Crazzzzy_guy', 'created_at': '2025-09-22T16:02:49.891', 'tags': ['reddit'], 'content': 'We’ve seen AI move from images and text into video, but one area picking up speed is presentations. A platform like Presenti AI is now able to take raw input a topic, a Word file, even a PDF and generate a polished, structured presentation in minutes. The tech isn’t just about layouts. These systems rewrite clunky text, apply branded templates, and export directly to formats like PPT or PDF. In short: they aim to automate one of the most time-consuming tasks in business, education, and consulting making slides. The Case For: This could mean a big productivity boost for students, teachers, and professionals who currently spend hours formatting decks. Imagine cutting a 4-hour task down to 20 minutes. The Case Against: If everyone relies on AI-generated decks, presentations may lose originality and start to look “cookie cutter.” It also raises questions about whether the skill of building a narrative visually will fade, similar to how calculators changed math education. So the question is: do you see AI slide generators becoming a standard productivity tool (like templates once did), or do you think human-crafted presentations will remain the gold standard? Read more'}, {'id': 4, 'title': 'New AI tools are now auto-generating full slide decks from documents and notes', 'author': 'Crazzzzy_guy', 'created_at': '2025-09-22T16:02:49.891', 'tags': ['AI', 'Presentations', 'Productivity', 'Technology', 'Automation', 'Originality', 'Efficiency Boosts'], 'content': 'In the ever-evolving landscape of technology, we\\'ve witnessed artificial intelligence transition from generating images and text to crafting videos. Yet, one area where AI is rapidly gaining traction is in the realm of presentations. Imagine a platform like Presenti AI, which can take raw input—be it a topic, a Word document, or even a PDF—and transform it into a polished, structured presentation within mere minutes.\\n\\nThis technology isn\\'t just about arranging slides. These systems are designed to rewrite awkward text, apply branded templates, and export directly to formats like PowerPoint or PDF. In essence, they aim to automate one of the most time-consuming tasks in business, education, and consulting: creating slides.\\n\\nThe potential benefits are clear. For students, teachers, and professionals who currently spend countless hours formatting decks, this could mean a significant boost in productivity. Imagine reducing a four-hour task to just twenty minutes. The allure of such efficiency is undeniable.\\n\\nHowever, there\\'s a flip side to this technological marvel. If everyone begins to rely on AI-generated presentations, there\\'s a risk that originality might be sacrificed, leading to a sea of \"cookie-cutter\" slides. Moreover, it raises concerns about whether the skill of visually crafting a narrative will diminish, much like how calculators altered the landscape of math education.\\n\\nSo, the question remains: will AI slide generators become a standard productivity tool, akin to templates of the past, or will human-crafted presentations continue to hold their place as the gold standard? As we stand at this crossroads, the decision lies in our hands, shaping the future of how we communicate and present our ideas.'}], count=None)"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "result = supabase\\\n",
+    "            .table('blog_posts')\\\n",
+    "            .select('''\n",
+    "                id,\n",
+    "                title,\n",
+    "                author,\n",
+    "                created_at,\n",
+    "                tags,\n",
+    "                content\n",
+    "            ''')\\\n",
+    "            .eq('published', True)\\\n",
+    "            .order('created_at', desc=True)\\\n",
+    "            .execute()\n",
+    "\n",
+    "result"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d4576957",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

backend/rd_pipeline_bdata.py

@@ -0,0 +1,130 @@
+from flexible_blog_database import FlexibleBlogDatabase
+import os, time, logging, requests, json
+from typing import List, Dict, Optional
+from llm_agent import process_story
+from brightdata_api import reddit_search_api, scrape_and_download_reddit
+from supabase_api import insert_blog_post
+from collections import OrderedDict
+import datetime
+from dotenv import load_dotenv
+load_dotenv()
+
+logger = logging.getLogger("rd_pipeline_bdata")
+logging.basicConfig(level=os.getenv("LOG_LEVEL", "INFO"))
+
+url_category_mapping = OrderedDict({
+    "Artificial Intelligence": "https://www.reddit.com/r/ArtificialInteligence/",
+    "Social": "https://www.reddit.com/r/TrueOffMyChest/",
+    "Other": "https://www.reddit.com/r/relationship_advice/",
+    "Movies": "https://www.reddit.com/r/movies/",
+    "Other": "https://www.reddit.com/r/stories/",
+    "Developers": "https://www.reddit.com/r/developersIndia/",
+    "AI Agents": "https://www.reddit.com/r/aiagents/"
+})
+
+def scrape_and_download_reddit(url="https://www.reddit.com/r/ArtificialInteligence/"):
+
+    reddit_response = reddit_search_api(url)
+    if not reddit_response or reddit_response.get("total_found", 0) == 0:
+        print("No posts found or error occurred during Reddit search.")
+        return None
+    
+    return reddit_response
+
+def find_best_post(posts_dict):
+    """Return post indexes in descending order based on scoring"""
+    posts_info = posts_dict
+    if not posts_info:
+        raise ValueError("No posts found from Reddit API.")
+
+    # weight configuration (tweak as desired)
+    weights = {
+        "length": 0.3,   # weight for length of post_content
+        "ups": 0.3,      # weight for ups
+        "comments": 0.2, # weight for num_comments
+        "ratio": 0.2     # weight for upvote_ratio
+    }
+
+    # calculate maxima for normalization
+    len_max = max(len(p["description"]) if p["description"] else 0 for p in posts_info) or 1
+    ups_max = max(p["upvotes"] or 0 for p in posts_info) or 1
+    comments_max = max(p["num_comments"] or 0 for p in posts_info) or 1
+
+    def score(post):
+        length_score   = (len(post["description"]) if post["description"] else 0) / len_max
+        ups_score      = (post["upvotes"] or 0) / ups_max
+        comments_score = (post["num_comments"] or 0) / comments_max
+
+        return (weights["length"]   * length_score +
+                weights["ups"]      * ups_score +
+                weights["comments"] * comments_score)
+
+    # Get scores for each post and sort indexes
+    scored_indexes = sorted(
+        range(len(posts_info)),
+        key=lambda idx: score(posts_info[idx]),
+        reverse=True
+    )
+
+    return scored_indexes
+
+def process_and_store_post(user_input=None, max_trials=5):
+    """
+    Simplified + optimized:
+    - If user_input given, process it directly.
+    - Else fetch Reddit posts, try top candidates until one succeeds.
+    """
+    if user_input:
+        raw_story = user_input
+        meta = {"title": "User Provided Story", "author": "anonymous"}
+        result = process_story(raw_story, enhanced=False)
+    else:
+        today = datetime.date.today()
+        weekday_python = today.weekday()
+        category_list = list(url_category_mapping.keys())
+        category_index = weekday_python % len(category_list)
+        response_bd = scrape_and_download_reddit(url=url_category_mapping[category_list[category_index]])
+        posts = response_bd['parsed_posts'] if response_bd else []
+        if not posts:
+            logger.warning("No Reddit posts available after retries; aborting.")
+            return None
+        order = find_best_post(posts)
+        result = None
+        meta = None
+        for idx in order[:max_trials]:
+            post = posts[idx]
+            content = post.get("description")
+            if not content:
+                continue
+            try:
+                result = process_story(content, enhanced=False)
+                raw_story = content
+                meta = post
+                break
+            except Exception:
+                continue
+        if result is None or not meta:
+            logger.error("Could not process any candidate post.")
+            return None
+
+    if not result or not meta:
+        return None
+    print(f"Story Preview:\n{result['polished_story'][:500]}...")
+    keywords = result.get("keywords") or []
+    if keywords:
+        print("Keywords:", ", ".join(keywords))
+
+    write_data = {
+                "title": meta.get("title"),
+                "content": result.get("polished_story", ""),
+                "author": meta.get("user_posted"),
+                "tags": result.get("keywords", []),  # Fixed: use .get() with default empty list
+                "created_at": meta.get("date_posted"),  # Fixed: use date_posted instead of timestamp
+                "category": category_list[category_index]  # Added category field
+            }
+    write_response = insert_blog_post(write_data)
+    reddit_done = f"Data written to Supabase with response: {write_response}"
+    return reddit_done
+
+if __name__ == "__main__":
+    process_and_store_post()

backend/rd_pipeline_local.py

@@ -0,0 +1,194 @@
+from supabase_auth import datetime
+from flexible_blog_database import FlexibleBlogDatabase
+from supabase_api import insert_blog_post
+import os, time, logging, requests, json
+from typing import List, Dict, Optional
+from llm_agent import process_story
+from dotenv import load_dotenv
+load_dotenv()
+
+logger = logging.getLogger("rd_pipeline")
+logging.basicConfig(level=os.getenv("LOG_LEVEL", "INFO"))
+
+def fetch_reddit_posts(url: Optional[str] = None, attempts: int = 3, backoff_base: float = 2.0) -> List[Dict]:
+    """Fetch recent posts from Reddit with retry + fallback.
+    Returns list (may be empty). No exceptions bubble for HTTP/JSON failures.
+    """
+    if not url:
+        url = "https://www.reddit.com/r/TrueOffMyChest/hot.json?limit=25&raw_json=1"
+    headers = {
+        "User-Agent": os.getenv(
+            "REDDIT_USER_AGENT",
+            "script:amplify.rd_pipeline:v1.0 (by u/exampleuser contact: noreply@example.com)"
+        ),
+        "Accept": "application/json",
+        "Accept-Encoding": "gzip, deflate, br",
+        "Connection": "close"
+    }
+    last_err: Optional[Exception] = None
+    for attempt in range(1, attempts + 1):
+        try:
+            resp = requests.get(url, headers=headers, timeout=15)
+            status = resp.status_code
+            if status == 200:
+                try:
+                    reddit_data = resp.json()
+                except ValueError as e:
+                    last_err = e
+                    logger.warning("JSON decode failed (attempt %s): %s", attempt, e)
+                else:
+                    posts_info = [
+                        {
+                            "title": c["data"].get("title"),
+                            "post_content": c["data"].get("selftext"),
+                            "author": c["data"].get("author"),
+                            "upvote_ratio": c["data"].get("upvote_ratio"),
+                            "ups": c["data"].get("ups"),
+                            "num_comments": c["data"].get("num_comments"),
+                        }
+                        for c in reddit_data.get("data", {}).get("children", [])
+                    ]
+                    logger.info("Fetched %d Reddit posts", len(posts_info))
+                    return posts_info
+            elif status in (403, 429):
+                logger.warning("Reddit returned %s (attempt %s/%s)", status, attempt, attempts)
+            else:
+                logger.warning("Unexpected status %s (attempt %s/%s)", status, attempt, attempts)
+            time.sleep(backoff_base ** (attempt - 1))
+        except (requests.RequestException, Exception) as e:
+            last_err = e
+            logger.warning("Error fetching Reddit posts (attempt %s/%s): %s", attempt, attempts, e)
+            time.sleep(backoff_base ** (attempt - 1))
+    fallback_path = os.getenv("REDDIT_FALLBACK_JSON")
+    if fallback_path and os.path.isfile(fallback_path):
+        try:
+            with open(fallback_path, "r", encoding="utf-8") as f:
+                cached = json.load(f)
+            posts_info = [
+                {
+                    "title": c["data"].get("title"),
+                    "post_content": c["data"].get("selftext"),
+                    "author": c["data"].get("author"),
+                    "upvote_ratio": c["data"].get("upvote_ratio"),
+                    "ups": c["data"].get("ups"),
+                    "num_comments": c["data"].get("num_comments"),
+                }
+                for c in cached.get("data", {}).get("children", [])
+            ]
+            logger.info("Loaded %d posts from fallback JSON", len(posts_info))
+            return posts_info
+        except Exception as e:
+            logger.error("Failed reading fallback JSON: %s", e)
+    logger.error("All Reddit fetch attempts failed. Last error: %s", last_err)
+    return []
+
+def find_best_post(posts_dict):
+    """Return post indexes in descending order based on scoring"""
+    posts_info = posts_dict
+    if not posts_info:
+        raise ValueError("No posts found from Reddit API.")
+
+    # weight configuration (tweak as desired)
+    weights = {
+        "length": 0.3,   # weight for length of post_content
+        "ups": 0.3,      # weight for ups
+        "comments": 0.2, # weight for num_comments
+        "ratio": 0.2     # weight for upvote_ratio
+    }
+
+    # calculate maxima for normalization
+    len_max = max(len(p["post_content"]) if p["post_content"] else 0 for p in posts_info) or 1
+    ups_max = max(p["ups"] or 0 for p in posts_info) or 1
+    comments_max = max(p["num_comments"] or 0 for p in posts_info) or 1
+
+    def score(post):
+        length_score   = (len(post["post_content"]) if post["post_content"] else 0) / len_max
+        ups_score      = (post["ups"] or 0) / ups_max
+        comments_score = (post["num_comments"] or 0) / comments_max
+        ratio_score    = post["upvote_ratio"] or 0
+
+        return (weights["length"]   * length_score +
+                weights["ups"]      * ups_score +
+                weights["comments"] * comments_score +
+                weights["ratio"]    * ratio_score)
+
+    # Get scores for each post and sort indexes
+    scored_indexes = sorted(
+        range(len(posts_info)),
+        key=lambda idx: score(posts_info[idx]),
+        reverse=True
+    )
+
+    return scored_indexes
+
+def process_and_store_post(user_input=None, max_trials=5):
+    """
+    Simplified + optimized:
+    - If user_input given, process it directly.
+    - Else fetch Reddit posts, try top candidates until one succeeds.
+    """
+    if user_input:
+        raw_story = user_input
+        meta = {"title": "User Provided Story", "author": "anonymous"}
+        result = process_story(raw_story, enhanced=False)
+    else:
+        posts = fetch_reddit_posts()
+        if not posts:
+            logger.warning("No Reddit posts available after retries; aborting.")
+            return None
+        order = find_best_post(posts)
+        result = None
+        meta = None
+        for idx in order[:max_trials]:
+            post = posts[idx]
+            content = post.get("post_content")
+            if not content:
+                continue
+            try:
+                result = process_story(content, enhanced=False)
+                print(result)
+                raw_story = content
+                meta = post
+                break
+            except Exception as e:
+                print(f"Exception occurred : {str(e)}")
+                continue
+        if result is None or not meta:
+            logger.error("Could not process any candidate post.")
+            return None
+
+    if not result or not meta:
+        return None
+    print(f"Story Preview:\n{result['polished_story'][:500]}...")
+    keywords = result.get("keywords") or []
+    if keywords:
+        print("Keywords:", ", ".join(keywords))
+
+    from datetime import datetime
+    write_data = {
+                "title": meta.get("title"),
+                "content": result.get("polished_story", ""),
+                "author": meta.get("author", "unknown"),
+                "tags": result.get("keywords", []),  # Fixed: use .get() with default empty list
+                "created_at": meta.get("date_posted", datetime.now().strftime("%Y-%m-%d %H:%M:%S"))  # Fixed: use date_posted instead of timestamp
+            }
+    #print(f"Write Data : {write_data}")
+    # print("==========================")
+    # print(f"Here are the meta details : {meta}")
+    # print("==========================")
+    # print(f"Here is the write data : {write_data}")
+    # print("==========================")
+    write_response = insert_blog_post(write_data)
+    reddit_done = f"Data written to Supabase with response: {write_response}"
+
+    # blog_db = FlexibleBlogDatabase()
+    # blog_id = blog_db.create_blog_post(
+    #     title=meta.get("title") or "Untitled",
+    #     content=result['polished_story'],
+    #     author=meta.get("author") or "unknown",
+    #     tags=keywords
+    # )
+    return reddit_done
+
+if __name__ == "__main__":
+    process_and_store_post()

backend/requirements.txt

@@ -0,0 +1,14 @@
+fastapi
+uvicorn
+langchain-community>=0.3.27
+pyyaml
+pydantic>=2.0
+python-dotenv
+langchain>=0.2.0
+langchain-openai>=0.1.0
+openai>=1.30.0
+langgraph
+langchain-mcp-adapters
+fastapi-mcp
+supabase
+pip-system-certs

backend/supabase_api.py

@@ -0,0 +1,24 @@
+from supabase import create_client, Client
+import os
+from dotenv import load_dotenv
+load_dotenv()
+
+url = os.environ.get("SUPABASE_URL", "")
+key = os.environ.get("SUPABASE_KEY", "")
+supabase: Client = create_client(url, key)
+
+def insert_blog_post(data: dict):
+    try:
+        response = supabase.table("blog_posts").insert(data).execute()
+        print("Data inserted successfully:", response)
+    except Exception as e:
+        print("Error inserting data:", e)
+
+def fetch_reddit_data():
+    try:
+        response = supabase.table("blog_posts").select("*").execute()
+        print("Data fetched successfully:", response.data)
+        return response.data
+    except Exception as e:
+        print("Error fetching data:", e)
+        return None

builderflow.md

@@ -0,0 +1,180 @@
+# Commit-1
+
+# ReactFast Project Overview
+
+A minimal full-stack setup with a FastAPI backend serving a Vite + React frontend. The frontend builds into `frontend/dist`, and FastAPI mounts it under the `/app` route.
+
+## What this project includes
+- Backend: FastAPI app (`backend/app.py`) mounting static files from the React build.
+- Frontend: Vite + React (TypeScript) app configured with base `/app/` so assets resolve when hosted under that path.
+- Local dev: Build frontend once, then run the FastAPI server. Visit `http://127.0.0.1:<port>/app/`.
+
+## Dependencies
+- Python (backend)
+  - fastapi: Web framework serving API and static files
+  - uvicorn: ASGI server to run the FastAPI app
+- Node (frontend)
+  - react, react-dom: UI library and DOM renderer
+  - vite: Build tool and dev server
+  - @vitejs/plugin-react: React plugin for Vite (Fast Refresh, JSX, etc.)
+  - typescript, @types/react, @types/react-dom: TypeScript and React typings
+
+---
+
+## Folder tree and file descriptions
+
+### backend/
+```
+backend/
+├─ app.py                  # FastAPI app mounting the React build at /app
+├─ requirements.txt        # Python dependencies for backend (fastapi, uvicorn)
+├─ __pycache__/            # Python bytecode cache (auto-generated)
+└─ .venv/                  # Local Python virtual environment (developer local)
+```
+
+### frontend/
+```
+frontend/
+├─ index.html              # Vite HTML entry; loads /src/main.tsx
+├─ package.json            # Frontend scripts and dependencies
+├─ package-lock.json       # Exact dependency versions (npm lockfile)
+├─ tsconfig.json           # TypeScript compiler options for the app
+├─ vite.config.ts          # Vite config; base set to /app and outDir=dist
+├─ src/                    # Application source code
+│  ├─ App.tsx              # Main UI component rendered by the app
+│  ├─ main.tsx             # React entry; creates root and renders <App />
+│  └─ style.css            # Minimal global styles
+├─ dist/                   # Production build output (generated by `npm run build`)
+│  ├─ index.html           # Built HTML referencing hashed asset files under /app
+│  └─ assets/              # Hashed JS/CSS bundles and sourcemaps
+│     ├─ index-*.js        # Production JS bundle (hashed filename)
+│     ├─ index-*.js.map    # Sourcemap for debugging (if enabled)
+│     └─ index-*.css       # Production CSS bundle (hashed filename)
+└─ node_modules/           # Installed frontend dependencies (generated by npm)
+```
+
+---
+
+## How it works
+1. Build the frontend (Vite) which outputs to `frontend/dist` with asset URLs prefixed by `/app/`.
+2. Start the FastAPI server; it mounts `frontend/dist` as static files at the `/app` route.
+3. Navigate to `http://127.0.0.1:<port>/app/` to view the app (index.html + assets).
+
+## Common commands (optional)
+- Build frontend: `npm run build` in `frontend/`
+- Run backend: `uvicorn app:app --host 127.0.0.1 --port 8000` in `backend/` (after installing requirements)
+
+## Notes
+- If you change the frontend base path or output folder, update either Vite’s `base`/`build.outDir` or the backend static mount path accordingly.
+- `dist/` is generated—do not edit files there manually; edit files under `src/` instead and rebuild.
+
+---
+
+# Commit-2
+
+High-level summary of enabling frontend ↔ backend communication.
+
+- Backend
+  - Added a simple POST API at `/api/transform` that accepts `{ text: string }` and returns `{ result: string }` with a minimal transformation.
+  - Kept the React static site mounted at `/app` so built assets resolve correctly (aligned with Vite `base: '/app/'`).
+
+- Frontend
+  - Updated the main UI (`src/App.tsx`) to include:
+    - A label, a textbox for user input, and a submit button.
+    - On submit, a `fetch('/api/transform', { method: 'POST', body: JSON.stringify({ text }) })` call.
+    - Displays the returned `result` string below the form.
+  - Light, elegant styling in `src/style.css` to keep the layout centered and readable without overengineering.
+
+- Result
+  - Users can type a message, submit, and see a transformed response from the FastAPI backend—served together under the same origin, avoiding CORS configuration.
+
+---
+
+# Commit-3
+
+High-level summary of adding containerization (Docker) support.
+
+- Purpose
+  - Provide a reproducible build artifact bundling backend (FastAPI) and pre-built frontend (Vite) into one image.
+  - Simplify deployment: single `docker run` serves both API and static UI.
+
+- Dockerfile Structure (multi-stage)
+  - Stage 1 (node:20-alpine): installs frontend deps and runs `npm run build` to produce `dist/`.
+  - Stage 2 (python:3.12-slim): installs backend Python deps, copies backend code and built `frontend/dist`.
+  - Starts with: `uvicorn backend.app:app --host 0.0.0.0 --port 8000`.
+
+- Key Paths Inside Image
+  - `/app/backend` – FastAPI code
+  - `/app/frontend/dist` – Built static assets served by FastAPI at `/app` route
+
+- Added Files
+  - `Dockerfile` – Multi-stage build definition
+  - `.dockerignore` – Excludes node_modules, virtual envs, caches, VCS metadata, logs, etc., reducing context size and image bloat
+
+- Build & Run (local)
+  1. Build image:
+     - `docker build -t reactfast .`
+  2. Run container:
+     - `docker run --rm -p 8000:8000 reactfast`
+  3. Access UI:
+     - `http://localhost:8000/app/`
+
+- Customization Notes
+  - To enable auto-reload in development, run locally without Docker or create a dev Dockerfile variant mounting source.
+  - For production scaling, consider adding a process manager (e.g., `gunicorn` with `uvicorn.workers.UvicornWorker`) and HEALTHCHECK.
+  - Pin dependency versions more strictly if reproducibility across time is critical.
+
+- Outcome
+  - Project can be built and deployed as a single immutable image; frontend and backend remain in sync at build time.
+
+- Pushing the app to Azure Container Registry. Use below commands 
+  -  `docker login` to login to Azure Container Registry
+  -  `docker tag <app_name>:latest <registry-name>.azurecr.io/<app_name>:latest`
+  -  `docker push <registry-name>.azurecr.io/<app_name>:latest`
+  
+
+  # Commit-4
+
+  High-level summary of adding CI automation (GitHub Actions) to build and push the Docker image to Azure Container Registry (ACR).
+
+  - Purpose
+    - Automate image builds on each push to `main` (and manual dispatch) ensuring the registry always has an up‑to‑date image.
+    - Provide traceable image tags (`<commit-sha>` and `latest`) for rollback and promotion.
+
+  - Secrets / Inputs
+    - `AZURE_CREDENTIALS`: JSON from `az ad sp create-for-rbac --role AcrPush --scopes <ACR_ID> --sdk-auth`.
+    - `ACR_LOGIN_SERVER`: e.g. `minimum.azurecr.io`.
+    - (Optional) `ACR_NAME` if deriving login server dynamically.
+
+  - Workflow Steps (simplified)
+    1. Checkout repository source.
+    2. Azure login using service principal (`azure/login`).
+    3. Authenticate to ACR (either via `az acr login` or `docker/login-action`).
+    4. Build Docker image with existing multi-stage `Dockerfile`.
+    5. Tag image twice: `:<git-sha>` and `:latest`.
+    6. Push both tags to ACR.
+    7. Summarize pushed tags for visibility.
+
+  - Tagging Strategy
+    - Immutable: `registry/app:{{ github.sha }}` for precise traceability.
+    - Mutable convenience: `registry/app:latest` for default deployments / quick tests.
+
+  - Minimal Example (conceptual)
+    - Trigger: `on: push: branches: [ main ]` + `workflow_dispatch`.
+    - Uses official actions: `actions/checkout`, `azure/login`, `docker/build-push-action`.
+
+  - Benefits
+    - Eliminates manual local build/push steps.
+    - Reduces risk of “works on my machine” discrepancies.
+    - Provides consistent, auditable artifact generation tied to commit history.
+
+  - Follow-on Opportunities
+    - Add deploy job (e.g., to Azure Web App / Container Apps / AKS) after successful push.
+    - Introduce image security scanning (Trivy / Microsoft Defender). 
+    - Add build cache (GitHub Actions cache or ACR build tasks) for faster builds.
+    - Add semantic version tagging (e.g., `v1.2.3`) if release process formalizes.
+
+  - Outcome
+    - CI pipeline ensures every code change can rapidly produce a runnable, versioned container image in ACR, ready for deployment workflows.
+
+

frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ReactFast</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>

frontend/package-lock.json

@@ -0,0 +1,1658 @@
+{
+  "name": "reactfast-frontend",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "reactfast-frontend",
+      "version": "0.0.1",
+      "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "typescript": "^5.5.4",
+        "vite": "^5.4.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
+      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
+      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.3",
+        "@babel/parser": "^7.28.3",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.3.tgz",
+      "integrity": "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
+      "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.3.tgz",
+      "integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.3",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.2",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
+      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.30",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.0.tgz",
+      "integrity": "sha512-lVgpeQyy4fWN5QYebtW4buT/4kn4p4IJ+kDNB4uYNT5b8c8DLJDg6titg20NIg7E8RWwdWZORW6vUFfrLyG3KQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.0.tgz",
+      "integrity": "sha512-2O73dR4Dc9bp+wSYhviP6sDziurB5/HCym7xILKifWdE9UsOe2FtNcM+I4xZjKrfLJnq5UR8k9riB87gauiQtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.0.tgz",
+      "integrity": "sha512-vwSXQN8T4sKf1RHr1F0s98Pf8UPz7pS6P3LG9NSmuw0TVh7EmaE+5Ny7hJOZ0M2yuTctEsHHRTMi2wuHkdS6Hg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.0.tgz",
+      "integrity": "sha512-cQp/WG8HE7BCGyFVuzUg0FNmupxC+EPZEwWu2FCGGw5WDT1o2/YlENbm5e9SMvfDFR6FRhVCBePLqj0o8MN7Vw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.0.tgz",
+      "integrity": "sha512-UR1uTJFU/p801DvvBbtDD7z9mQL8J80xB0bR7DqW7UGQHRm/OaKzp4is7sQSdbt2pjjSS72eAtRh43hNduTnnQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.0.tgz",
+      "integrity": "sha512-G/DKyS6PK0dD0+VEzH/6n/hWDNPDZSMBmqsElWnCRGrYOb2jC0VSupp7UAHHQ4+QILwkxSMaYIbQ72dktp8pKA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.0.tgz",
+      "integrity": "sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.0.tgz",
+      "integrity": "sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.0.tgz",
+      "integrity": "sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.0.tgz",
+      "integrity": "sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.0.tgz",
+      "integrity": "sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.0.tgz",
+      "integrity": "sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.0.tgz",
+      "integrity": "sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.0.tgz",
+      "integrity": "sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.0.tgz",
+      "integrity": "sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.0.tgz",
+      "integrity": "sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.0.tgz",
+      "integrity": "sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.0.tgz",
+      "integrity": "sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.0.tgz",
+      "integrity": "sha512-q7cIIdFvWQoaCbLDUyUc8YfR3Jh2xx3unO8Dn6/TTogKjfwrax9SyfmGGK6cQhKtjePI7jRfd7iRYcxYs93esg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.0.tgz",
+      "integrity": "sha512-XzNOVg/YnDOmFdDKcxxK410PrcbcqZkBmz+0FicpW5jtjKQxcW1BZJEQOF0NJa6JO7CZhett8GEtRN/wYLYJuw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.0.tgz",
+      "integrity": "sha512-xMmiWRR8sp72Zqwjgtf3QbZfF1wdh8X2ABu3EaozvZcyHJeU0r+XAnXdKgs4cCAp6ORoYoCygipYP1mjmbjrsg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.24",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
+      "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
+      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001737",
+        "electron-to-chromium": "^1.5.211",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001739",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001739.tgz",
+      "integrity": "sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.213",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.213.tgz",
+      "integrity": "sha512-xr9eRzSLNa4neDO0xVFrkXu3vyIzG4Ay08dApecw42Z1NbmCt+keEpXdvlYGVe0wtvY5dhW0Ay0lY0IOfsCg0Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.0.tgz",
+      "integrity": "sha512-/Zl4D8zPifNmyGzJS+3kVoyXeDeT/GrsJM94sACNg9RtUE0hrHa1bNPtRSrfHTMH5HjRzce6K7rlTh3Khiw+pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.50.0",
+        "@rollup/rollup-android-arm64": "4.50.0",
+        "@rollup/rollup-darwin-arm64": "4.50.0",
+        "@rollup/rollup-darwin-x64": "4.50.0",
+        "@rollup/rollup-freebsd-arm64": "4.50.0",
+        "@rollup/rollup-freebsd-x64": "4.50.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.50.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.50.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.50.0",
+        "@rollup/rollup-linux-arm64-musl": "4.50.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.50.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.50.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-musl": "4.50.0",
+        "@rollup/rollup-openharmony-arm64": "4.50.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.50.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.50.0",
+        "@rollup/rollup-win32-x64-msvc": "4.50.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "reactfast-frontend",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5173"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+  "vite": "^5.4.0",
+  "typescript": "^5.5.4",
+  "@types/react": "^18.3.3",
+  "@types/react-dom": "^18.3.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,452 @@
+import { useState, useEffect, type FormEvent } from 'react';
+
+interface BlogPost {
+  id: number;
+  title: string;
+  content: string;
+  author: string;
+  created_at: string;
+  published: boolean;
+  tags: string[];
+  featured_image?: {
+    url: string;
+    alt_text: string;
+    caption: string;
+  };
+  post_images: Array<{
+    id: number;
+    url: string;
+    alt_text: string;
+    caption: string;
+    order: number;
+    position?: number;
+  }>;
+}
+
+interface BlogSummary {
+  id: number;
+  title: string;
+  author: string;
+  created_at: string;
+  tags: string[];
+  excerpt: string;
+  has_featured_image: boolean;
+  featured_image_url?: string;
+  post_image_count: number;
+}
+
+interface BlogResponse {
+  posts: BlogSummary[];
+  total: number;
+  limit: number;
+  offset: number;
+  has_more: boolean;
+}
+
+export default function App() {
+  const [blogData, setBlogData] = useState<BlogResponse | null>(null);
+  const [selectedPost, setSelectedPost] = useState<BlogPost | null>(null);
+  const [viewMode, setViewMode] = useState<'home' | 'blog'>('home');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const [headerCollapsed, setHeaderCollapsed] = useState(false);
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchResults, setSearchResults] = useState<BlogResponse | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTimer, setSearchTimer] = useState<number | null>(null);
+
+  const PAGE_SIZE = 6;
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && (!blogData || newPage <= Math.ceil(blogData.total / PAGE_SIZE))) {
+      setCurrentPage(newPage);
+      fetchBlogPosts(newPage);
+    }
+  };
+  const [sliderVisible, setSliderVisible] = useState(false);
+
+  const categories = ['All', 'Artificial Intelligence','Developers','AI Agents','Social','Movies'];
+
+  // Fetch blog posts on component mount and page change (disabled when searching)
+  useEffect(() => {
+    if (!searchQuery) fetchBlogPosts(currentPage);
+  }, [currentPage, searchQuery, selectedCategory]);
+
+  // When category changes, reset page & clear search results (if any)
+  useEffect(() => {
+    setCurrentPage(1);
+    if (!searchQuery) {
+      fetchBlogPosts(1);
+    }
+  }, [selectedCategory]);
+
+  // Handle scroll effect for blog header
+  useEffect(() => {
+    if (viewMode !== 'blog') return;
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const scrollThreshold = 100; // Minimum scroll distance to trigger effect
+      
+      if (currentScrollY > scrollThreshold) {
+        // Scrolling down - collapse header
+        if (currentScrollY > lastScrollY && !headerCollapsed) {
+          setHeaderCollapsed(true);
+        }
+        // Scrolling up - expand header
+        else if (currentScrollY < lastScrollY && headerCollapsed) {
+          setHeaderCollapsed(false);
+        }
+      } else {
+        // Near top - always show full header
+        setHeaderCollapsed(false);
+      }
+      
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [viewMode, lastScrollY, headerCollapsed]);
+
+  async function fetchBlogPosts(page: number = 1) {
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams({ page: String(page), limit: String(PAGE_SIZE) });
+      if (selectedCategory && selectedCategory !== 'All') params.append('category', selectedCategory);
+      const res = await fetch(`/api/blog/posts?${params.toString()}`);
+      if (res.ok) {
+        const data = await res.json();
+        // Small delay to make loading visible
+        await new Promise(resolve => setTimeout(resolve, 300));
+        setBlogData(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch blog posts:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function runSearch(query: string) {
+    const q = query.trim();
+    if (!q) {
+      setSearchResults(null);
+      return;
+    }
+    setIsSearching(true);
+    try {
+      const params = new URLSearchParams({ q });
+      if (selectedCategory && selectedCategory !== 'All') params.append('category', selectedCategory);
+      const res = await fetch(`/api/blog/search?${params.toString()}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSearchResults({
+          posts: data.posts,
+          total: data.total,
+          limit: data.posts.length,
+          offset: 0,
+          has_more: false
+        } as BlogResponse);
+      }
+    } catch (e) {
+      console.error('Search failed', e);
+    } finally {
+      setIsSearching(false);
+    }
+  }
+
+  // Debounce search input
+  useEffect(() => {
+    if (searchTimer) window.clearTimeout(searchTimer);
+    const handle = window.setTimeout(() => {
+      runSearch(searchQuery);
+    }, 300);
+    setSearchTimer(handle);
+    return () => window.clearTimeout(handle);
+  }, [searchQuery]);
+
+  async function fetchBlogPost(id: number) {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`/api/blog/posts/${id}`);
+      if (res.ok) {
+        const post = await res.json();
+        // Add artificial delay to make loading visible
+        await new Promise(resolve => setTimeout(resolve, 300));
+        setSelectedPost(post);
+        setViewMode('blog');
+      }
+    } catch (err) {
+      console.error('Failed to fetch blog post:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function formatDate(dateString: string) {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+
+  function renderBlogContent(content: string, images: BlogPost['post_images']) {
+    const paragraphs = content.split('\n\n').filter(p => p.trim());
+    const elements: JSX.Element[] = [];
+    
+    paragraphs.forEach((paragraph, index) => {
+      const paragraphNumber = index + 1;
+      
+      elements.push(
+        <p key={`para-${paragraphNumber}`} className="blog-paragraph">
+          {paragraph}
+        </p>
+      );
+      
+      // Insert images that should appear after this paragraph
+      const imagesForPosition = images.filter(img => img.position === paragraphNumber);
+      imagesForPosition.forEach(image => {
+        elements.push(
+          <figure key={`img-${image.id}`} className="blog-image">
+            <img src={image.url} alt={image.alt_text} />
+            {image.caption && <figcaption>{image.caption}</figcaption>}
+          </figure>
+        );
+      });
+    });
+    
+    return elements;
+  }
+
+  // Toggle subtle separator only if content is scrollable or user scrolled
+  useEffect(() => {
+    function evaluate() {
+      const header = document.querySelector('.compact-header');
+      if (!header) return;
+      const scrollable = document.documentElement.scrollHeight > window.innerHeight + 4;
+      const scrolled = window.scrollY > 4;
+      if (scrollable || scrolled) header.classList.add('with-sep');
+      else header.classList.remove('with-sep');
+    }
+    evaluate();
+    window.addEventListener('resize', evaluate);
+    window.addEventListener('scroll', evaluate, { passive: true });
+    return () => {
+      window.removeEventListener('resize', evaluate);
+      window.removeEventListener('scroll', evaluate);
+    };
+  }, []);
+
+  if (viewMode === 'blog' && selectedPost) {
+    return (
+      <div className="app-root blog-view">
+        <div className="bg-layers" aria-hidden="true" />
+        
+        {/* Smart header that transforms based on scroll */}
+        <header className={`blog-header smart-header ${headerCollapsed ? 'collapsed' : 'expanded'}`}>
+          <div className="blog-header-inner">
+            <button 
+              onClick={() => setViewMode('home')} 
+              className="back-button"
+              aria-label="Back to home"
+            >
+              ← Back to Home
+            </button>
+            <div className="blog-title-section">
+              <h1 className="blog-title">{selectedPost.title}</h1>
+              <div className="blog-meta">
+                <span className="blog-author">✍️ {selectedPost.author}</span>
+                <span className="blog-date">📅 {formatDate(selectedPost.created_at)}</span>
+              </div>
+            </div>
+          </div>
+        </header>
+        <main className="blog-content-area">
+          <article className="blog-article">
+            {selectedPost.featured_image && (
+              <figure className="featured-image">
+                <img 
+                  src={selectedPost.featured_image.url} 
+                  alt={selectedPost.featured_image.alt_text} 
+                />
+                {selectedPost.featured_image.caption && (
+                  <figcaption>{selectedPost.featured_image.caption}</figcaption>
+                )}
+              </figure>
+            )}
+            <div className="blog-body">
+              {renderBlogContent(selectedPost.content, selectedPost.post_images)}
+            </div>
+            
+            {/* Tags section below content */}
+            <div className="blog-tags-section">
+              {selectedPost.tags && selectedPost.tags.length > 0 && (
+                <>
+                  <h3 className="blog-tags-title">Tags</h3>
+                  <div className="blog-tags-container">
+                    {selectedPost.tags.map(tag => (
+                      <span key={tag} className="blog-tag">{tag}</span>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', margin: '2rem 0' }}>
+              <button 
+              className="back-button" 
+              onClick={() => setViewMode('home')} 
+              aria-label="Back to home"
+              >
+              ← Back to Home
+              </button>
+            </div>
+          </article>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-root homepage-layout">
+      <div className="bg-layers" aria-hidden="true" />
+      
+      {/* Enhanced Site Header with integrated controls */}
+      <header className="site-header">
+        <div className="header-inner">
+          <div className="brand-block">
+            <h1 className="site-title">Amplify<span className="pulse-dot" /></h1>
+            <p className="site-tagline">Stories that made an impact & what is happening in the world</p>
+          </div>
+          <div className="header-controls" role="search">
+            <div className="search-wrapper">
+              <input
+                type="text"
+                aria-label="Search blog posts"
+                placeholder="Search posts..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="search-input header-search"
+              />
+              <div className="search-icon">🔍</div>
+            </div>
+            <div className="category-wrapper">
+              <select
+                aria-label="Filter by category"
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className="category-select header-category"
+              >
+                {categories.map(category => (
+                  <option key={category} value={category}>{category}</option>
+                ))}
+              </select>
+              <div className="dropdown-arrow">▼</div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="main-content">
+        {/* Blog Grid Section */}
+        <section className="blog-content-section">
+          <div className="blog-container">
+            <div className="blog-grid-new">
+              {(searchResults ? searchResults.posts : blogData?.posts)?.map((post: any) => (
+                <article 
+                  key={post.id} 
+                  className={`blog-card-new ${isLoading ? 'loading' : ''}`}
+                  onClick={() => !isLoading && fetchBlogPost(post.id)}
+                  style={{ position: 'relative' }}
+                >
+                  {isLoading && (
+                    <div className="loading-overlay">
+                      <div className="loading-spinner"></div>
+                    </div>
+                  )}
+                  {post.featured_image_url && (
+                    <div className="blog-card-image-new">
+                      <img src={post.featured_image_url} alt={post.title} />
+                      <div className="image-overlay"></div>
+                    </div>
+                  )}
+                  <div className="blog-card-content-new">
+                    <div className="blog-card-tags-new">
+                      {post.tags.slice(0, 2).map((tag: string) => (
+                        <span key={tag} className="blog-card-tag-new">{tag}</span>
+                      ))}
+                      {post.percent_match !== undefined && (
+                        <span className="match-badge" title="Tag match score">{post.percent_match}%</span>
+                      )}
+                    </div>
+                    <h3 className="blog-card-title-new">{post.title}</h3>
+                    <p className="blog-card-excerpt-new">{post.excerpt}</p>
+                    <div className="blog-card-meta-new">
+                      <span className="blog-card-author-new">✍️ {post.author}</span>
+                      <span className="blog-card-date-new">📅 {formatDate(post.created_at)}</span>
+                    </div>
+                    {post.post_image_count > 0 && (
+                      <div className="blog-card-stats-new">
+                        <span className="blog-card-stat-new">📷 {post.post_image_count} images</span>
+                      </div>
+                    )}
+                  </div>
+                </article>
+              ))}
+            </div>
+            
+            {isLoading && !searchResults && (
+              <div className="grid-loading">
+                <div className="loading-spinner"></div>
+                <p>Loading posts...</p>
+              </div>
+            )}
+            {isSearching && (
+              <div className="grid-loading" style={{marginTop:'1rem'}}>
+                <div className="loading-spinner"></div>
+                <p>Searching...</p>
+              </div>
+            )}
+            {searchResults && !isSearching && searchResults.total === 0 && (
+              <div style={{textAlign:'center', marginTop:'1rem', fontSize:'0.85rem', color:'#555'}}>No matches found.</div>
+            )}
+            
+            {/* Pagination */}
+            {!searchResults && blogData && blogData.total > PAGE_SIZE && (
+              <div className="pagination-new">
+                <button 
+                  className="pagination-btn-new prev"
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 1}
+                >
+                  ← Previous
+                </button>
+                <div className="page-indicators">
+                  {Array.from({ length: Math.ceil(blogData.total / PAGE_SIZE) }, (_, i) => i + 1).map(pageNum => (
+                    <button
+                      key={pageNum}
+                      className={`page-indicator ${pageNum === currentPage ? 'active' : ''}`}
+                      onClick={() => handlePageChange(pageNum)}
+                    >
+                      {pageNum}
+                    </button>
+                  ))}
+                </div>
+                <button 
+                  className="pagination-btn-new next"
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={!blogData.has_more}
+                >
+                  Next →
+                </button>
+              </div>
+            )}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

frontend/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './style.css'
+
+const el = document.getElementById('root')
+if (el) {
+  createRoot(el).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  )
+}

frontend/src/style.css

@@ -0,0 +1,1051 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; }
+body { margin:0; font-family:'Inter',system-ui,sans-serif; color:#1b2126; background:#f2f4f8; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
+
+.app-root { position:relative; min-height:100%; padding-top:150px; }
+
+/* Layered subtle geometric background */
+.bg-layers { position:fixed; inset:0; pointer-events:none; z-index:0; background:
+  linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%),
+  radial-gradient(circle at 78% 24%, rgba(96,165,250,0.18), transparent 60%),
+  radial-gradient(circle at 15% 70%, rgba(167,139,250,0.15), transparent 62%),
+  radial-gradient(circle at 50% 85%, rgba(125,168,255,0.12), transparent 58%),
+  repeating-linear-gradient(115deg, rgba(0,0,0,0.025) 0 14px, rgba(0,0,0,0) 14px 28px),
+  linear-gradient(180deg,#f3f5f9,#eef1f6);
+  mask: linear-gradient(#fff,rgba(255,255,255,0.35)); }
+
+/* Elevated header */
+.top-bar.improved { position:fixed; top:0; left:0; right:0; display:flex; justify-content:center; padding:30px 32px 18px; z-index:10; -webkit-backdrop-filter:blur(20px) saturate(210%); backdrop-filter:blur(20px) saturate(210%); background:rgba(255,255,255,0.75); /* separator removed by default */ }
+.top-bar.improved.with-sep { border-bottom:1px solid rgba(0,0,0,0.05); box-shadow:0 14px 48px -24px rgba(0,0,0,0.35), 0 4px 14px -8px rgba(0,0,0,0.1); }
+.bar-inner { width:80%; max-width:1180px; display:flex; flex-direction:column; gap:18px; }
+.title-row { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
+.app-title { margin:0; font-size:1.55rem; letter-spacing:-0.5px; font-weight:640; display:flex; align-items:center; gap:6px; background:linear-gradient(90deg,#1b2735,#3b5168); -webkit-background-clip:text; background-clip:text; color:transparent; }
+.pulse-dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#818cf8); position:relative; box-shadow:0 0 0 0 rgba(96,165,250,0.55); animation:pulse 3s ease-in-out infinite; }
+@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(96,165,250,0.55);} 55%{box-shadow:0 0 0 10px rgba(96,165,250,0);} 100%{box-shadow:0 0 0 0 rgba(96,165,250,0);} }
+.tagline { font-size:.78rem; font-weight:500; color:#5d6670; letter-spacing:.55px; }
+
+/* Grid Loading */
+.grid-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  margin: 2rem auto;
+  text-align: center;
+}
+
+.grid-loading p {
+  color: #6366f1;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.match-badge {
+  background: linear-gradient(135deg,#6366f1,#8b5cf6);
+  color:#fff;
+  font-size:0.65rem;
+  padding:4px 8px;
+  border-radius: 999px;
+  font-weight:600;
+  letter-spacing:.5px;
+  box-shadow:0 2px 6px rgba(0,0,0,0.18);
+  display:inline-flex;
+  align-items:center;
+  gap:4px;
+  margin-left:6px;
+}
+
+/* Input form */
+.input-form { display:flex; width:100%; gap:14px; align-items:stretch; }
+.input-form.fancy .input-shell { position:relative; flex:1; display:flex; align-items:stretch; }
+.input-shell .accent-bar { position:absolute; left:12px; top:12px; bottom:12px; width:4px; border-radius:3px; background:linear-gradient(180deg,#60a5fa,#818cf8); opacity:.35; transition:opacity .35s, filter .35s; }
+.input-shell:focus-within .accent-bar { opacity:1; filter:saturate(150%); }
+.big-input { flex:1; min-height:70px; padding:20px 30px 20px 30px; font-size:1.02rem; line-height:1.35; border-radius:18px; border:1px solid #cdd3d9; background:linear-gradient(180deg,#ffffff,#f8fafc); color:#192027; outline:none; box-shadow:0 1px 3px rgba(0,0,0,0.05); transition:border-color .25s, box-shadow .35s, background .35s; }
+.big-input::placeholder { color:#9da4ad; }
+.big-input:focus { border-color:#7da8ff; box-shadow:0 0 0 3px rgba(125,168,255,0.26), 0 6px 22px -10px rgba(125,168,255,0.45); background:#ffffff; }
+
+.submit-btn { padding:0 34px; font-size:0.92rem; font-weight:600; border:1px solid #b9c2cc; border-radius:18px; background:linear-gradient(135deg,#6da8ff,#818cf8); color:#fff; cursor:pointer; letter-spacing:.45px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px -10px rgba(109,168,255,0.65),0 3px 10px -6px rgba(0,0,0,0.25); transition:transform .3s, box-shadow .35s, filter .35s, background-position .5s; min-width:132px; background-size:200% 200%; background-position:15% 35%; }
+.submit-btn:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.35); }
+.submit-btn:not(:disabled):hover { transform:translateY(-3px); background-position:55% 65%; box-shadow:0 14px 40px -16px rgba(109,168,255,0.7),0 6px 16px -10px rgba(0,0,0,0.22); }
+.submit-btn:not(:disabled):active { transform:translateY(1px); box-shadow:0 6px 18px -10px rgba(109,168,255,0.6); }
+
+/* Response area */
+/* Response / output */
+.response-area { position:relative; z-index:1; display:flex; flex-direction:column; gap:26px; align-items:center; padding:10px 34px 90px; margin-top:16px; }
+
+.card { width:80%; max-width:1180px; background:linear-gradient(170deg,#ffffff,#f5f7fa); border:1px solid #d5dbe1; -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%); border-radius:22px; padding:34px 42px 40px; color:#20262b; box-shadow:0 18px 46px -26px rgba(0,0,0,0.28), 0 8px 20px -14px rgba(0,0,0,0.15); display:flex; flex-direction:column; gap:14px; animation:fadeIn .6s ease; position:relative; overflow:hidden; }
+.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(129,140,248,0.14), transparent 60%), radial-gradient(circle at 12% 82%, rgba(96,165,250,0.14), transparent 55%); pointer-events:none; }
+.card-label { font-size:.64rem; letter-spacing:1.3px; text-transform:uppercase; opacity:.55; font-weight:600; color:#5c6670; }
+.card-content { font-size:1.05rem; line-height:1.58; white-space:pre-wrap; word-break:break-word; }
+.card-result { border-left:6px solid #91b6ff; margin-top: 10px;}
+.card-error { border-left:6px solid #ef7d7d; background:linear-gradient(165deg,#fff5f5,#ffecec); }
+.placeholder-hint { width:80%; max-width:1180px; font-size:.8rem; color:#69727b; text-align:left; padding:4px 6px 0; font-style:italic; }
+
+@media (max-width: 1100px) { .bar-inner, .card, .placeholder-hint { width:86%; } .big-input { min-height:64px; } }
+@media (max-width: 900px) { .bar-inner, .card, .placeholder-hint { width:90%; } .app-root{padding-top:140px;} .big-input{min-height:60px; padding:18px 24px;} .submit-btn{min-width:116px;} .card{padding:30px 34px 34px;} }
+
+@media (max-width: 640px) { .input-form{flex-direction:column;} .submit-btn{width:100%; height:60px;} .big-input{border-radius:18px; min-height:62px;} .bar-inner,.card,.placeholder-hint{width:94%;} .app-root{padding-top:152px;} }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
+
+/* Scrollbar subtle styling */
+::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
+::-webkit-scrollbar-thumb { background: linear-gradient(#334155,#1e293b); border-radius: 20px; }
+::-webkit-scrollbar-thumb:hover { background: linear-gradient(#475569,#334155); }
+
+/* New Homepage Layout Styles */
+/* Layout base spacing adjusted for larger header */
+.homepage-layout { padding-top: 0; }
+
+/* New Enlarged Header */
+.site-header { position:sticky; top:0; z-index:120; background:linear-gradient(125deg,#ffffffcc 0%,#f8fafccc 65%,#eef2ffcc 100%); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); border-bottom:1px solid rgba(99,102,241,0.1); box-shadow:0 4px 24px -10px rgba(99,102,241,0.25), 0 2px 8px -4px rgba(0,0,0,0.08); }
+.site-header:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 6% 90%, rgba(129,140,248,0.20), transparent 60%), radial-gradient(circle at 95% 15%, rgba(96,165,250,0.25), transparent 55%); mix-blend-mode:overlay; opacity:.6; }
+.header-inner { max-width:1320px; margin:0 auto; padding:34px clamp(2rem,7vw,7rem) 30px; display:flex; gap:40px; align-items:flex-end; flex-wrap:wrap; justify-content:space-between; position:relative; }
+.brand-block { display:flex; flex-direction:column; gap:10px; min-width:260px; }
+.site-title { margin:0; font-size:clamp(2rem,3.2vw,3.05rem); font-weight:700; letter-spacing:-1px; line-height:1; background:linear-gradient(90deg,#1e293b,#334155 40%,#4c1d95 80%); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-flex; align-items:center; gap:10px; }
+.site-title .pulse-dot { width:14px; height:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow:0 0 0 0 rgba(99,102,241,0.55); animation:pulse 3s ease-in-out infinite; }
+.site-tagline { margin:0; font-size:0.9rem; font-weight:500; letter-spacing:0.4px; color:#475569; max-width:520px; line-height:1.4; }
+.header-controls { display:flex; gap:18px; align-items:center; margin-left:auto; flex-wrap:wrap; }
+.search-wrapper, .category-wrapper { position:relative; }
+.header-search { width:300px; background:linear-gradient(180deg,#ffffff,#f1f5f9); border:1.5px solid #cbd5e1; padding:14px 18px 14px 48px; border-radius:18px; font-size:0.95rem; transition:all .35s; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
+.header-search:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,0.18), 0 6px 22px -8px rgba(99,102,241,0.35); background:#ffffff; }
+.header-search + .search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:1rem; color:#64748b; }
+.header-category { background:linear-gradient(180deg,#ffffff,#f1f5f9); border:1.5px solid #cbd5e1; padding:14px 46px 14px 18px; border-radius:18px; min-width:190px; font-size:0.9rem; cursor:pointer; transition:all .35s; appearance:none; }
+.header-category:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,0.18), 0 6px 22px -8px rgba(99,102,241,0.35); background:#ffffff; }
+.category-wrapper .dropdown-arrow { position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:0.75rem; color:#64748b; pointer-events:none; }
+
+@media (max-width:1000px){
+  .header-inner { padding:26px clamp(1.75rem,5vw,4rem) 24px; }
+  .site-title { font-size:clamp(1.9rem,5vw,2.6rem); }
+  .header-search { width:240px; }
+}
+@media (max-width:780px){
+  .header-inner { align-items:flex-start; }
+  .header-controls { width:100%; order:3; justify-content:flex-start; }
+  .header-search { width:100%; }
+  .brand-block { width:100%; }
+}
+@media (max-width:520px){
+  .site-title { font-size:2.1rem; }
+  .site-tagline { font-size:0.8rem; }
+  .header-category { width:100%; }
+}
+
+/* Remove old main-header styles */
+.main-header {
+  display: none;
+}
+
+/* Removed old content-controls & latest-posts label (merged into site-header) */
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  padding: 12px 16px 12px 44px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 0.95rem;
+  width: 280px;
+  background: white;
+  transition: all 0.3s ease;
+  outline: none;
+}
+
+.search-input:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  font-size: 1rem;
+  pointer-events: none;
+}
+
+.category-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.category-select {
+  padding: 12px 40px 12px 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 0.95rem;
+  background: white;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  min-width: 180px;
+  transition: all 0.3s ease;
+}
+
+.category-select:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.dropdown-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  font-size: 0.8rem;
+  pointer-events: none;
+}
+
+/* Main Content Area */
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 32px 80px;
+}
+
+/* Blog Content Section */
+.blog-content-section {
+  margin: 20px 0;
+  /* Debug: Ensure changes are applied */
+  background: transparent;
+}
+
+.blog-container {
+  width: 100%;
+}
+
+/* Blog Grid Compact */
+.blog-grid-new { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px; margin-bottom:54px; }
+
+/* Card aesthetic refresh: compact & elevated */
+.blog-card-new { background:#ffffff; border-radius:18px; overflow:hidden; box-shadow:0 10px 28px -14px rgba(0,0,0,0.25), 0 4px 14px -6px rgba(0,0,0,0.12); transition:all .4s cubic-bezier(.4,.2,.2,1); cursor:pointer; border:1px solid #e2e8f0; position:relative; isolation:isolate; display:flex; flex-direction:column; }
+.blog-card-new:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(99,102,241,0.07),rgba(56,189,248,0.05) 35%,rgba(255,255,255,0) 75%); opacity:0; transition:opacity .5s; pointer-events:none; }
+.blog-card-new:hover:before { opacity:1; }
+
+.blog-card-new:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 30px 60px -24px rgba(30,41,59,0.38), 0 18px 28px -12px rgba(30,41,59,0.22); border-color:#c7d2fe; }
+
+/* Media ratio refined */
+.blog-card-image-new { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#f8fafc,#e2e8f0); }
+
+.blog-card-image-new img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.blog-card-new:hover .blog-card-image-new img {
+  transform: scale(1.05);
+}
+
+.image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.blog-card-new:hover .image-overlay {
+  opacity: 1;
+}
+
+.blog-card-content-new { padding:20px 20px 22px; background:#ffffff; flex:1; display:flex; flex-direction:column; }
+
+.blog-card-tags-new { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
+
+.blog-card-tag-new { background:linear-gradient(135deg,#eef2ff,#e0e7ff); color:#4338ca; font-size:0.63rem; font-weight:600; padding:5px 10px; border-radius:14px; letter-spacing:.6px; text-transform:uppercase; }
+
+.blog-card-title-new { font-size:1.05rem; font-weight:650; color:#1e293b; margin:0 0 8px 0; line-height:1.35; letter-spacing:-0.3px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+
+.blog-card-excerpt-new { font-size:0.8rem; color:#475569; line-height:1.5; margin:0 0 14px 0; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
+
+.blog-card-meta-new { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid #f1f5f9; gap:10px; }
+
+.blog-card-author-new { font-size:0.65rem; font-weight:600; color:#334155; letter-spacing:.5px; text-transform:uppercase; }
+
+.blog-card-date-new { font-size:0.6rem; color:#64748b; letter-spacing:.5px; }
+
+.blog-card-stats-new {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.blog-card-stat-new {
+  font-size: 0.75rem;
+  color: #64748b;
+  background: #f8fafc;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+
+/* Pagination */
+.pagination-new {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  margin-top: 48px;
+}
+
+.pagination-btn-new {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.pagination-btn-new:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
+}
+
+.pagination-btn-new:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #e2e8f0;
+  color: #94a3b8;
+}
+
+.page-indicators {
+  display: flex;
+  gap: 8px;
+}
+
+.page-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 2px solid #e2e8f0;
+  background: white;
+  color: #64748b;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-indicator:hover {
+  border-color: #667eea;
+  color: #667eea;
+}
+
+.page-indicator.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: transparent;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .blog-grid-new {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  
+  .controls-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  
+  .controls-group {
+    justify-content: center;
+  }
+  
+  .search-input {
+    width: 100%;
+    max-width: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .homepage-layout {
+    padding-top: 70px;
+  }
+  
+  .compact-header .header-content {
+    padding: 12px 20px;
+  }
+  
+  .brand-section {
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .homepage-layout .app-title {
+    font-size: 1.4rem;
+  }
+  
+  .homepage-layout .tagline {
+    font-size: 0.8rem;
+  }
+  
+  .controls-inner, .main-content {
+    padding: 0 20px;
+  }
+  
+  .controls-group {
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+  }
+  
+  .search-input, .category-select {
+    width: 100%;
+    max-width: none;
+  }
+  
+  .pagination-new {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .page-indicators {
+    order: -1;
+  }
+  
+  .blog-card-content-new {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .homepage-layout .app-title { font-size:1.2rem; }
+  .blog-card-content-new { padding:16px; }
+}
+
+.blog-section-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.blog-section-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1b2735;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+.blog-section-subtitle {
+  font-size: 1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 400;
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  width: 100%;
+}
+
+.blog-card {
+  background: linear-gradient(145deg, #ffffff, #f8fafc);
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+.blog-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  border-color: #cbd5e1;
+}
+
+.blog-card-image {
+  width: 100%;
+  height: 160px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+}
+
+.blog-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.blog-card:hover .blog-card-image img {
+  transform: scale(1.05);
+}
+
+.blog-card-content {
+  padding: 20px;
+}
+
+.blog-card-tags {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.blog-card-tag {
+  background: linear-gradient(135deg, #ddd6fe, #e0e7ff);
+  color: #6366f1;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.blog-card-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+  line-height: 1.4;
+  letter-spacing: -0.3px;
+}
+
+.blog-card-excerpt {
+  font-size: 0.9rem;
+  color: #64748b;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
+}
+
+.blog-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.blog-card-author {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #475569;
+}
+
+.blog-card-date {
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+.blog-card-stats {
+  display: flex;
+  gap: 12px;
+}
+
+.blog-card-stat {
+  font-size: 0.7rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+/* Blog View Styles */
+.app-root.blog-view { padding-top:0; }
+.blog-view .bg-layers { display:none; }
+.blog-view .top-bar.improved { position:relative; }
+
+/* Unified non-sticky blog header (single source of truth) */
+/* .blog-header { position:relative; background:linear-gradient(135deg,#f8fafc 0%, #e2e8f0 100%); border-bottom:0px solid #cbd5e1; padding:40px 0 50px; margin:0; } */
+.blog-header { position:relative; background-color:#f2f5f6; padding:40px 0 10px; margin:0; } 
+.blog-header.smart-header.collapsed .blog-title { font-size:1.25rem; margin:0; }
+.blog-header.smart-header.expanded .blog-title { font-size:1.6rem; margin:0 0 12px; }
+.blog-header.smart-header.collapsed .back-button { padding:4px 12px; font-size:0.7rem; margin-bottom:6px; }
+.blog-header.smart-header.expanded .back-button { padding:8px 16px; font-size:0.8rem; margin-bottom:16px; }
+
+.blog-header-inner {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.back-button {
+  background: #6366f1;
+  border: none;
+  color: white;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 16px;
+  margin-bottom: 16px;
+  border-radius: 20px;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.back-button:hover {
+  background: #4f46e5;
+  transform: translateY(-1px);
+}
+
+.blog-title-section {
+  text-align: left;
+}
+
+.blog-title {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 12px 0;
+  line-height: 1.3;
+  letter-spacing: -0.4px;
+}
+
+.blog-meta {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.blog-author, .blog-date {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #64748b;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* (Removed unused header tag styles previously) */
+
+.blog-author {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #475569;
+}
+
+.blog-date {
+  font-size: 0.9rem;
+  color: #64748b;
+}
+
+/* (Obsolete .blog-tags removed) */
+
+/* (Removed earlier gradient tag style) */
+
+/* (Removed early full-bleed variants) */
+
+.featured-image {
+  margin: 0 0 32px 0;
+  text-align: center;
+}
+
+.featured-image img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.featured-image figcaption {
+  margin-top: 12px;
+  font-size: 0.9rem;
+  color: #64748b;
+  font-style: italic;
+}
+
+/* (Removed earlier temporary blog-body reset; consolidated version appears later) */
+
+.blog-image {
+  margin: 32px 0;
+  text-align: center;
+}
+
+.blog-image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.blog-image figcaption {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  color: #64748b;
+  font-style: italic;
+}
+
+/* Blog View Layout - Wider and Scrollable */
+.blog-view { overflow-y:auto; height:100vh; background:#f8fafc; }
+
+.blog-content-area { max-width:900px; margin:0 auto; padding:20px 20px; width:100%; background:#f8fafc; }
+
+.blog-article {
+  background: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 5px 5px 5px;
+  box-shadow: none;
+  width: 100%;
+  max-width: none;
+  margin: 0 auto;
+}
+
+/* Removed duplicate sticky blog-header block - using the earlier static positioned header design */
+
+/* (Removed duplicate .blog-header-inner definition) */
+
+/* (Removed duplicate .blog-title-section) */
+
+/* (Removed earlier oversized .blog-title) */
+
+/* (Removed intermediate .blog-meta variant) */
+
+/* (Removed duplicate blog-author/blog-date) */
+
+/* (Removed second header tags block) */
+
+/* Blog Content Styling */
+/* (Removed duplicate featured-image block) */
+
+.featured-image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.featured-image figcaption {
+  padding: 1rem 0;
+  background: transparent;
+  color: #94a3b8;
+  font-style: italic;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* (Removed duplicate blog-body variant) */
+
+/* (Removed earlier heading block) */
+
+.blog-body h1:first-child,
+.blog-body h2:first-child,
+.blog-body h3:first-child {
+  margin-top: 1.5rem;
+}
+
+.blog-body h2 {
+  font-size: 1.875rem;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.blog-body h3 {
+  font-size: 1.5rem;
+}
+
+.blog-body h4 {
+  font-size: 1.25rem;
+}
+
+.blog-body p { margin-bottom:1.25rem; text-align:left; color:#1e293b; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:1.05rem; line-height:1.7; letter-spacing:0.15px; }
+
+.blog-body p:last-child {
+  margin-bottom: 0;
+  color: #374151 !important;
+}
+
+/* Apply professional fonts */
+/* (Removed standalone font-family override) */
+
+/* (Removed duplicate heading font stack) */
+
+.blog-body li,
+.blog-body blockquote,
+.blog-body span { font-family:'Inter',system-ui,sans-serif; }
+
+.blog-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 2.5rem 0;
+  box-shadow: none;
+  border: none;
+}
+
+/* Storytelling blockquote */
+.blog-body blockquote { border-left:4px solid #6366f1; margin:2rem 0; font-style:italic; color:#24303a !important; background:linear-gradient(90deg,rgba(99,102,241,0.06),rgba(99,102,241,0)); padding:1rem 1.5rem 1rem 1.25rem; border-radius:4px; }
+
+/* Inline code refined */
+.blog-body code { background:rgba(31,41,55,0.08); padding:0.25rem 0.55rem; border-radius:4px; font-family:'SF Mono','Monaco','Inconsolata','Roboto Mono','Courier New',monospace; font-size:0.85em; color:#111827 !important; }
+
+.blog-body pre {
+  background: rgba(15, 23, 42, 0.9);
+  padding: 1.5rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 2rem 0;
+  border: 1px solid rgba(71, 85, 105, 0.5);
+}
+
+.blog-body pre code {
+  background: none;
+  padding: 0;
+  color: #000000 !important;
+  opacity: 1 !important;
+}
+
+.blog-body ul, .blog-body ol {
+  margin: 1.5rem 0;
+  padding-left: 2rem;
+}
+
+.blog-body li {
+  margin-bottom: 0.5rem;
+  color: #000000 !important;
+  opacity: 1 !important;
+}
+
+/* Narrative link styling */
+.blog-body a { color:#1d4ed8; text-decoration:none; position:relative; font-weight:500; transition:color .3s ease; }
+.blog-body a:after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background:linear-gradient(90deg,#1d4ed8,#6366f1); opacity:.65; transform:scaleX(.35); transform-origin:left; transition:transform .35s ease,opacity .35s ease; }
+.blog-body a:hover { color:#1e3a8a; }
+.blog-body a:hover:after { transform:scaleX(1); opacity:1; }
+
+/* Blog Meta and Tags Styles */
+.blog-meta {
+  display: flex;
+  gap: 1.5rem;
+  margin: 1rem 0;
+  font-size: 0.95rem;
+  color: #6b7280;
+}
+/* Removed earlier meta duplications and obsolete .blog-tags */
+
+/* New tag styling */
+.blog-tag { background:#f1f5f9; color:#334155; padding:6px 14px; border-radius:999px; font-size:0.7rem; font-weight:600; letter-spacing:0.5px; border:1px solid #e2e8f0; transition:background .25s,color .25s,border-color .25s; }
+.blog-tag:hover { background:#e2e8f0; }
+
+/* Minimal tags separator section */
+.blog-tags-section { margin:3rem 0 2.5rem 0; padding:0; border-top:1px solid #e2e8f0; }
+.blog-tags-title { font-family:'Inter',system-ui,sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:1.4px; color:#64748b; margin:1.75rem 0 1rem 0; text-transform:uppercase; padding:0 24px; text-align:left; }
+.blog-tags-container { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px; }
+
+/* Minimal Pagination Styles */
+.pagination-minimal {
+  margin-top: 2rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.pagination-track {
+  position: relative;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.pagination-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.pagination-progress.page-1 { width: 25%; }
+.pagination-progress.page-2 { width: 50%; }
+.pagination-progress.page-3 { width: 75%; }
+.pagination-progress.page-4 { width: 100%; }
+
+.pagination-handle {
+  position: absolute;
+  top: -6px;
+  width: 20px;
+  height: 20px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border: 2px solid white;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: left 0.3s ease, transform 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.pagination-handle.page-1 { left: 20%; }
+.pagination-handle.page-2 { left: 45%; }
+.pagination-handle.page-3 { left: 70%; }
+.pagination-handle.page-4 { left: 95%; }
+
+.pagination-handle:hover {
+  transform: scale(1.2);
+}
+
+.pagination-handle.dragging {
+  transform: scale(1.3);
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
+}
+
+.page-indicator {
+  font-size: 0.7rem;
+  font-weight: bold;
+  color: white;
+}
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.pagination-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #e2e8f0;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background: rgba(99, 102, 241, 0.2);
+  border-color: rgba(99, 102, 241, 0.5);
+  transform: translateY(-1px);
+}
+
+.pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-meta {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 0.85rem;
+}
+
+/* Remove old pagination slider styles */
+.pagination-slider,
+.slider-container,
+.slider-nav,
+.slider-track,
+.slider-dates,
+.date-indicator,
+.blog-sidebar,
+/* .blog-tags-section removed so it can display */
+.tags-title,
+.blog-content-layout {
+  display: none;
+}
+/* Removed legacy hidden pagination/slider/sidebar selectors */
+
+/* Enhanced Blog Card Meta */
+.blog-card-meta {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0 0.5rem 0;
+  font-size: 0.85rem;
+  color: #9ca3af;
+  align-items: center;
+}
+
+.blog-card-author, .blog-card-date {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+
+/* Responsive Design */
+@media (max-width:1100px){ .blog-section{width:86%;} .blog-content-area{padding:20px 40px; max-width:900px;} .blog-header-inner{padding:0 40px;} }
+
+@media (max-width: 900px) { 
+  .blog-section { width: 90%; }
+  .blog-grid { gap: 20px; }
+  .blog-content-area { padding:20px 30px; max-width:900px; }
+  .blog-header-inner { padding:0 30px; }
+}
+
+@media (max-width: 640px) { 
+  .blog-section { width: 94%; }
+  .blog-grid { 
+    grid-template-columns: 1fr;
+    gap: 16px; 
+  }
+  .blog-card-content { padding: 16px; }
+  .blog-content-area { padding:20px 20px; max-width:900px; }
+  .blog-header-inner { padding:0 20px; }
+  
+  .pagination-controls {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .pagination-btn {
+    width: 100%;
+  }
+}
+
+/* Removed sticky override block (header already non-sticky) */
+
+/* Unified blog typography & layout (storytelling enhanced) */
+.blog-content-area { max-width:900px; margin:0 auto; padding:0 20px 40px; width:100%; background:#f8fafc; }
+.blog-article { background:#ffffff; border:none; border-radius:12px; padding:36px 48px 36px; box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); width:100%; margin:12px auto 0; }
+.blog-body { font-size:1.06rem; line-height:1.72; color:#1f2933; max-width:65ch; margin:0 auto; font-family:'Lora','Merriweather',Georgia,serif; font-weight:400; font-variant-ligatures:common-ligatures; font-kerning:normal; hyphens:auto; }
+.blog-body.story-mode { font-size:1.12rem; max-width:60ch; }
+.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6 { font-family:'Lora','Merriweather',Georgia,serif; font-weight:600; line-height:1.25; letter-spacing:-0.3px; margin:2.2rem 0 1.15rem; color:#14202b; }
+.blog-body h1:first-child, .blog-body h2:first-child, .blog-body h3:first-child { margin-top:1rem; }
+.blog-body p { margin:0 0 1.3rem; font-weight:400; font-size:inherit; letter-spacing:0.15px; color:#1f2933; }
+.blog-body p:last-child { margin-bottom:0; }
+.blog-paragraph { margin:0 0 1.3rem; }
+
+
+/* Mobile overrides: minimize any outer padding/margin for full blog content */
+@media (max-width: 640px) {
+  /* reduce side padding so content uses most of the viewport */
+  .blog-content-area { padding: 0 8px !important; }
+
+  /* make the article padding compact on small screens */
+  .blog-article { padding: 12px 12px !important; border-radius:8px; }
+
+  /* tighten header inner spacing */
+  .blog-header-inner { padding: 0 8px !important; }
+
+  /* featured image spacing reduction */
+  .featured-image { margin: 0 0 18px 0; }
+}
+
+@media (max-width: 420px) {
+  .blog-content-area { padding: 0 6px !important; }
+  .blog-article { padding: 10px 8px !important; }
+  .blog-body { font-size: 1rem; }
+}
+

frontend/src/style.css.new

@@ -0,0 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; }
+body { margin:0; font-family:'Inter',system-ui,sans-serif; color:#1b2126; background:#f2f4f8; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
+
+/* Loading animations */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 18px;
+  z-index: 10;
+  backdrop-filter: blur(3px);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(99, 102, 241, 0.3);
+  border-radius: 50%;
+  border-top-color: #6366f1;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.blog-card-new.loading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.app-root { position:relative; min-height:100%; padding-top:150px; }
+
+/* Layered subtle geometric background */
+.bg-layers { position:fixed; inset:0; pointer-events:none; z-index:0; background:
+  linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%),
+  radial-gradient(circle at 78% 24%, rgba(96,165,250,0.18), transparent 60%),
+  radial-gradient(circle at 15% 70%, rgba(167,139,250,0.15), transparent 62%),
+  radial-gradient(circle at 50% 85%, rgba(125,168,255,0.12), transparent 58%),
+  repeating-linear-gradient(115deg, rgba(0,0,0,0.025) 0 14px, rgba(0,0,0,0) 14px 28px),
+  linear-gradient(180deg,#f3f5f9,#eef1f6);
+  mask: linear-gradient(#fff,rgba(255,255,255,0.35)); }
+
+/* Rest of your existing CSS... */

frontend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+  "strict": true,
+  "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}

frontend/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  base: '/',
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    sourcemap: true
+  },
+  server: {
+    port: 5173
+  }
+})

test.txt

@@ -0,0 +1,5 @@
+Weather Information for London:
+City: London
+Country: UK
+Temperature: 15°C
+Conditions: Cloudy