Files
documente/static/index.html
Luca Sacchi Ricciardi b7ef07dd34 refactor: rename project from AgenticRAG to DocuMente
## 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!
2026-04-06 13:54:57 +02:00

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>