Upload folder using huggingface_hub

frontend/ElectricBorder.css

@@ -0,0 +1,72 @@
+.electric-border {
+  --electric-border-color: #34eb8f;
+  --electric-light-color: #34eb8f;
+  position: relative;
+
+  border-radius: inherit;
+  overflow: visible;
+  isolation: isolate;
+}
+
+/* Modern CSS Support Check */
+@supports (color: oklch(from red l c h)) {
+  .electric-border {
+    --electric-light-color: oklch(from var(--electric-border-color) l c h);
+  }
+}
+
+.eb-canvas-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.eb-canvas {
+  display: block;
+}
+
+.eb-layers {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.eb-glow-1,
+.eb-glow-2,
+.eb-background-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.eb-glow-1 {
+  border: 2px solid var(--electric-light-color);
+  opacity: 0.6;
+  filter: blur(1px);
+}
+
+.eb-glow-2 {
+  border: 2px solid var(--electric-light-color);
+  filter: blur(4px);
+}
+
+.eb-background-glow {
+  z-index: -1;
+  transform: scale(1.1);
+  filter: blur(32px);
+  opacity: 0.2;
+  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
+}
+
+/* Ensure content stays on top */
+.container {
+  position: relative;
+  z-index: 5;
+}

frontend/ElectricBorder.js

@@ -0,0 +1,214 @@
+class ElectricBorder {
+    constructor(element, options = {}) {
+        if (!element) return console.error('ElectricBorder: Element not found');
+        console.log('ElectricBorder: Initializing with options:', options);
+        this.container = element;
+
+        this.options = {
+            color: options.color || '#34eb8f',
+            speed: options.speed || 1,
+            chaos: options.chaos || 0.12,
+            borderRadius: options.borderRadius || 24,
+            ...options
+        };
+
+        this.setupCanvas();
+        this.setupStyles();
+        this.time = 0;
+        this.lastFrameTime = 0;
+
+        this.resizeObserver = new ResizeObserver(() => this.updateSize());
+        this.resizeObserver.observe(this.container);
+
+        this.updateSize();
+        this.startAnimation();
+    }
+
+    setupCanvas() {
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'eb-canvas-container';
+
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'eb-canvas';
+        this.ctx = this.canvas.getContext('2d');
+
+        this.canvasContainer.appendChild(this.canvas);
+        this.container.prepend(this.canvasContainer);
+
+        this.glowLayers = document.createElement('div');
+        this.glowLayers.className = 'eb-layers';
+        this.glowLayers.innerHTML = `
+      <div class="eb-glow-1"></div>
+      <div class="eb-glow-2"></div>
+      <div class="eb-background-glow"></div>
+    `;
+        this.container.prepend(this.glowLayers);
+    }
+
+    setupStyles() {
+        this.container.classList.add('electric-border');
+        this.container.style.setProperty('--electric-border-color', this.options.color);
+        this.container.style.borderRadius = `${this.options.borderRadius}px`;
+    }
+
+    updateSize() {
+        const borderOffset = 60;
+        const rect = this.container.getBoundingClientRect();
+        this.width = rect.width + borderOffset * 2;
+        this.height = rect.height + borderOffset * 2;
+
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        this.canvas.width = this.width * dpr;
+        this.canvas.height = this.height * dpr;
+        this.canvas.style.width = `${this.width}px`;
+        this.canvas.style.height = `${this.height}px`;
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    random(x) {
+        return (Math.sin(x * 12.9898) * 43758.5453) % 1;
+    }
+
+    noise2D(x, y) {
+        const i = Math.floor(x);
+        const j = Math.floor(y);
+        const fx = x - i;
+        const fy = y - j;
+
+        const a = this.random(i + j * 57);
+        const b = this.random(i + 1 + j * 57);
+        const c = this.random(i + (j + 1) * 57);
+        const d = this.random(i + 1 + (j + 1) * 57);
+
+        const ux = fx * fx * (3.0 - 2.0 * fx);
+        const uy = fy * fy * (3.0 - 2.0 * fy);
+
+        return a * (1 - ux) * (1 - uy) + b * ux * (1 - uy) + c * (1 - ux) * uy + d * ux * uy;
+    }
+
+    octavedNoise(x, octaves, lacunarity, gain, baseAmplitude, baseFrequency, time, seed, baseFlatness) {
+        let y = 0;
+        let amplitude = baseAmplitude;
+        let frequency = baseFrequency;
+
+        for (let i = 0; i < octaves; i++) {
+            let octaveAmplitude = amplitude;
+            if (i === 0) octaveAmplitude *= baseFlatness;
+            y += octaveAmplitude * this.noise2D(frequency * x + seed * 100, time * frequency * 0.3);
+            frequency *= lacunarity;
+            amplitude *= gain;
+        }
+        return y;
+    }
+
+    getCornerPoint(centerX, centerY, radius, startAngle, arcLength, progress) {
+        const angle = startAngle + progress * arcLength;
+        return {
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle)
+        };
+    }
+
+    getRoundedRectPoint(t, left, top, width, height, radius) {
+        const straightWidth = width - 2 * radius;
+        const straightHeight = height - 2 * radius;
+        const cornerArc = (Math.PI * radius) / 2;
+        const totalPerimeter = 2 * straightWidth + 2 * straightHeight + 4 * cornerArc;
+        const distance = t * totalPerimeter;
+
+        let accumulated = 0;
+
+        if (distance <= accumulated + straightWidth) {
+            return { x: left + radius + ((distance - accumulated) / straightWidth) * straightWidth, y: top };
+        }
+        accumulated += straightWidth;
+
+        if (distance <= accumulated + cornerArc) {
+            return this.getCornerPoint(left + width - radius, top + radius, radius, -Math.PI / 2, Math.PI / 2, (distance - accumulated) / cornerArc);
+        }
+        accumulated += cornerArc;
+
+        if (distance <= accumulated + straightHeight) {
+            return { x: left + width, y: top + radius + ((distance - accumulated) / straightHeight) * straightHeight };
+        }
+        accumulated += straightHeight;
+
+        if (distance <= accumulated + cornerArc) {
+            return this.getCornerPoint(left + width - radius, top + height - radius, radius, 0, Math.PI / 2, (distance - accumulated) / cornerArc);
+        }
+        accumulated += cornerArc;
+
+        if (distance <= accumulated + straightWidth) {
+            return { x: left + width - radius - ((distance - accumulated) / straightWidth) * straightWidth, y: top + height };
+        }
+        accumulated += straightWidth;
+
+        if (distance <= accumulated + cornerArc) {
+            return this.getCornerPoint(left + radius, top + height - radius, radius, Math.PI / 2, Math.PI / 2, (distance - accumulated) / cornerArc);
+        }
+        accumulated += cornerArc;
+
+        if (distance <= accumulated + straightHeight) {
+            return { x: left, y: top + height - radius - ((distance - accumulated) / straightHeight) * straightHeight };
+        }
+        accumulated += straightHeight;
+
+        return this.getCornerPoint(left + radius, top + radius, radius, Math.PI, Math.PI / 2, (distance - accumulated) / cornerArc);
+    }
+
+    draw(currentTime) {
+        if (!this.lastFrameTime) this.lastFrameTime = currentTime;
+        const deltaTime = (currentTime - this.lastFrameTime) / 1000;
+        this.time += deltaTime * this.options.speed;
+        this.lastFrameTime = currentTime;
+
+        const ctx = this.ctx;
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, this.width, this.height);
+
+        ctx.strokeStyle = this.options.color;
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        const displacement = 60;
+        const borderOffset = 60;
+        const left = borderOffset;
+        const top = borderOffset;
+        const borderWidth = this.width - 2 * borderOffset;
+        const borderHeight = this.height - 2 * borderOffset;
+        const radius = Math.min(this.options.borderRadius, Math.min(borderWidth, borderHeight) / 2);
+
+        const approximatePerimeter = 2 * (borderWidth + borderHeight) + 2 * Math.PI * radius;
+        const sampleCount = Math.floor(approximatePerimeter / 2);
+
+        ctx.beginPath();
+        for (let i = 0; i <= sampleCount; i++) {
+            const progress = i / sampleCount;
+            const point = this.getRoundedRectPoint(progress, left, top, borderWidth, borderHeight, radius);
+
+            const xNoise = this.octavedNoise(progress * 8, 10, 1.6, 0.7, this.options.chaos, 10, this.time, 0, 0);
+            const yNoise = this.octavedNoise(progress * 8, 10, 1.6, 0.7, this.options.chaos, 10, this.time, 1, 0);
+
+            const dx = point.x + xNoise * displacement;
+            const dy = point.y + yNoise * displacement;
+
+            if (i === 0) ctx.moveTo(dx, dy);
+            else ctx.lineTo(dx, dy);
+        }
+        ctx.closePath();
+        ctx.stroke();
+
+        this.animationId = requestAnimationFrame((t) => this.draw(t));
+    }
+
+    startAnimation() {
+        this.animationId = requestAnimationFrame((t) => this.draw(t));
+    }
+
+    destroy() {
+        cancelAnimationFrame(this.animationId);
+        this.resizeObserver.disconnect();
+    }
+}

frontend/Lightning.css

@@ -0,0 +1,11 @@
+.lightning-container {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0.4;
+    /* Adjust opacity as needed for background */
+}

frontend/Lightning.js

@@ -0,0 +1,182 @@
+class Lightning {
+    constructor(canvas, options = {}) {
+        this.canvas = canvas;
+        this.options = {
+            hue: options.hue || 230,
+            xOffset: options.xOffset || 0,
+            speed: options.speed || 1,
+            intensity: options.intensity || 1,
+            size: options.size || 1,
+            ...options
+        };
+
+        const gl = canvas.getContext('webgl');
+        if (!gl) {
+            console.error('WebGL not supported');
+            return;
+        }
+        this.gl = gl;
+
+        this.init();
+        this.resizeCanvas();
+        window.addEventListener('resize', () => this.resizeCanvas());
+        this.startTime = performance.now();
+        this.render();
+    }
+
+    init() {
+        const gl = this.gl;
+
+        const vertexShaderSource = `
+      attribute vec2 aPosition;
+      void main() {
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+      }
+    `;
+
+        const fragmentShaderSource = `
+      precision mediump float;
+      uniform vec2 iResolution;
+      uniform float iTime;
+      uniform float uHue;
+      uniform float uXOffset;
+      uniform float uSpeed;
+      uniform float uIntensity;
+      uniform float uSize;
+      
+      #define OCTAVE_COUNT 10
+
+      vec3 hsv2rgb(vec3 c) {
+          vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+          return c.z * mix(vec3(1.0), rgb, c.y);
+      }
+
+      float hash11(float p) {
+          p = fract(p * .1031);
+          p *= p + 33.33;
+          p *= p + p;
+          return fract(p);
+      }
+
+      float hash12(vec2 p) {
+          vec3 p3 = fract(vec3(p.xyx) * .1031);
+          p3 += dot(p3, p3.yzx + 33.33);
+          return fract((p3.x + p3.y) * p3.z);
+      }
+
+      mat2 rotate2d(float theta) {
+          float c = cos(theta);
+          float s = sin(theta);
+          return mat2(c, -s, s, c);
+      }
+
+      float noise(vec2 p) {
+          vec2 ip = floor(p);
+          vec2 fp = fract(p);
+          float a = hash12(ip);
+          float b = hash12(ip + vec2(1.0, 0.0));
+          float c = hash12(ip + vec2(0.0, 1.0));
+          float d = hash12(ip + vec2(1.0, 1.0));
+          
+          vec2 t = smoothstep(0.0, 1.0, fp);
+          return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);
+      }
+
+      float fbm(vec2 p) {
+          float value = 0.0;
+          float amplitude = 0.5;
+          for (int i = 0; i < OCTAVE_COUNT; ++i) {
+              value += amplitude * noise(p);
+              p *= rotate2d(0.45);
+              p *= 2.0;
+              amplitude *= 0.5;
+          }
+          return value;
+      }
+
+      void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+          vec2 uv = fragCoord / iResolution.xy;
+          uv = 2.0 * uv - 1.0;
+          uv.x *= iResolution.x / iResolution.y;
+          uv.x += uXOffset;
+          
+          uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;
+          
+          float dist = abs(uv.x);
+          vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));
+          vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity;
+          col = pow(col, vec3(1.0));
+          fragColor = vec4(col, 1.0);
+      }
+
+      void main() {
+          mainImage(gl_FragColor, gl_FragCoord.xy);
+      }
+    `;
+
+        const compileShader = (source, type) => {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        };
+
+        const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
+        const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
+
+        const program = gl.createProgram();
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+        gl.useProgram(program);
+        this.program = program;
+
+        const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+        const vertexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+        const aPosition = gl.getAttribLocation(program, 'aPosition');
+        gl.enableVertexAttribArray(aPosition);
+        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+
+        this.locations = {
+            iResolution: gl.getUniformLocation(program, 'iResolution'),
+            iTime: gl.getUniformLocation(program, 'iTime'),
+            uHue: gl.getUniformLocation(program, 'uHue'),
+            uXOffset: gl.getUniformLocation(program, 'uXOffset'),
+            uSpeed: gl.getUniformLocation(program, 'uSpeed'),
+            uIntensity: gl.getUniformLocation(program, 'uIntensity'),
+            uSize: gl.getUniformLocation(program, 'uSize')
+        };
+    }
+
+    resizeCanvas() {
+        const canvas = this.canvas;
+        canvas.width = canvas.clientWidth;
+        canvas.height = canvas.clientHeight;
+        this.gl.viewport(0, 0, canvas.width, canvas.height);
+    }
+
+    render() {
+        const gl = this.gl;
+        const canvas = this.canvas;
+        const currentTime = performance.now();
+
+        gl.uniform2f(this.locations.iResolution, canvas.width, canvas.height);
+        gl.uniform1f(this.locations.iTime, (currentTime - this.startTime) / 1000.0);
+        gl.uniform1f(this.locations.uHue, this.options.hue);
+        gl.uniform1f(this.locations.uXOffset, this.options.xOffset);
+        gl.uniform1f(this.locations.uSpeed, this.options.speed);
+        gl.uniform1f(this.locations.uIntensity, this.options.intensity);
+        gl.uniform1f(this.locations.uSize, this.options.size);
+
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        requestAnimationFrame(() => this.render());
+    }
+}

frontend/index.html

@@ -0,0 +1,364 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI RAG System</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="ElectricBorder.css">
+    <link rel="stylesheet" href="Lightning.css">
+    <style>
+        :root {
+            --primary: #34eb8f;
+            --secondary: #2196f3;
+            --bg: #050505;
+            --card-bg: rgba(255, 255, 255, 0.03);
+            --text: #ffffff;
+            --error: #ff4444;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow-x: hidden;
+            padding: 20px;
+        }
+
+        /* Lightning Canvas fix */
+        canvas.lightning-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .container {
+            width: 90%;
+            max-width: 700px;
+            background: rgba(10, 10, 10, 0.7);
+            backdrop-filter: blur(25px);
+            padding: 2.5rem;
+            border-radius: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.82);
+            position: relative;
+            z-index: 10;
+        }
+
+        h1 {
+            text-align: center;
+            color: var(--primary);
+            font-weight: 600;
+            font-size: 2.2rem;
+            margin-bottom: 2rem;
+            letter-spacing: -0.5px;
+            text-shadow: 0 0 20px rgba(52, 235, 143, 0.4);
+        }
+
+        .section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.04);
+        }
+
+        .section-title {
+            font-size: 0.9rem;
+            color: #aaa;
+            margin-bottom: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            font-weight: 600;
+        }
+
+        .input-group {
+            display: flex;
+            gap: 12px;
+        }
+
+        input[type="text"],
+        input[type="file"] {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 14px 20px;
+            border-radius: 12px;
+            color: white;
+            outline: none;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+        }
+
+        input:focus {
+            border-color: var(--primary);
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 15px rgba(52, 235, 143, 0.15);
+        }
+
+        button {
+            padding: 12px 28px;
+            border-radius: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+        }
+
+        .btn-query {
+            background: var(--primary);
+            color: #000;
+        }
+
+        .btn-upload {
+            background: rgba(255, 255, 255, 0.05);
+            color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        button:hover {
+            transform: translateY(-3px);
+            filter: brightness(1.2);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        #response {
+            background: rgba(0, 0, 0, 0.6);
+            padding: 1.5rem;
+            border-radius: 14px;
+            min-height: 100px;
+            line-height: 1.8;
+            font-size: 1.05rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            margin-top: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        .loader {
+            display: none;
+            width: 18px;
+            height: 18px;
+            border: 3px solid rgba(255, 255, 255, .3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 0.8s linear infinite;
+            margin-right: 12px;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .status {
+            padding: 8px 12px;
+            border-radius: 8px;
+            display: inline-block;
+        }
+
+        .error {
+            color: var(--error);
+            border-left: 3px solid var(--error);
+            background: rgba(255, 68, 68, 0.05);
+            padding-left: 15px;
+        }
+
+        .success {
+            color: var(--primary);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Lightning Background -->
+    <canvas id="lightningCanvas" class="lightning-container"></canvas>
+
+    <div id="mainWrapper" style="display: inline-block; position: relative; border-radius: 24px;">
+        <div class="container" id="appContainer">
+            <h1>AI RAG Assistant</h1>
+
+            <div class="section">
+                <div class="section-title">1. Upload Documents</div>
+                <div class="input-group">
+                    <input type="file" id="pdfFile" accept=".pdf,.txt">
+                    <button class="btn-upload" onclick="upload()">
+                        <div id="uploadLoader" class="loader"></div>
+                        Upload
+                    </button>
+                </div>
+                <div style="margin-top: 15px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem;">
+                    <span style="color: #666;">No file ready?</span>
+                    <button onclick="simulateUpload()"
+                        style="background: rgba(52, 235, 143, 0.1); padding: 6px 14px; border: 1px solid var(--primary); color: var(--primary); font-size: 0.85rem; border-radius: 8px;">
+                        Try with Sample Data
+                    </button>
+                </div>
+                <div id="uploadStatus" class="status" style="margin-top: 15px; font-size: 0.95rem;"></div>
+            </div>
+
+            <div class="section">
+                <div class="section-title">2. Ask Questions</div>
+                <div class="input-group">
+                    <input type="text" id="question" placeholder="Ask something about your docs...">
+                    <button class="btn-query" onclick="ask()">
+                        <div id="askLoader" class="loader"></div>
+                        Ask
+                    </button>
+                </div>
+                <div id="response">Waiting for query...</div>
+            </div>
+
+            <div style="text-align: center; opacity: 0.4; font-size: 0.75rem; margin-top: 10px;">
+                Powered by HuggingFace (Free Embeddings) & Groq AI
+            </div>
+        </div>
+    </div>
+
+    <script src="ElectricBorder.js"></script>
+    <script src="Lightning.js"></script>
+    <script>
+        // Initialize Effects
+        window.addEventListener('load', () => {
+            // Neon Border
+            new ElectricBorder(document.getElementById('mainWrapper'), {
+                color: '#34eb8f',
+                speed: 1.2,
+                chaos: 0.15,
+                borderRadius: 24
+            });
+
+            // Lightning Background
+            new Lightning(document.getElementById('lightningCanvas'), {
+                hue: 150, // Matches the green theme (120-150 range)
+                xOffset: 0,
+                speed: 0.8,
+                intensity: 1.2,
+                size: 0.8
+            });
+        });
+
+        async function simulateUpload() {
+            const statusDiv = document.getElementById('uploadStatus');
+            statusDiv.innerText = "Simulating sample upload...";
+            statusDiv.className = 'status';
+
+            try {
+                const res = await fetch('/download-sample');
+                const text = await res.text();
+
+                const file = new File([text], 'sample_data.txt', { type: 'text/plain' });
+                const formData = new FormData();
+                formData.append('file', file);
+
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+
+                if (response.ok) {
+                    statusDiv.className = 'status success';
+                    statusDiv.innerText = "✅ Sample Data Loaded! Ask your questions.";
+                } else {
+                    statusDiv.className = 'status error';
+                    statusDiv.innerText = "Error: " + (data.detail || "Upload failed");
+                }
+            } catch (e) {
+                statusDiv.className = 'status error';
+                statusDiv.innerText = "Simulation failed: " + e.message;
+            }
+        }
+
+        async function upload() {
+            const fileInput = document.getElementById('pdfFile');
+            const statusDiv = document.getElementById('uploadStatus');
+            const loader = document.getElementById('uploadLoader');
+
+            if (!fileInput.files[0]) {
+                statusDiv.className = 'status error';
+                statusDiv.innerText = "Please select a file first.";
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            loader.style.display = 'block';
+            statusDiv.innerText = "Uploading & indexing...";
+
+            try {
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+
+                if (response.ok) {
+                    statusDiv.className = 'status success';
+                    statusDiv.innerText = "✅ " + (data.message || "Upload successful!");
+                } else {
+                    statusDiv.className = 'status error';
+                    statusDiv.innerText = "Error: " + (data.detail || data.message || "Upload failed");
+                }
+            } catch (e) {
+                statusDiv.className = 'status error';
+                statusDiv.innerText = "Connection failed: " + e.message;
+            } finally {
+                loader.style.display = 'none';
+            }
+        }
+
+        async function ask() {
+            const qInput = document.getElementById('question');
+            const question = qInput.value;
+            const resDiv = document.getElementById('response');
+            const loader = document.getElementById('askLoader');
+
+            if (!question) return;
+
+            loader.style.display = 'block';
+            resDiv.className = '';
+            resDiv.innerText = "Searching documents and thinking...";
+
+            try {
+                const response = await fetch('/ask', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ question: question })
+                });
+                const data = await response.json();
+
+                if (response.ok) {
+                    resDiv.innerText = data.answer;
+                } else {
+                    resDiv.className = 'error';
+                    resDiv.innerText = "Server Error: " + (data.detail || "Internal Server Error");
+                }
+            } catch (e) {
+                resDiv.className = 'error';
+                resDiv.innerText = "Error: Could not connect to the server.";
+            } finally {
+                loader.style.display = 'none';
+            }
+        }
+    </script>
+</body>
+
+</html>