?
S
MarkupThis HTML template provides a structured framework for document analysis tools. It offers a clean, responsive layout for displaying analyzed text, statistics, and insights. Perfect for developers building web-based document processing applications, it streamlines the presentation of complex data in an easily digestible format.
1<body class="bg-gray-100 text-sm">
2 <header class="border-b bg-white shadow-sm">
3 <div class="container mx-auto flex items-center justify-between px-4 py-2">
4 <div class="flex items-center space-x-3">
5 <div class="rounded-lg border border-blue-200 bg-blue-50 p-2">
6 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
7 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
8 </svg>
9 </div>
10 <div class="flex flex-col">
11 <h1 class="text-sm font-bold text-gray-800">RAG Blocks</h1>
12 <span class="text-xs text-gray-500">Document Analysis</span>
13 </div>
14 </div>
15 <div class="flex items-center space-x-4">
16 <button class="rounded-full p-2 text-gray-600 hover:bg-gray-100">
17 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
18 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
19 </svg>
20 </button>
21 <button class="px-3 py-1.5 text-sm text-gray-700 hover:text-blue-400">Login</button>
22 </div>
23 </div>
24 </header>
25
26 <main class="container mx-auto p-4">
27 <div class="mb-4 flex justify-between">
28 <h2 class="text-lg font-bold text-gray-800">My RAG Blocks</h2>
29 <button class="flex items-center rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600">
30 <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
31 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
32 </svg>
33 Add Block
34 </button>
35 </div>
36
37 <!-- RAG Block with Updated Layout -->
38 <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-md">
39 <div class="mb-3 flex items-center justify-between">
40 <div class="flex items-center">
41 <h3 class="text-base font-bold text-gray-800">Document Block 1</h3>
42 <div class="ml-2 flex items-center text-green-500" title="Auto-saved">
43 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
45 </svg>
46 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
47 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
48 </svg>
49 </div>
50 </div>
51 <div class="flex space-x-2">
52 <!-- RAG Engine Dropdown -->
53 <select class="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700">
54 <option>GPT-4 RAG</option>
55 <option>Claude RAG</option>
56 <option>Llama 3 RAG</option>
57 <option>Custom Engine</option>
58 </select>
59 <button class="rounded-md border border-gray-200 bg-gray-100 px-3 py-1 text-xs text-gray-700 hover:bg-gray-200">Edit</button>
60 <button class="rounded-md border border-red-200 bg-red-50 px-3 py-1 text-xs text-red-700 hover:bg-red-100">Remove</button>
61 </div>
62 </div>
63
64 <!-- Document and Analysis section with 1/3 - 2/3 split -->
65 <div class="mb-3 flex space-x-3">
66 <div class="w-1/3">
67 <div class="mb-2 flex items-center justify-between">
68 <h4 class="text-sm font-semibold text-gray-700">Document</h4>
69 <div class="flex space-x-2">
70 <button class="rounded-md border border-gray-200 bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200">Upload</button>
71 </div>
72 </div>
73 <div class="h-40 rounded-md border border-gray-200 bg-gray-50 p-3">
74 <div class="flex items-center justify-between">
75 <p class="text-sm font-medium text-gray-700">financial_report_2023.pdf</p>
76 <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">PDF</span>
77 </div>
78 <p class="mt-1 text-xs text-gray-500">Uploaded on: 2023-11-15</p>
79
80 <!-- Document Stats -->
81 <div class="mt-3 grid grid-cols-2 gap-2 rounded-md bg-gray-100 p-2 text-xs">
82 <div>
83 <span class="text-gray-500">Pages:</span>
84 <span class="font-medium text-gray-700">24</span>
85 </div>
86 <div>
87 <span class="text-gray-500">Tokens:</span>
88 <span class="font-medium text-gray-700">15,432</span>
89 </div>
90 <div>
91 <span class="text-gray-500">Chunks:</span>
92 <span class="font-medium text-gray-700">42</span>
93 </div>
94 <div>
95 <span class="text-gray-500">Embeddings:</span>
96 <span class="font-medium text-gray-700">Ada 2</span>
97 </div>
98 </div>
99 </div>
100 </div>
101
102 <div class="w-2/3">
103 <div class="mb-2 flex items-center justify-between">
104 <h4 class="text-sm font-semibold text-gray-700">Auto Analysis Outcome</h4>
105 </div>
106 <div class="h-40 overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-3 text-sm text-gray-700">
107 <p>This financial report shows a 15% increase in revenue compared to last year with significant growth in the Asia-Pacific region. Key highlights include:</p>
108 <ul class="mt-2 list-disc pl-5 text-xs">
109 <li>Software subscription growth of 22%</li>
110 <li>Consulting services up by 18%</li>
111 <li>New market expansion in Southeast Asia</li>
112 <li>Operating expenses reduced by 7%</li>
113 <li>R&D investment increased to 15% of revenue</li>
114 </ul>
115 <p class="mt-2">The company has outperformed market expectations in three consecutive quarters, with the strongest performance in enterprise solutions. Customer retention rate improved to 94%, while customer acquisition cost decreased by 12% year-over-year.</p>
116 <p class="mt-2">Risk factors include increasing competition in the APAC region and potential regulatory changes in European markets that could impact data handling practices.</p>
117 </div>
118 </div>
119 </div>
120
121 <!-- Chat and Notes section with 1/2 - 1/2 split -->
122 <div class="flex space-x-3">
123 <div class="w-1/2">
124 <div class="mb-2 flex items-center justify-between">
125 <h4 class="text-sm font-semibold text-gray-700">Chat</h4>
126 <!-- Chat Mode Tabs -->
127 <div class="flex rounded-md border border-gray-200 text-xs">
128 <button class="rounded-l-md bg-blue-500 px-3 py-1 text-white">Summary</button>
129 <button class="rounded-r-md px-3 py-1 text-gray-700 hover:bg-gray-100">Vector</button>
130 </div>
131 </div>
132 <div class="mb-2 h-56 overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-3">
133 <div class="mb-3">
134 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">What were the main revenue drivers?</p>
135 </div>
136 <div class="mb-3 text-right">
137 <p class="inline-block rounded-lg bg-blue-100 p-2 text-sm text-gray-700">The main revenue drivers were software subscription growth (22%) and consulting services (18%).</p>
138 </div>
139 <div class="mb-3">
140 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">How does this compare to industry averages?</p>
141 </div>
142 <div class="mb-3 text-right">
143 <p class="inline-block rounded-lg bg-blue-100 p-2 text-sm text-gray-700">The company's growth rate of 15% exceeds the industry average of 8.3%. Software subscription growth is particularly strong, outperforming the sector benchmark by approximately 9 percentage points.</p>
144 </div>
145 </div>
146 <div class="flex space-x-2">
147 <input type="text" placeholder="Ask a question..." class="w-full rounded-md border border-gray-300 p-2 text-sm outline-none focus:border-gray-400 focus:ring-2 focus:ring-gray-200" />
148 <button class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600">Send</button>
149 </div>
150 </div>
151
152 <div class="w-1/2">
153 <div class="mb-2 flex items-center justify-between">
154 <h4 class="text-sm font-semibold text-gray-700">Notes & Outcome</h4>
155 </div>
156 <div class="h-64 rounded-md border border-gray-200 bg-gray-50 p-3">
157 <textarea class="h-full w-full bg-transparent p-0 text-sm outline-none" placeholder="Add your notes here...">
158Need to follow up on the Asia-Pacific growth strategy. Potential for new market expansion.
159
160Key action items:
1611. Schedule meeting with APAC team to discuss regional strategy
1622. Review competitor analysis for Southeast Asian markets
1633. Prepare budget proposal for Q2 expansion
1644. Identify potential local partners in target countries
165
166Follow-up questions:
167- What are the regulatory risks in European markets?
168- How sustainable is the reduced customer acquisition cost?
169- Which specific countries in Southeast Asia show the most promise?</textarea
170 >
171 </div>
172 </div>
173 </div>
174 </div>
175
176 <!-- Empty state with add button -->
177 <div class="flex h-40 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50">
178 <button class="flex items-center rounded-md bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600">
179 <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
180 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
181 </svg>
182 Add Another Block
183 </button>
184 </div>
185 </main>
186</body>
187
188======
189
190
191<!-- Project Dashboard/Overview Screen -->
192<body class="bg-gray-100 text-sm">
193 <header class="border-b bg-white shadow-sm">
194 <div class="container mx-auto flex items-center justify-between px-4 py-2">
195 <div class="flex items-center space-x-3">
196 <div class="rounded-lg border border-blue-200 bg-blue-50 p-2">
197 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
198 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
199 </svg>
200 </div>
201 <div class="flex flex-col">
202 <h1 class="text-sm font-bold text-gray-800">RAG Blocks</h1>
203 <span class="text-xs text-gray-500">Project Overview</span>
204 </div>
205 </div>
206 <div class="flex items-center space-x-4">
207 <button class="rounded-md border border-gray-200 bg-white px-3 py-1 text-xs text-gray-700 hover:bg-gray-50">
208 <span class="mr-1">◀</span> Back to Blocks
209 </button>
210 <button class="rounded-full p-2 text-gray-600 hover:bg-gray-100">
211 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
212 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
213 </svg>
214 </button>
215 <div class="flex items-center space-x-1">
216 <span class="text-xs text-gray-500">Project:</span>
217 <select class="rounded border-gray-200 bg-white px-2 py-1 text-xs text-gray-700">
218 <option>Q4 Financial Analysis</option>
219 <option>Market Research 2023</option>
220 <option>Competitor Analysis</option>
221 </select>
222 </div>
223 </div>
224 </div>
225 </header>
226
227 <main class="container mx-auto p-4">
228 <div class="mb-4 flex items-center justify-between">
229 <h2 class="text-lg font-bold text-gray-800">Project Overview: Q4 Financial Analysis</h2>
230 <div class="flex items-center space-x-2">
231 <div class="flex items-center text-green-500" title="Auto-saved">
232 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
233 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
234 </svg>
235 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
236 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
237 </svg>
238 </div>
239 <button class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600">Export Report</button>
240 </div>
241 </div>
242
243 <div class="flex space-x-4">
244 <!-- Left Column - All Block Notes -->
245 <div class="w-1/2">
246 <div class="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
247 <h3 class="mb-2 border-b pb-2 text-base font-semibold text-gray-800">Block Notes Summary</h3>
248
249 <!-- Block 1 Notes -->
250 <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3">
251 <div class="mb-2 flex items-center justify-between">
252 <h4 class="font-medium text-gray-700">Document Block 1: Financial Report 2023</h4>
253 <button class="rounded-md bg-gray-200 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-300">View Block</button>
254 </div>
255 <div class="text-sm text-gray-600">
256 <p>Need to follow up on the Asia-Pacific growth strategy. Potential for new market expansion.</p>
257 <p class="mt-1 text-xs text-gray-500">Key action items:</p>
258 <ul class="mt-1 list-disc pl-5 text-xs text-gray-500">
259 <li>Schedule meeting with APAC team to discuss regional strategy</li>
260 <li>Review competitor analysis for Southeast Asian markets</li>
261 <li>Prepare budget proposal for Q2 expansion</li>
262 </ul>
263 </div>
264 </div>
265
266 <!-- Block 2 Notes -->
267 <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3">
268 <div class="mb-2 flex items-center justify-between">
269 <h4 class="font-medium text-gray-700">Document Block 2: Competitor Analysis</h4>
270 <button class="rounded-md bg-gray-200 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-300">View Block</button>
271 </div>
272 <div class="text-sm text-gray-600">
273 <p>Main competitors in APAC region are expanding aggressively. We need to accelerate our timeline.</p>
274 <p class="mt-1 text-xs text-gray-500">Competitive advantages:</p>
275 <ul class="mt-1 list-disc pl-5 text-xs text-gray-500">
276 <li>Our product has better integration capabilities</li>
277 <li>Higher customer satisfaction ratings (94% vs 82%)</li>
278 <li>More flexible pricing model</li>
279 </ul>
280 </div>
281 </div>
282
283 <!-- Block 3 Notes -->
284 <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3">
285 <div class="mb-2 flex items-center justify-between">
286 <h4 class="font-medium text-gray-700">Document Block 3: Market Research</h4>
287 <button class="rounded-md bg-gray-200 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-300">View Block</button>
288 </div>
289 <div class="text-sm text-gray-600">
290 <p>Singapore, Malaysia and Vietnam show highest potential ROI for initial expansion.</p>
291 <p class="mt-1 text-xs text-gray-500">Market factors:</p>
292 <ul class="mt-1 list-disc pl-5 text-xs text-gray-500">
293 <li>Growing tech adoption in enterprise sector</li>
294 <li>Favorable regulatory environment</li>
295 <li>Increasing demand for cloud solutions</li>
296 </ul>
297 </div>
298 </div>
299
300 <!-- Block 4 Notes -->
301 <div class="rounded-md border border-gray-200 bg-gray-50 p-3">
302 <div class="mb-2 flex items-center justify-between">
303 <h4 class="font-medium text-gray-700">Document Block 4: Regulatory Overview</h4>
304 <button class="rounded-md bg-gray-200 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-300">View Block</button>
305 </div>
306 <div class="text-sm text-gray-600">
307 <p>European regulatory changes will require product modifications by Q3.</p>
308 <p class="mt-1 text-xs text-gray-500">Compliance requirements:</p>
309 <ul class="mt-1 list-disc pl-5 text-xs text-gray-500">
310 <li>Enhanced data sovereignty features</li>
311 <li>Updated privacy controls</li>
312 <li>Local data processing options</li>
313 </ul>
314 </div>
315 </div>
316 </div>
317 </div>
318
319 <!-- Right Column - Final Reasoning Chat -->
320 <div class="w-1/2">
321 <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
322 <div class="mb-2 flex items-center justify-between">
323 <h3 class="text-base font-semibold text-gray-800">Final Reasoning</h3>
324 <div class="flex items-center text-green-500" title="Auto-saved">
325 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
326 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
327 </svg>
328 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
329 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
330 </svg>
331 </div>
332 </div>
333
334 <!-- Chat Area -->
335 <div class="mb-3 h-96 overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-3">
336 <div class="mb-3">
337 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">Based on all the documents analyzed, what should be our APAC expansion strategy?</p>
338 </div>
339 <div class="mb-3 text-right">
340 <p class="inline-block rounded-lg bg-blue-100 p-2 text-sm text-gray-700">Based on the analyzed documents, I recommend a phased APAC expansion strategy:
341
3421. Initial focus on Singapore, Malaysia, and Vietnam (highest ROI potential)
3432. Leverage our competitive advantages: better integration, higher customer satisfaction, and flexible pricing
3443. Accelerate timeline due to aggressive competitor expansion
3454. Allocate resources for Q2 budget proposal
3465. Schedule strategic planning with the APAC team within 2 weeks</p>
347 </div>
348 <div class="mb-3">
349 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">What about the European regulatory changes?</p>
350 </div>
351 <div class="mb-3 text-right">
352 <p class="inline-block rounded-lg bg-blue-100 p-2 text-sm text-gray-700">The European regulatory changes require product modifications by Q3, including:
353
354- Enhanced data sovereignty features
355- Updated privacy controls
356- Local data processing options
357
358I recommend forming a dedicated compliance team to implement these changes while the main product team focuses on APAC expansion. This parallel approach will ensure we meet regulatory deadlines without delaying our growth strategy.</p>
359 </div>
360 <div class="mb-3">
361 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">Summarize the key action items and timeline.</p>
362 </div>
363 <div class="mb-3 text-right">
364 <p class="inline-block rounded-lg bg-blue-100 p-2 text-sm text-gray-700">Key action items and timeline:
365
366Q1 (Current):
367- Schedule APAC strategy meeting (next 2 weeks)
368- Complete competitor analysis for target markets
369- Form European compliance team
370
371Q2:
372- Implement APAC expansion in Singapore
373- Develop market entry plans for Malaysia and Vietnam
374- Begin European regulatory compliance updates
375
376Q3:
377- Complete European regulatory compliance changes
378- Expand to Malaysia
379- Evaluate performance in Singapore
380
381Q4:
382- Expand to Vietnam
383- Assess overall APAC strategy effectiveness
384- Plan for next phase expansion</p>
385 </div>
386 </div>
387
388 <!-- Input Area -->
389 <div class="flex space-x-2">
390 <input type="text" placeholder="Ask a question about the project..." class="w-full rounded-md border border-gray-300 p-2 text-sm outline-none focus:border-gray-400 focus:ring-2 focus:ring-gray-200" />
391 <button class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600">Send</button>
392 </div>
393
394 </div>
395 </div>
396 </div>
397 </main>
398</body>
399Created on 3/12/2025