feat: implement AgenticRAG system with datapizza-ai
Major refactoring from NotebookLM API to Agentic Retrieval System:
## New Features
- AgenticRAG backend powered by datapizza-ai framework
- Web interface for document upload and chat
- REST API with Swagger/OpenAPI documentation
- Document processing pipeline (Docling, chunking, embedding)
- Qdrant vector store integration
- Multi-provider LLM support (OpenAI, Google, Anthropic)
## New Components
- src/agentic_rag/api/ - FastAPI REST API
- Documents API (upload, list, delete)
- Query API (RAG queries)
- Chat API (conversational interface)
- Swagger UI at /api/docs
- src/agentic_rag/services/
- Document service with datapizza-ai pipeline
- RAG service with retrieval + generation
- Vector store service (Qdrant)
- static/index.html - Web UI (upload + chat)
## Dependencies
- datapizza-ai (core framework)
- datapizza-ai-clients-openai
- datapizza-ai-embedders-openai
- datapizza-ai-vectorstores-qdrant
- FastAPI, Pydantic, Qdrant
## API Endpoints
- POST /api/v1/documents - Upload documents
- GET /api/v1/documents - List documents
- POST /api/v1/query - Query knowledge base
- POST /api/v1/chat - Chat interface
- GET /api/docs - Swagger documentation
- GET / - Web UI
🏁 Ready for testing and deployment!
This commit is contained in:
Luca Sacchi Ricciardi
232
static/index.html
Normal file
232
static/index.html
Normal file
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AgenticRAG - Powered by datapizza-ai</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 40px 0;
|
||||
}
|
||||
h1 { font-size: 3em; margin-bottom: 10px; }
|
||||
.subtitle { font-size: 1.2em; opacity: 0.9; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
.card h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.upload-area {
|
||||
border: 3px dashed #667eea;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.upload-area:hover {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
input[type="file"] { display: none; }
|
||||
button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
button:hover { transform: translateY(-2px); }
|
||||
.chat-container {
|
||||
height: 400px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.chat-input {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
.chat-input input {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 1em;
|
||||
}
|
||||
.message {
|
||||
margin-bottom: 15px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
max-width: 80%;
|
||||
}
|
||||
.message.user {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
}
|
||||
.message.assistant {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
.status {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
h1 { font-size: 2em; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🍕 AgenticRAG</h1>
|
||||
<p class="subtitle">Agentic Retrieval System powered by datapizza-ai</p>
|
||||
</header>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h2>📄 Upload Documents</h2>
|
||||
<div class="upload-area" onclick="document.getElementById('file-input').click()">
|
||||
<p>📁 Click to upload or drag & drop</p>
|
||||
<p style="font-size: 0.9em; margin-top: 10px;">Supports: PDF, DOCX, TXT, MD</p>
|
||||
</div>
|
||||
<input type="file" id="file-input" onchange="uploadFile(event)">
|
||||
<div id="upload-status" class="status"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>💬 Chat with Documents</h2>
|
||||
<div class="chat-container">
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="message assistant">
|
||||
👋 Hello! Upload some documents and ask me anything about them.
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<input type="text" id="chat-input" placeholder="Ask a question...">
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 30px; color: white;">
|
||||
<p>API Docs: <a href="/api/docs" style="color: white;">/api/docs</a> |
|
||||
OpenAPI: <a href="/api/openapi.json" style="color: white;">/api/openapi.json</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function uploadFile(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
document.getElementById('upload-status').textContent = 'Uploading...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/documents', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
document.getElementById('upload-status').textContent =
|
||||
`✅ Uploaded: ${data.data.filename} (${data.data.chunks} chunks)`;
|
||||
addMessage('assistant', `📄 Processed "${data.data.filename}" successfully! You can now ask questions about it.`);
|
||||
} else {
|
||||
throw new Error(data.error?.message || 'Upload failed');
|
||||
}
|
||||
} catch (error) {
|
||||
document.getElementById('upload-status').textContent = `❌ Error: ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const input = document.getElementById('chat-input');
|
||||
const question = input.value.trim();
|
||||
if (!question) return;
|
||||
|
||||
addMessage('user', question);
|
||||
input.value = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/query', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ question, k: 5 })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
addMessage('assistant', data.data.answer);
|
||||
} else {
|
||||
throw new Error(data.error?.message || 'Query failed');
|
||||
}
|
||||
} catch (error) {
|
||||
addMessage('assistant', `❌ Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(role, text) {
|
||||
const container = document.getElementById('chat-messages');
|
||||
const message = document.createElement('div');
|
||||
message.className = `message ${role}`;
|
||||
message.textContent = text;
|
||||
container.appendChild(message);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
// Allow Enter key to send
|
||||
document.getElementById('chat-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') sendMessage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user