## Changes
- Update all references from AgenticRAG to DocuMente
- Update README.md with new project description and structure
- Update LICENSE with new project name
- Update API title and descriptions in main.py
- Update frontend components (Layout, Login, Dashboard, Settings)
- Update static HTML page
- Update all documentation files (prd-v2.md, frontend-plan.md, etc.)
- Update test files with new project name
- Update docker-compose.yml, Dockerfile, requirements.txt
## SEO Benefits
- DocuMente combines 'Documento' and 'Mente' (Italian for Document and Mind)
- Memorable and brandable name
- Reflects the core functionality: AI-powered document intelligence
🎉 Project officially renamed to DocuMente!
233 lines
7.8 KiB
HTML
233 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocuMente - 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>🍕 DocuMente</h1>
|
|
<p class="subtitle">Sistema di Retrieval Agentico con AI - 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>
|