Files
Mehvar/templates/tree_view.html
T
2026-06-29 15:32:24 +03:30

60 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نمایش درخت معنایی - {{ project_name }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="layout-container">
<!-- پنل سمت راست (سایدبار) -->
<div class="sidebar">
<div class="sidebar-content" id="node-details">
<h3>سگمنت: <span id="node-id-display" style="color: #2a9d8f;">انتخاب نشده</span></h3>
<p><strong>تعداد جملات:</strong> <span id="node-sentences-count">0</span></p>
<p><strong>خلاصه (واحد معنایی):</strong></p>
<div id="node-summary" class="details-box">
برای مشاهده جزئیات، روی یک نود در گراف کلیک کنید.
</div>
<p><strong>جملات اصلی:</strong></p>
<div id="node-sentences" class="details-box" style="font-size: 0.9em; line-height: 1.8;">
<!-- جملات با کلیک لود می‌شوند -->
</div>
</div>
<div class="sidebar-footer">
<a href="/" class="btn btn-secondary btn-block">بازگشت به داشبورد</a>
<div class="helper-text">برای استخراج گزاره‌ها و ساخت گراف روابط این سگمنت، روی دکمه زیر کلیک کنید:</div>
<a id="btn-build-graph" href="#" class="btn btn-primary disabled btn-block">ساخت و نمایش گراف</a>
</div>
</div>
<!-- پنل سمت چپ (محتوای اصلی / گراف) -->
<div class="main-content">
<iframe src="{{ url_for('tree_iframe', project_name=project_name) }}" class="graph-iframe"></iframe>
</div>
</div>
<script>
window.addEventListener('message', function(event) {
if (event.data.type === 'node_click') {
const nodeId = event.data.id;
document.getElementById('node-id-display').textContent = nodeId;
document.getElementById('node-summary').innerText = event.data.summary;
document.getElementById('node-sentences-count').textContent = event.data.num_sentences;
document.getElementById('node-sentences').innerHTML = event.data.sentences;
const btnGraph = document.getElementById('btn-build-graph');
btnGraph.href = `/graph/{{ project_name }}/${nodeId}`;
btnGraph.classList.remove('disabled');
}
});
</script>
</body>
</html>