Hugging Face's logo

Spaces:
gmossy
/
docling-rag-pipeline-wizard
Running

App Files Community
gmossy commited on
Commit
0fd8c45
·
verified ·
1 Parent(s): ff1e5e4

i need a docling rag ingestion pipeline

Browse files
Files changed (7) hide show
  1. README.md +7 -4
  2. components/footer.js +96 -0
  3. components/navbar.js +87 -0
  4. configure.html +229 -0
  5. index.html +107 -19
  6. script.js +63 -0
  7. style.css +29 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Docling Rag Pipeline Wizard
3
- emoji: 📚
4
  colorFrom: green
5
- colorTo: green
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Docling Rag Pipeline Wizard 🧙‍♂️
 
3
  colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #111827;
8
+ color: rgba(255, 255, 255, 0.7);
9
+ padding: 2rem;
10
+ text-align: center;
11
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
12
+ margin-top: auto;
13
+ }
14
+ .footer-content {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ display: grid;
18
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
19
+ gap: 2rem;
20
+ text-align: left;
21
+ }
22
+ .footer-section h3 {
23
+ color: white;
24
+ margin-bottom: 1rem;
25
+ font-size: 1.125rem;
26
+ }
27
+ .footer-links {
28
+ list-style: none;
29
+ padding: 0;
30
+ margin: 0;
31
+ }
32
+ .footer-links li {
33
+ margin-bottom: 0.5rem;
34
+ }
35
+ .footer-links a {
36
+ color: rgba(255, 255, 255, 0.7);
37
+ text-decoration: none;
38
+ transition: color 0.3s;
39
+ display: flex;
40
+ align-items: center;
41
+ gap: 0.5rem;
42
+ }
43
+ .footer-links a:hover {
44
+ color: white;
45
+ }
46
+ .footer-links i {
47
+ width: 16px;
48
+ height: 16px;
49
+ }
50
+ .copyright {
51
+ margin-top: 2rem;
52
+ padding-top: 1.5rem;
53
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
54
+ font-size: 0.875rem;
55
+ }
56
+ @media (max-width: 768px) {
57
+ .footer-content {
58
+ grid-template-columns: 1fr;
59
+ }
60
+ }
61
+ </style>
62
+ <footer>
63
+ <div class="footer-content">
64
+ <div class="footer-section">
65
+ <h3>Product</h3>
66
+ <ul class="footer-links">
67
+ <li><a href="/"><i data-feather="home"></i> Home</a></li>
68
+ <li><a href="/features.html"><i data-feather="zap"></i> Features</a></li>
69
+ <li><a href="/pricing.html"><i data-feather="dollar-sign"></i> Pricing</a></li>
70
+ </ul>
71
+ </div>
72
+ <div class="footer-section">
73
+ <h3>Resources</h3>
74
+ <ul class="footer-links">
75
+ <li><a href="/docs.html"><i data-feather="book"></i> Documentation</a></li>
76
+ <li><a href="/tutorials.html"><i data-feather="video"></i> Tutorials</a></li>
77
+ <li><a href="/blog.html"><i data-feather="edit-2"></i> Blog</a></li>
78
+ </ul>
79
+ </div>
80
+ <div class="footer-section">
81
+ <h3>Company</h3>
82
+ <ul class="footer-links">
83
+ <li><a href="/about.html"><i data-feather="info"></i> About</a></li>
84
+ <li><a href="/contact.html"><i data-feather="mail"></i> Contact</a></li>
85
+ <li><a href="/careers.html"><i data-feather="users"></i> Careers</a></li>
86
+ </ul>
87
+ </div>
88
+ </div>
89
+ <div class="copyright">
90
+ &copy; ${new Date().getFullYear()} DoclingRag. All rights reserved.
91
+ </div>
92
+ </footer>
93
+ `;
94
+ }
95
+ }
96
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,87 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
8
+ padding: 1rem 2rem;
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
13
+ }
14
+ .logo {
15
+ color: white;
16
+ font-weight: bold;
17
+ font-size: 1.5rem;
18
+ background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
19
+ -webkit-background-clip: text;
20
+ -webkit-text-fill-color: transparent;
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 0.5rem;
24
+ }
25
+ .nav-links {
26
+ display: flex;
27
+ gap: 1.5rem;
28
+ list-style: none;
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+ .nav-link {
33
+ color: rgba(255, 255, 255, 0.8);
34
+ text-decoration: none;
35
+ transition: all 0.3s ease;
36
+ font-weight: 500;
37
+ display: flex;
38
+ align-items: center;
39
+ gap: 0.5rem;
40
+ padding: 0.5rem 1rem;
41
+ border-radius: 0.375rem;
42
+ }
43
+ .nav-link:hover {
44
+ color: white;
45
+ background: rgba(255, 255, 255, 0.1);
46
+ }
47
+ .nav-link.active {
48
+ color: white;
49
+ background: rgba(99, 102, 241, 0.2);
50
+ }
51
+ .nav-link i {
52
+ width: 18px;
53
+ height: 18px;
54
+ }
55
+ @media (max-width: 768px) {
56
+ nav {
57
+ flex-direction: column;
58
+ padding: 1rem;
59
+ }
60
+ .nav-links {
61
+ margin-top: 1rem;
62
+ width: 100%;
63
+ justify-content: space-around;
64
+ }
65
+ .nav-link {
66
+ padding: 0.5rem;
67
+ font-size: 0.875rem;
68
+ }
69
+ }
70
+ </style>
71
+ <nav>
72
+ <a href="/" class="logo">
73
+ <i data-feather="book-open"></i>
74
+ DoclingRag
75
+ </a>
76
+ <ul class="nav-links">
77
+ <li><a href="/" class="nav-link active"><i data-feather="home"></i> Home</a></li>
78
+ <li><a href="/configure.html" class="nav-link"><i data-feather="settings"></i> Configure</a></li>
79
+ <li><a href="/vector.html" class="nav-link"><i data-feather="database"></i> Vector Store</a></li>
80
+ <li><a href="/analytics.html" class="nav-link"><i data-feather="bar-chart-2"></i> Analytics</a></li>
81
+ <li><a href="/settings.html" class="nav-link"><i data-feather="user"></i> Account</a></li>
82
+ </ul>
83
+ </nav>
84
+ `;
85
+ }
86
+ }
87
+ customElements.define('custom-navbar', CustomNavbar);
configure.html ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Configure Pipeline | DoclingRag</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="flex-grow container mx-auto px-4 py-8">
16
+ <div class="max-w-5xl mx-auto bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl">
17
+ <div class="mb-8">
18
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">Pipeline Configuration</h1>
19
+ <p class="text-gray-400">Customize your document processing workflow</p>
20
+ </div>
21
+
22
+ <div class="grid md:grid-cols-3 gap-6">
23
+ <div class="md:col-span-2">
24
+ <div class="bg-gray-700 bg-opacity-50 rounded-lg p-6 mb-6">
25
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
26
+ <i data-feather="layers" class="w-5 h-5 mr-2"></i>
27
+ Processing Steps
28
+ </h2>
29
+
30
+ <div class="space-y-4">
31
+ <div class="flex items-start bg-gray-600 bg-opacity-50 p-4 rounded-lg">
32
+ <div class="flex-shrink-0 mt-1 mr-3">
33
+ <div class="h-4 w-4 rounded-full bg-indigo-500"></div>
34
+ </div>
35
+ <div class="flex-grow">
36
+ <div class="flex justify-between items-center">
37
+ <h3 class="font-medium">OCR Processing</h3>
38
+ <label class="relative inline-flex items-center cursor-pointer">
39
+ <input type="checkbox" checked class="sr-only peer">
40
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
41
+ </label>
42
+ </div>
43
+ <p class="text-sm text-gray-400 mt-1">Enable optical character recognition for image-based documents</p>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="flex items-start bg-gray-600 bg-opacity-50 p-4 rounded-lg">
48
+ <div class="flex-shrink-0 mt-1 mr-3">
49
+ <div class="h-4 w-4 rounded-full bg-purple-500"></div>
50
+ </div>
51
+ <div class="flex-grow">
52
+ <div class="flex justify-between items-center">
53
+ <h3 class="font-medium">Text Extraction</h3>
54
+ <label class="relative inline-flex items-center cursor-pointer">
55
+ <input type="checkbox" checked class="sr-only peer">
56
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
57
+ </label>
58
+ </div>
59
+ <p class="text-sm text-gray-400 mt-1">Extract and clean text from documents</p>
60
+ <div class="mt-2 space-y-2">
61
+ <div class="flex items-center">
62
+ <input type="radio" id="extract-full" name="extraction-mode" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600">
63
+ <label for="extract-full" class="ml-2 block text-sm text-gray-300">Full text extraction</label>
64
+ </div>
65
+ <div class="flex items-center">
66
+ <input type="radio" id="extract-key" name="extraction-mode" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600">
67
+ <label for="extract-key" class="ml-2 block text-sm text-gray-300">Key sections only</label>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <div class="flex items-start bg-gray-600 bg-opacity-50 p-4 rounded-lg">
74
+ <div class="flex-shrink-0 mt-1 mr-3">
75
+ <div class="h-4 w-4 rounded-full bg-blue-500"></div>
76
+ </div>
77
+ <div class="flex-grow">
78
+ <div class="flex justify-between items-center">
79
+ <h3 class="font-medium">Chunking Strategy</h3>
80
+ <label class="relative inline-flex items-center cursor-pointer">
81
+ <input type="checkbox" checked class="sr-only peer">
82
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
83
+ </label>
84
+ </div>
85
+ <p class="text-sm text-gray-400 mt-1">Split documents into manageable chunks for processing</p>
86
+ <div class="mt-3">
87
+ <label class="block text-sm font-medium text-gray-300 mb-1">Chunk Size</label>
88
+ <select class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
89
+ <option selected>Small (256 tokens)</option>
90
+ <option>Medium (512 tokens)</option>
91
+ <option>Large (1024 tokens)</option>
92
+ </select>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="flex items-start bg-gray-600 bg-opacity-50 p-4 rounded-lg">
98
+ <div class="flex-shrink-0 mt-1 mr-3">
99
+ <div class="h-4 w-4 rounded-full bg-green-500"></div>
100
+ </div>
101
+ <div class="flex-grow">
102
+ <div class="flex justify-between items-center">
103
+ <h3 class="font-medium">Metadata Extraction</h3>
104
+ <label class="relative inline-flex items-center cursor-pointer">
105
+ <input type="checkbox" checked class="sr-only peer">
106
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
107
+ </label>
108
+ </div>
109
+ <p class="text-sm text-gray-400 mt-1">Extract document metadata (author, date, etc.)</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="bg-gray-700 bg-opacity-50 rounded-lg p-6">
116
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
117
+ <i data-feather="cpu" class="w-5 h-5 mr-2"></i>
118
+ AI Models
119
+ </h2>
120
+
121
+ <div class="space-y-4">
122
+ <div class="bg-gray-600 bg-opacity-50 p-4 rounded-lg">
123
+ <label class="block text-sm font-medium text-gray-300 mb-2">Embedding Model</label>
124
+ <select class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
125
+ <option selected>OpenAI text-embedding-3-small</option>
126
+ <option>OpenAI text-embedding-3-large</option>
127
+ <option>HuggingFace all-MiniLM-L6-v2</option>
128
+ <option>Cohere embed-english-v3.0</option>
129
+ </select>
130
+ <p class="text-xs text-gray-400 mt-1">Model used to convert text into vector embeddings</p>
131
+ </div>
132
+
133
+ <div class="bg-gray-600 bg-opacity-50 p-4 rounded-lg">
134
+ <label class="block text-sm font-medium text-gray-300 mb-2">LLM Model</label>
135
+ <select class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
136
+ <option selected>OpenAI GPT-4-turbo</option>
137
+ <option>OpenAI GPT-3.5-turbo</option>
138
+ <option>Anthropic Claude 3 Sonnet</option>
139
+ <option>Mistral 7B</option>
140
+ </select>
141
+ <p class="text-xs text-gray-400 mt-1">Model used for text generation and analysis</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="space-y-6">
148
+ <div class="bg-gray-700 bg-opacity-50 rounded-lg p-6">
149
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
150
+ <i data-feather="save" class="w-5 h-5 mr-2"></i>
151
+ Save Configuration
152
+ </h2>
153
+ <p class="text-gray-400 mb-4">Save your pipeline configuration for future use</p>
154
+ <div class="space-y-3">
155
+ <div>
156
+ <label class="block text-sm font-medium text-gray-300 mb-1">Configuration Name</label>
157
+ <input type="text" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="My Pipeline Config">
158
+ </div>
159
+ <div>
160
+ <label class="block text-sm font-medium text-gray-300 mb-1">Description</label>
161
+ <textarea rows="3" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Describe this configuration..."></textarea>
162
+ </div>
163
+ <button class="w-full mt-4 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-md font-medium transition-colors">
164
+ Save Configuration
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-gray-700 bg-opacity-50 rounded-lg p-6">
170
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
171
+ <i data-feather="file-text" class="w-5 h-5 mr-2"></i>
172
+ Document Types
173
+ </h2>
174
+ <p class="text-gray-400 mb-4">Select which document types this pipeline should process</p>
175
+ <div class="space-y-2">
176
+ <div class="flex items-center">
177
+ <input id="pdf-checkbox" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
178
+ <label for="pdf-checkbox" class="ml-2 text-sm font-medium text-gray-300">PDF</label>
179
+ </div>
180
+ <div class="flex items-center">
181
+ <input id="docx-checkbox" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
182
+ <label for="docx-checkbox" class="ml-2 text-sm font-medium text-gray-300">Word (DOCX)</label>
183
+ </div>
184
+ <div class="flex items-center">
185
+ <input id="ppt-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
186
+ <label for="ppt-checkbox" class="ml-2 text-sm font-medium text-gray-300">PowerPoint</label>
187
+ </div>
188
+ <div class="flex items-center">
189
+ <input id="xls-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
190
+ <label for="xls-checkbox" class="ml-2 text-sm font-medium text-gray-300">Excel</label>
191
+ </div>
192
+ <div class="flex items-center">
193
+ <input id="txt-checkbox" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
194
+ <label for="txt-checkbox" class="ml-2 text-sm font-medium text-gray-300">Plain Text</label>
195
+ </div>
196
+ <div class="flex items-center">
197
+ <input id="image-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
198
+ <label for="image-checkbox" class="ml-2 text-sm font-medium text-gray-300">Images (JPG, PNG)</label>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </main>
206
+
207
+ <custom-footer></custom-footer>
208
+
209
+ <script src="components/navbar.js"></script>
210
+ <script src="components/footer.js"></script>
211
+ <script src="script.js"></script>
212
+ <script>
213
+ feather.replace();
214
+ // Update navbar active state
215
+ document.addEventListener('DOMContentLoaded', () => {
216
+ const currentPath = window.location.pathname;
217
+ const navLinks = document.querySelectorAll('.nav-link');
218
+
219
+ navLinks.forEach(link => {
220
+ if (link.getAttribute('href') === currentPath) {
221
+ link.classList.add('active');
222
+ } else {
223
+ link.classList.remove('active');
224
+ }
225
+ });
226
+ });
227
+ </script>
228
+ </body>
229
+ </html>
index.html CHANGED
@@ -1,19 +1,107 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Docling Rag Pipeline</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="flex-grow container mx-auto px-4 py-8">
17
+ <div id="vanta-bg" class="absolute top-0 left-0 w-full h-full -z-10"></div>
18
+
19
+ <div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl">
20
+ <div class="text-center mb-12">
21
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-600">
22
+ Docling Rag Pipeline Wizard
23
+ </h1>
24
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
25
+ Streamline your document ingestion pipeline with AI-powered processing
26
+ </p>
27
+ </div>
28
+
29
+ <div class="grid md:grid-cols-2 gap-8">
30
+ <div class="p-6 rounded-lg bg-gray-700 bg-opacity-50 hover:bg-opacity-70 transition-all">
31
+ <div class="flex items-center mb-4">
32
+ <i data-feather="upload" class="w-8 h-8 mr-3 text-indigo-400"></i>
33
+ <h3 class="text-2xl font-semibold">Upload Documents</h3>
34
+ </div>
35
+ <p class="text-gray-300 mb-4">
36
+ Drag and drop your documents or select files to begin processing
37
+ </p>
38
+ <button class="mt-4 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-md font-medium transition-colors">
39
+ Start Upload
40
+ </button>
41
+ </div>
42
+
43
+ <div class="p-6 rounded-lg bg-gray-700 bg-opacity-50 hover:bg-opacity-70 transition-all">
44
+ <div class="flex items-center mb-4">
45
+ <i data-feather="settings" class="w-8 h-8 mr-3 text-purple-400"></i>
46
+ <h3 class="text-2xl font-semibold">Configure Pipeline</h3>
47
+ </div>
48
+ <p class="text-gray-300 mb-4">
49
+ Customize processing steps including OCR, text extraction, and metadata tagging
50
+ </p>
51
+ <a href="/configure.html" class="inline-block mt-4 px-6 py-2 bg-purple-600 hover:bg-purple-700 rounded-md font-medium transition-colors">
52
+ Configure
53
+ </a>
54
+ </div>
55
+
56
+ <div class="p-6 rounded-lg bg-gray-700 bg-opacity-50 hover:bg-opacity-70 transition-all">
57
+ <div class="flex items-center mb-4">
58
+ <i data-feather="database" class="w-8 h-8 mr-3 text-blue-400"></i>
59
+ <h3 class="text-2xl font-semibold">Vector Store</h3>
60
+ </div>
61
+ <p class="text-gray-300 mb-4">
62
+ Manage your document embeddings and vector database connections
63
+ </p>
64
+ <a href="/vector.html" class="inline-block mt-4 px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
65
+ Vector Store
66
+ </a>
67
+ </div>
68
+
69
+ <div class="p-6 rounded-lg bg-gray-700 bg-opacity-50 hover:bg-opacity-70 transition-all">
70
+ <div class="flex items-center mb-4">
71
+ <i data-feather="bar-chart-2" class="w-8 h-8 mr-3 text-green-400"></i>
72
+ <h3 class="text-2xl font-semibold">Analytics</h3>
73
+ </div>
74
+ <p class="text-gray-300 mb-4">
75
+ Track processing metrics and document insights with interactive dashboards
76
+ </p>
77
+ <a href="/analytics.html" class="inline-block mt-4 px-6 py-2 bg-green-600 hover:bg-green-700 rounded-md font-medium transition-colors">
78
+ View Analytics
79
+ </a>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </main>
84
+
85
+ <custom-footer></custom-footer>
86
+
87
+ <script src="components/navbar.js"></script>
88
+ <script src="components/footer.js"></script>
89
+ <script src="script.js"></script>
90
+ <script>
91
+ feather.replace();
92
+ VANTA.GLOBE({
93
+ el: "#vanta-bg",
94
+ mouseControls: true,
95
+ touchControls: true,
96
+ gyroControls: false,
97
+ minHeight: 200.00,
98
+ minWidth: 200.00,
99
+ scale: 1.00,
100
+ scaleMobile: 1.00,
101
+ color: 0x5b21b6,
102
+ backgroundColor: 0x111827
103
+ });
104
+ </script>
105
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
106
+ </body>
107
+ </html>
script.js ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript across all pages
2
+ document.addEventListener('DOMContentLoaded', () => {
3
+ // Initialize tooltips for feather icons
4
+ document.querySelectorAll('[data-feather]').forEach(icon => {
5
+ const tooltipText = icon.parentElement.getAttribute('data-tooltip');
6
+ if (tooltipText) {
7
+ icon.setAttribute('title', tooltipText);
8
+ }
9
+ });
10
+ });
11
+
12
+ // File upload handling
13
+ function handleFileUpload(event) {
14
+ const files = event.target.files;
15
+ if (files.length > 0) {
16
+ console.log('Files selected:', files);
17
+ // TODO: Implement file processing logic
18
+ }
19
+ }
20
+
21
+ // Drag and drop functionality
22
+ function setupDragAndDrop() {
23
+ const dropArea = document.getElementById('drop-area');
24
+
25
+ if (dropArea) {
26
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
27
+ dropArea.addEventListener(eventName, preventDefaults, false);
28
+ });
29
+
30
+ function preventDefaults(e) {
31
+ e.preventDefault();
32
+ e.stopPropagation();
33
+ }
34
+
35
+ ['dragenter', 'dragover'].forEach(eventName => {
36
+ dropArea.addEventListener(eventName, highlight, false);
37
+ });
38
+
39
+ ['dragleave', 'drop'].forEach(eventName => {
40
+ dropArea.addEventListener(eventName, unhighlight, false);
41
+ });
42
+
43
+ function highlight() {
44
+ dropArea.classList.add('border-indigo-400', 'bg-indigo-900', 'bg-opacity-20');
45
+ }
46
+
47
+ function unhighlight() {
48
+ dropArea.classList.remove('border-indigo-400', 'bg-indigo-900', 'bg-opacity-20');
49
+ }
50
+
51
+ dropArea.addEventListener('drop', handleDrop, false);
52
+
53
+ function handleDrop(e) {
54
+ const dt = e.dataTransfer;
55
+ const files = dt.files;
56
+ console.log('Files dropped:', files);
57
+ // TODO: Implement file processing logic
58
+ }
59
+ }
60
+ }
61
+
62
+ // Initialize drag and drop when DOM is loaded
63
+ document.addEventListener('DOMContentLoaded', setupDragAndDrop);
style.css CHANGED
@@ -1,28 +1,39 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Shared styles across all pages */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ }
7
+
8
+ /* Smooth scroll behavior */
9
+ html {
10
+ scroll-behavior: smooth;
11
  }
12
 
13
+ /* Custom scrollbar */
14
+ ::-webkit-scrollbar {
15
+ width: 8px;
16
  }
17
 
18
+ ::-webkit-scrollbar-track {
19
+ background: #1f2937;
 
 
 
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #4b5563;
24
+ border-radius: 4px;
 
 
 
25
  }
26
 
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #6b7280;
29
  }
30
+
31
+ /* Animation classes */
32
+ .fade-in {
33
+ animation: fadeIn 0.5s ease-in-out;
34
+ }
35
+
36
+ @keyframes fadeIn {
37
+ from { opacity: 0; transform: translateY(10px); }
38
+ to { opacity: 1; transform: translateY(0); }
39
+ }