Spaces:

YousefMohtady1
/

CorpGuideAI

Running

App Files Files Community

YousefMohtady1 commited on 6 days ago

Commit

a6ff259

1 Parent(s): da2ab72

Seperate ui

Browse files

Files changed (5) hide show

README.md +3 -9
api/main.py +0 -3
web_ui/index.html +0 -54
web_ui/script.js +0 -185
web_ui/style.css +0 -139

README.md CHANGED Viewed

@@ -21,7 +21,6 @@ app_port: 7860
   - Extracts text from PDFs.
   - Improves retrieval speed and accuracy with semantic chunking.
   - Uses `Alibaba-NLP/gte-multilingual-base` for robust multilingual support.
-- **Interactive Web UI**: A modern, clean chat interface to interact with the assistant.
 - **Chat History Management**: Maintains context across the conversation session (Reset supported).
 - **FastAPI Backend**: A high-performance API to serve requests.
 - **Docker Support**: Containerized for easy deployment.
@@ -29,7 +28,6 @@ app_port: 7860
 ## 🛠️ Tech Stack
 - **Language**: Python 3.10+
-- **Frontend**: HTML5, CSS3, Vanilla JS
 - **Backend**: FastAPI, Uvicorn
 - **AI/ML**: LangChain, HuggingFace, ChromaDB, Groq
 - **Tools**: `pypdf`, `sentence-transformers`, Docker
@@ -51,10 +49,6 @@ CorpGuideAI-HR-Policy-Assistant/
 │   ├── document_processor.py
 │   ├── vector_store.py
 │   ├── llm_client.py
-├── web_ui/                  # Frontend Application
-│   ├── index.html
-│   ├── script.js
-│   ├── style.css
 ├── ingest.py                # Document ingestion script
 ├── Dockerfile               # Docker container configuration
 ├── requirements.txt         # Dependencies
@@ -106,7 +100,7 @@ Launch the FastAPI server:
 uvicorn api.main:app --reload
 ```
-    Access the Web UI at: `http://localhost:8000`
 ### Option 2: Docker
@@ -120,11 +114,11 @@ uvicorn api.main:app --reload
     ```bash
     docker run -p 7860:7860 --env-file .env corpguide-ai
     ```
-    Access at: `http://localhost:7860`
 ## 🔗 API Endpoints
-- `GET /`: Serves the Web UI.
 - `POST /chat`: Chat endpoint.
   - Body: `{ "question": "..." }` (History managed internally)

   - Extracts text from PDFs.
   - Improves retrieval speed and accuracy with semantic chunking.
   - Uses `Alibaba-NLP/gte-multilingual-base` for robust multilingual support.
 - **Chat History Management**: Maintains context across the conversation session (Reset supported).
 - **FastAPI Backend**: A high-performance API to serve requests.
 - **Docker Support**: Containerized for easy deployment.
 ## 🛠️ Tech Stack
 - **Language**: Python 3.10+
 - **Backend**: FastAPI, Uvicorn
 - **AI/ML**: LangChain, HuggingFace, ChromaDB, Groq
 - **Tools**: `pypdf`, `sentence-transformers`, Docker
 │   ├── document_processor.py
 │   ├── vector_store.py
 │   ├── llm_client.py
 ├── ingest.py                # Document ingestion script
 ├── Dockerfile               # Docker container configuration
 ├── requirements.txt         # Dependencies
 uvicorn api.main:app --reload
 ```
+    The API will be accessible at: `http://localhost:8000`
 ### Option 2: Docker
     ```bash
     docker run -p 7860:7860 --env-file .env corpguide-ai
     ```
+    The API will be accessible at: `http://localhost:7860`
 ## 🔗 API Endpoints
+- `GET /`: Health check / Root.
 - `POST /chat`: Chat endpoint.
   - Body: `{ "question": "..." }` (History managed internally)

api/main.py CHANGED Viewed

@@ -2,7 +2,6 @@ import logging
 from fastapi import FastAPI, HTTPException
 from contextlib import asynccontextmanager
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
 from api.schemas import ChatRequest, ChatResponse, UploadResponse
 from core.rag_pipeline import RagPipeline
@@ -43,8 +42,6 @@ app.add_middleware(
     allow_headers=["*"],
 )
-app.mount("/static", StaticFiles(directory="web_ui"), name="static")
 @app.get("/")
 async def read_index():
     return FileResponse("web_ui/index.html")

 from fastapi import FastAPI, HTTPException
 from contextlib import asynccontextmanager
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from api.schemas import ChatRequest, ChatResponse, UploadResponse
 from core.rag_pipeline import RagPipeline
     allow_headers=["*"],
 )
 @app.get("/")
 async def read_index():
     return FileResponse("web_ui/index.html")

web_ui/index.html DELETED Viewed

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CorpGuide AI Assistant</title>
-    <link rel="stylesheet" href="/static/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-    />
-  </head>
-  <body>
-    <div class="chat-container">
-      <div class="chat-header">
-        <div class="logo">
-          <i class="fa-solid fa-robot"></i>
-          <span>CorpGuide AI</span>
-        </div>
-        <button
-          onclick="startNewChat()"
-          class="new-chat-btn"
-          title="Start New Chat"
-        >
-          <i class="fa-solid fa-arrows-rotate"></i>
-        </button>
-        <div class="status-dot"></div>
-      </div>
-      <div class="chat-box" id="chat-box">
-        <div class="message bot-message">
-          <div class="msg-content">
-            Hi, I am CorpGuide AI. Ask me any question about your company's
-            policies.
-          </div>
-        </div>
-      </div>
-      <div class="input-area">
-        <input
-          type="text"
-          id="user-input"
-          placeholder="Ask me any question about your company's policies."
-          autocomplete="off"
-        />
-        <button onclick="sendMessage()" id="send-btn">
-          <i class="fa-solid fa-paper-plane"></i>
-        </button>
-      </div>
-    </div>
-    <script src="/static/script.js"></script>
-  </body>
-</html>

web_ui/script.js DELETED Viewed

@@ -1,185 +0,0 @@
-// ==========================================
-// Connection and Memory Settings
-// ==========================================
-// Relative URL to work both locally and on server
-const API_URL = "/chat";
-const RESET_URL = "/reset";
-// Array to store chat history (so the model remembers context)
-let chatHistory = [];
-// Define page elements
-const chatBox = document.getElementById('chat-box');
-const userInput = document.getElementById('user-input');
-const sendBtn = document.getElementById('send-btn');
-// ==========================================
-// Core Functions
-// ==========================================
-/**
- * Function to send message and handle API interaction
- */
-async function sendMessage() {
-    const question = userInput.value.trim();
-    // If no text, do nothing
-    if (!question) return;
-    // 1. Display user message in chat immediately
-    appendMessage(question, 'user');
-    userInput.value = ''; // Clear input
-    sendBtn.disabled = true; // Disable button to prevent double sending
-    // 2. Display "typing..." indicator
-    const loadingId = appendLoading();
-    try {
-        // 3. Prepare payload (question + old history)
-        const payload = {
-            question: question,
-            chat_history: chatHistory
-        };
-        // 4. Connect to server
-        const response = await fetch(API_URL, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
-        });
-        if (!response.ok) {
-            throw new Error(`Server Error: ${response.status}`);
-        }
-        const data = await response.json();
-        // 5. Remove loading indicator and show AI response
-        removeLoading(loadingId);
-        appendMessage(data.answer, 'bot', data.sources);
-        // 6. Update memory (for next question)
-        // Add question and answer to the list
-        chatHistory.push(["human", question]);
-        chatHistory.push(["ai", data.answer]);
-    } catch (error) {
-        console.error("Error:", error);
-        removeLoading(loadingId);
-        appendMessage("Sorry, an error occurred connecting to the server. Please ensure the backend is running. 😔", 'bot');
-    } finally {
-        // Re-enable button and focus input
-        sendBtn.disabled = false;
-        userInput.focus();
-    }
-}
-/**
- * Function to start a new chat (Reset)
- */
-async function startNewChat() {
-    // 1. Reset browser memory
-    chatHistory = [];
-    // 2. Clear screen (return to initial state)
-    chatBox.innerHTML = `
-        <div class="message bot-message">
-            <div class="msg-content">
-                Welcome back! 👋<br>Memory cleared, you can start a new topic.
-            </div>
-        </div>
-    `;
-    // 3. Notify server to clear memory (optional, for double confirmation)
-    // Server is stateless now, so no need to call /reset
-    console.log("Client history cleared.");
-}
-// ==========================================
-// UI Helpers
-// ==========================================
-/**
- * Add message to screen
- * @param {string} text - Message text
- * @param {string} sender - Sender ('user' or 'bot')
- * @param {Array} sources - List of sources (optional)
- */
-function appendMessage(text, sender, sources = []) {
-    const msgDiv = document.createElement('div');
-    msgDiv.classList.add('message', sender === 'user' ? 'user-message' : 'bot-message');
-    // Convert newlines to <br> for proper formatting
-    // Could use a library like 'marked' for full Markdown, but this is simpler
-    let formattedText = text.replace(/\n/g, '<br>');
-    // Convert text between ** ** to bold tags (simple implementation)
-    formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    let html = `<div class="msg-content">${formattedText}</div>`;
-    /*
-    // If there are sources, add them in a small box below - DISABLED BY REQUEST
-    if (sources && sources.length > 0) {
-        // Remove duplicates from filenames
-        const uniqueSources = [...new Set(sources)];
-        html += `<div class="sources-box">📚 Sources: ${uniqueSources.join(', ')}</div>`;
-    }
-    */
-    msgDiv.innerHTML = html;
-    chatBox.appendChild(msgDiv);
-    scrollToBottom();
-}
-/**
- * Add loading indicator (3 moving dots)
- */
-function appendLoading() {
-    const id = 'loading-' + Date.now();
-    const msgDiv = document.createElement('div');
-    msgDiv.classList.add('message', 'bot-message');
-    msgDiv.id = id;
-    msgDiv.innerHTML = `
-        <div class="msg-content">
-            <div class="typing-indicator">
-                <span></span><span></span><span></span>
-            </div>
-        </div>`;
-    chatBox.appendChild(msgDiv);
-    scrollToBottom();
-    return id;
-}
-/**
- * Remove loading indicator
- */
-function removeLoading(id) {
-    const element = document.getElementById(id);
-    if (element) element.remove();
-}
-/**
- * Scroll to bottom of chat automatically
- */
-function scrollToBottom() {
-    chatBox.scrollTop = chatBox.scrollHeight;
-}
-// ==========================================
-// Event Listeners
-// ==========================================
-// When send button is clicked
-sendBtn.addEventListener('click', sendMessage);
-// When Enter is pressed in input box
-userInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-        sendMessage();
-    }
-});
-// Focus on input box when page loads
-window.onload = () => userInput.focus();

web_ui/style.css DELETED Viewed

@@ -1,139 +0,0 @@
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f0f2f5;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-.chat-container {
-    width: 100%;
-    max-width: 500px; /* Suitable size for mobile and desktop */
-    background: white;
-    height: 90vh;
-    border-radius: 15px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-.chat-header {
-    background: #2c3e50;
-    color: white;
-    padding: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.new-chat-btn {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: white;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-}
-.new-chat-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: rotate(180deg); /* Cool rotation effect on hover */
-}
-.logo { font-size: 1.2rem; font-weight: bold; }
-.logo i { margin-left: 10px; color: #3498db; }
-.status-dot { width: 10px; height: 10px; background: #2ecc71; border-radius: 50%; }
-.chat-box {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    background: #f9f9f9;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-.message { display: flex; flex-direction: column; max-width: 80%; }
-.bot-message { align-self: flex-start; }
-.user-message { align-self: flex-end; }
-.msg-content {
-    padding: 12px 16px;
-    border-radius: 15px;
-    font-size: 0.95rem;
-    line-height: 1.5;
-    position: relative;
-}
-.bot-message .msg-content {
-    background: #e9ecef;
-    color: #333;
-    border-bottom-right-radius: 2px;
-}
-.user-message .msg-content {
-    background: #3498db;
-    color: white;
-    border-bottom-left-radius: 2px;
-}
-.sources-box {
-    font-size: 0.8rem;
-    color: #666;
-    margin-top: 5px;
-    background: #fff;
-    padding: 5px 10px;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-.input-area {
-    padding: 15px;
-    background: white;
-    border-top: 1px solid #eee;
-    display: flex;
-    gap: 10px;
-}
-input {
-    flex: 1;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 25px;
-    outline: none;
-    font-family: inherit;
-}
-button {
-    background: #2c3e50;
-    color: white;
-    border: none;
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: 0.2s;
-}
-button:hover { background: #34495e; }
-button:disabled { background: #ccc; cursor: not-allowed; }
-/* Loading Animation */
-.typing-indicator span {
-    display: inline-block;
-    width: 6px; height: 6px;
-    background-color: #555;
-    border-radius: 50%;
-    animation: typing 1s infinite;
-    margin: 0 2px;
-}
-@keyframes typing { 0% {opacity: 0.3} 50% {opacity: 1} 100% {opacity: 0.3} }