| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SOCAR Historical Documents AI System</title> |
|
|
| |
| <link rel="icon" type="image/x-icon" href="/static/favicon/favicon.ico"> |
| <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png"> |
| <link rel="icon" type="image/png" sizes="192x192" href="/static/favicon/icon-192.png"> |
| <link rel="icon" type="image/png" sizes="512x512" href="/static/favicon/icon-512.png"> |
|
|
| |
| <link rel="stylesheet" href="/static/css/style.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <div class="logo"> |
| <h1>SOCAR AI Document System</h1> |
| <p class="subtitle">Historical Oil & Gas Documents Processing</p> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="hero"> |
| <h2>Advanced Document Intelligence Platform</h2> |
| <p>Powered by Vision-Language Models and Retrieval-Augmented Generation</p> |
| </div> |
|
|
| <div class="services"> |
| <div class="service-card ocr-card"> |
| <div class="icon">📄</div> |
| <h3>OCR Endpoint</h3> |
| <p>Extract text from historical PDFs using Llama-4-Maverick-17B Vision model</p> |
| <ul class="features"> |
| <li>Multi-language support (Azerbaijani, Russian, English)</li> |
| <li>Handwriting recognition</li> |
| <li>Image detection and referencing</li> |
| <li>88.3% Character Success Rate</li> |
| </ul> |
| <button onclick="showOCRDemo()" class="btn btn-primary">Try OCR Demo</button> |
| <a href="/docs#/default/ocr_endpoint_ocr_post" class="btn btn-secondary" target="_blank">API Documentation</a> |
| </div> |
|
|
| <div class="service-card llm-card"> |
| <div class="icon">🤖</div> |
| <h3>LLM Endpoint</h3> |
| <p>Ask questions about historical documents with RAG-powered chatbot</p> |
| <ul class="features"> |
| <li>Retrieval-Augmented Generation (RAG)</li> |
| <li>1,128 vectors from 28 documents</li> |
| <li>Citation-focused responses</li> |
| <li>Top-3 document retrieval</li> |
| </ul> |
| <button onclick="showLLMDemo()" class="btn btn-primary">Try LLM Demo</button> |
| <a href="/docs#/default/llm_endpoint_llm_post" class="btn btn-secondary" target="_blank">API Documentation</a> |
| </div> |
| </div> |
|
|
| <div id="demoSection" class="demo-section" style="display: none;"> |
| <div class="demo-container"> |
| <h3 id="demoTitle"></h3> |
| <button onclick="closeDemo()" class="close-btn">✕</button> |
|
|
| <div id="ocrDemo" style="display: none;"> |
| <div class="upload-area"> |
| <input type="file" id="ocrFile" accept=".pdf" onchange="handleOCRUpload()"> |
| <label for="ocrFile" class="upload-label"> |
| <span class="upload-icon">📁</span> |
| <span>Click to upload PDF or drag and drop</span> |
| <span class="upload-hint">Maximum file size: 10MB</span> |
| </label> |
| </div> |
| <div id="ocrResult" class="result-area"></div> |
| </div> |
|
|
| <div id="llmDemo" style="display: none;"> |
| <div class="chat-container"> |
| <div id="chatMessages" class="chat-messages"></div> |
| <div class="chat-input-container"> |
| <textarea id="questionInput" placeholder="Ask a question about historical documents..." rows="3"></textarea> |
| <button onclick="askQuestion()" class="btn btn-primary">Send</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tech-stack"> |
| <h3>Technical Stack</h3> |
| <div class="tech-grid"> |
| <div class="tech-item"> |
| <strong>OCR Model</strong> |
| <span>Llama-4-Maverick-17B</span> |
| </div> |
| <div class="tech-item"> |
| <strong>Embedding Model</strong> |
| <span>BAAI/bge-large-en-v1.5</span> |
| </div> |
| <div class="tech-item"> |
| <strong>Vector Database</strong> |
| <span>Pinecone (1024 dims)</span> |
| </div> |
| <div class="tech-item"> |
| <strong>LLM Model</strong> |
| <span>Llama-4-Maverick-17B</span> |
| </div> |
| <div class="tech-item"> |
| <strong>Framework</strong> |
| <span>FastAPI + Docker</span> |
| </div> |
| <div class="tech-item"> |
| <strong>Documents</strong> |
| <span>28 PDFs, 1,128 vectors</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stats"> |
| <div class="stat-card"> |
| <div class="stat-number">88.3%</div> |
| <div class="stat-label">OCR Accuracy (CSR)</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number">1,128</div> |
| <div class="stat-label">Total Vectors</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number">28</div> |
| <div class="stat-label">Documents Indexed</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number">~2.6s</div> |
| <div class="stat-label">Avg Response Time</div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer> |
| <p>Built for SOCAR Hackathon | Powered by Azure OpenAI & Pinecone</p> |
| </footer> |
| </div> |
|
|
| <script src="/static/js/app.js"></script> |
| </body> |
| </html> |
|
|
