Spaces:
Running
Running
Download index.html from fascorp/ai-document-analysis: direct link, hf CLI and curl.
- Browser
- Download file 55.6 kB
-
https://huggingface.co/spaces/fascorp/ai-document-analysis/resolve/main/index.html
- Command line
-
hf download hf://spaces/fascorp/ai-document-analysis/index.html
-
curl -L -o index.html https://huggingface.co/spaces/fascorp/ai-document-analysis/resolve/main/index.html
55.6 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Litigation Defense Data Analysis & Management Tool</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #3b82f6; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #10b981; | |
| background-color: #f0f9ff; | |
| } | |
| .document-card { | |
| transition: all 0.2s ease; | |
| } | |
| .document-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: absolute; | |
| left: -100%; | |
| z-index: 50; | |
| width: 80%; | |
| } | |
| .sidebar.open { | |
| left: 0; | |
| } | |
| } | |
| .transaction-category { | |
| position: relative; | |
| } | |
| .transaction-category select { | |
| appearance: none; | |
| } | |
| .transaction-category::after { | |
| content: "▼"; | |
| position: absolute; | |
| right: 0.75rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| pointer-events: none; | |
| color: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold text-blue-600">Defense Analytics</h1> | |
| <button id="closeSidebar" class="md:hidden text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Case Details</h2> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Client</label> | |
| <input type="text" value="Maria & Fast Court" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" disabled> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Opposing Party</label> | |
| <input type="text" value="Trident" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" disabled> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">AI Configuration</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">LLM Provider</label> | |
| <select class="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"> | |
| <option>OpenAI (GPT-4)</option> | |
| <option>Gemini</option> | |
| <option>Grok</option> | |
| <option>Claude</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">API Key</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input type="password" id="apiKeyInput" placeholder="Enter API key" class="flex-1 rounded-l-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <button id="saveApiKey" class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Categories</h2> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Hardware</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Licensing</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Vendors</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Services</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Data purchases</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Azure tenant</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Data center</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded"> | |
| <span class="text-sm">Other Sources</span> | |
| <button class="text-red-400 hover:text-red-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex"> | |
| <input type="text" placeholder="New category" class="flex-1 rounded-l-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <button class="bg-blue-600 text-white px-3 rounded-r-md hover:bg-blue-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="openSidebar" class="mr-4 text-gray-500 md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold text-gray-900">Document Analysis Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-green-600 text-white px-4 py-1 rounded-md text-sm font-medium hover:bg-green-700 flex items-center"> | |
| <i class="fas fa-file-excel mr-2"></i> Export Excel | |
| </button> | |
| <button class="bg-blue-600 text-white px-4 py-1 rounded-md text-sm font-medium hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> Export PDF | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <a href="#" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Documents</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Transactions</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Analysis</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Reports</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Document upload and list --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Document upload --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Upload Documents</h3> | |
| <div id="dropzone" class="dropzone p-8 text-center cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-2"></i> | |
| <p class="text-sm text-gray-600 mb-1">Drag & drop files here or click to browse</p> | |
| <p class="text-xs text-gray-500">Supported formats: PDF, Word, Excel, Text, Markdown</p> | |
| </div> | |
| <input type="file" id="fileInput" class="hidden" multiple> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <input type="checkbox" id="tridentFilter" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <label for="tridentFilter" class="text-sm font-medium text-gray-700">Show only Trident-related</label> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search documents..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document list --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-700">Uploaded Documents (12)</h3> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sort-alpha-down"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200 max-h-96 overflow-y-auto"> | |
| <!-- Document item --> | |
| <div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-file-pdf text-red-500 text-2xl"></i> | |
| </div> | |
| <div class="ml-3 flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Bank_Statement_2023_Q1.pdf</p> | |
| <p class="text-xs text-gray-500">Processed: 45 transactions</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Trident</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Licensing</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Services</span> | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Document item --> | |
| <div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-file-excel text-green-500 text-2xl"></i> | |
| </div> | |
| <div class="ml-3 flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Vendor_Payments_Q2_2023.xlsx</p> | |
| <p class="text-xs text-gray-500">Processed: 28 transactions</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Vendors</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">Hardware</span> | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Document item --> | |
| <div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-file-word text-blue-500 text-2xl"></i> | |
| </div> | |
| <div class="ml-3 flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Legal_Complaint_Trident.docx</p> | |
| <p class="text-xs text-gray-500">Processed: Summary available</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Trident</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Legal</span> | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Document item --> | |
| <div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-file-alt text-gray-500 text-2xl"></i> | |
| </div> | |
| <div class="ml-3 flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Service_Agreement.txt</p> | |
| <p class="text-xs text-gray-500">Processed: 5 key points</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Services</span> | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transaction summary and chat --> | |
| <div class="space-y-6"> | |
| <!-- Transaction summary --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Transaction Summary</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-xs font-medium text-blue-800 uppercase">Total Credits</p> | |
| <p class="text-xl font-semibold text-blue-900">$42,750.00</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="text-xs font-medium text-red-800 uppercase">Total Debits</p> | |
| <p class="text-xl font-semibold text-red-900">$38,420.00</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">By Category</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Hardware</span> | |
| <span class="text-sm font-medium">$12,450.00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Licensing</span> | |
| <span class="text-sm font-medium">$8,750.00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Vendors</span> | |
| <span class="text-sm font-medium">$6,320.00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Services</span> | |
| <span class="text-sm font-medium">$9,850.00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Trident-related</span> | |
| <span class="text-sm font-medium">$15,200.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat interface --> | |
| <div class="bg-white rounded-lg shadow flex flex-col" style="height: 400px;"> | |
| <div class="px-4 py-3 bg-gray-50 border-b border-gray-200"> | |
| <h3 class="text-sm font-medium text-gray-700">Document Analysis Chat</h3> | |
| </div> | |
| <div id="chatMessages" class="flex-1 p-4 overflow-y-auto space-y-4"> | |
| <!-- AI message --> | |
| <div class="chat-message"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-1"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-gray-100 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-gray-800">Hello! I've analyzed your uploaded documents. How can I assist with your litigation defense preparation today?</p> | |
| </div> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span>AI Assistant</span> | |
| <span class="mx-1">•</span> | |
| <span>Just now</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User message --> | |
| <div class="chat-message ml-auto"> | |
| <div class="flex items-start justify-end"> | |
| <div class="ml-3"> | |
| <div class="bg-blue-600 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-white">Show me all transactions related to Trident in Q1 2023</p> | |
| </div> | |
| <div class="mt-1 flex items-center justify-end text-xs text-gray-500"> | |
| <span>You</span> | |
| <span class="mx-1">•</span> | |
| <span>2 min ago</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 bg-blue-600 rounded-full p-1"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI response --> | |
| <div class="chat-message"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-1"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-gray-100 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-gray-800">I found 14 transactions related to Trident in Q1 2023 totaling $15,200.00. Here's a summary:</p> | |
| <ul class="mt-2 list-disc list-inside text-sm"> | |
| <li>8 licensing payments ($9,600)</li> | |
| <li>4 service fees ($4,200)</li> | |
| <li>2 hardware purchases ($1,400)</li> | |
| </ul> | |
| <button class="mt-2 text-xs text-blue-600 hover:text-blue-800">View detailed breakdown</button> | |
| </div> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span>AI Assistant</span> | |
| <span class="mx-1">•</span> | |
| <span>1 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask about your documents..." class="block w-full rounded-md border-gray-300 shadow-sm pl-4 pr-12 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transactions table (hidden by default, shown when Transactions tab is selected) --> | |
| <div class="mt-6 bg-white shadow rounded-lg overflow-hidden hidden"> | |
| <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-700">Processed Transactions (73)</h3> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search transactions..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trident</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/15/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Software License Renewal</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,200.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Debit</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="transaction-category"> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <option>Licensing</option> | |
| <option>Hardware</option> | |
| <option>Services</option> | |
| <option>Vendors</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bank_Statement.pdf</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/10/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Consulting Services</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,500.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Credit</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="transaction-category"> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <option selected>Services</option> | |
| <option>Hardware</option> | |
| <option>Licensing</option> | |
| <option>Vendors</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Income_Report.xlsx</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/05/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Server Hardware</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$4,800.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Debit</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="transaction-category"> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <option selected>Hardware</option> | |
| <option>Licensing</option> | |
| <option>Services</option> | |
| <option>Vendors</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Expenses_Q1.pdf</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/01/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Trident Project Payment</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$5,000.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Credit</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="transaction-category"> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> | |
| <option>Licensing</option> | |
| <option selected>Services</option> | |
| <option>Hardware</option> | |
| <option>Vendors</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Client_Payments.xlsx</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">73</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">8</a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for document processing --> | |
| <div id="processingModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Processing Documents</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-pdf text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Bank_Statement_2023_Q1.pdf</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-excel text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Vendor_Payments_Q2_2023.xlsx</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-word text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Legal_Complaint_Trident.docx</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 rounded-lg p-3"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| Processing may take a few minutes depending on document size and complexity. You can continue working while this completes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // API Key save functionality | |
| document.getElementById('saveApiKey').addEventListener('click', function() { | |
| const apiKey = document.getElementById('apiKeyInput').value; | |
| if (apiKey) { | |
| localStorage.setItem('apiKey', apiKey); | |
| alert('API key saved successfully!'); | |
| } else { | |
| alert('Please enter an API key'); | |
| } | |
| }); | |
| // Load saved API key if exists | |
| const savedApiKey = localStorage.getItem('apiKey'); | |
| if (savedApiKey) { | |
| document.querySelector('#sidebar input[type="password"]').value = savedApiKey; | |
| } | |
| // Sidebar toggle for mobile | |
| document.getElementById('openSidebar').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.add('open'); | |
| }); | |
| document.getElementById('closeSidebar').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.remove('open'); | |
| }); | |
| // File upload handling | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const processingModal = document.getElementById('processingModal'); | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| const apiKey = localStorage.getItem('apiKey'); | |
| if (!apiKey) { | |
| alert('Please save your API key first'); | |
| return; | |
| } | |
| showProcessingModal(); | |
| // Create FormData and append files | |
| const formData = new FormData(); | |
| for (let i = 0; i < this.files.length; i++) { | |
| formData.append('files', this.files[i]); | |
| } | |
| // Example API call (replace with your actual endpoint) | |
| fetch('https://your-api-endpoint.com/upload', { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${apiKey}` | |
| }, | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Handle successful upload | |
| console.log('Upload successful', data); | |
| // Update UI with processed data | |
| }) | |
| .catch(error => { | |
| console.error('Upload failed', error); | |
| // Show error message in chat instead of alert | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const errorMessage = ` | |
| <div class="chat-message"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-red-100 rounded-full p-1"> | |
| <i class="fas fa-robot text-red-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-red-50 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-red-800">Document processing failed. Please check your API key and try again.</p> | |
| <p class="text-xs text-red-600 mt-1">Error: ${error.message || 'Network or server error'}</p> | |
| </div> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span>AI Assistant</span> | |
| <span class="mx-1">•</span> | |
| <span>Just now</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.insertAdjacentHTML('beforeend', errorMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }) | |
| .finally(() => { | |
| processingModal.classList.add('hidden'); | |
| }); | |
| } | |
| }); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('active'); | |
| } | |
| dropzone.addEventListener('drop', function(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| fileInput.files = files; | |
| if (files.length > 0) { | |
| showProcessingModal(); | |
| } | |
| }); | |
| function showProcessingModal() { | |
| processingModal.classList.remove('hidden'); | |
| } | |
| document.getElementById('closeModal').addEventListener('click', function() { | |
| processingModal.classList.add('hidden'); | |
| }); | |
| // Simulate processing completion after 5 seconds | |
| setTimeout(() => { | |
| const progressBars = document.querySelectorAll('.bg-gray-200 > div'); | |
| progressBars.forEach(bar => { | |
| bar.style.width = '100%'; | |
| }); | |
| setTimeout(() => { | |
| processingModal.classList.add('hidden'); | |
| // Show success message in chat | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const successMessage = ` | |
| <div class="chat-message"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-1"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-gray-100 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-gray-800">I've finished processing your documents. I found 73 transactions across all files. Would you like me to generate a summary report?</p> | |
| <button class="mt-2 text-xs text-blue-600 hover:text-blue-800">Generate Summary Report</button> | |
| </div> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span>AI Assistant</span> | |
| <span class="mx-1">•</span> | |
| <span>Just now</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.insertAdjacentHTML('beforeend', successMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000); | |
| }, 3000); | |
| // Check API key before upload | |
| function validateApiKey() { | |
| const apiKey = localStorage.getItem('apiKey'); | |
| if (!apiKey) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const warningMessage = ` | |
| <div class="chat-message"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-full p-1"> | |
| <i class="fas fa-robot text-yellow-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-yellow-50 rounded-lg py-2 px-4"> | |
| <p class="text-sm text-yellow-800">Please save your API key in the sidebar before uploading documents.</p> | |
| </div> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span>AI Assistant</span> | |
| <span class="mx-1">•</span> | |
| <span>Just now</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.insertAdjacentHTML('beforeend', warningMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return false; | |
| } | |
| return true; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fascorp/ai-document-analysis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |