Spaces:
Running
Running
File size: 13,495 Bytes
db6ded5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | <!DOCTYPE html>
<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> |