Upload 10 files

Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the entire application
+COPY . .
+
+# Expose the port
+EXPOSE 7860
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV PORT=7860
+
+# Run the application
+CMD ["python", "main.py"]

app/config.py

@@ -0,0 +1,27 @@
+from pydantic_settings import BaseSettings, SettingsConfigDict
+from pathlib import Path
+import os
+
+# Handle both local and Hugging Face environments
+if os.path.exists("/app"):  # Hugging Face
+    BASE_DIR = Path("/app")
+    ENV_PATH = BASE_DIR / ".env"
+else:  # Local
+    BASE_DIR = Path(__file__).resolve().parent.parent
+    ENV_PATH = BASE_DIR / ".env"
+
+
+class Settings(BaseSettings):
+    OPENROUTER_API_KEY: str = ""
+    MODEL_NAME: str = "deepseek/deepseek-r1-0528:free"
+    OPENROUTER_URL: str = "https://openrouter.ai/api/v1"
+
+    model_config = SettingsConfigDict(
+        env_file=ENV_PATH if ENV_PATH.exists() else None,
+        env_file_encoding="utf-8",
+        case_sensitive=False,
+        extra='ignore'
+    )
+
+
+settings = Settings()

app/main.py

@@ -0,0 +1,102 @@
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pathlib import Path
+import uvicorn
+import os
+import schemas
+import services
+import config
+
+# Get the base directory (works both locally and on Hugging Face)
+if os.path.exists("/app"):  # Hugging Face environment
+    BASE_DIR = Path("/app")
+else:  # Local environment
+    BASE_DIR = Path(__file__).resolve().parent
+
+app = FastAPI(
+    title="ContextIQ RAG - Intelligent Context-Aware Assistant",
+    description="A sophisticated RAG-powered backend using FastAPI and OpenRouter.",
+    version="2.0.0"
+)
+
+# Mount static files and templates
+app.mount("/static", StaticFiles(directory=BASE_DIR / "static"), name="static")
+templates = Jinja2Templates(directory=BASE_DIR / "templates")
+
+# Your existing endpoints remain exactly the same
+@app.post("/api/v1/index", response_model=schemas.IndexResponse)
+async def index_context(document_request: schemas.DocumentRequest):
+    """
+    Receives text, clears the old index, chunks the new text,
+    and stores its embeddings in the vector DB.
+    """
+    try:
+        docs_added = services.index_document(document_request)
+        return schemas.IndexResponse(
+            message="Context has been successfully indexed.",
+            documents_added=docs_added
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to index document: {e}")
+
+@app.post("/api/v1/clear_index", response_model=schemas.GeneralResponse)
+async def clear_context_index():
+    """
+    Clears all data from the vector database index.
+    """
+    try:
+        services.clear_index()
+        return schemas.GeneralResponse(message="Knowledge base has been successfully cleared.")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to clear index: {e}")
+
+@app.post("/api/v1/generate", response_model=schemas.ChatResponse)
+async def generate_response(chat_request: schemas.ChatRequest):
+    """
+    Receives a prompt, retrieves relevant context from the vector DB,
+    and returns an AI-generated response.
+    """
+    if not config.settings.OPENROUTER_API_KEY:
+        raise HTTPException(
+            status_code=400,
+            detail="OpenRouter API key is not configured on the server."
+        )
+    try:
+        ai_message = await services.get_rag_response(chat_request)
+        return schemas.ChatResponse(response=ai_message)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/v1/task", response_model=schemas.TaskResponse)
+async def execute_task(task_request: schemas.TaskRequest):
+    """
+    Executes a specific task (e.g., summarize, plan) based on the provided context.
+    """
+    if not config.settings.OPENROUTER_API_KEY:
+        raise HTTPException(
+            status_code=400,
+            detail="OpenRouter API key is not configured on the server."
+        )
+    try:
+        result = await services.execute_task(task_request)
+        return schemas.TaskResponse(result=result)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    """
+    Serves the main index.html page from the templates directory.
+    """
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint for Hugging Face."""
+    return {"status": "healthy", "message": "ContextIQ RAG is running!"}
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

app/rag_setup.py

@@ -0,0 +1,71 @@
+import chromadb
+import logging
+from openai import OpenAI
+from app.config import settings
+from chromadb.utils import embedding_functions
+import time
+import os
+import shutil
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger("rag-setup")
+
+# Initialize variables
+embedding_model = None
+generation_model = None
+
+# Use the default SentenceTransformer for creating embeddings locally.
+# This is efficient as it doesn't require an API call for embedding.
+sentence_transformer_ef = embedding_functions.SentenceTransformerEmbeddingFunction()
+db_path = "./chroma_db"
+if os.path.exists(db_path):
+    logger.info("Removing existing ChromaDB to avoid embedding conflicts")
+    shutil.rmtree(db_path)
+
+# Set up a persistent ChromaDB client
+client = chromadb.PersistentClient(path="./chroma_db")
+
+collection = client.get_or_create_collection(
+    name="context_aware_collection",
+    embedding_function=sentence_transformer_ef
+)
+logger.info("ChromaDB collection 'context_aware_collection' loaded/created.")
+class OpenRouterLLM:
+    def __init__(self, api_key: str, base_url: str, model: str):
+        if not api_key:
+            raise ValueError("OpenRouter API key is missing. Please set it in your .env file.")
+        self.client = OpenAI(base_url=base_url, api_key=api_key,timeout=45.0)
+        self.model = model
+        logger.info(f"OpenRouter client initialized for model: {self.model}")
+
+    def generate_content(self, prompt: str) -> str:
+        max_retries = 2
+        retry_count = 0
+
+        while retry_count <= max_retries:
+            try:
+                completion = self.client.chat.completions.create(
+                    extra_headers={
+                        "HTTP-Referer": "https://github.com/Ab-Romia/ContextIQ-RAG",
+                        "X-Title": "Context Aware AI",
+                    },
+                    model=self.model,
+                    messages=[{"role": "user", "content": prompt}],
+                    max_tokens=6000
+                )
+                return completion.choices[0].message.content
+            except Exception as e:
+                logger.error(f"API call failed (attempt {retry_count + 1}): {str(e)}")
+                retry_count += 1
+                if retry_count > max_retries:
+                    return f"Error: The model did not respond in time. Try a shorter question or simplify your context."
+                time.sleep(2)  # Wait before retrying
+
+
+# Initialize the generation model with settings from config.py
+generation_model = OpenRouterLLM(
+    api_key=settings.OPENROUTER_API_KEY,
+    base_url=settings.OPENROUTER_URL,
+    model=settings.MODEL_NAME
+)
+
+logger.info("RAG setup initialized successfully.")

app/schemas.py

@@ -0,0 +1,56 @@
+from pydantic import BaseModel, Field
+from typing import Optional
+
+class DocumentRequest(BaseModel):
+    """
+    Schema for the request to index a new document.
+    """
+    context: str = Field(
+        ...,
+        min_length=10,
+        description="The full document or text to be indexed."
+    )
+
+class ChatRequest(BaseModel):
+    """
+    Schema for the request to generate a response.
+    """
+    prompt: str = Field(
+        ...,
+        min_length=2,
+        description="The user's question to be answered based on the indexed context."
+    )
+
+class TaskRequest(BaseModel):
+    """
+    Schema for executing a specific task like summarization or planning.
+    """
+    context: str = Field(..., description="The full context for the task.")
+    task_type: str = Field(..., description="The type of task to perform (e.g., 'summarize', 'plan').")
+    prompt: Optional[str] = Field(None, description="An optional prompt to guide the task.")
+
+
+class ChatResponse(BaseModel):
+    """
+    Schema for the AI's response.
+    """
+    response: str
+
+class TaskResponse(BaseModel):
+    """
+    Schema for the result of a task.
+    """
+    result: str
+
+class IndexResponse(BaseModel):
+    """
+    Schema for the response after indexing a document.
+    """
+    message: str
+    documents_added: int
+
+class GeneralResponse(BaseModel):
+    """
+    A generic response model for simple status messages.
+    """
+    message: str

app/services.py

@@ -0,0 +1,195 @@
+import asyncio
+import functools
+import logging
+import textwrap
+import time
+import rag_setup
+from schemas import ChatRequest, DocumentRequest, TaskRequest
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s [%(levelname)s] %(message)s',
+    datefmt='%H:%M:%S'
+)
+logger = logging.getLogger("rag-service")
+
+
+# A simple cache to store recent responses to avoid redundant API calls for the same query.
+# The cache stores a tuple of (timestamp, response).
+_response_cache = {}
+CACHE_EXPIRATION_SECONDS = 600  # 10 minutes
+
+
+def index_document(request_data: DocumentRequest) -> int:
+    logger.info("Starting document indexing process.")
+
+    try:
+        # Step 1: Clear any existing documents properly
+        existing_ids = rag_setup.collection.get()["ids"]
+        if existing_ids:
+            rag_setup.collection.delete(ids=existing_ids)
+        logger.info("Cleared existing documents from vector collection.")
+
+        # Step 2: Chunk document
+        text_chunks = textwrap.wrap(
+            request_data.context,
+            width=800,
+            break_long_words=False,
+            replace_whitespace=False
+        )
+
+        if not text_chunks:
+            logger.warning("No text chunks were generated.")
+            return 0
+
+        # Step 3: Add chunks to ChromaDB
+        chunk_ids = [f"doc_chunk_{i}_{int(time.time())}" for i in range(len(text_chunks))]
+        logger.info(f"Attempting to add {len(chunk_ids)} chunks to ChromaDB...")
+        rag_setup.collection.add(documents=text_chunks, ids=chunk_ids)
+
+        return len(text_chunks)
+    except Exception as e:
+        logger.error(f"Error during indexing: {str(e)}", exc_info=True)
+        raise
+
+def clear_index():
+    """Clears all documents from the vector database."""
+    rag_setup.collection.delete(where={})
+    logger.info("Successfully cleared the vector index.")
+
+
+async def get_rag_response(request_data: ChatRequest) -> str:
+    """
+    Performs the RAG pipeline: checks cache, retrieves context, generates a response.
+    """
+    start_total = time.time()
+    logger.info(f"Processing query: '{request_data.prompt}'")
+
+    try:
+        # Step 1: Check cache for a recent, identical query
+        cached_response = _get_cached_response(request_data.prompt)
+        if cached_response:
+            logger.info("Cache hit! Returning cached response.")
+            return f"{cached_response}\n\n(This response was retrieved from cache)"
+
+        logger.info("Cache miss. Proceeding with RAG pipeline.")
+
+        # Step 2: Check if the vector database has any content
+        if rag_setup.collection.count() == 0:
+            logger.warning("Vector DB is empty. Cannot answer query.")
+            return "The knowledge base is empty. Please provide some context in the left panel and click 'Index Context' before asking questions."
+
+        # Step 3: Retrieve relevant chunks from ChromaDB
+        logger.info("Retrieving relevant chunks from vector DB...")
+        retrieved_chunks = await _retrieve_chunks_async(request_data.prompt)
+
+        if not retrieved_chunks or not retrieved_chunks.get('documents') or not retrieved_chunks['documents'][0]:
+            logger.warning("No relevant chunks found in the vector DB for this query.")
+            return "I could not find any relevant information in the provided context to answer your question."
+
+        context_for_prompt = "\n\n---\n\n".join(retrieved_chunks['documents'][0])
+
+        # Step 4: Construct the final prompt for the LLM
+        full_prompt = (
+            "You are a helpful AI assistant. Based strictly and only on the following context, "
+            "please answer the user's question. Do not use any external knowledge or make assumptions. "
+            "If the answer cannot be found in the context, state that clearly.\n\n"
+            "--- CONTEXT START ---\n"
+            f"{context_for_prompt}\n"
+            "--- CONTEXT END ---\n\n"
+            f'User\'s Question: "{request_data.prompt}"'
+        )
+
+        # Step 5: Generate the response using the LLM
+        logger.info("Generating response from OpenRouter...")
+        response_text = await _generate_response_async(full_prompt)
+
+        # Step 6: Cache the newly generated response
+        _cache_response(request_data.prompt, response_text)
+
+        total_time = time.time() - start_total
+        logger.info(f"Total processing time: {total_time:.2f}s")
+        return response_text
+
+    except asyncio.TimeoutError:
+        logger.error("Request timed out during retrieval or generation.")
+        return "The request timed out. Please try again or simplify your question."
+    except Exception as e:
+        logger.error(f"An unexpected error occurred: {e}", exc_info=True)
+        return f"An unexpected error occurred: {e}"
+
+
+async def execute_task(request_data: TaskRequest) -> str:
+    """
+    Executes a specific task on the given context.
+    """
+    start_total = time.time()
+    logger.info(f"Executing task '{request_data.task_type}' with prompt: '{request_data.prompt}'")
+
+    try:
+        # For tasks, we use the full context, not just retrieved chunks
+        context = request_data.context
+        if not context:
+            return "Context is empty. Please provide some text in the 'Knowledge Base' to perform a task."
+
+        # Construct the prompt based on the task type
+        if request_data.task_type == "summarize":
+            full_prompt = f"Summarize the following text:\n\n---\n{context}"
+        elif request_data.task_type == "plan":
+            full_prompt = f"Based on the following context, create a detailed action plan. If a specific goal is provided in the prompt, tailor the plan to that goal.\n\n--- CONTEXT ---\n{context}\n\n--- GOAL ---\n{request_data.prompt or 'General objective derived from context'}"
+        elif request_data.task_type == "creative":
+            full_prompt = f"Use the following text as inspiration to write a creative piece (e.g., a poem, a short story, a metaphor). The user's prompt can guide the style or topic.\n\n--- INSPIRATION ---\n{context}\n\n--- PROMPT ---\n{request_data.prompt or 'Write a short poem'}"
+        else:
+            return "Invalid task type specified."
+
+        # Generate the response
+        logger.info("Generating task-based response from OpenRouter...")
+        response_text = await _generate_response_async(full_prompt)
+
+        total_time = time.time() - start_total
+        logger.info(f"Task execution time: {total_time:.2f}s")
+        return response_text
+
+    except asyncio.TimeoutError:
+        logger.error("Request timed out during task execution.")
+        return "The request timed out. Please try again."
+    except Exception as e:
+        logger.error(f"An unexpected error occurred during task execution: {e}", exc_info=True)
+        return f"An unexpected error occurred: {e}"
+
+# --- ASYNC WRAPPERS & CACHE HELPERS ---
+
+async def _retrieve_chunks_async(prompt: str):
+    """Asynchronously queries the ChromaDB collection."""
+    loop = asyncio.get_event_loop()
+    return await loop.run_in_executor(
+        None,
+        functools.partial(rag_setup.collection.query, query_texts=[prompt], n_results=3)
+    )
+
+
+async def _generate_response_async(full_prompt: str):
+    """Asynchronously calls the LLM to generate content."""
+
+
+    loop = asyncio.get_event_loop()
+    return await loop.run_in_executor(
+        None,
+        rag_setup.generation_model.generate_content,
+        full_prompt
+    )
+
+def _get_cached_response(key: str):
+    """Checks the cache for a valid (non-expired) entry."""
+    if key in _response_cache:
+        timestamp, response = _response_cache[key]
+        if time.time() - timestamp < CACHE_EXPIRATION_SECONDS:
+            return response
+        else:
+            # Expired, remove from cache
+            del _response_cache[key]
+    return None
+
+
+def _cache_response(key: str, response: str):
+    """Adds a response to the cache with the current timestamp."""
+    _response_cache[key] = (time.time(), response)

main.py

@@ -0,0 +1,17 @@
+import os
+import sys
+from pathlib import Path
+
+# Add the app directory to Python path
+current_dir = Path(__file__).parent
+app_dir = current_dir / "app"
+sys.path.insert(0, str(app_dir))
+sys.path.insert(0, str(current_dir))
+
+# Import and run the FastAPI app
+from app.main import app
+import uvicorn
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))  # Hugging Face uses port 7860
+    uvicorn.run(app, host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,10 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+pydantic==2.5.0
+pydantic-settings==2.1.0
+chromadb==0.4.15
+openai==1.3.7
+jinja2==3.1.2
+python-multipart==0.0.6
+numpy==1.24.3
+requests==2.31.0

static/app.js

@@ -0,0 +1,315 @@
+class ContextAwareApp {
+    constructor() {
+        // Centralized DOM element references
+        this.elements = {
+            contextInput: document.getElementById('context-input'),
+            chatInput: document.getElementById('chat-input'),
+            sendButton: document.getElementById('send-button'),
+            chatContainer: document.getElementById('chat-container'),
+            statusIndicator: document.getElementById('status-indicator'),
+            clearContextBtn: document.getElementById('clear-context-btn'),
+            indexContextBtn: document.getElementById('index-context-btn'),
+            taskSelect: document.getElementById('task-select'),
+            charCount: document.getElementById('char-count'),
+            wordCount: document.getElementById('word-count'),
+        };
+        // Application state
+        this.state = {
+            isIndexing: false,
+            isGenerating: false,
+            isIndexed: false,
+        };
+        this.initialize();
+    }
+
+    /**
+     * Sets up the application, event listeners, and initial state.
+     */
+    initialize() {
+        this.addEventListeners();
+        this.addMessageToChat(
+            "Welcome! Here's how to get started:\n1. Paste your context into the 'Knowledge Base' on the left.\n2. Click 'Index Context' for Q&A, or select a different action from the dropdown.\n3. Provide a prompt if needed and click the send button.",
+            'ai'
+        );
+        this.updateUI();
+    }
+
+    /**
+     * Binds all necessary event listeners to DOM elements.
+     */
+    addEventListeners() {
+        this.elements.indexContextBtn.addEventListener('click', () => this.handleIndexContext());
+        this.elements.clearContextBtn.addEventListener('click', () => this.handleClearContext());
+        this.elements.sendButton.addEventListener('click', () => this.handleSubmit());
+        this.elements.chatInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSubmit();
+            }
+        });
+        this.elements.contextInput.addEventListener('input', () => this.updateContextStats());
+        this.elements.chatInput.addEventListener('input', () => this.autoResizeTextarea(this.elements.chatInput));
+    }
+
+    /**
+     * Main handler for the send button. Directs to the correct function based on the selected task.
+     */
+    handleSubmit() {
+        const selectedTask = this.elements.taskSelect.value;
+        if (selectedTask === 'q_and_a') {
+            this.handleSendPrompt();
+        } else {
+            this.handleExecuteTask();
+        }
+    }
+
+
+    /**
+     * Handles the logic for indexing the provided context.
+     */
+    async handleIndexContext() {
+        const context = this.elements.contextInput.value.trim();
+        if (context.length < 20) {
+            this.showStatus('Context is too short. Please provide at least 20 characters.', 'error');
+            return;
+        }
+
+        this.state.isIndexing = true;
+        this.updateUI();
+        this.showStatus('Indexing context... This may take a moment.', 'loading');
+
+        try {
+            const response = await fetch('/api/v1/index', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ context }),
+            });
+
+            if (!response.ok) throw new Error(`Server error: ${response.statusText}`);
+
+            const result = await response.json();
+            this.state.isIndexed = true;
+            this.showStatus(`Successfully indexed ${result.documents_added} document chunks.`, 'success');
+        } catch (error) {
+            this.showStatus(`Error indexing context: ${error.message}`, 'error');
+            this.state.isIndexed = false;
+        } finally {
+            this.state.isIndexing = false;
+            this.updateUI();
+        }
+    }
+
+    /**
+     * Handles sending a user's prompt to the backend for a response.
+     */
+    async handleSendPrompt() {
+        const prompt = this.elements.chatInput.value.trim();
+        if (prompt.length < 2 || this.state.isGenerating || !this.state.isIndexed) {
+            if (!this.state.isIndexed) {
+                this.showStatus('Please index your context before asking questions.', 'error');
+            }
+            return;
+        }
+
+        this.addMessageToChat(prompt, 'user');
+        this.elements.chatInput.value = '';
+        this.autoResizeTextarea(this.elements.chatInput);
+
+        this.state.isGenerating = true;
+        this.updateUI();
+        this.showStatus('AI is thinking...', 'loading');
+
+        try {
+            const response = await fetch('/api/v1/generate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt }),
+            });
+
+            if (!response.ok) {
+                const errorBody = await response.json();
+                throw new Error(errorBody.detail || 'An unknown error occurred.');
+            }
+
+            const result = await response.json();
+            this.addMessageToChat(result.response, 'ai');
+            this.showStatus('Ready for your next question.', 'success');
+        } catch (error) {
+            this.addMessageToChat(`An error occurred: ${error.message}`, 'system');
+            this.showStatus(`Error: ${error.message}`, 'error');
+        } finally {
+            this.state.isGenerating = false;
+            this.updateUI();
+        }
+    }
+
+    /**
+     * Handles executing a non-Q&A task like summarization or planning.
+     */
+    async handleExecuteTask() {
+        const context = this.elements.contextInput.value.trim();
+        const task_type = this.elements.taskSelect.value;
+        const prompt = this.elements.chatInput.value.trim();
+
+        if (context.length < 20) {
+            this.showStatus('Please provide at least 20 characters of context for this task.', 'error');
+            return;
+        }
+
+        let userMessage = `Task: ${task_type}`;
+        if (prompt) {
+            userMessage += `\nPrompt: ${prompt}`;
+        }
+        this.addMessageToChat(userMessage, 'user');
+
+        this.elements.chatInput.value = '';
+        this.autoResizeTextarea(this.elements.chatInput);
+
+        this.state.isGenerating = true;
+        this.updateUI();
+        this.showStatus('AI is performing the task...', 'loading');
+
+        try {
+            const response = await fetch('/api/v1/task', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ context, task_type, prompt }),
+            });
+
+            if (!response.ok) {
+                const errorBody = await response.json();
+                throw new Error(errorBody.detail || 'An unknown error occurred.');
+            }
+
+            const result = await response.json();
+            this.addMessageToChat(result.result, 'ai');
+            this.showStatus('Task completed successfully.', 'success');
+        } catch (error) {
+            this.addMessageToChat(`An error occurred: ${error.message}`, 'system');
+            this.showStatus(`Error: ${error.message}`, 'error');
+        } finally {
+            this.state.isGenerating = false;
+            this.updateUI();
+        }
+    }
+
+
+    /**
+     * Clears the context input and the indexed data on the backend.
+     */
+    async handleClearContext() {
+        this.elements.contextInput.value = '';
+        this.updateContextStats();
+        this.state.isIndexed = false;
+        this.updateUI();
+        this.showStatus('Clearing knowledge base...', 'loading');
+
+        try {
+            await fetch('/api/v1/clear_index', { method: 'POST' });
+            this.showStatus('Knowledge base cleared. Ready for new context.', 'success');
+        } catch (error) {
+            this.showStatus(`Error clearing index: ${error.message}`, 'error');
+        }
+    }
+
+    /**
+     * Updates all UI elements based on the current application state.
+     */
+    updateUI() {
+        const hasContext = this.elements.contextInput.value.trim().length > 10;
+        const isQandA = this.elements.taskSelect.value === 'q_and_a';
+
+        this.elements.indexContextBtn.disabled = this.state.isIndexing || !hasContext;
+
+        if (isQandA) {
+            this.elements.sendButton.disabled = this.state.isGenerating || !this.state.isIndexed;
+        } else {
+            this.elements.sendButton.disabled = this.state.isGenerating || !hasContext;
+        }
+    }
+
+
+    /**
+     * Displays a status message to the user.
+     * @param {string} message - The message to display.
+     * @param {'loading'|'success'|'error'} type - The type of message.
+     */
+    showStatus(message, type) {
+        const indicator = this.elements.statusIndicator;
+        indicator.classList.remove('hidden');
+        let colorClass = 'text-slate-400';
+        if (type === 'success') colorClass = 'text-green-400';
+        if (type === 'error') colorClass = 'text-red-400';
+
+        indicator.innerHTML = `<span class="${colorClass}">${message}</span>`;
+
+        // Hide the message after a delay unless it's a loading indicator
+        if (type !== 'loading') {
+            setTimeout(() => indicator.classList.add('hidden'), 5000);
+        }
+    }
+
+    /**
+     * Adds a new message to the chat display.
+     * @param {string} message - The message content.
+     * @param {'user'|'ai'|'system'} sender - The sender of the message.
+     */
+addMessageToChat(message, sender) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'chat-message flex items-start space-x-3 animate-fade-in';
+    const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+    const icons = {
+        user: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+        ai: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
+        system: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
+    };
+    const bubbleClasses = {
+        user: 'bg-gradient-to-br from-emerald-500 to-teal-600',
+        ai: 'bg-gradient-to-br from-indigo-500 to-purple-600',
+        system: 'bg-gradient-to-br from-red-500 to-orange-600'
+    };
+
+    // Use marked to parse markdown, but sanitize first
+    const formattedMessage = sender === 'user' ?
+        this.escapeHtml(message).replace(/\n/g, '<br>') :
+        marked.parse(message);
+
+    messageDiv.innerHTML = `
+        <div class="w-8 h-8 ${bubbleClasses[sender]} rounded-full flex items-center justify-center flex-shrink-0 text-white">${icons[sender]}</div>
+        <div class="flex-1">
+            <div class="bg-slate-800/50 rounded-xl p-4 border border-slate-600/30">
+                <div class="text-slate-200 leading-relaxed markdown-content">${formattedMessage}</div>
+            </div>
+            <div class="text-xs text-slate-500 mt-2">${timestamp}</div>
+        </div>`;
+
+    this.elements.chatContainer.appendChild(messageDiv);
+    this.elements.chatContainer.scrollTop = this.elements.chatContainer.scrollHeight;
+}
+
+    /**
+     * Updates character and word counts for the context input.
+     */
+    updateContextStats() {
+        const text = this.elements.contextInput.value;
+        this.elements.charCount.textContent = text.length.toLocaleString();
+        this.elements.wordCount.textContent = (text.trim().split(/\s+/).filter(Boolean).length).toLocaleString();
+        this.updateUI();
+    }
+
+    autoResizeTextarea(element) {
+        element.style.height = 'auto';
+        element.style.height = `${Math.min(element.scrollHeight, 120)}px`;
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new ContextAwareApp();
+});

templates/index.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ContextIQ - Intelligent Context-Aware Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: { 'inter': ['Inter', 'sans-serif'] },
+                    animation: {
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'fade-in': 'fadeIn 0.5s ease-in-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0', transform: 'translateY(10px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' }
+                        },
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
+        .glass-effect { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.1); }
+        .gradient-text { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .typing-indicator { display: inline-flex; align-items: center; }
+        .typing-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #8b5cf6; animation: typing 1.4s infinite ease-in-out; margin-right: 4px; }
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes typing { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }
+        .scroll-container::-webkit-scrollbar { width: 6px; }
+        .scroll-container::-webkit-scrollbar-track { background: transparent; }
+        .scroll-container::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
+        .markdown-content { word-wrap: break-word; }
+        .markdown-content p { margin-bottom: 0.75rem; }
+        .markdown-content p:last-child { margin-bottom: 0; }
+        .markdown-content pre { background-color: rgba(15, 23, 42, 0.5); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; }
+        .markdown-content code { font-family: monospace; background-color: rgba(15, 23, 42, 0.5); padding: 0.1rem 0.3rem; border-radius: 0.25rem; }
+        .markdown-content pre code { padding: 0; background-color: transparent; }
+        .markdown-content ul, .markdown-content ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
+        .markdown-content ul { list-style-type: disc; }
+        .markdown-content ol { list-style-type: decimal; }
+        .markdown-content table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
+        .markdown-content th, .markdown-content td { border: 1px solid rgba(148, 163, 184, 0.2); padding: 0.5rem; text-align: left; }
+
+    </style>
+</head>
+<body class="font-inter text-white overflow-hidden">
+    <div class="fixed inset-0 -z-10">
+        <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div>
+        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow animation-delay-2000"></div>
+    </div>
+
+    <div class="relative z-10 flex items-center justify-center min-h-screen p-4">
+        <div class="w-[98%] h-[95vh] glass-effect rounded-3xl shadow-2xl flex flex-col">
+
+            <header class="flex items-center justify-between p-6 border-b border-slate-600/50">
+                <div class="flex items-center space-x-4">
+                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl font-bold gradient-text">Context AI by Ab-Romia</h1>
+                        <p class="text-sm text-slate-400">Refactored for Clarity & Efficiency</p>
+                    </div>
+                </div>
+            </header>
+
+            <div class="flex-1 flex overflow-hidden">
+                <div class="w-1/2 flex flex-col border-r border-slate-600/50">
+                    <div class="p-6 border-b border-slate-600/30">
+                        <h2 class="text-lg font-semibold text-slate-200">Knowledge Base</h2>
+                        <p class="text-sm text-slate-400 mt-1">Provide context for the AI to learn from.</p>
+                    </div>
+                    <div class="flex-1 p-6 flex flex-col">
+                        <textarea id="context-input" class="w-full h-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-4 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none transition scroll-container" placeholder="Paste your documents, meeting notes, or any relevant context here..."></textarea>
+                        <div class="mt-4 flex items-center justify-between">
+                            <div class="text-xs text-slate-400">
+                                Chars: <span id="char-count">0</span> | Words: <span id="word-count">0</span>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <button id="clear-context-btn" class="px-3 py-1.5 text-sm bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-colors">Clear</button>
+                                <button id="index-context-btn" class="px-4 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">Index Context</button>
+                            </div>
+                        </div>
+                         <div class="mt-4">
+                                <label for="task-select" class="block text-sm font-medium text-slate-300 mb-2">Choose an Action:</label>
+                                <select id="task-select" class="w-full bg-slate-900/50 border border-slate-600/50 rounded-lg p-2 text-slate-200 focus:ring-2 focus:ring-indigo-500">
+                                    <option value="q_and_a">Question & Answer</option>
+                                    <option value="summarize">Summarize</option>
+                                    <option value="plan">Generate Action Plan</option>
+                                    <option value="creative">Creative Writing</option>
+                                </select>
+                            </div>
+                    </div>
+                </div>
+
+                <div class="w-1/2 flex flex-col">
+                    <div class="p-6 border-b border-slate-600/30">
+                        <h2 class="text-lg font-semibold text-slate-200">AI Assistant</h2>
+                        <p class="text-sm text-slate-400 mt-1">Ask questions or select a task.</p>
+                    </div>
+                    <div id="chat-container" class="flex-1 overflow-y-auto scroll-container p-6 space-y-6">
+                        </div>
+                    <div class="p-6 border-t border-slate-600/30">
+                        <div class="relative">
+                            <textarea id="chat-input" rows="1" class="w-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-3 pr-12 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none transition" placeholder="Ask a question or provide a prompt..." style="max-height: 120px;"></textarea>
+                            <button id="send-button" class="absolute right-2.5 bottom-2.5 p-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
+                            </button>
+                        </div>
+                        <div class="flex items-center justify-between mt-3 text-xs text-slate-400 h-5">
+                            <div id="status-indicator" class="hidden">
+                                </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>