Spaces:

Raykarr
/

Excel_Analysis

Running

App Files Files Community

Raykarr commited on Oct 27, 2025

Commit

f67222e

verified ·

1 Parent(s): 5f88637

Update index.html

Browse files

Files changed (1) hide show

index.html +721 -19

index.html CHANGED Viewed

@@ -1,19 +1,721 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carver Excel Analyst</title>
+    <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@400;500;600&display=swap" rel="stylesheet">
+    <script type="module" src="https://esm.run/@google/generative-ai"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+    <style>
+        /* --- CSS Reset & Base --- */
+        :root {
+            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            --color-bg: #f8f9fa;
+            --color-card: #ffffff;
+            --color-border: #e9ecef;
+            --color-text: #212529;
+            --color-text-light: #6c757d;
+            --color-accent: #0d6efd;
+            --color-user-msg: #0d6efd;
+            --color-user-text: #ffffff;
+            --color-assist-msg: #f1f3f5;
+            --color-assist-text: #212529;
+            --color-danger: #d90429;
+            --color-danger-bg: #fff0f0;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: var(--font-main);
+            background-color: var(--color-bg);
+            color: var(--color-text);
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        /* --- Main App Container --- */
+        .container {
+            width: 100%;
+            max-width: 900px;
+            background-color: var(--color-card);
+            border-radius: 12px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: calc(100vh - 40px);
+            border: 1px solid var(--color-border);
+        }
+        /* --- Header --- */
+        header {
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--color-border);
+            background-color: var(--color-card);
+        }
+        h1 {
+            margin: 0;
+            color: var(--color-text);
+            font-size: 1.4rem;
+            font-weight: 600;
+        }
+        p.caption {
+            margin: 4px 0 0;
+            font-size: 0.9rem;
+            color: var(--color-text-light);
+        }
+        /* --- Config Section (API Key) --- */
+        .config-bar {
+            padding: 16px 24px;
+            background-color: #fdfdfe;
+            border-bottom: 1px solid var(--color-border);
+        }
+        .api-key-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .api-key-group label {
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+        .api-key-group input {
+            flex-grow: 1;
+            padding: 8px 12px;
+            border: 1px solid var(--color-border);
+            border-radius: 6px;
+            font-family: var(--font-main);
+            font-size: 0.9rem;
+        }
+        .api-key-warning {
+            font-size: 0.8rem;
+            color: #e74c3c;
+            font-weight: 500;
+            margin-top: 8px;
+        }
+        /* --- Chat Box --- */
+        #chat-box {
+            flex-grow: 1;
+            padding: 24px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            /* Subtle dot background */
+            background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
+            background-size: 10px 10px;
+            background-color: #ffffff;
+        }
+        /* Minimal Scrollbar */
+        #chat-box::-webkit-scrollbar {
+            width: 6px;
+        }
+        #chat-box::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        #chat-box::-webkit-scrollbar-thumb {
+            background: var(--color-border);
+            border-radius: 3px;
+        }
+        #chat-box::-webkit-scrollbar-thumb:hover {
+            background: #d0d5db;
+        }
+        .message {
+            padding: 14px 20px;
+            border-radius: 18px;
+            max-width: 85%;
+            line-height: 1.6;
+            word-wrap: break-word;
+            font-size: 0.95rem;
+        }
+        .message.user {
+            background-color: var(--color-user-msg);
+            color: var(--color-user-text);
+            border-bottom-right-radius: 6px;
+            align-self: flex-end;
+        }
+        .message.assistant {
+            background-color: var(--color-assist-msg);
+            color: var(--color-assist-text);
+            border-bottom-left-radius: 6px;
+            align-self: flex-start;
+        }
+        .message.error {
+            background-color: var(--color-danger-bg);
+            color: var(--color-danger);
+            border: 1px solid var(--color-danger);
+        }
+        /* --- Markdown Formatting for Assistant --- */
+        .message.assistant strong { font-weight: 600; }
+        .message.assistant h1, .message.assistant h2, .message.assistant h3 {
+            margin-top: 1.2em;
+            margin-bottom: 0.6em;
+            border-bottom: 1px solid var(--color-border);
+            padding-bottom: 5px;
+            font-weight: 600;
+        }
+        .message.assistant code {
+            font-family: monospace;
+            background-color: #dfe7ed;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.9em;
+        }
+        .message.assistant pre {
+            background-color: #2c3e50;
+            color: #f4f7f6;
+            padding: 16px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 1em 0;
+        }
+        .message.assistant pre code {
+            background-color: transparent;
+            padding: 0;
+            font-size: 0.85rem;
+        }
+        .message.assistant table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 1em 0;
+            font-size: 0.9rem;
+        }
+        .message.assistant th, .message.assistant td {
+            border: 1px solid var(--color-border);
+            padding: 10px;
+            text-align: left;
+        }
+        .message.assistant th {
+            background-color: var(--color-assist-msg);
+            font-weight: 600;
+        }
+        /* --- Input Area --- */
+        .input-area {
+            border-top: 1px solid var(--color-border);
+            padding: 16px 24px;
+            background-color: var(--color-card);
+        }
+        #file-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+        .file-pill {
+            display: inline-block;
+            background-color: var(--color-assist-msg);
+            color: var(--color-text);
+            padding: 5px 12px;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+        .prompt-input-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 1px solid var(--color-border);
+            border-radius: 25px;
+            padding: 4px 4px 4px 12px;
+        }
+        .prompt-input-group:focus-within {
+            border-color: var(--color-accent);
+            box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
+        }
+        #prompt-input {
+            flex-grow: 1;
+            border: none;
+            outline: none;
+            background: transparent;
+            font-family: var(--font-main);
+            font-size: 1rem;
+            padding: 8px;
+        }
+        #file-input {
+            display: none;
+        }
+        .icon-button {
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s;
+        }
+        .icon-button svg {
+            width: 20px;
+            height: 20px;
+            fill: var(--color-text-light);
+        }
+        .icon-button:hover {
+            background-color: var(--color-assist-msg);
+        }
+        #send-button {
+            background-color: var(--color-accent);
+        }
+        #send-button svg {
+            fill: var(--color-user-text);
+        }
+        #send-button:hover {
+            background-color: #0b5ed7;
+        }
+        #send-button:disabled {
+            background-color: #a0c7e4;
+            cursor: not-allowed;
+        }
+        /* --- Status & Loading --- */
+        #status-text {
+            display: block;
+            text-align: center;
+            font-size: 0.85rem;
+            color: var(--color-text-light);
+            margin-bottom: 12px;
+            height: 1.2em;
+        }
+        .spinner {
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            border: 2px solid currentColor;
+            border-right-color: transparent;
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+            margin-bottom: -3px;
+            margin-right: 5px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* --- Debug/Refined Prompt Area --- */
+        .debug-container {
+            padding: 12px 24px 4px;
+        }
+        .debug-container summary {
+            font-size: 0.8rem;
+            color: var(--color-text-light);
+            cursor: pointer;
+            font-weight: 500;
+        }
+        #debug-box {
+            display: block; /* Content is shown when <details> is open */
+            font-size: 0.8rem;
+            background-color: var(--color-bg);
+            border: 1px solid var(--color-border);
+            padding: 12px;
+            margin-top: 8px;
+            border-radius: 8px;
+            font-family: monospace;
+            line-height: 1.4;
+            max-height: 200px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🧠 Carver Excel Analyst</h1>
+            <p class="caption">This AI uses a 2-step process to refine your query and provide an expert analysis.</p>
+        </header>
+        <div class="config-bar">
+            <div class="api-key-group">
+                <label for="api-key-input">API Key:</label>
+                <input type="password" id="api-key-input" placeholder="Enter your Google API Key">
+            </div>
+            <div class="api-key-warning">🔴 For development only. Your key is visible in this browser.</div>
+        </div>
+        <div id="chat-box">
+            <div class="message assistant">
+                Hello! Please provide your API key, then upload your files (Excel, PDF, Images) and ask a question.
+                <br><br>
+                <b>Note:</b> Excel files (`.xlsx`, `.xls`) will be automatically converted to CSV text for analysis.
+            </div>
+        </div>
+        <div class="input-area">
+            <div id="status-text"></div>
+            <div id="file-list">
+                </div>
+            <div class="prompt-input-group">
+                <input type="file" id="file-input" multiple>
+                <button class="icon-button" id="attach-button" title="Upload files">
+                    <svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v11.5c0 2.76 2.24 5 5 5s5-2.24 5-5V6h-1.5z"></path></svg>
+                </button>
+                <input type="text" id="prompt-input" placeholder="Ask a question about your files...">
+                <button class="icon-button" id="send-button" title="Send message">
+                    <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2 .01 7z"></path></svg>
+                </button>
+            </div>
+            <div class="debug-container">
+                <details id="debug-details">
+                    <summary>Show Analysis Details</summary>
+                    <div id="debug-box">No analysis details yet.</div>
+                </details>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        // --- Import Generative AI SDK ---
+        const { GoogleGenerativeAI } = await import("https://esm.run/@google/generative-ai");
+        // --- DOM Element References ---
+        const apiKeyInput = document.getElementById("api-key-input");
+        const fileInput = document.getElementById("file-input");
+        const attachButton = document.getElementById("attach-button");
+        const fileListDisplay = document.getElementById("file-list");
+        const promptInput = document.getElementById("prompt-input");
+        const sendButton = document.getElementById("send-button");
+        const chatBox = document.getElementById("chat-box");
+        const statusText = document.getElementById("status-text");
+        const debugDetails = document.getElementById("debug-details");
+        const debugBox = document.getElementById("debug-box");
+        // --- Model Configuration ---
+        const GENERATOR_MODEL_NAME = "gemini-2.0-flash";
+        const ANALYST_MODEL_NAME = "gemini-2.5-flash";
+        // --- Store uploaded files ---
+        let uploadedFiles = [];
+        // --- The Main Carver Analyst System Prompt ---
+        const CARVER_ANALYST_SYSTEM_PROMPT = `
+You are **Carver Excel Analyst**, an internal AI specialist for Carver Procurement Consultancy.
+Your role: Help Carver team members analyze Excel sheets (e.g., BOQs, comparative sheets, quotations, price lists, tender data) and produce clear summaries and structured tables.
+NOTE: Excel files (.xlsx, .xls) have been pre-converted into structured CSV text, with each sheet as a separate text block, prefixed with [File: filename.xlsx | Sheet: SheetName]. Use this text data for your analysis.
+### 🎯 Mission
+Understand the provided data (CSV text, PDFs, images) and provide short, factual insights — **without making any assumptions**.
+If any required input is missing, unclear, or conflicting, you **must first ask a short, specific clarifying question** before proceeding. Never guess, invent, or assume.
+Your goal is to make Carver’s data analysis simple, reliable, and audit-ready.
+### 🧩 Default Output (when all inputs are clear)
+1. **Executive Summary (3–6 lines)** — concise explanation answering the user’s question.
+2. **Supporting Table (Markdown or CSV)** — key rows/columns only.
+3. **Audit Block (3–6 lines)** — list of: file(s) used (or file/sheet name for CSVs), cell/range references (or row/column names), missing or ignored fields, and formulas applied.
+Do **not** create or export a new Excel file unless the user explicitly asks for it.
+### 🧱 Working Logic
+**A. File Understanding**
+- Detect columns and datatypes from the CSV text or tables in PDFs/images. Map columns like *Vendor*, *Item*, *Qty*, *Rate/Unit Price*, *Total*, *Lead Time*, *Remarks*, etc.
+- Always confirm mappings if confidence <80%.
+**B. Required Data Rules**
+- For cost analysis → need \`Qty\` + \`UnitPrice\` or \`Total\`.
+- For “vs budget” → need a \`Baseline\`, \`Budget\`, or explicit reference vendor.
+- If missing, ask user directly.
+**C. No-Assumptions Policy**
+- If anything is missing or unclear: Ask before proceeding.
+- Example: “No ‘Budget’ column found. Should I use the lowest vendor total as baseline?”
+**D. Validations**
+- Detect and report missing values, currency mismatches, etc., in the Audit Block.
+**E. Computation Rules**
+- \`Saving = Baseline – Selected\`
+- \`Saving% = (Baseline – Selected) / Baseline × 100\`
+**F. Output Formatting**
+- Keep summary short. Use markdown tables. End every result with an **Audit Block**.
+**H. Tone**
+- Professional, precise, procurement-focused.
+### 🧭 Objective
+Act like Carver’s in-house **Excel procurement analyst** — structured, audit-traceable, and transparent. Never make assumptions. Always verify.
+`;
+        // --- Event Listeners ---
+        sendButton.addEventListener("click", handleSend);
+        promptInput.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        });
+        // Trigger hidden file input
+        attachButton.addEventListener("click", () => {
+            fileInput.click();
+        });
+        // Update file pills
+        fileInput.addEventListener("change", (e) => {
+            uploadedFiles = Array.from(e.target.files);
+            fileListDisplay.innerHTML = ""; // Clear existing pills
+            if (uploadedFiles.length > 0) {
+                uploadedFiles.forEach(file => {
+                    const pill = document.createElement("span");
+                    pill.className = "file-pill";
+                    pill.textContent = file.name;
+                    fileListDisplay.appendChild(pill);
+                });
+            }
+        });
+        // --- Main Function: handleSend ---
+        async function handleSend() {
+            const apiKey = apiKeyInput.value.trim();
+            const userPrompt = promptInput.value.trim();
+            // --- 1. Validations ---
+            if (!apiKey) {
+                displayError("Please enter your Google API Key.");
+                return;
+            }
+            if (!userPrompt) {
+                displayError("Please enter a prompt.");
+                return;
+            }
+            if (uploadedFiles.length === 0) {
+                displayError("Please upload at least one file.");
+                return;
+            }
+            // --- 2. Setup UI for Loading ---
+            setLoadingState(true, "Processing files... (Excel files will be converted to text)");
+            displayMessage(userPrompt, "user");
+            debugBox.textContent = "Generating refined prompt..."; // Clear old debug info
+            debugDetails.open = false; // Close the details box
+            const assistantMessageEl = displayMessage("", "assistant"); // Create empty bubble
+            try {
+                // --- 3. Process Files into Generative Parts ---
+                const partsArrays = await Promise.all(
+                    uploadedFiles.map(fileToGenerativeParts)
+                );
+                const fileParts = partsArrays.flat();
+                // --- 4. Initialize AI Client ---
+                const genAI = new GoogleGenerativeAI(apiKey);
+                // --- 5. STEP 1: Generate the "Better Prompt" (Normal Model) ---
+                setLoadingState(true, `Step 1/2: Thinking about your question... (${GENERATOR_MODEL_NAME})`);
+                const generatorModel = genAI.getGenerativeModel({ model: GENERATOR_MODEL_NAME });
+                const step1SystemPrompt = `
+                You are a prompt engineering assistant. Your job is to take a user's simple question and the attached file(s) and generate a new, detailed, and specific prompt. This new prompt will be given to a second AI, which is an expert 'Carver Excel Analyst'.
+                NOTE: The attached files may include images, PDFs, or TEXT parts that are CSV conversions of Excel sheets. The analyst is aware of this.
+                The user's question is: "${userPrompt}"
+                Based on the user's question and the file(s), generate a single, clear, and actionable instruction for the expert analyst.
+                - Be specific.
+                - Ask for the final output (summary, table, audit block) as defined by the analyst's role.
+                - For example, if the user says "how much did I save?", you should generate a prompt like:
+                  "Please analyze the attached data (CSV text, PDFs, images). Identify the baseline or budget, compare all vendor totals against it, and calculate the saving amount and percentage for the lowest-cost compliant vendor. Present this in an executive summary, a comparison table, and an audit block."
+                `;
+                const step1Contents = [
+                    ...fileParts,
+                    { text: step1SystemPrompt }
+                ];
+                const resultStep1 = await generatorModel.generateContent({
+                    contents: [{ parts: step1Contents }]
+                });
+                const generatedPrompt = resultStep1.response.text();
+                // Display the refined prompt in the debug box
+                debugBox.textContent = generatedPrompt;
+                debugDetails.open = true; // Open the details box to show the new prompt
+                // --- 6. STEP 2: Get Final Answer (Reasoning Model) ---
+                setLoadingState(true, `Step 2/2: The Carver Analyst is working... (${ANALYST_MODEL_NAME})`);
+                const analystModel = genAI.getGenerativeModel({
+                    model: ANALYST_MODEL_NAME,
+                    systemInstruction: CARVER_ANALYST_SYSTEM_PROMPT
+                });
+                const step2Contents = [
+                    ...fileParts,
+                    { text: generatedPrompt }
+                ];
+                const result = await analystModel.generateContentStream({
+                    contents: [{ parts: step2Contents }]
+                });
+                // --- 7. Stream Response to Chat ---
+                let fullResponse = "";
+                for await (const chunk of result.stream) {
+                    if (typeof chunk.text === 'function') {
+                        const chunkText = chunk.text();
+                        fullResponse += chunkText;
+                        assistantMessageEl.innerHTML = marked.parse(fullResponse);
+                        scrollToBottom();
+                    }
+                }
+            } catch (error) {
+                console.error("Error:", error);
+                displayError(`An error occurred: ${error.message}`);
+                assistantMessageEl.remove(); // Remove the empty bubble
+            } finally {
+                // --- 8. Cleanup UI ---
+                setLoadingState(false);
+                promptInput.value = "";
+                // Clear files after processing
+                uploadedFiles = [];
+                fileInput.value = ""; // Reset the file input
+                fileListDisplay.innerHTML = "";
+            }
+        }
+        // --- Helper Functions ---
+        /**
+         * Converts a File object to an array of GoogleGenerativeAI.Part objects.
+         */
+        async function fileToGenerativeParts(file) {
+            const excelMimeTypes = [
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+                'application/vnd.ms-excel' // .xls
+            ];
+            if (excelMimeTypes.includes(file.type) || file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
+                try {
+                    const buffer = await file.arrayBuffer();
+                    const workbook = XLSX.read(buffer, { type: 'buffer' });
+                    const textParts = [];
+                    workbook.SheetNames.forEach(sheetName => {
+                        const worksheet = workbook.Sheets[sheetName];
+                        const csvData = XLSX.utils.sheet_to_csv(worksheet);
+                        const partHeader = `[File: ${file.name} | Sheet: ${sheetName}]\n\n`;
+                        textParts.push({ text: partHeader + csvData });
+                    });
+                    return textParts;
+                } catch (error) {
+                    console.error("Error reading Excel file:", error);
+                    return [{ text: `[Error processing Excel file ${file.name}: ${error.message}]` }];
+                }
+            }
+            else { // For all other files (PDF, images, etc.)
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = () => {
+                        const dataUrl = reader.result;
+                        const base64Data = dataUrl.split(',')[1];
+                        const mimeType = dataUrl.split(';')[0].split(':')[1];
+                        resolve([{
+                            inlineData: {
+                                data: base64Data,
+                                mimeType: mimeType
+                            }
+                        }]);
+                    };
+                    reader.onerror = (error) => reject(error);
+                });
+            }
+        }
+        /**
+         * Sets the loading state of the UI
+         */
+        function setLoadingState(isLoading, message = "") {
+            if (isLoading) {
+                statusText.innerHTML = `<span class="spinner"></span> ${message}`;
+                sendButton.disabled = true;
+                promptInput.disabled = true;
+                attachButton.disabled = true;
+            } else {
+                statusText.innerHTML = "";
+                sendButton.disabled = false;
+                promptInput.disabled = false;
+                attachButton.disabled = false;
+                promptInput.focus();
+            }
+        }
+        /**
+         * Displays a message in the chat box
+         */
+        function displayMessage(text, role) {
+            const messageEl = document.createElement("div");
+            messageEl.classList.add("message", role);
+            if (role === 'error') {
+                messageEl.textContent = text;
+            } else if (role === 'assistant') {
+                messageEl.innerHTML = marked.parse(text || "..."); // Show loading dots
+            } else {
+                messageEl.textContent = text; // Plain text for user
+            }
+            chatBox.appendChild(messageEl);
+            scrollToBottom();
+            return messageEl;
+        }
+        /**
+         * Displays an error message in the chat
+         */
+        function displayError(text) {
+            displayMessage(text, "error");
+            setLoadingState(false);
+        }
+        /**
+         * Scrolls the chat box to the bottom
+         */
+        function scrollToBottom() {
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    </script>
+</body>
+</html>