| <!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> |
| |
| :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; |
| --color-success: #28a745; |
| --color-success-bg: #f0fff4; |
| } |
| |
| * { |
| 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; |
| } |
| |
| |
| .container { |
| width: 100%; |
| max-width: 1500 px; |
| 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 { |
| 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-bar { |
| padding: 16px 24px; |
| background-color: #fdfdfe; |
| border-bottom: 1px solid var(--color-border); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .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; |
| } |
| |
| |
| .header-actions { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .action-button { |
| padding: 6px 12px; |
| border: 1px solid var(--color-border); |
| background-color: var(--color-card); |
| border-radius: 6px; |
| font-size: 0.85rem; |
| cursor: pointer; |
| font-family: var(--font-main); |
| transition: all 0.2s; |
| } |
| |
| .action-button:hover { |
| background-color: var(--color-assist-msg); |
| border-color: var(--color-accent); |
| } |
| |
| .action-button.danger { |
| color: var(--color-danger); |
| border-color: var(--color-danger); |
| } |
| |
| .action-button.danger:hover { |
| background-color: var(--color-danger-bg); |
| } |
| |
| |
| #chat-box { |
| flex-grow: 1; |
| padding: 24px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| |
| background-image: radial-gradient(var(--color-border) 1px, transparent 1px); |
| background-size: 10px 10px; |
| background-color: #ffffff; |
| } |
| |
| |
| #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); |
| } |
| |
| .message.success { |
| background-color: var(--color-success-bg); |
| color: var(--color-success); |
| border: 1px solid var(--color-success); |
| } |
| |
| |
| .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 { |
| 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; |
| align-items: center; |
| } |
| |
| .file-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background-color: var(--color-assist-msg); |
| color: var(--color-text); |
| padding: 5px 12px; |
| border-radius: 15px; |
| font-size: 0.8rem; |
| font-weight: 500; |
| } |
| |
| .file-remove { |
| background: none; |
| border: none; |
| color: var(--color-danger); |
| cursor: pointer; |
| font-size: 0.7rem; |
| padding: 0; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .file-remove:hover { |
| background-color: var(--color-danger); |
| color: white; |
| } |
| |
| .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-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-container { |
| padding: 12px 24px 4px; |
| border-top: 1px solid var(--color-border); |
| background-color: #f8f9fa; |
| } |
| |
| .debug-container summary { |
| font-size: 0.8rem; |
| color: var(--color-text-light); |
| cursor: pointer; |
| font-weight: 500; |
| padding: 8px 0; |
| list-style: none; |
| } |
| |
| .debug-container summary::-webkit-details-marker { |
| display: none; |
| } |
| |
| .debug-container summary::before { |
| content: '▶'; |
| display: inline-block; |
| margin-right: 8px; |
| transition: transform 0.2s; |
| } |
| |
| .debug-container[open] summary::before { |
| transform: rotate(90deg); |
| } |
| |
| #debug-box { |
| display: none; |
| font-size: 0.8rem; |
| background-color: var(--color-card); |
| border: 1px solid var(--color-border); |
| padding: 12px; |
| margin: 8px 0 0 0; |
| border-radius: 8px; |
| font-family: monospace; |
| line-height: 1.4; |
| max-height: 200px; |
| overflow-y: auto; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| |
| |
| .debug-container[open] #debug-box, |
| .debug-box-visible { |
| display: block; |
| } |
| |
| |
| .debug-container summary { |
| display: none; |
| } |
| |
| |
| .conversation-info { |
| text-align: center; |
| padding: 8px 16px; |
| font-size: 0.85rem; |
| color: var(--color-text-light); |
| background-color: var(--color-success-bg); |
| border-bottom: 1px solid var(--color-border); |
| } |
| |
| </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. <b>Upload files once, ask multiple questions!</b></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="header-actions"> |
| <button class="action-button success" id="export-pdf-btn" title="Export conversation to PDF"> |
| 📄 Export PDF |
| </button> |
| <button class="action-button" id="toggle-details-btn" title="Show/Hide analysis details"> |
| 👁️ Show Analysis Details |
| </button> |
| <button class="action-button" id="new-conversation-btn" title="Start a new conversation"> |
| 🔄 New Conversation |
| </button> |
| </div> |
| </div> |
|
|
| <div class="conversation-info" id="conversation-info" style="display: none;"> |
| 💾 Files remain available for this conversation. Ask follow-up questions anytime! |
| </div> |
|
|
| <div id="chat-box"> |
| <div class="message assistant"> |
| Welcome to Carver Excel Analyst! This is a <b>conversational chatbot</b> that remembers your files and conversation. |
| <br><br> |
| <b>How it works:</b> |
| <br>• Upload your Excel, PDF, or image files once |
| <br>• Ask questions about the data |
| <br>• Files stay available for follow-up questions |
| <br>• Start a new conversation anytime to clear history |
| <br><br> |
| <b>Please provide your API key and upload your files to begin!</b> |
| </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" id="debug-container"> |
| <div id="debug-box">No analysis details yet.</div> |
| </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 debugBox = document.getElementById("debug-box"); |
| const newConversationBtn = document.getElementById("new-conversation-btn"); |
| const conversationInfo = document.getElementById("conversation-info"); |
| const exportPdfBtn = document.getElementById("export-pdf-btn"); |
| const toggleDetailsBtn = document.getElementById("toggle-details-btn"); |
| |
| // --- Model Configuration --- |
| const GENERATOR_MODEL_NAME = "gemini-2.0-flash"; |
| const ANALYST_MODEL_NAME = "gemini-2.5-flash"; |
| |
| // --- Global State --- |
| let uploadedFiles = []; // Persistent file storage |
| let conversationHistory = []; // Store conversation messages |
| let conversationStartTime = Date.now(); |
| let analysisDetailsVisible = false; |
| |
| // --- 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. |
| |
| IMPORTANT: This is a conversational chatbot. You have access to the conversation history and can refer back to previous analyses when answering follow-up questions. |
| `; |
| |
| // --- 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(); |
| }); |
| |
| // Handle new conversation |
| newConversationBtn.addEventListener("click", startNewConversation); |
| |
| // Handle PDF export |
| exportPdfBtn.addEventListener("click", exportToPDF); |
| |
| // Handle analysis details toggle |
| toggleDetailsBtn.addEventListener("click", toggleAnalysisDetails); |
| |
| // Update file pills when files are selected |
| fileInput.addEventListener("change", (e) => { |
| const newFiles = Array.from(e.target.files); |
| uploadedFiles = [...uploadedFiles, ...newFiles]; // Append, don't replace |
| updateFileDisplay(); |
| fileInput.value = ""; // Reset input |
| |
| if (uploadedFiles.length > 0) { |
| showSuccess(`📎 Added ${newFiles.length} file(s). Total files: ${uploadedFiles.length}`); |
| conversationInfo.style.display = "block"; |
| } |
| }); |
| |
| // --- 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 first."); |
| return; |
| } |
| |
| // --- 2. Setup UI for Loading --- |
| setLoadingState(true, "Processing your question..."); |
| displayMessage(userPrompt, "user"); |
| debugBox.textContent = "Generating refined prompt..."; // Clear old debug info |
| |
| 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. Build conversation context --- |
| let conversationContext = ""; |
| if (conversationHistory.length > 0) { |
| conversationContext = ` |
| Previous conversation context: |
| ${conversationHistory.slice(-6).map(msg => |
| `${msg.role.toUpperCase()}: ${msg.content.substring(0, 200)}${msg.content.length > 200 ? '...' : ''}` |
| ).join('\n')} |
| |
| `; |
| } |
| |
| // --- 5. Initialize AI Client --- |
| const genAI = new GoogleGenerativeAI(apiKey); |
| |
| // --- 6. 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}" |
| |
| ${conversationContext}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. |
| - Consider previous conversation context when generating the prompt. |
| - 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; |
| analysisDetailsVisible = true; |
| updateDetailsVisibility(); |
| |
| // --- 7. 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 }] |
| }); |
| |
| // --- 8. 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(); |
| } |
| } |
| |
| // --- 9. Save to conversation history --- |
| conversationHistory.push( |
| { role: "user", content: userPrompt }, |
| { role: "assistant", content: fullResponse } |
| ); |
| |
| // Keep only last 20 messages to prevent context overflow |
| if (conversationHistory.length > 20) { |
| conversationHistory = conversationHistory.slice(-20); |
| } |
| |
| } catch (error) { |
| console.error("Error:", error); |
| displayError(`An error occurred: ${error.message}`); |
| assistantMessageEl.remove(); // Remove the empty bubble |
| analysisDetailsVisible = false; |
| updateDetailsVisibility(); |
| } finally { |
| // --- 10. Cleanup UI --- |
| setLoadingState(false); |
| promptInput.value = ""; |
| } |
| } |
| |
| // --- Helper Functions --- |
| |
| /** |
| * Start a new conversation - clears history and files |
| */ |
| function startNewConversation() { |
| if (confirm("Start a new conversation? This will clear all uploaded files and conversation history.")) { |
| uploadedFiles = []; |
| conversationHistory = []; |
| conversationStartTime = Date.now(); |
| |
| // Clear UI |
| chatBox.innerHTML = ` |
| <div class="message assistant"> |
| 🔄 <b>New conversation started!</b> Upload your files and ask questions about them. |
| </div> |
| `; |
| |
| updateFileDisplay(); |
| conversationInfo.style.display = "none"; |
| promptInput.value = ""; |
| |
| showSuccess("Started new conversation!"); |
| } |
| } |
| |
| /** |
| * Update file display pills |
| */ |
| function updateFileDisplay() { |
| fileListDisplay.innerHTML = ""; |
| |
| if (uploadedFiles.length > 0) { |
| uploadedFiles.forEach((file, index) => { |
| const pill = document.createElement("span"); |
| pill.className = "file-pill"; |
| pill.innerHTML = ` |
| ${file.name} |
| <button class="file-remove" onclick="removeFile(${index})" title="Remove file">×</button> |
| `; |
| fileListDisplay.appendChild(pill); |
| }); |
| } |
| } |
| |
| /** |
| * Remove a specific file |
| */ |
| window.removeFile = function(index) { |
| if (confirm(`Remove "${uploadedFiles[index].name}"?`)) { |
| uploadedFiles.splice(index, 1); |
| updateFileDisplay(); |
| |
| if (uploadedFiles.length === 0) { |
| conversationInfo.style.display = "none"; |
| showSuccess("All files removed"); |
| } else { |
| showSuccess(`Removed file. ${uploadedFiles.length} file(s) remaining`); |
| } |
| } |
| }; |
| |
| /** |
| * 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 a success message in the chat |
| */ |
| function showSuccess(text) { |
| const messageEl = document.createElement("div"); |
| messageEl.className = "message success"; |
| messageEl.textContent = text; |
| |
| chatBox.appendChild(messageEl); |
| scrollToBottom(); |
| |
| // Auto-remove success message after 3 seconds |
| setTimeout(() => { |
| if (messageEl.parentNode) { |
| messageEl.remove(); |
| } |
| }, 3000); |
| } |
| |
| /** |
| * 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; |
| } |
| |
| /** |
| * Toggle analysis details visibility |
| */ |
| function toggleAnalysisDetails() { |
| analysisDetailsVisible = !analysisDetailsVisible; |
| updateDetailsVisibility(); |
| } |
| |
| /** |
| * Update analysis details visibility |
| */ |
| function updateDetailsVisibility() { |
| if (analysisDetailsVisible) { |
| debugBox.style.display = 'block'; |
| toggleDetailsBtn.innerHTML = '👁️ Hide Analysis Details'; |
| } else { |
| debugBox.style.display = 'none'; |
| toggleDetailsBtn.innerHTML = '👁️ Show Analysis Details'; |
| } |
| } |
| |
| /** |
| * Export conversation to PDF |
| */ |
| function exportToPDF() { |
| if (conversationHistory.length === 0) { |
| displayError("No conversation to export."); |
| return; |
| } |
| |
| try { |
| // Create HTML content for PDF |
| const currentDate = new Date().toLocaleDateString(); |
| const timestamp = new Date().toLocaleTimeString(); |
| let htmlContent = ` |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Carver Excel Analyst - Export</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
| line-height: 1.7; |
| color: #1a202c; |
| background-color: #f7fafc; |
| font-size: 14px; |
| } |
| |
| .page { |
| background: white; |
| max-width: 900px; |
| margin: 20px auto; |
| padding: 60px; |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| min-height: 800px; |
| } |
| |
| |
| .header { |
| text-align: center; |
| margin-bottom: 50px; |
| padding-bottom: 30px; |
| border-bottom: 3px solid #e2e8f0; |
| position: relative; |
| } |
| |
| .header::after { |
| content: ''; |
| position: absolute; |
| bottom: -3px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 80px; |
| height: 3px; |
| background: linear-gradient(135deg, #3182ce, #63b3ed); |
| } |
| |
| .header h1 { |
| color: #2d3748; |
| font-size: 2.5rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| letter-spacing: -0.025em; |
| } |
| |
| .header .subtitle { |
| color: #718096; |
| font-size: 1.1rem; |
| font-weight: 400; |
| margin-bottom: 15px; |
| } |
| |
| .header .metadata { |
| display: flex; |
| justify-content: center; |
| gap: 30px; |
| margin-top: 20px; |
| font-size: 0.9rem; |
| color: #a0aec0; |
| } |
| |
| .metadata-item { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| |
| .files-section { |
| background: linear-gradient(135deg, #f7fafc, #edf2f7); |
| border: 2px solid #e2e8f0; |
| border-radius: 12px; |
| padding: 25px; |
| margin-bottom: 40px; |
| } |
| |
| .files-section h2 { |
| color: #2d3748; |
| font-size: 1.4rem; |
| font-weight: 600; |
| margin-bottom: 20px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .files-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 15px; |
| margin-top: 15px; |
| } |
| |
| .file-card { |
| background: white; |
| padding: 15px 20px; |
| border-radius: 8px; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| transition: all 0.2s ease; |
| } |
| |
| .file-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
| |
| .file-name { |
| font-weight: 600; |
| color: #2d3748; |
| margin-bottom: 5px; |
| } |
| |
| .file-size { |
| color: #718096; |
| font-size: 0.85rem; |
| } |
| |
| |
| .conversation-section { |
| margin-bottom: 40px; |
| } |
| |
| .conversation-entry { |
| background: white; |
| border-radius: 12px; |
| margin-bottom: 30px; |
| overflow: hidden; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| border: 1px solid #e2e8f0; |
| } |
| |
| .user-entry { |
| border-left: 4px solid #3182ce; |
| } |
| |
| .assistant-entry { |
| border-left: 4px solid #38a169; |
| } |
| |
| .entry-header { |
| padding: 20px 25px 15px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| background: linear-gradient(135deg, #f7fafc, #edf2f7); |
| } |
| |
| .user-entry .entry-header { |
| background: linear-gradient(135deg, #ebf8ff, #bee3f8); |
| } |
| |
| .assistant-entry .entry-header { |
| background: linear-gradient(135deg, #f0fff4, #c6f6d5); |
| } |
| |
| .role-icon { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 600; |
| font-size: 0.8rem; |
| color: white; |
| } |
| |
| .user-entry .role-icon { |
| background: #3182ce; |
| } |
| |
| .assistant-entry .role-icon { |
| background: #38a169; |
| } |
| |
| .role-text { |
| font-weight: 600; |
| font-size: 1.1rem; |
| color: #2d3748; |
| } |
| |
| .timestamp { |
| margin-left: auto; |
| color: #718096; |
| font-size: 0.85rem; |
| } |
| |
| .entry-content { |
| padding: 25px; |
| background: white; |
| } |
| |
| |
| .message-content { |
| font-size: 0.95rem; |
| line-height: 1.8; |
| } |
| |
| .user-entry .message-content { |
| color: #2d3748; |
| } |
| |
| .assistant-entry .message-content { |
| color: #2d3748; |
| } |
| |
| |
| .message-content h1, .message-content h2, .message-content h3 { |
| color: #2d3748; |
| margin-top: 1.5em; |
| margin-bottom: 0.8em; |
| font-weight: 600; |
| } |
| |
| .message-content h1 { |
| font-size: 1.4rem; |
| border-bottom: 2px solid #e2e8f0; |
| padding-bottom: 8px; |
| } |
| |
| .message-content h2 { |
| font-size: 1.25rem; |
| color: #3182ce; |
| } |
| |
| .message-content h3 { |
| font-size: 1.1rem; |
| color: #38a169; |
| } |
| |
| .message-content strong { |
| font-weight: 600; |
| color: #2d3748; |
| } |
| |
| .message-content table { |
| width: 100%; |
| border-collapse: collapse; |
| margin: 20px 0; |
| font-size: 0.9rem; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| |
| .message-content th { |
| background: linear-gradient(135deg, #3182ce, #63b3ed); |
| color: white; |
| padding: 15px 12px; |
| text-align: left; |
| font-weight: 600; |
| } |
| |
| .message-content td { |
| padding: 12px; |
| border-bottom: 1px solid #e2e8f0; |
| background: white; |
| } |
| |
| .message-content tr:nth-child(even) td { |
| background: #f7fafc; |
| } |
| |
| .message-content tr:hover td { |
| background: #edf2f7; |
| } |
| |
| .message-content code { |
| background: #f7fafc; |
| padding: 3px 8px; |
| border-radius: 4px; |
| font-family: 'Monaco', 'Consolas', 'Courier New', monospace; |
| font-size: 0.85rem; |
| color: #d53f8c; |
| border: 1px solid #e2e8f0; |
| } |
| |
| .message-content pre { |
| background: #1a202c; |
| color: #f7fafc; |
| padding: 20px; |
| border-radius: 8px; |
| overflow-x: auto; |
| margin: 20px 0; |
| border: 1px solid #2d3748; |
| } |
| |
| .message-content pre code { |
| background: transparent; |
| padding: 0; |
| color: #f7fafc; |
| border: none; |
| font-size: 0.85rem; |
| } |
| |
| .message-content blockquote { |
| border-left: 4px solid #3182ce; |
| padding-left: 20px; |
| margin: 20px 0; |
| background: #f7fafc; |
| padding: 15px 20px; |
| border-radius: 0 8px 8px 0; |
| color: #4a5568; |
| } |
| |
| |
| .audit-block { |
| background: linear-gradient(135deg, #fed7d7, #feb2b2); |
| border: 2px solid #fc8181; |
| border-radius: 8px; |
| padding: 20px; |
| margin-top: 25px; |
| } |
| |
| .audit-block h3 { |
| color: #c53030; |
| margin-top: 0; |
| margin-bottom: 15px; |
| font-weight: 600; |
| } |
| |
| .audit-block ul { |
| margin-left: 20px; |
| } |
| |
| .audit-block li { |
| margin-bottom: 5px; |
| } |
| |
| |
| @media print { |
| body { |
| background: white; |
| } |
| |
| .page { |
| margin: 0; |
| padding: 40px; |
| box-shadow: none; |
| border-radius: 0; |
| } |
| |
| .conversation-entry { |
| break-inside: avoid; |
| page-break-inside: avoid; |
| } |
| } |
| |
| |
| .page-break { |
| page-break-before: always; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page"> |
| <div class="header"> |
| <h1>🧠 Carver Excel Analyst</h1> |
| <div class="subtitle">Professional Data Analysis Report</div> |
| <div class="metadata"> |
| <div class="metadata-item"> |
| <span>📅</span> |
| <span>${currentDate}</span> |
| </div> |
| <div class="metadata-item"> |
| <span>🕒</span> |
| <span>${timestamp}</span> |
| </div> |
| <div class="metadata-item"> |
| <span>💬</span> |
| <span>${conversationHistory.length} messages</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="files-section"> |
| <h2>📎 Analyzed Files</h2> |
| <div class="files-grid"> |
| `; |
| |
| uploadedFiles.forEach(file => { |
| htmlContent += ` |
| <div class="file-card"> |
| <div class="file-name">${file.name}</div> |
| <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div> |
| </div> |
| `; |
| }); |
| |
| htmlContent += ` |
| </div> |
| </div> |
| |
| <div class="conversation-section"> |
| <h2>💬 Conversation Analysis</h2> |
| `; |
| |
| conversationHistory.forEach((message, index) => { |
| const roleClass = message.role === 'user' ? 'user-entry' : 'assistant-entry'; |
| const roleIcon = message.role === 'user' ? '👤' : '🤖'; |
| const roleText = message.role === 'user' ? 'User' : 'Carver Analyst'; |
| const messageTime = new Date(Date.now() - (conversationHistory.length - index) * 1000).toLocaleTimeString(); |
| |
| htmlContent += ` |
| <div class="conversation-entry ${roleClass}"> |
| <div class="entry-header"> |
| <div class="role-icon">${roleIcon}</div> |
| <div class="role-text">${roleText}</div> |
| <div class="timestamp">${messageTime}</div> |
| </div> |
| <div class="entry-content"> |
| <div class="message-content"> |
| ${marked.parse(message.content)} |
| </div> |
| </div> |
| </div> |
| `; |
| }); |
| |
| htmlContent += ` |
| </div> |
| </div> |
| </body> |
| </html> |
| `; |
| |
| // Create and trigger download |
| const blob = new Blob([htmlContent], { type: 'text/html' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = `carver-analyst-report-${new Date().toISOString().split('T')[0]}.html`; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| |
| showSuccess("✅ Professional report exported! Open the HTML file and print as PDF."); |
| |
| // Show instructions for PDF conversion |
| setTimeout(() => { |
| showSuccess("💡 To create PDF: Open the file → Print (Ctrl/Cmd+P) → Save as PDF"); |
| }, 2000); |
| |
| } catch (error) { |
| console.error("Export error:", error); |
| displayError(`Export failed: ${error.message}`); |
| } |
| } |
| |
| </script> |
| </body> |
| </html> |
