clean new branch

.dockerignore

@@ -0,0 +1,35 @@
+# Node & Python cache
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.db
+*.sqlite3
+*.log
+*.pid
+
+# Virtual envs
+venv/
+env/
+.venv/
+
+# Node modules
+node_modules/
+app/node_modules/
+
+# Git & local config
+.git/
+.gitignore
+.gitattributes
+.lfsconfig
+
+# OS / IDE files
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# HF build logs
+output.log

.gitattributes

@@ -0,0 +1,6 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+*.pptx filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,35 @@
+
+# Frontend (Vite in app/)
+app/node_modules/
+app/dist/
+app/.vite/
+app/.env
+app/.env.local
+app/.env.*.local
+
+# Backend
+backend/.env
+backend/__pycache__/
+backend/*.pyc
+
+stem/
+
+.venv
+
+.DS_Store
+
+
+
+# Logs
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+Images/
+app/public/images/
+*.pptx

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,21 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="N806" />
+          <option value="N802" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyStubPackagesAdvertiser" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <list>
+          <option value="pandas-stubs==2.3.2.250827" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

Dockerfile

@@ -0,0 +1,52 @@
+# ---------- Stage 1: build React (under app/) ----------
+FROM node:20-alpine AS fe
+WORKDIR /fe
+
+# Copy manifests explicitly from app/
+COPY app/package.json ./
+COPY app/package-lock.json ./
+
+# Debug: verify files arrived
+RUN echo "LIST /fe after copying manifests:" && ls -la
+
+# Use lockfile if present; otherwise fallback to npm install
+RUN if [ -f package-lock.json ]; then npm ci --no-audit; else npm install; fi
+
+# Copy the rest of the frontend source
+COPY app/ .
+
+# Build Vite app -> /fe/dist
+RUN npm run build
+RUN echo "LIST /fe/dist after build:" && ls -la /fe/dist
+
+# ---------- Stage 2: FastAPI runtime ----------
+FROM python:3.10-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+# System libs for OpenCV/EasyOCR
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential libgl1 libglib2.0-0 ca-certificates \
+ && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy backend code
+COPY backend/ /app/backend/
+
+# Copy built frontend into the folder FastAPI serves
+COPY --from=fe /fe/dist/ /app/backend/frontend/
+
+# Python deps (Torch CPU first)
+RUN pip install --no-cache-dir --upgrade pip \
+ && pip install --no-cache-dir torch --index-url https://download.pytorch.org/whl/cpu \
+&& pip install --no-cache-dir -r backend/requirements.txt \
+&& pip install --no-cache-dir uvicorn==0.30.1
+
+
+# Hugging Face port + persistent DB path
+ENV PORT=7860
+ENV DB_PATH=/data/sessions.db
+
+CMD ["uvicorn", "backend.app:app", "--host", "0.0.0.0", "--port", "7860"]

Readme.md

@@ -0,0 +1,9 @@
+---
+title: Gen AI for STEM Education
+emoji: 🚀
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_file: Dockerfile
+pinned: false
+---

app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

app/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

app/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.11.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.1.2"
+  }
+}

app/src/App.jsx

@@ -0,0 +1,115 @@
+import { useState, useRef } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import ImageUploader from "./components/ImageUploader";
+import ImageCanvas from "./components/ImageCanvas";
+import LoginForm from "./components/Loginform";
+import Page from "./components/Page";
+import useLogout from "./hooks/useLogout";
+import useautoLogout from "./hooks/useautoLogout";
+import "./styles/App.css";
+
+function MainPage() {
+  const [imageUrl, setImageUrl] = useState(null);
+  const [rawCircles, setRawCircles] = useState([]);
+  const [rawTexts, setRawTexts] = useState([]);
+  const [circles, setCircles] = useState([]);
+  const [texts, setTexts] = useState([]);
+  const [selectedShape, setSelectedShape] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const [imageInfo, setImageInfo] = useState(null);
+
+  const [user, setUser] = useState(null);
+  const [sessionId, setSessionId] = useState(null);
+
+  const imgRef = useRef(null);
+
+  // Shared logout hook
+  const handleLogout = useLogout(sessionId, setUser, setSessionId, setImageUrl);
+
+  // Auto logout (inactivity + tab close)
+  useautoLogout(sessionId, handleLogout,  10 * 1000);
+
+  return (
+    <div className="container">
+      <h1 className="heading">Generative AI for Stem Education</h1>
+
+      {!user ? (
+        <LoginForm setUser={setUser} setSessionId={setSessionId} />
+      ) : (
+        <>
+          <ImageUploader
+            setImageUrl={setImageUrl}
+            resetStates={() => {
+              setLoaded(false);
+              setError(null);
+              setRawCircles([]);
+              setRawTexts([]);
+              setCircles([]);
+              setTexts([]);
+              setSelectedShape(null);
+            }}
+          />
+
+          {error && <div className="error">{error}</div>}
+
+          {imageUrl && (
+            <ImageCanvas
+              imageUrl={imageUrl}
+              imgRef={imgRef}
+              setLoaded={setLoaded}
+              setError={setError}
+              setImageInfo={setImageInfo}
+              setCircles={setCircles}
+              setTexts={setTexts}
+              setRawCircles={setRawCircles}
+              setRawTexts={setRawTexts}
+              loaded={loaded}
+              imageInfo={imageInfo}
+              circles={circles}
+              texts={texts}
+              setSelectedShape={setSelectedShape}
+              selectedShape={selectedShape}
+              sessionId={sessionId}
+            />
+          )}
+
+          {selectedShape && (
+            <>
+              <div
+                style={{
+                  position: "fixed",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  zIndex: 999,
+                }}
+                onClick={() => setSelectedShape(null)}
+              />
+            </>
+          )}
+        </>
+      )}
+
+      {user && (
+        <button onClick={handleLogout} className="logout-button">
+          Logout
+        </button>
+      )}
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/page" element={<Page />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

app/src/components/ImageCanvas.jsx

@@ -0,0 +1,147 @@
+/**
+ * ImageCanvas.jsx
+ *
+ * This component is responsible for:
+ * - Displaying an uploaded image
+ * - Sending the image to a backend for text/shape detection
+ * - Scaling the returned coordinates to match the displayed image
+ * - Rendering overlays for detected circles/texts
+ * - Allowing zoom in/out (via buttons and scroll wheel)
+ * - Showing a popup when a shape is selected
+ */
+
+
+import React, { useRef } from "react";
+import ShapeOverlay from "./ShapeOverlay";
+import Popup from "./Popup";
+import ZoomControls from "./ZoomControls";
+import useZoom from "../hooks/useZoom";
+
+function ImageCanvas({
+  imageUrl,
+  imgRef,
+  setLoaded,
+  setError,
+  setImageInfo,
+  setCircles,
+  setTexts,
+  setRawCircles,
+  setRawTexts,
+  loaded,
+  imageInfo,
+  circles,
+  texts,
+  setSelectedShape,
+  selectedShape,
+}) {
+  const wrapperRef = useRef(null);
+  const { zoom, zoomIn, zoomOut, handleWheel } = useZoom({ min: 1, max: 3, step: 0.25 });
+
+  const handleImageLoad = async () => {
+    if (!imgRef.current) return;
+
+    const info = {
+      naturalWidth: imgRef.current.naturalWidth,
+      naturalHeight: imgRef.current.naturalHeight,
+      clientWidth: imgRef.current.clientWidth,
+      clientHeight: imgRef.current.clientHeight,
+      scaleX: imgRef.current.clientWidth / imgRef.current.naturalWidth,
+      scaleY: imgRef.current.clientHeight / imgRef.current.naturalHeight,
+    };
+    setImageInfo(info);
+    setLoaded(true);
+
+    try {
+      const blob = await fetch(imageUrl).then((r) => r.blob());
+      const formData = new FormData();
+      formData.append("file", blob, "image.png");
+
+      const res = await fetch("/detect/", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
+
+      const data = await res.json();
+      const rawCircles = data.circles || [];
+      const rawTexts = data.texts || [];
+
+      setRawCircles(rawCircles);
+      setRawTexts(rawTexts);
+
+      const scaledCircles = rawCircles.map((c) => ({
+        ...c,
+        x: c.x * info.scaleX,
+        y: c.y * info.scaleY,
+        r: c.r * Math.min(info.scaleX, info.scaleY),
+      }));
+
+      const scaledTexts = rawTexts.map((t) => ({
+        ...t,
+        x1: t.x1 * info.scaleX,
+        y1: t.y1 * info.scaleY,
+        x2: t.x2 * info.scaleX,
+        y2: t.y2 * info.scaleY,
+      }));
+
+      setCircles(scaledCircles);
+      setTexts(scaledTexts);
+    } catch (err) {
+      setError(`Failed to detect shapes: ${err.message}`);
+      console.error(err);
+    }
+  };
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <ZoomControls zoom={zoom} zoomIn={zoomIn} zoomOut={zoomOut} />
+
+      <div
+        className="image-container"
+        style={{ position: "relative", display: "inline-block", overflow: "auto" }}
+        onWheel={handleWheel}
+      >
+        <div
+          ref={wrapperRef}
+          className="zoom-wrapper"
+          style={{
+            position: "relative",
+            width: imageInfo ? imageInfo.clientWidth : "auto",
+            height: imageInfo ? imageInfo.clientHeight : "auto",
+            transform: `scale(${zoom})`,
+            transformOrigin: "0 0",
+            transition: "transform 120ms ease-out",
+          }}
+        >
+          <img
+            ref={imgRef}
+            src={imageUrl}
+            alt="uploaded"
+            onLoad={handleImageLoad}
+            style={{
+              width: imageInfo ? imageInfo.clientWidth : "100%",
+              height: imageInfo ? imageInfo.clientHeight : "auto",
+              display: "block",
+              userSelect: "none",
+            }}
+          />
+          {loaded && imageInfo && (
+            <ShapeOverlay
+              imageInfo={imageInfo}
+              circles={circles}
+              texts={texts}
+              setSelectedShape={setSelectedShape}
+            />
+          )}
+        </div>
+      </div>
+
+      {selectedShape && imageInfo && (
+        <Popup selectedShape={selectedShape} onClose={() => setSelectedShape(null)} zoom={zoom} />
+      )}
+    </div>
+  );
+}
+
+export default ImageCanvas;

app/src/components/ImageUploader.jsx

@@ -0,0 +1,29 @@
+/**
+ * ImageUploader.jsx
+ *
+ * This component provides a file input to upload an image.
+ * - When a user selects an image, it creates a temporary object URL
+ * - Updates the parent component with the new image URL
+ * - Resets any existing detection/overlay states to start fresh
+ */
+function ImageUploader({ setImageUrl, resetStates }) {
+  const handleUpload = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const url = URL.createObjectURL(file);
+    setImageUrl(url);
+    resetStates();
+  };
+
+  return (
+    <input
+      type="file"
+      accept="image/*"
+      onChange={handleUpload}
+      className="file-input"
+    />
+  );
+}
+
+export default ImageUploader;

app/src/components/Loginform.jsx

@@ -0,0 +1,77 @@
+/**
+ * LoginForm.jsx
+ *
+ * This component renders a login form where a user enters their name and email.
+ * - On submit, it sends the credentials to the backend login API.
+ * - If successful, it stores the user info and session ID in the parent state.
+ * - Handles loading state and displays error messages if login fails.
+ */
+
+
+import { useState } from "react";
+import "../styles/LoginForm.css";
+
+function LoginForm({ setUser, setSessionId }) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const response = await fetch("/auth/login", {
+        method: "POST",
+        body: new URLSearchParams({ name, email }),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.session_id) {
+        setUser({ name, email });
+        setSessionId(data.session_id);
+      } else {
+        setError(data.message || "Login failed. Please try again.");
+      }
+    } catch (err) {
+      console.error("Login error:", err);
+      setError("Network error. Please check your connection and try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <h2>Login</h2>
+      <form onSubmit={handleSubmit} className="login-form">
+        <input
+          type="text"
+          placeholder="Enter Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          disabled={loading}
+        />
+        <input
+          type="email"
+          placeholder="Enter Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          disabled={loading}
+        />
+        {error && <div className="error-message" style={{color: 'red', margin: '10px 0'}}>{error}</div>}
+        <button type="submit" disabled={loading}>
+          {loading ? "Logging in..." : "Login"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default LoginForm;

app/src/components/Page.jsx

@@ -0,0 +1,160 @@
+/**
+ * Page.jsx
+ *
+ * This component displays a single page image and highlights a specific circle on it.
+ * - Reads query parameters `image` (page image URL) and `circle` (circle text to highlight)
+ * - Loads the image and calculates scale info for proper overlays
+ * - Sends the image to the backend detection API to get all circles
+ * - Finds the circle that matches the target text and highlights it
+ * - Supports zooming via buttons and mouse wheel
+ */
+
+
+import { useState, useEffect, useRef } from "react";
+import { useSearchParams } from "react-router-dom";
+import ZoomControls from "./ZoomControls";
+import useZoom from "../hooks/useZoom";
+import "../styles/zoom.css";
+
+function Page() {
+  const [searchParams] = useSearchParams();
+  const targetCircleText = searchParams.get("circle");
+  const pageImage = searchParams.get("image");
+
+  const [highlightCircle, setHighlightCircle] = useState(null);
+  const [imageInfo, setImageInfo] = useState(null);
+  
+  const imgRef = useRef(null);
+  const wrapperRef = useRef(null);
+
+  const { zoom, zoomIn, zoomOut, handleWheel } = useZoom({ min: 1, max: 3, step: 0.25 });
+
+
+  const handleImageLoad = () => {
+    if (!imgRef.current) return;
+
+    const info = {
+      naturalWidth: imgRef.current.naturalWidth,
+      naturalHeight: imgRef.current.naturalHeight,
+      clientWidth: imgRef.current.clientWidth,
+      clientHeight: imgRef.current.clientHeight,
+      scaleX: imgRef.current.clientWidth / imgRef.current.naturalWidth,
+      scaleY: imgRef.current.clientHeight / imgRef.current.naturalHeight,
+    };
+    setImageInfo(info);
+  };
+
+  useEffect(() => {
+    if (!pageImage || !targetCircleText) {
+      setHighlightCircle(null);
+      return;
+    }
+
+    const detect = async () => {
+      try {
+        const blob = await fetch(pageImage).then((res) => res.blob());
+        const formData = new FormData();
+        formData.append("file", blob, "page.png");
+
+        const resp = await fetch("/detect/", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!resp.ok) throw new Error(`Detection failed: ${await resp.text()}`);
+
+        const data = await resp.json();
+        const circles = data.circles || [];
+
+        const targetCircle = circles.find(
+          (c) =>
+            c.circle_text &&
+            c.circle_text.trim().toLowerCase() === targetCircleText.trim().toLowerCase()
+        );
+
+        setHighlightCircle(targetCircle || null);
+      } catch (err) {
+        console.error("Detection error:", err);
+        setHighlightCircle(null);
+      }
+    };
+
+    detect();
+  }, [pageImage, targetCircleText]);
+
+  const getScaledCircle = () => {
+    if (!highlightCircle || !imageInfo) return null;
+
+    return {
+      cx: highlightCircle.x * imageInfo.scaleX,
+      cy: highlightCircle.y * imageInfo.scaleY,
+      r: highlightCircle.r * Math.min(imageInfo.scaleX, imageInfo.scaleY),
+    };
+  };
+
+  const scaledCircle = getScaledCircle();
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <ZoomControls zoom={zoom} zoomIn={zoomIn} zoomOut={zoomOut} />
+
+      {pageImage && (
+        <div
+          className="image-container"
+          style={{ position: "relative", display: "inline-block", overflow: "auto" }}
+          onWheel={handleWheel}
+        >
+          <div
+            ref={wrapperRef}
+            className="zoom-wrapper"
+            style={{
+              position: "relative",
+              width: imageInfo ? imageInfo.clientWidth : "auto",
+              height: imageInfo ? imageInfo.clientHeight : "auto",
+              transform: `scale(${zoom})`,
+              transformOrigin: "0 0",
+              transition: "transform 120ms ease-out",
+            }}
+          >
+            <img
+              ref={imgRef}
+              src={pageImage}
+              alt="Page"
+              onLoad={handleImageLoad}
+              style={{
+                width: imageInfo ? imageInfo.clientWidth : "100%",
+                height: imageInfo ? imageInfo.clientHeight : "auto",
+                display: "block",
+                userSelect: "none",
+              }}
+              onError={(e) => {
+                console.error("Image failed to load:", pageImage);
+                e.target.alt = "Failed to load image";
+              }}
+            />
+
+            {/* Circle overlay */}
+            {scaledCircle && (
+              <svg
+                width={imageInfo?.clientWidth || 0}
+                height={imageInfo?.clientHeight || 0}
+                style={{ position: "absolute", top: 0, left: 0, pointerEvents: "none" }}
+              >
+                <circle
+                  cx={scaledCircle.cx}
+                  cy={scaledCircle.cy}
+                  r={scaledCircle.r}
+                  stroke="blue"
+                  strokeWidth="3"
+                  fill="none"
+                />
+              </svg>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Page;

app/src/components/Popup.jsx

@@ -0,0 +1,170 @@
+/**
+ * Popup.jsx
+ *
+ * This component displays a popup box with information about a selected shape (circle or text).
+ * - For circles: shows page number and circle text, with a button to navigate to the corresponding page.
+ * - For text: fetches additional info from the LLM backend and displays it.
+ * - Supports zoomed image coordinates without scaling the popup itself.
+ * - Provides a close button to dismiss the popup.
+ */
+
+
+import { useState, useEffect } from "react";
+
+function Popup({ selectedShape, onClose, zoom = 1 }) {
+  const [info, setInfo] = useState(null);
+
+  useEffect(() => {
+    if (!selectedShape || selectedShape.r) return;
+    setInfo("Loading...");
+    fetch("/llm/generate_info/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content: selectedShape.text || "Unlabeled text" }),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+        return res.json();
+      })
+      .then((data) => setInfo(data.info))
+      .catch((error) => {
+        console.error("LLM fetch error:", error);
+        setInfo("Error generating info");
+      });
+  }, [selectedShape]);
+
+  if (!selectedShape) return null;
+
+  // ✅ Apply zoom only to coordinates, not to popup size
+  const left =
+    (selectedShape.r
+      ? selectedShape.x + selectedShape.r + 10
+      : selectedShape.x2 + 10) * zoom;
+
+  const top =
+    (selectedShape.r
+      ? selectedShape.y - selectedShape.r / 2
+      : selectedShape.y1) * zoom;
+
+  // Redirect handler
+  const handleRedirect = (e, pageNumber, circleText) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!pageNumber) {
+      console.log("Missing navigation data:", { pageNumber });
+      return;
+    }
+
+    const pageImageUrl = `/images/${pageNumber}.png`;
+    let targetUrl = `/page?image=${encodeURIComponent(pageImageUrl)}`;
+    if (circleText) {
+      targetUrl += `&circle=${encodeURIComponent(circleText)}`;
+    }
+
+    window.open(targetUrl, "_blank", "noopener,noreferrer");
+    onClose();
+  };
+
+  return (
+    <div
+      className="popup-box"
+      onClick={(e) => e.stopPropagation()}
+      style={{
+        position: "absolute",
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 1001,
+        backgroundColor: "orange",
+        border: "1px solid #ccc",
+        borderRadius: "8px",
+        padding: "10px",
+        boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+        minWidth: "200px",
+        transform: "scale(1)", 
+      }}
+    >
+      {selectedShape.r ? (
+        <div>
+          <h4>Circle Information</h4>
+          {selectedShape.page_number ? (
+            <ul style={{ listStyle: "none", padding: 0 }}>
+              <li style={{ marginBottom: "8px" }}>
+                <strong>Page Number:</strong> {selectedShape.page_number}
+              </li>
+              {selectedShape.circle_text && (
+                <li>
+                  <strong>Circle Text:</strong> {selectedShape.circle_text}
+                </li>
+              )}
+              <li style={{ marginTop: "5px" }}>
+                <button
+                  style={{
+                    cursor: "pointer",
+                    color: "white",
+                    backgroundColor: "#007bff",
+                    border: "none",
+                    padding: "5px 10px",
+                    borderRadius: "4px",
+                  }}
+                  onClick={(e) =>
+                    handleRedirect(
+                      e,
+                      selectedShape.page_number,
+                      selectedShape.circle_text
+                    )
+                  }
+                >
+                  Go to page {selectedShape.page_number}
+                </button>
+              </li>
+            </ul>
+          ) : (
+            <p>No page number available for navigation.</p>
+          )}
+          <button
+            onClick={onClose}
+            style={{
+              marginTop: "10px",
+              padding: "5px 10px",
+              backgroundColor: "#6c757d",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+            }}
+          >
+            Close
+          </button>
+        </div>
+      ) : (
+        <div>
+          <h4>Detected Text</h4>
+          <p>
+            <strong>Text:</strong> {selectedShape.text || "Text"}
+          </p>
+          <p>
+            <strong>Info:</strong> {info || "Click to generate info"}
+          </p>
+          <button
+            onClick={onClose}
+            style={{
+              marginTop: "10px",
+              padding: "5px 10px",
+              backgroundColor: "#6c757d",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+            }}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Popup;
+

app/src/components/ShapeOverlay.jsx

@@ -0,0 +1,67 @@
+/**
+ * ShapeOverlay.jsx
+ *
+ * This component renders an SVG overlay on top of an image to visually highlight
+ * detected circles and text regions. Each shape is clickable, allowing users
+ * to select a shape and view detailed information via a popup.
+ */
+
+
+import React from "react";
+
+function ShapeOverlay({ imageInfo, circles, texts, setSelectedShape }) {
+  const handleShapeClick = (e, shape) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log("Shape clicked:", shape); 
+    setSelectedShape(shape);
+  };
+
+  return (
+    <svg
+      className="overlay-svg"
+      width={imageInfo.clientWidth}
+      height={imageInfo.clientHeight}
+      viewBox={`0 0 ${imageInfo.clientWidth} ${imageInfo.clientHeight}`}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "auto",
+        zIndex: 10,
+        transformOrigin: "0 0",
+      }}
+    >
+      {circles.map((c) => (
+        <circle
+          key={`circle-${c.id}`}
+          cx={c.x}
+          cy={c.y}
+          r={c.r}
+          fill="rgba(255, 0, 0, 0.22)"
+          stroke="red"
+          strokeWidth="2"
+          onClick={(e) => handleShapeClick(e, c)}
+          style={{ cursor: "pointer", pointerEvents: "all" }}
+        />
+      ))}
+
+      {texts.map((t) => (
+        <rect
+          key={`text-${t.id}`}
+          x={t.x1}
+          y={t.y1}
+          width={t.x2 - t.x1}
+          height={t.y2 - t.y1}
+          fill="rgba(0,255,0,0.18)"
+          stroke="green"
+          strokeWidth="2"
+          onClick={(e) => handleShapeClick(e, t)}
+          style={{ cursor: "pointer", pointerEvents: "all" }}
+        />
+      ))}
+    </svg>
+  );
+}
+
+export default ShapeOverlay;

app/src/components/ZoomControls.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "../styles/Zoom.css";
+
+export default function ZoomControls({ zoom, zoomIn, zoomOut }) {
+  return (
+    <div className="zoom-controls">
+      <button onClick={zoomIn} title="Zoom in" className="zoom-btn">+</button>
+      <button onClick={zoomOut} title="Zoom out" className="zoom-btn">−</button>
+    </div>
+  );
+}

app/src/hooks/useLogout.jsx

@@ -0,0 +1,31 @@
+/**
+ * useLogout.js
+ *
+ * This custom React hook returns a memoized logout function.
+ * - Sends a logout request to the backend API with the current session ID.
+ * - Clears user-related state (user info, session ID, and uploaded image) on logout.
+ * - Ensures the function reference is stable with useCallback for performance.
+ */
+
+
+import { useCallback } from "react";
+
+export default function useLogout(sessionId, setUser, setSessionId, setImageUrl) {
+  return useCallback(async () => {
+    if (!sessionId) return;
+
+    try {
+      await fetch("http://localhost:8001/logout", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ session_id: sessionId }),
+      });
+    } catch (err) {
+      console.error("Logout error:", err);
+    }
+
+    setUser(null);
+    setSessionId(null);
+    setImageUrl(null);
+  }, [sessionId, setUser, setSessionId, setImageUrl]);
+}

app/src/hooks/useZoom.jsx

@@ -0,0 +1,52 @@
+/**
+ * useZoom.js
+ *
+ * This custom React hook manages zoom functionality for UI elements such as images.
+ * - Allows zooming in, zooming out, and setting exact zoom levels.
+ * - Supports zoom via buttons, keyboard shortcuts (Ctrl/Cmd + +, -, 0), and mouse wheel.
+ * - Enforces minimum and maximum zoom limits and configurable zoom step.
+ */
+
+
+import { useState, useEffect } from "react";
+
+export default function useZoom({ min = 1, max = 3, step = 0.25 }) {
+  const [zoom, setZoom] = useState(1);
+
+  const clamp = (v) => Math.min(Math.max(v, min), max);
+
+  const zoomIn = () => setZoom((z) => clamp(Number((z + step).toFixed(2))));
+  const zoomOut = () => setZoom((z) => clamp(Number((z - step).toFixed(2))));
+  const setZoomExact = (v) => setZoom(clamp(Number(v)));
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "+" || e.key === "=") {
+          e.preventDefault();
+          zoomIn();
+        } else if (e.key === "-") {
+          e.preventDefault();
+          zoomOut();
+        } else if (e.key === "0") {
+          e.preventDefault();
+          setZoomExact(1);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const handleWheel = (e) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      const delta = -e.deltaY;
+      const factor = delta > 0 ? 1 + step : 1 - step;
+      setZoom((z) => clamp(Math.round(z * factor * 100) / 100));
+    }
+  };
+
+  return { zoom, zoomIn, zoomOut, handleWheel };
+}

app/src/hooks/useautoLogout.jsx

@@ -0,0 +1,46 @@
+/**
+ * useAutoLogout.js
+ *
+ * This custom React hook automatically logs out a user after a period of inactivity.
+ * - Tracks user activity (mouse movement, clicks, key presses, scrolling).
+ * - Resets the inactivity timer on any interaction.
+ * - Calls the provided handleLogout function if the user is inactive for the specified timeout.
+ * - Also logs out the user when the window is closed or refreshed.
+ */
+
+import { useEffect } from "react";
+
+export default function useAutoLogout(sessionId, handleLogout, timeout) {
+  useEffect(() => {
+    if (!sessionId) return;
+
+    let timer;
+
+    const resetTimer = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        console.log("Auto logout: inactive for 5 mins");
+        handleLogout();
+      }, timeout);
+    };
+
+    window.addEventListener("mousemove", resetTimer);
+    window.addEventListener("keydown", resetTimer);
+    window.addEventListener("click", resetTimer);
+    window.addEventListener("scroll", resetTimer);
+
+    const handleUnload = () => handleLogout();
+    window.addEventListener("beforeunload", handleUnload);
+
+    resetTimer(); 
+
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("mousemove", resetTimer);
+      window.removeEventListener("keydown", resetTimer);
+      window.removeEventListener("click", resetTimer);
+      window.removeEventListener("scroll", resetTimer);
+      window.removeEventListener("beforeunload", handleUnload);
+    };
+  }, [sessionId, handleLogout, timeout]);
+}

app/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

app/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

app/src/styles/App.css

@@ -0,0 +1,95 @@
+.container {
+  position: relative; 
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 20px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.logout-button {
+  position: absolute;
+  top: 20px;      
+  right: 20px;   
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  transform: none; 
+}
+
+.heading {
+  font-size: 50px; 
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.file-input {
+  margin-bottom: 20px;
+  width: 100%;
+  padding: 6px;
+}
+
+.error {
+  margin-bottom: 15px;
+  padding: 10px;
+  background-color: #fee2e2;
+  border: 1px solid #fca5a5;
+  color: #b91c1c;
+  border-radius: 6px;
+}
+.image-container {
+  position: relative;
+  display: inline-block;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+}
+
+.uploaded-image {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
+
+.overlay-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.circle, rect {
+  cursor: pointer;
+}
+
+.popup-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.popup-box {
+   list-style-type: none;
+  position: absolute;
+  background-color: #3b82f6;
+  color: white;
+  padding: 6px 10px;
+  border-radius: 6px;
+  min-width: 50px;
+  max-width: 100px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  font-size: 15px;
+  line-height: 1.2;
+}
+
+.popup-box ul {
+  list-style-type: none; 
+  padding-left: 0;       
+  margin: 0;            
+}

app/src/styles/LoginForm.css

@@ -0,0 +1,53 @@
+.login-container {
+  max-width: 300px;
+  margin: 0.5rem auto;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fafafa;
+  color: #333;
+  font-size: 1.2rem;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column; 
+  gap: 0.75rem;          
+}
+
+.login-form input {
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: #080b0da1;
+  font-size: 1.2rem;
+}
+
+.login-form button {
+  padding: 0.5rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login-form button:hover {
+  background: #0056b3;
+}
+
+.logout-button {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.5rem 1rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.logout-button:hover {
+  background: #0056b3;
+}

app/src/styles/Zoom.css

@@ -0,0 +1,30 @@
+.zoom-controls {
+  position: fixed;
+  top: 100px;
+  right: 16px;
+  z-index: 2000;
+  display: flex;
+  flex-direction: row; 
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.zoom-btn {
+  width: 36px;
+  height: 36px;
+  font-size: 20px;
+  line-height: 36px; 
+  text-align: center;
+  padding: 0;
+  cursor: pointer;
+}
+
+.zoom-label {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

app/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

backend/app.py

@@ -0,0 +1,58 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from starlette.responses import JSONResponse, FileResponse
+
+from fastapi.staticfiles import StaticFiles
+
+import os
+from pathlib import Path
+
+from backend.routes import detect, llm,auth, regions_detect
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(detect.router, prefix="/detect", tags=["Detection"])
+app.include_router(llm.router, prefix="/llm", tags=["LLM"])
+app.include_router(auth.router, prefix="/auth", tags=["Auth"])
+app.include_router(regions_detect.router, prefix="/detect", tags=["Region Detection"])
+
+
+
+@app.get("/healthz")
+def health():
+    return {"ok": True}
+
+
+
+# @app.get("/", tags=["Root"])
+# def read_root():
+#     return JSONResponse({"message": "Backend is running!"})
+
+
+HERE = Path(__file__).resolve().parent
+FE_DIR = HERE / "frontend"
+
+app.mount("/assets", StaticFiles(directory=str(FE_DIR / "assets")), name="assets")
+app.mount("/images", StaticFiles(directory=str(FE_DIR / "images")), name="images")
+
+@app.get("/")
+def index():
+    return FileResponse(FE_DIR / "index.html")
+
+@app.get("/favicon.co")
+def favicon():
+    return JSONResponse({"detail": "No favicon configured"}, status_code=404)
+
+
+# FRONTEND_DIR = os.path.join(os.path.dirname(__file__), "frontend")
+# if os.path.isdir(FRONTEND_DIR):
+#     app.mount("/", StaticFiles(directory=FRONTEND_DIR, html=True), name="frontend")
+

backend/requirements.txt

@@ -0,0 +1,59 @@
+annotated-types==0.7.0
+anyio==4.11.0
+certifi==2025.10.5
+click==8.1.8
+distro==1.9.0
+dnspython==2.7.0
+easyocr==1.7.0
+email-validator==2.3.0
+exceptiongroup==1.3.0
+fastapi==0.111.1
+fastapi-cli==0.0.14
+filelock==3.19.1
+fsspec==2025.9.0
+groq==0.33.0
+h11==0.16.0
+httpcore==1.0.9
+httptools==0.7.1
+httpx==0.28.1
+idna==3.11
+imageio==2.37.0
+Jinja2==3.1.6
+lazy_loader==0.4
+markdown-it-py==3.0.0
+MarkupSafe==3.0.3
+mdurl==0.1.2
+mpmath==1.3.0
+networkx==3.2.1
+ninja==1.13.0
+numpy==1.26.4
+#opencv-python==4.8.1.78
+opencv-python-headless==4.8.1.78
+packaging==25.0
+Pillow==9.5.0
+pyclipper==1.3.0.post6
+pydantic==2.7.1
+pydantic_core==2.18.2
+Pygments==2.19.2
+python-bidi==0.6.7
+python-dotenv==1.0.1
+python-multipart==0.0.20
+PyYAML==6.0.3
+rich==14.2.0
+rich-toolkit==0.15.1
+scikit-image==0.24.0
+scipy==1.13.1
+shapely==2.0.7
+shellingham==1.5.4
+sniffio==1.3.1
+starlette==0.37.2
+sympy==1.14.0
+tifffile==2024.8.30
+#torch==2.8.0
+#torchvision==0.23.0
+typer==0.20.0
+typing_extensions==4.15.0
+uvicorn==0.38.0
+uvloop==0.22.1
+watchfiles==1.1.1
+websockets==15.0.1

backend/routes/auth.py

@@ -0,0 +1,161 @@
+"""
+auth.py
+
+This module defines authentication routes for handling user login and logout sessions 
+using FastAPI. It manages session creation and termination by storing session details 
+(name, email, session ID, start time, and end time) in a local SQLite database (`sessions.db`). 
+Each session is uniquely identified by a UUID. 
+"""
+
+from fastapi import APIRouter, Form
+from pydantic import BaseModel
+from datetime import datetime
+import sqlite3
+import uuid
+import os
+
+
+# Create a FastAPI router instance for handling authentication routes
+router = APIRouter()
+
+
+
+
+DB_PATH = os.environ.get("DB_PATH", "sessions.db")
+
+def get_conn():
+    conn = sqlite3.connect(DB_PATH, check_same_thread=False)
+
+    conn.execute("""
+    CREATE TABLE IF NOT EXISTS sessions (
+        id TEXT PRIMARY KEY,
+        name TEXT,
+        email TEXT,
+        start_time TEXT,
+        end_time TEXT
+        );
+    """)
+
+    return conn
+
+
+@router.post("/login")
+def login(name: str = Form(...), email: str = Form(...)):
+
+    sid = str(uuid.uuid4())
+    with get_conn() as conn:
+        conn.execute(
+            "INSERT INTO sessions (id, name, email, start_time, end_time) VALUES (?, ?, ?, ?, ?)",
+            (sid, name, email, datetime.now().isoformat(), None)
+        )
+
+    return {"session_id": sid, "status": "ok"}
+
+
+@router.post("/logout")
+def logout(session_id: str = Form(...)):
+    with get_conn() as conn:
+        conn.execute(
+            "UPDATE sessions SET end_time = ? WHERE id = ? AND end_time is NULL",
+            (datetime.now().isoformat(), session_id)
+
+        )
+    return {"status": "ok"}
+
+
+
+
+
+
+
+
+# def init_db():
+#     """
+#     Initializes the SQLite database and creates the `sessions` table if it does not already exist.
+#     The `sessions` table stores:
+#         - id (str): Unique identifier for the session (UUID)
+#         - name (str): Name of the user
+#         - email (str): Email of the user
+#         - start_time (str): ISO formatted string marking when the session started
+#         - end_time (str): ISO formatted string marking when the session ended (nullable)
+#     """
+#     conn = sqlite3.connect("sessions.db")
+#     cursor = conn.cursor()
+#     cursor.execute("""
+#         CREATE TABLE IF NOT EXISTS sessions (
+#             id TEXT PRIMARY KEY,
+#             name TEXT,
+#             email TEXT,
+#             start_time TEXT,
+#             end_time TEXT
+#         )
+#     """)
+#     conn.commit()
+#     conn.close()
+#
+#
+# # Initialize the database on module load
+# init_db()
+#
+#
+# class LogoutRequest(BaseModel):
+#     """
+#     Request model for logging out a session.
+#     Expects:
+#         - session_id (str): The unique identifier of the session to be terminated.
+#     """
+#     session_id: str
+#
+#
+# @router.post("/login")
+# async def login(name: str = Form(...), email: str = Form(...)):
+#     """
+#     Handles user login.
+#
+#     - Accepts user `name` and `email` as form data.
+#     - Generates a unique session ID using UUID.
+#     - Captures the session's start time in UTC (ISO format).
+#     - Stores the session details in the SQLite database (`sessions` table).
+#     - Returns the generated session ID and the session start time.
+#
+#     This function essentially begins a new user session.
+#     """
+#     session_id = str(uuid.uuid4())
+#     start_time = datetime.utcnow().isoformat()
+#
+#     conn = sqlite3.connect("sessions.db")
+#     cursor = conn.cursor()
+#     cursor.execute(
+#         "INSERT INTO sessions (id, name, email, start_time, end_time) VALUES (?, ?, ?, ?, ?)",
+#         (session_id, name, email, start_time, None),
+#     )
+#     conn.commit()
+#     conn.close()
+#
+#     return {"session_id": session_id, "start_time": start_time}
+#
+#
+# @router.post("/logout")
+# async def logout(request: LogoutRequest):
+#     """
+#     Handles user logout.
+#
+#     - Accepts a `LogoutRequest` object containing the session ID.
+#     - Records the current UTC time as the session's end time (ISO format).
+#     - Updates the corresponding session record in the database by setting its `end_time`.
+#     - Returns a confirmation message along with the recorded end time.
+#
+#     This function effectively ends a user session.
+#     """
+#     end_time = datetime.utcnow().isoformat()
+#
+#     conn = sqlite3.connect("sessions.db")
+#     cursor = conn.cursor()
+#     cursor.execute(
+#         "UPDATE sessions SET end_time = ? WHERE id = ?",
+#         (end_time, request.session_id),
+#     )
+#     conn.commit()
+#     conn.close()
+#
+#     return {"message": "Session ended", "end_time": end_time}

backend/routes/detect.py

@@ -0,0 +1,209 @@
+"""
+detect.py
+
+This module defines image-processing routes and functions for detecting circles and text 
+from uploaded images using OpenCV and EasyOCR. 
+
+Key functionalities:
+- Detect circular regions in an image and extract text inside/near them.
+- Detect textual regions across the entire image (excluding numeric-only text and quotes).
+- Provide a FastAPI endpoint (`POST /`) that accepts an image file and returns 
+  detected circles with text plus extracted non-numeric text regions.
+"""
+
+from fastapi import APIRouter, File, UploadFile
+import cv2
+import numpy as np
+import easyocr
+import re
+
+# Initialize FastAPI router for detection-related endpoints
+router = APIRouter()
+
+# Initialize EasyOCR reader (supports English by default)
+reader = easyocr.Reader(['en'])
+
+
+def detect_circles_with_text_from_image_bytes(image_bytes):
+    """
+    Detects circular shapes in the given image and extracts text within/around each circle.
+
+    Steps:
+    1. Convert image bytes into an OpenCV image.
+    2. Convert to grayscale for circle detection.
+    3. Use Hough Circle Transform to detect circles.
+    4. For each detected circle:
+       - Crop the circular region with some padding.
+       - Perform OCR (EasyOCR) on the cropped region.
+       - Identify possible `page_number` (format: a<digits>.<digits>) and 
+         `circle_text` (purely numeric).
+       - Collect raw texts recognized in that region.
+    5. Return a structured list of circles with metadata.
+
+    Returns:
+        List of dictionaries containing:
+        - id (int): Circle index
+        - x, y (int): Circle center coordinates
+        - r (int): Circle radius
+        - page_number (str): Extracted page number if detected
+        - circle_text (str): Extracted numeric text if detected
+        - raw_texts (list): All OCR results from that circle region
+    """
+    try:
+        nparr = np.frombuffer(image_bytes, np.uint8)
+        img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+        
+        if img is None:
+            print("Failed to decode image")
+            return []
+            
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+        # Detect circles using Hough Circle Transform
+        circles = cv2.HoughCircles(
+            gray,
+            cv2.HOUGH_GRADIENT,
+            dp=1.2,
+            minDist=20,
+            param1=50,
+            param2=100,
+            minRadius=50,
+            maxRadius=100
+        )
+
+        results = []
+        if circles is not None:
+            circles = np.round(circles[0, :]).astype("int")
+            
+            for i, (x, y, r) in enumerate(circles):
+                # Crop region around circle with padding
+                top = max(y - r - 20, 0)
+                bottom = min(y + r + 20, img.shape[0])
+                left = max(x - r - 20, 0)
+                right = min(x + r + 20, img.shape[1])
+                crop = img[top:bottom, left:right]
+
+                try:
+                    ocr_result = reader.readtext(crop)
+                    texts = [res[1].strip() for res in ocr_result]  
+                except Exception as e:
+                    print(f"OCR error for circle {i}: {e}")
+                    texts = []
+
+                # Extract structured info
+                page_number, circle_text = "", ""
+                for t in texts:
+                    t_clean = t.strip()
+                    
+                    if re.match(r"^a\d+\.\d+$", t_clean, re.IGNORECASE):
+                        page_number = t_clean
+                    
+                    elif re.match(r"^\d+$", t_clean):
+                        circle_text = t_clean
+
+                results.append({
+                    "id": i + 1,
+                    "x": int(x),
+                    "y": int(y),
+                    "r": int(r),
+                    "page_number": page_number,
+                    "circle_text": circle_text,
+                    "raw_texts": texts 
+                })
+
+        return results
+    
+    except Exception as e:
+        print(f"Circle detection error: {e}")
+        return []
+
+
+def detect_text_from_image_bytes(image_bytes):
+    """
+    Detects text regions from the entire image, excluding numeric-only text and 
+    strings with quotes.
+
+    Steps:
+    1. Convert image bytes to an OpenCV image.
+    2. Run EasyOCR to detect text with bounding boxes.
+    3. Skip text if it:
+        - Contains quotes (single/double).
+        - Contains any digits.
+    4. Collect bounding box coordinates and the cleaned text.
+
+    Returns:
+        List of dictionaries containing:
+        - id (int): Text index
+        - x1, y1, x2, y2 (int): Bounding box coordinates
+        - text (str): Extracted text string
+    """
+    try:
+        nparr = np.frombuffer(image_bytes, np.uint8)
+        img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+        
+        if img is None:
+            print("Failed to decode image for text detection")
+            return []
+
+        results = reader.readtext(img)
+        text_boxes = []
+
+        for i, (bbox, text, confidence) in enumerate(results):
+            # Skip text containing quotes or numbers
+            if "'" in text or '"' in text:
+                continue 
+
+            if any(char.isdigit() for char in text):
+                continue
+         
+            try:
+                # Extract bounding box coordinates
+                x_coords = [point[0] for point in bbox]
+                y_coords = [point[1] for point in bbox]
+                
+                x1, x2 = int(min(x_coords)), int(max(x_coords))
+                y1, y2 = int(min(y_coords)), int(max(y_coords))
+
+                text_boxes.append({
+                    "id": i + 1,
+                    "x1": x1,
+                    "y1": y1,
+                    "x2": x2,
+                    "y2": y2,
+                    "text": text.strip()
+                })
+            except Exception as e:
+                print(f"Error processing text box {i}: {e}")
+                continue
+
+        return text_boxes
+    
+    except Exception as e:
+        print(f"Text detection error: {e}")
+        return []
+
+
+@router.post("/")
+async def detect_circles(file: UploadFile = File(...)):
+    """
+    FastAPI endpoint to detect circles and text from an uploaded image.
+
+    Steps:
+    1. Accepts an image file via POST request.
+    2. Reads image bytes.
+    3. Runs circle detection (with OCR inside circles).
+    4. Runs general text detection across the entire image.
+    5. Returns results as a JSON response containing:
+        - circles: List of detected circles with text info
+        - texts: List of detected text regions outside circles
+    """
+    try:
+        image_bytes = await file.read()    
+        circles_with_text = detect_circles_with_text_from_image_bytes(image_bytes)
+        texts = detect_text_from_image_bytes(image_bytes)
+        
+        return {"circles": circles_with_text, "texts": texts}
+    
+    except Exception as e:
+        print(f"Detection endpoint error: {e}")
+        return {"error": str(e), "circles": [], "texts": []}

backend/routes/llm.py

@@ -0,0 +1,82 @@
+"""
+llm.py
+
+This module defines a FastAPI router for interacting with a Large Language Model (LLM) 
+using the Groq API. 
+
+Key functionalities:
+- Accept user-provided text.
+- Query an LLM (LLaMA-3.1-8b-instant) via Groq.
+- Return a simplified explanation of the input text in less than 100 words.
+"""
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+from groq import Groq
+import os
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+api_key = os.getenv("GROQ_API_KEY")
+
+# Initialize Groq client with API key
+client = Groq(api_key=api_key)
+
+# Initialize FastAPI router for LLM endpoints
+router = APIRouter()
+
+
+class LLMRequest(BaseModel):
+    """
+    Request model for generating simplified information from text.
+
+    Fields:
+        - content (str): The raw text content provided by the user.
+    """
+    content: str
+
+
+def generate_info_from_llm(text: str) -> str:
+    """
+    Sends the given text to the Groq LLM (LLaMA-3.1-8b-instant) and requests a 
+    simplified explanation.
+
+    Steps:
+    1. Create a chat completion request with the model.
+    2. Prompt the LLM to explain the input text in simple terms (under 100 words).
+    3. Extract and return the model's response as a string.
+
+    Args:
+        text (str): The text to be explained.
+
+    Returns:
+        str: Simplified explanation of the input text.
+    """
+    completion = client.chat.completions.create(
+        model="llama-3.1-8b-instant",
+        messages=[
+            {
+                "role": "user",
+                "content": f"Explain in simple terms the meaning of the content {text} in less than 100 words"
+            }
+        ]
+    )
+    return completion.choices[0].message.content.strip()
+
+
+@router.post("/generate_info")
+async def generate_info_endpoint(request: LLMRequest):
+    """
+    FastAPI endpoint to generate simplified information from user text.
+
+    Steps:
+    1. Accept a POST request with JSON containing `content`.
+    2. Pass the content to the `generate_info_from_llm` function.
+    3. Return the simplified explanation in JSON format.
+    """
+    try:
+        info = generate_info_from_llm(request.content)
+        return {"info": info}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

backend/routes/regions_detect.py

@@ -0,0 +1,105 @@
+"""
+region_detection.py
+
+This module provides functionality to detect text inside a specific region 
+of an uploaded image using OpenCV and EasyOCR.
+
+Key functionalities:
+- Extract a specified rectangular region from an image.
+- Perform OCR (Optical Character Recognition) on the cropped region.
+- Return detected text boxes along with their coordinates.
+- Return the cropped region as a base64-encoded image.
+"""
+
+from fastapi import APIRouter, File, UploadFile, Form
+import cv2
+import numpy as np
+import easyocr
+import base64
+
+# Initialize FastAPI router
+router = APIRouter()
+
+# Initialize EasyOCR reader (English language)
+reader = easyocr.Reader(['en'])
+
+
+def detect_text_in_region(img, region):
+    """
+    Detects text within a specified rectangular region of an image.
+
+    Steps:
+    1. Crop the region of interest (ROI) from the original image.
+    2. Run EasyOCR to detect text inside the cropped region.
+    3. Adjust bounding box coordinates relative to the original image.
+    4. Convert the cropped region to base64 for return.
+
+    Args:
+        img (numpy.ndarray): The original OpenCV image.
+        region (tuple): A tuple (x, y, w, h) specifying the top-left 
+                        coordinates, width, and height of the region.
+
+    Returns:
+        tuple:
+            - text_boxes (list of dict): Each dict contains:
+                - id (int): Box index
+                - x1, y1 (int): Top-left coordinates
+                - x2, y2 (int): Bottom-right coordinates
+                - text (str): Detected text
+            - crop_base64 (str): Base64-encoded cropped image.
+    """
+    x, y, w, h = region
+    crop = img[y:y+h, x:x+w]
+    results = reader.readtext(crop)
+    text_boxes = []
+
+    for i, (bbox, text, prob) in enumerate(results):
+        (top_left, _, bottom_right, _) = bbox
+        top_left = [int(top_left[0] + x), int(top_left[1] + y)]
+        bottom_right = [int(bottom_right[0] + x), int(bottom_right[1] + y)]
+        text_boxes.append({
+            "id": i+1,
+            "x1": top_left[0],
+            "y1": top_left[1],
+            "x2": bottom_right[0],
+            "y2": bottom_right[1],
+            "text": text
+        })
+
+    # Convert cropped region to base64 string
+    _, buffer = cv2.imencode(".jpg", crop)
+    crop_base64 = base64.b64encode(buffer).decode("utf-8")
+
+    return text_boxes, crop_base64
+
+
+@router.post("/region-detect")
+async def detect_in_region(
+    file: UploadFile = File(...),
+    x: int = Form(...),
+    y: int = Form(...),
+    w: int = Form(...),
+    h: int = Form(...)
+):
+    """
+    FastAPI endpoint to detect text within a user-specified region of an uploaded image.
+
+    Steps:
+    1. Accepts an image file and region coordinates (x, y, w, h).
+    2. Decodes the image into an OpenCV format.
+    3. Calls `detect_text_in_region` to extract text and crop region.
+    4. Returns:
+        - Detected text boxes with coordinates and recognized text.
+        - Cropped image region as a base64 string.
+
+    
+    """
+    image_bytes = await file.read()
+    nparr = np.frombuffer(image_bytes, np.uint8)
+    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+
+    detections, crop_base64 = detect_text_in_region(img, (x, y, w, h))
+    return {
+        "detections": detections,
+        "cropped_image": f"data:image/jpeg;base64,{crop_base64}"
+    }