60 lines
2.8 KiB
HTML
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>
|