File size: 6,681 Bytes
3b014b5
 
 
 
 
 
470cbeb
 
67b2647
 
 
 
470cbeb
 
67b2647
3b014b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67b2647
3b014b5
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!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>

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

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