85 lines
4.0 KiB
HTML
85 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LLM Wiki</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.tab-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; }
|
|
.wikilink { color: #3b82f6; text-decoration: underline; cursor: pointer; }
|
|
pre { white-space: pre-wrap; word-wrap: break-word; }
|
|
.streaming-cursor::after { content: '▊'; animation: blink 1s infinite; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen">
|
|
|
|
<div class="max-w-6xl mx-auto p-4">
|
|
<header class="mb-6">
|
|
<h1 class="text-3xl font-bold text-blue-400">📚 LLM Wiki</h1>
|
|
<p class="text-gray-400 text-sm">Knowledge base che si costruisce da sola</p>
|
|
</header>
|
|
|
|
<nav class="flex border-b border-gray-700 mb-6">
|
|
<button class="tab-btn px-4 py-2 text-gray-300 hover:text-white tab-active" data-tab="wiki">Wiki</button>
|
|
<button class="tab-btn px-4 py-2 text-gray-300 hover:text-white" data-tab="chat">Chat</button>
|
|
<button class="tab-btn px-4 py-2 text-gray-300 hover:text-white" data-tab="ingest">Ingest</button>
|
|
<button class="tab-btn px-4 py-2 text-gray-300 hover:text-white" data-tab="search">Search</button>
|
|
</nav>
|
|
|
|
<div id="tab-content">
|
|
<!-- Wiki Tab -->
|
|
<div id="tab-wiki" class="tab-panel">
|
|
<div class="grid grid-cols-4 gap-4">
|
|
<div class="col-span-1 bg-gray-800 rounded-lg p-4 max-h-screen overflow-y-auto">
|
|
<h3 class="font-semibold mb-3 text-gray-300">Pagine</h3>
|
|
<div id="page-list" class="space-y-1 text-sm"></div>
|
|
</div>
|
|
<div class="col-span-3 bg-gray-800 rounded-lg p-4 max-h-screen overflow-y-auto">
|
|
<div id="page-content">
|
|
<p class="text-gray-500">Clicca su una pagina per leggere</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Tab -->
|
|
<div id="tab-chat" class="tab-panel hidden">
|
|
<div class="bg-gray-800 rounded-lg p-4 max-h-96 overflow-y-auto mb-4" id="chat-messages">
|
|
<p class="text-gray-500">Fai una domanda sulla wiki...</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<input type="text" id="chat-input" placeholder="La tua domanda..."
|
|
class="flex-1 bg-gray-700 rounded px-4 py-2 text-white"
|
|
onkeypress="if(event.key==='Enter') sendChat()">
|
|
<button onclick="sendChat()" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded font-medium">Invia</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ingest Tab -->
|
|
<div id="tab-ingest" class="tab-panel hidden">
|
|
<div class="bg-gray-800 rounded-lg p-4 mb-4">
|
|
<h3 class="font-semibold mb-3">Seleziona source da ingestire</h3>
|
|
<div id="raw-list" class="space-y-2 text-sm max-h-64 overflow-y-auto"></div>
|
|
</div>
|
|
<button onclick="runIngest()" class="bg-green-600 hover:bg-green-700 px-6 py-2 rounded font-medium">Avvia Ingest</button>
|
|
<div id="ingest-log" class="mt-4 bg-gray-800 rounded-lg p-4 text-sm font-mono max-h-64 overflow-y-auto"></div>
|
|
</div>
|
|
|
|
<!-- Search Tab -->
|
|
<div id="tab-search" class="tab-panel hidden">
|
|
<div class="flex gap-2 mb-4">
|
|
<input type="text" id="search-input" placeholder="Cerca nella wiki..."
|
|
class="flex-1 bg-gray-700 rounded px-4 py-2 text-white"
|
|
onkeypress="if(event.key==='Enter') doSearch()">
|
|
<button onclick="doSearch()" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded font-medium">Cerca</button>
|
|
</div>
|
|
<div id="search-results" class="space-y-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |