|
|
<!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> |
