Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Genealogy Graph Analyzer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white"> | |
| <!-- Header --> | |
| <header class="bg-black/30 backdrop-blur-lg border-b border-white/10"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="git-branch" class="w-6 h-6"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"> | |
| Genealogy Graph Analyzer | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button onclick="toggleEditMode()" id="editModeBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-all duration-200 flex items-center space-x-2"> | |
| <i data-feather="edit-3" class="w-4 h-4"></i> | |
| <span>Edit Mode</span> | |
| </button> | |
| <button onclick="resetGraph()" class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200 flex items-center space-x-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span>Reset</span> | |
| </button> | |
| <button onclick="toggleFullscreen()" class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Analysis Overview --> | |
| <section class="mb-6 bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-2 text-purple-400"></i> | |
| Analysis Task | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-white/5 rounded-lg p-4"> | |
| <h3 class="text-sm font-medium text-gray-400 mb-2">Document 1</h3> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="file" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Tree123.json</p> | |
| <p class="text-sm text-gray-400">Person: John Dow</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white/5 rounded-lg p-4"> | |
| <h3 class="text-sm font-medium text-gray-400 mb-2">Document 2</h3> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="file" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Tree456.json</p> | |
| <p class="text-sm text-gray-400">Person: John Dowe</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Graph Visualization --> | |
| <section class="bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i data-feather="git-branch" class="w-5 h-5 mr-2 text-purple-400"></i> | |
| Directed Graph Visualization | |
| </h2> | |
| <div class="flex items-center space-x-2"> | |
| <button onclick="addNode()" class="p-2 bg-green-600 hover:bg-green-700 rounded-lg transition-all" title="Add Node"> | |
| <i data-feather="plus-circle" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="deleteSelectedNode()" class="p-2 bg-red-600 hover:bg-red-700 rounded-lg transition-all" title="Delete Node"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="connectNodes()" class="p-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-all" title="Connect Nodes"> | |
| <i data-feather="link" class="w-4 h-4"></i> | |
| </button> | |
| <div class="w-px h-6 bg-white/20 mx-2"></div> | |
| <button onclick="zoomIn()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all"> | |
| <i data-feather="zoom-in" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="zoomOut()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all"> | |
| <i data-feather="zoom-out" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="fitToScreen()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all"> | |
| <i data-feather="maximize-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative bg-gradient-to-br from-gray-900/50 to-black/50 rounded-lg overflow-hidden" style="height: 500px;"> | |
| <canvas id="graphCanvas" class="w-full h-full cursor-move"></canvas> | |
| <!-- Edit Mode Indicator --> | |
| <div id="editIndicator" class="absolute top-4 left-4 bg-green-600/90 backdrop-blur-lg rounded-lg px-3 py-2 text-sm font-medium hidden"> | |
| <i data-feather="edit-3" class="w-4 h-4 inline mr-2"></i> | |
| Edit Mode Active | |
| </div> | |
| <!-- Node Edit Panel --> | |
| <div id="editPanel" class="absolute top-4 right-4 bg-black/80 backdrop-blur-lg rounded-lg p-4 w-80 hidden"> | |
| <h3 class="font-semibold mb-3 text-purple-400">Edit Node</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="text-xs text-gray-400 block mb-1">Node Label</label> | |
| <input type="text" id="nodeLabel" class="w-full bg-white/10 rounded px-3 py-2 text-sm text-white border border-white/20 focus:border-purple-400 focus:outline-none"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 block mb-1">Node Type</label> | |
| <select id="nodeType" class="w-full bg-white/10 rounded px-3 py-2 text-sm text-white border border-white/20 focus:border-purple-400 focus:outline-none"> | |
| <option value="document">Document</option> | |
| <option value="operation">Operation</option> | |
| <option value="result">Result</option> | |
| <option value="data">Data</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 block mb-1">Node Color</label> | |
| <input type="color" id="nodeColor" class="w-full h-10 bg-white/10 rounded border border-white/20 cursor-pointer"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="saveNodeChanges()" class="flex-1 bg-green-600 hover:bg-green-700 text-white rounded px-3 py-2 text-sm font-medium transition-all"> | |
| Save | |
| </button> | |
| <button onclick="cancelEdit()" class="flex-1 bg-white/10 hover:bg-white/20 text-white rounded px-3 py-2 text-sm font-medium transition-all"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Info Panel --> | |
| <div id="infoPanel" class="absolute top-4 right-4 bg-black/80 backdrop-blur-lg rounded-lg p-4 w-80 hidden"> | |
| <h3 class="font-semibold mb-2 text-purple-400">Node Details</h3> | |
| <div id="nodeInfo" class="text-sm space-y-2"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Analysis Steps --> | |
| <section class="mt-6 bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="list" class="w-5 h-5 mr-2 text-purple-400"></i> | |
| Analysis Pipeline | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('doc1')"> | |
| <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-400 font-bold">1</span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Extract from Tree123.json</p> | |
| <p class="text-sm text-gray-400">Operation: extract_person</p> | |
| </div> | |
| <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('doc2')"> | |
| <div class="w-10 h-10 bg-purple-500/20 rounded-full flex items-center justify-center"> | |
| <span class="text-purple-400 font-bold">2</span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Extract from Tree456.json</p> | |
| <p class="text-sm text-gray-400">Operation: extract_person</p> | |
| </div> | |
| <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('comparison')"> | |
| <div class="w-10 h-10 bg-green-500/20 rounded-full flex items-center justify-center"> | |
| <span class="text-green-400 font-bold">3</span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Compare Names</p> | |
| <p class="text-sm text-gray-400">Operation: compare_names (threshold=0.8)</p> | |
| </div> | |
| <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('classification')"> | |
| <div class="w-10 h-10 bg-yellow-500/20 rounded-full flex items-center justify-center"> | |
| <span class="text-yellow-400 font-bold">4</span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Classify Same Person</p> | |
| <p class="text-sm text-gray-400">Operation: classify_same_person (method=fact_based)</p> | |
| </div> | |
| <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Result Summary --> | |
| <section class="mt-6 bg-gradient-to-r from-green-900/20 to-emerald-900/20 backdrop-blur-lg rounded-xl p-6 border border-green-500/20"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-green-400">Analysis Complete</h3> | |
| <p class="text-gray-300">Classification: High probability of same person (85% match)</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |