Questa è una vecchia versione del documento!
<!DOCTYPE html> <html lang=“it”> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude AI - Assistente DocuNeo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
.claude-container {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #2c3e50;
margin: 0;
font-size: 2.5em;
}
.header p {
color: #7f8c8d;
margin: 10px 0 0 0;
font-size: 1.1em;
}
.input-section {
margin-bottom: 25px;
}
.question-input {
width: 100%;
padding: 15px;
font-size: 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.question-input:focus {
outline: none;
border-color: #007acc;
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.button-group {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: #007acc;
color: white;
}
.btn-primary:hover {
background: #005fa3;
transform: translateY(-1px);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #545b62;
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.status {
margin: 20px 0;
padding: 15px;
border-radius: 6px;
display: none;
}
.status.loading {
background: #e3f2fd;
color: #1565c0;
border-left: 4px solid #2196f3;
}
.status.error {
background: #ffebee;
color: #c62828;
border-left: 4px solid #f44336;
}
.status.info {
background: #e8f5e8;
color: #2d5a2d;
border-left: 4px solid #28a745;
}
.answer-section {
margin-top: 25px;
}
.answer-box {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
min-height: 100px;
line-height: 1.6;
display: none;
}
.answer-box.show {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.config-section {
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid #e9ecef;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.config-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.config-item label {
font-weight: 600;
color: #495057;
}
.config-item input, .config-item select {
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 14px;
}
.examples {
background: #e8f5e8;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
.examples h3 {
margin: 0 0 15px 0;
color: #2d5a2d;
}
.example-questions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.example-btn {
background: white;
border: 1px solid #28a745;
color: #28a745;
padding: 8px 12px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.example-btn:hover {
background: #28a745;
color: white;
}
.footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #6c757d;
font-size: 14px;
}
.info-box {
margin-bottom: 20px;
padding: 15px;
background: #fff3cd;
border-radius: 8px;
border-left: 4px solid #ffc107;
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.claude-container {
padding: 15px;
}
.header h1 {
font-size: 2em;
}
.button-group {
flex-direction: column;
}
.btn {
justify-content: center;
}
}
</style>
</head> <body>
<div class="claude-container">
<div class="header">
<h1>🤖 Claude AI</h1>
<p>Assistente per DocuNeo.org - Domande sui protocolli neonatali</p>
</div>
<div class="input-section">
<textarea
id="questionInput"
class="question-input"
placeholder="Scrivi qui la tua domanda sui protocolli di DocuNeo..."
rows="3"
></textarea>
<div class="button-group">
<button class="btn btn-primary" onclick="askClaude()">
<span>🚀</span> Chiedi a Claude
</button>
<button class="btn btn-secondary" onclick="clearAll()">
<span>🗑️</span> Cancella tutto
</button>
<button class="btn btn-secondary" onclick="useOfflineMode()">
<span>📋</span> Carica Contenuti
</button>
</div>
</div>
<div id="status" class="status"></div>
<div class="answer-section">
<div id="answerBox" class="answer-box">
<strong>Le risposte di Claude appariranno qui...</strong>
</div>
</div>
<div class="examples">
<h3>💡 Esempi di domande per DocuNeo:</h3>
<div class="example-questions">
<span class="example-btn" onclick="setQuestion('Come si gestisce la NEC neonatale?')">Come si gestisce la NEC?</span>
<span class="example-btn" onclick="setQuestion('Quali sono i protocolli per l\'ipoglicemia neonatale?')">Protocolli ipoglicemia</span>
<span class="example-btn" onclick="setQuestion('Come si tratta il dolore nel neonato?')">Trattamento del dolore</span>
<span class="example-btn" onclick="setQuestion('Linee guida per la sepsi neonatale')">Sepsi neonatale</span>
<span class="example-btn" onclick="setQuestion('Protocolli per la ventilazione del pretermine')">Ventilazione pretermine</span>
</div>
</div>
</div>
<div class="claude-container config-section">
<h2>⚙️ Configurazione</h2>
<div class="info-box">
<h4 style="margin: 0 0 10px 0; color: #856404;">🔧 Come iniziare</h4>
<p style="margin: 0; font-size: 13px; color: #856404;">
1. Clicca "📋 Carica Contenuti" per preparare i dati DocuNeo<br>
2. Inserisci la tua API key Anthropic qui sotto<br>
3. Fai una domanda sui protocolli neonatali
</p>
</div>
<div class="config-grid">
<div class="config-item">
<label for="apiKey">API Key Anthropic:</label>
<input type="password" id="apiKey" placeholder="sk-ant-api03-...">
</div>
<div class="config-item">
<label for="claudeModel">Modello Claude:</label>
<select id="claudeModel">
<option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
<option value="claude-3-opus-20240229">Claude 3 Opus</option>
<option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
</select>
</div>
<div class="config-item">
<label for="maxTokens">Max Token Risposta:</label>
<input type="number" id="maxTokens" value="1500" min="100" max="4000">
</div>
<div class="config-item">
<label for="contextLimit">Limite Caratteri Contesto:</label>
<input type="number" id="contextLimit" value="50000" min="10000" max="100000">
</div>
</div>
</div>
<div class="footer">
<p>Powered by Claude AI • Contenuti estratti da <strong>DocuNeo.org</strong></p>
<p style="font-size: 12px; margin-top: 10px;">
🏥 Sistema di gestione documenti per Terapia Intensiva Neonatale
</p>
</div>
<script>
// Variabili globali
let wikiContent = '';
let isProcessing = false;
// Inizializzazione
window.onload = function() {
loadConfig();
// Controlla se abbiamo contenuti in cache
if (loadCachedContent()) {
showStatus('💡 Contenuti DocuNeo già caricati! Inserisci la tua API key e fai una domanda.', 'info');
} else {
showStatus('💡 Benvenuto! Clicca "Carica Contenuti" per iniziare, poi inserisci la tua API key.', 'info');
}
setTimeout(hideStatus, 5000);
};
// Salva/carica configurazione
function saveConfig() {
const config = {
apiKey: document.getElementById('apiKey').value,
claudeModel: document.getElementById('claudeModel').value,
maxTokens: document.getElementById('maxTokens').value,
contextLimit: document.getElementById('contextLimit').value
};
Object.keys(config).forEach(key => {
if (config[key]) {
localStorage.setItem('claude_' + key, config[key]);
}
});
}
function loadConfig() {
['apiKey', 'claudeModel', 'maxTokens', 'contextLimit'].forEach(key => {
const stored = localStorage.getItem('claude_' + key);
if (stored) {
document.getElementById(key).value = stored;
}
});
}
// Funzioni interfaccia
function setQuestion(question) {
document.getElementById('questionInput').value = question;
document.getElementById('questionInput').focus();
}
function clearAll() {
document.getElementById('questionInput').value = '';
hideAnswer();
hideStatus();
}
function showStatus(message, type = 'loading') {
const status = document.getElementById('status');
status.textContent = message;
status.className = `status ${type}`;
status.style.display = 'block';
}
function hideStatus() {
document.getElementById('status').style.display = 'none';
}
function showAnswer(content) {
const answerBox = document.getElementById('answerBox');
answerBox.innerHTML = content;
answerBox.classList.add('show');
}
function hideAnswer() {
const answerBox = document.getElementById('answerBox');
answerBox.classList.remove('show');
}
// Modalità offline - carica contenuti base DocuNeo
function useOfflineMode() {
if (isProcessing) return;
showStatus('📋 Caricamento contenuti DocuNeo...', 'loading');
wikiContent = getPreExtractedContent();
// Salva in cache
localStorage.setItem('docuneo_content_cache', wikiContent);
localStorage.setItem('docuneo_content_timestamp', Date.now().toString());
showStatus(`✅ Contenuti DocuNeo caricati! (${Math.round(wikiContent.length / 1000)}k caratteri)`, 'info');
setTimeout(hideStatus, 3000);
}
// Contenuto pre-estratto da DocuNeo
function getPreExtractedContent() {
return `
DocuNeo - Sistema di Gestione Documenti Neonatali
DocuNeo è il sistema di gestione dei documenti di reparto per la Terapia Intensiva Neonatale. Include linee guida, percorsi diagnostico-terapeutici (PDT), protocolli, CAT e bibliografia di riferimento.
AREE PRINCIPALI: DOLORE - Indicazioni operative per il trattamento del dolore nel neonato - Approccio pratico al controllo del dolore da procedura - Gestione farmacologica e non farmacologica del dolore neonatale
EMATOLOGIA - Guida alla trasfusione dei concentrati piastrinici nel neonato - Profilassi malattia emorragica nel neonato con vitamina K - Spremitura del funicolo per la prevenzione dell'anemia del neonato pretermine - Gestione dell'anemia neonatale e criteri trasfusionali GASTROENTEROLOGIA - Modalità di esecuzione del test di Apt per sangue nelle feci - Linee guida per la gestione della NEC (Enterocolite Necrotizzante) - Valutazione ecografica della NEC e staging radiologico - Linee guida ESPGHAN e NASPGHAN per la gestione del Reflusso gastroesofageo - Gestione nutrizionale post-NEC
INFEZIONI - Infezione perinatale da streptococco: screening e profilassi - Linee guida per la terapia della sepsi e delle infezioni in epoca neonatale - Infezione congenita da Cytomegalovirus: diagnosi e follow-up - Infezioni ed esposizione in gravidanza a CMV, HSV, VZ, sifilide - Infezioni materne ed allattamento: compatibilità farmaci - Profilassi della trasmissione perinatale dell'HIV - Gestione infezioni correlate a dispositivi vascolari MALATTIE METABOLICHE E IPOGLICEMIA - Ipoglicemia neonatale: definizione, diagnosi e trattamento - Algoritmo per la gestione dell'ipoglicemia transitoria e persistente - Linee Guida per la diagnosi ed il trattamento dei difetti del ciclo dell'urea - Inquadramento delle malattie metaboliche ad esordio neonatale - Screening metabolico allargato e follow-up
NUTRIZIONE E ALLATTAMENTO - Linee guida per la nutrizione e l'alimentazione enterale del neonato - Schema operativo per la determinazione dei fabbisogni di liquidi e nutrienti - Alimentazione per il neonato con rischio atopia - Linee guida per la profilassi dell'Osteopenia nel pretermine - Procedure per il sostegno dell'allattamento materno - Gestione della Banca del Latte umano donato - Composizione dei latti in formula e indicazioni d'uso NEFRO-UROLOGIA - Indicazioni all'esecuzione dell'ecografia renale in epoca neonatale - Nefrocalcinosi e nefrolitasi nel pretermine: prevenzione e trattamento - Linee guida per la gestione dell'insufficienza renale acuta nel neonato - Gestione della trombosi della vena renale
PATOLOGIA NEUROLOGICA - PDT Trattamento dell'encefalopatia ipossico-ischemica con ipotermia terapeutica - Convulsioni neonatali: diagnosi differenziale e trattamento - Programma diagnostico-terapeutico per mielomeningocele - Protocollo per la dilatazione ventricolare postemorragica - Indicazioni all'indagine ecografica cerebrale - Follow-up neurosviluppo nel pretermine PATOLOGIA RESPIRATORIA - Standard Clinico per la gestione del neonato con sindrome da distress respiratorio (RDS) - Parametri di ossimetria pulsatile e target di saturazione - Indicazioni all'utilizzo dell'Ossido Nitrico per via inalatoria - Premedicazione per intubazione tracheale: protocollo sedazione - Ipertensione polmonare nel neonato: diagnosi e terapia - Utilizzo dell'ossigenoterapia con nasocannule ad alti flussi (HFNC) - Ventilazione non invasiva: CPAP e BiPAP - Modalità di ventilazione a volume garantito - Gestione dello svezzamento ventilatorio
PATOLOGIA CARDIOCIRCOLATORIA - Terapia di supporto cardiovascolare: inotropi e vasopressori - Gestione del dotto arterioso pervio (PDA) - Screening cardiopatie congenite con ecocardiografia - Gestione dell'ipertensione polmonare persistente RIANIMAZIONE E URGENZE - Linee guida per la rianimazione neonatale (ERC Guidelines) - Algoritmi di rianimazione in sala parto - Gestione delle emergenze respiratorie e cardiocircolatorie - Protocolli per il trasporto neonatale d'urgenza
### FOLLOW-UP E DIMISSIONI - Criteri di dimissione dal reparto di Terapia Intensiva - Programmi di follow-up per il neonato pretermine - Vaccinazioni nel pretermine: calendario e controindicazioni - Screening sensoriali: vista e udito
Questo sistema fornisce protocolli evidence-based per la gestione clinica completa in Terapia Intensiva Neonatale, basati su linee guida internazionali e consensi di esperti.
`.trim();
}
// Verifica contenuti in cache
function loadCachedContent() {
const cached = localStorage.getItem('docuneo_content_cache');
const timestamp = localStorage.getItem('docuneo_content_timestamp');
if (cached && timestamp) {
const cacheAge = Date.now() - parseInt(timestamp);
const maxAge = 24 * 60 * 60 * 1000; // 24 ore
if (cacheAge < maxAge) {
wikiContent = cached;
return true;
}
}
return false;
}
// Funzione principale
async function askClaude() {
if (isProcessing) return;
const question = document.getElementById('questionInput').value.trim();
const apiKey = document.getElementById('apiKey').value.trim();
if (!question) {
alert('⚠️ Inserisci una domanda!');
return;
}
if (!apiKey) {
alert('⚠️ Inserisci la tua API Key Anthropic nella configurazione!');
return;
}
if (!wikiContent) {
alert('⚠️ Carica prima i contenuti DocuNeo cliccando "Carica Contenuti"!');
return;
}
isProcessing = true;
saveConfig();
try {
showStatus('🤖 Claude sta elaborando la risposta...', 'loading');
const response = await callClaudeAPI(question, wikiContent);
hideStatus();
showAnswer(response);
} catch (error) {
console.error('Errore:', error);
showStatus('❌ Errore: ' + error.message, 'error');
setTimeout(hideStatus, 5000);
} finally {
isProcessing = false;
}
}
// Chiamata API Claude
async function callClaudeAPI(question, context) {
const apiKey = document.getElementById('apiKey').value;
const model = document.getElementById('claudeModel').value;
const maxTokens = parseInt(document.getElementById('maxTokens').value);
const contextLimit = parseInt(document.getElementById('contextLimit').value);
// Limita il contesto
const limitedContext = context.substring(0, contextLimit);
const prompt = `Sei un assistente specializzato in neonatologia che risponde domande basandosi ESCLUSIVAMENTE sui contenuti del sito DocuNeo.org. Non usare conoscenze esterne.
CONTENUTI DEL SITO DOCUNEO: ${limitedContext}
DOMANDA: ${question}
Rispondi basandoti SOLO sui contenuti sopra provenienti da DocuNeo.org. Se la risposta non è presente nei contenuti forniti, dì che l'informazione non è disponibile nel sito DocuNeo.
Quando possibile, cita le sezioni specifiche (es. “Secondo le linee guida per la gestione della NEC…”) da cui provengono le informazioni.
Formatta la risposta in HTML per una migliore leggibilità, usando: - <h3> per i titoli principali - <ul> e <li> per le liste - <strong> per evidenziare punti importanti - <em> per le citazioni delle fonti`;
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey,
'anthropic-version': '2023-06-01'
},
body: JSON.stringify({
model: model,
max_tokens: maxTokens,
messages: [{
role: 'user',
content: prompt
}]
})
});
if (!response.ok) {
const errorData = await response.text();
throw new Error(`API Error ${response.status}: ${errorData}`);
}
const data = await response.json();
if (!data.content || !data.content[0] || !data.content[0].text) {
throw new Error('Risposta API non valida');
}
return data.content[0].text;
}
// Eventi tastiera
document.getElementById('questionInput').addEventListener('keydown', function(e) {
if (e.key === 'Enter' && e.ctrlKey) {
askClaude();
}
});
// Auto-save configurazione
['apiKey', 'claudeModel', 'maxTokens', 'contextLimit'].forEach(id => {
document.getElementById(id).addEventListener('change', saveConfig);
});
</script>
</body> </html>