Hugging Face's logo

Spaces:
bayan10
/
bayan-api
Running

App Files Community
bayan-api / extension /sidepanel /sidepanel.html
youssefreda9's picture
youssefreda9
Update extension UI, app pipeline, and Spelling Rules
75e0099
Raw History Blame Contribute Delete
19.5 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>بيان — لوحة التحليل</title>
<link rel="stylesheet" href="../shared/css/tokens.css">
<link rel="stylesheet" href="sidepanel.css">
</head>
<body>
<!-- ══════════════════════════════════════════════ -->
<!-- Header -->
<!-- ══════════════════════════════════════════════ -->
<header class="sp-header">
<a href="https://bayan10-bayan-api.hf.space/" target="_blank" rel="noopener noreferrer" class="sp-header-brand" style="text-decoration:none;color:inherit;">
<img src="../assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;">
<div style="height:24px; width:2px; background-color:var(--color-border-strong, #d1d5db); border-radius:9999px; flex-shrink:0;"></div>
<span class="sp-header-title">بيان</span>
</a>
<div style="display: flex; align-items: center; gap: 12px;">
<button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
<svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<svg class="theme-icon-moon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
</button>
<div class="sp-header-status" id="status-indicator">
<span class="sp-status-dot"></span>
<span class="sp-status-text" id="status-text">جاري الاتصال...</span>
</div>
</div>
</header>
<!-- ══════════════════════════════════════════════ -->
<!-- Tab Navigation -->
<!-- ══════════════════════════════════════════════ -->
<nav class="sp-tabs" role="tablist">
<button class="sp-tab active" role="tab" aria-selected="true" data-tab="correct" id="tab-correct">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
تصحيح
</button>
<button class="sp-tab" role="tab" aria-selected="false" data-tab="summarize" id="tab-summarize">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h10M4 18h14"/></svg>
تلخيص
</button>
<button class="sp-tab" role="tab" aria-selected="false" data-tab="dialect" id="tab-dialect">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
تحويل للفصحى
</button>
<button class="sp-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
تدقيق النص القرآني
</button>
</nav>
<!-- ══════════════════════════════════════════════ -->
<!-- Correct Panel -->
<!-- ══════════════════════════════════════════════ -->
<section class="sp-panel active" id="panel-correct" role="tabpanel">
<!-- Input area -->
<div class="sp-input-group">
<div class="sp-label-row">
<label class="sp-label" for="input-text">أدخل النص العربي</label>
<div style="display:flex; gap:4px;">
<button class="sp-btn-icon" id="btn-apply-page" type="button" title="تطبيق في الصفحة">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</button>
<button class="sp-btn-icon" id="btn-copy-text" type="button" title="نسخ النص">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
</button>
</div>
</div>
<textarea
id="input-text"
class="sp-textarea"
dir="rtl"
placeholder="أدخل النص العربي أو اختر نصاً من أي صفحة..."
rows="4"
maxlength="5000"
></textarea>
<div class="sp-meta-row">
<span class="sp-char-count"><span id="char-count">٠</span> حرف</span>
<span class="sp-word-count"><span id="word-count">٠</span> كلمة</span>
</div>
</div>
<!-- Action buttons -->
<div class="sp-actions">
<button class="sp-btn sp-btn-primary" id="btn-correct">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>
تحليل وتصحيح
</button>
<button class="sp-btn sp-btn-ghost" id="btn-clear">مسح</button>
</div>
<!-- Suggestions list (above score — matching popup) -->
<div class="sp-suggestions is-hidden" id="suggestions-section">
<span class="sp-suggestions-title">الاقتراحات</span>
<div class="sp-suggestions-list" id="suggestions-list" role="list"></div>
<button class="sp-apply-all-btn is-hidden" id="btn-apply-all" type="button">تطبيق الكل</button>
</div>
<!-- Score ring (matching popup — vertical centered with gradient) -->
<div class="sp-score is-hidden" id="score-section">
<span class="sp-score-title">تقييم الكتابة</span>
<div class="sp-score-ring">
<svg viewBox="0 0 160 160" width="120" height="120">
<defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="var(--color-primary, #6BA3E0)"/>
<stop offset="100%" stop-color="var(--color-secondary, #A594E8)"/>
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/>
<circle cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10"
stroke-dasharray="440" stroke-dashoffset="440" stroke-linecap="round"
transform="rotate(-90 80 80)" id="score-circle"/>
</svg>
<span class="sp-score-value" id="score-value">--</span>
</div>
<span class="sp-score-hint" id="score-hint">ابدأ الكتابة لرؤية تقييمك</span>
<div class="sp-score-counts">
<span class="sp-count sp-count-spelling"><span id="count-spelling">٠</span> إملائي</span>
<span class="sp-count sp-count-grammar"><span id="count-grammar">٠</span> نحوي</span>
<span class="sp-count sp-count-punctuation"><span id="count-punctuation">٠</span> ترقيم</span>
</div>
</div>
<!-- Timing info -->
<div class="sp-timing is-hidden" id="timing-section">
<span id="timing-text"></span>
</div>
</section>
<!-- ══════════════════════════════════════════════ -->
<!-- Summarize Panel -->
<!-- ══════════════════════════════════════════════ -->
<section class="sp-panel" id="panel-summarize" role="tabpanel">
<!-- Input area -->
<div class="sp-input-group">
<label class="sp-label" for="summary-input-text">أدخل النص للتلخيص</label>
<textarea
id="summary-input-text"
class="sp-textarea"
dir="rtl"
placeholder="الصق النص المراد تلخيصه..."
rows="4"
maxlength="5000"
></textarea>
<div class="sp-input-meta-row">
<span class="sp-input-meta"><span id="summary-word-count-input">٠</span> كلمة</span>
<label class="sp-import-btn" title="استيراد ملف">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
استيراد ملف
<input type="file" id="summary-import-input" class="sp-sr-only" accept=".txt,.docx">
</label>
</div>
</div>
<!-- Mode toggle (paragraph / bullets) -->
<div class="sp-mode-toggle">
<button type="button" class="sp-mode-btn active" id="summary-mode-paragraph" data-mode="paragraph">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
فقرة
</button>
<button type="button" class="sp-mode-btn" id="summary-mode-bullets" data-mode="bullets">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
نقاط
</button>
</div>
<!-- Length selector -->
<div class="sp-length-selector">
<label class="sp-label">طول الملخص</label>
<div class="sp-radio-group">
<label class="sp-radio"><input type="radio" name="summary-length" value="1"> قصير</label>
<label class="sp-radio"><input type="radio" name="summary-length" value="2" checked> متوسط</label>
<label class="sp-radio"><input type="radio" name="summary-length" value="3"> طويل</label>
</div>
</div>
<!-- Action -->
<div class="sp-actions">
<button class="sp-btn sp-btn-primary" id="btn-summarize">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h10M4 18h14"/></svg>
تلخيص
</button>
</div>
<!-- Summary result -->
<div class="sp-result is-hidden" id="summary-result-section">
<!-- Summary stats -->
<div class="sp-summary-stats is-hidden" id="summary-stats">
<div class="sp-summary-stat"><span>كلمات الملخص:</span> <span class="sp-summary-stat-value" id="summary-word-count">٠</span></div>
<div class="sp-summary-stat"><span>نسبة الاختصار:</span> <span class="sp-summary-stat-value" id="summary-compression">٠٪</span></div>
</div>
<div class="sp-result-header">
<span class="sp-result-title">الملخص</span>
<div class="sp-result-actions">
<button class="sp-btn-icon" id="btn-apply-summary" type="button" title="تطبيق في الصفحة">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</button>
<button class="sp-btn-icon" id="btn-copy-summary" type="button" title="نسخ">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
</button>
<div class="sp-export-dropdown" id="summary-export-wrap">
<button class="sp-btn-icon" id="btn-export-summary" type="button" title="تصدير">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg>
</button>
<div class="sp-export-menu is-hidden" id="summary-export-menu">
<button type="button" class="sp-export-item" data-format="txt">نصي (.txt)</button>
<button type="button" class="sp-export-item" data-format="docx">Word (.docx)</button>
<button type="button" class="sp-export-item" data-format="pdf">PDF (.pdf)</button>
</div>
</div>
</div>
</div>
<div class="sp-result-text" id="summary-text" dir="rtl"></div>
</div>
</section>
<!-- ══════════════════════════════════════════════ -->
<!-- Dialect Panel (لهجة → فصحى) -->
<!-- ══════════════════════════════════════════════ -->
<section class="sp-panel" id="panel-dialect" role="tabpanel">
<div class="sp-input-group">
<label class="sp-label" for="dialect-input-text">تحويل اللهجات للفصحى</label>
<p class="sp-description">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
<textarea
id="dialect-input-text"
class="sp-textarea"
dir="rtl"
placeholder="اكتب النص باللهجة هنا..."
rows="4"
maxlength="5000"
></textarea>
<div class="sp-meta-row">
<span class="sp-char-count"><span id="dialect-char-count">٠</span> حرف</span>
</div>
</div>
<div class="sp-actions">
<button class="sp-btn sp-btn-primary" id="btn-dialect">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
تحويل للفصحى
</button>
</div>
<div class="sp-result is-hidden" id="dialect-result-section">
<div class="sp-result-header">
<span class="sp-result-title" style="color: var(--color-primary, #6BA3E0);">✓ النص بالعربية الفصحى</span>
<div class="sp-result-actions">
<button class="sp-btn-icon" id="btn-apply-dialect" type="button" title="تطبيق في الصفحة">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</button>
<button class="sp-btn-icon" id="btn-copy-dialect" type="button" title="نسخ">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
</button>
</div>
</div>
<div class="sp-result-text" id="dialect-text" dir="rtl"></div>
</div>
</section>
<!-- ══════════════════════════════════════════════ -->
<!-- Quran Panel (تدقيق الآيات) -->
<!-- ══════════════════════════════════════════════ -->
<section class="sp-panel" id="panel-quran" role="tabpanel">
<div class="sp-input-group">
<label class="sp-label" for="quran-input-text">تدقيق الآيات القرآنية</label>
<textarea
id="quran-input-text"
class="sp-textarea"
dir="rtl"
placeholder="أدخل آية أو جزءاً منها..."
rows="4"
maxlength="2000"
></textarea>
<div class="sp-meta-row">
<span class="sp-char-count"><span id="quran-char-count">٠</span> حرف</span>
</div>
</div>
<div class="sp-actions">
<button class="sp-btn sp-btn-primary" id="btn-quran">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
بحث وتدقيق
</button>
</div>
<!-- Quran result (matching popup structure) -->
<div class="sp-quran-result is-hidden" id="quran-result-section">
<div id="quran-match-list" class="sp-quran-match-list"></div>
</div>
</section>
<!-- ══════════════════════════════════════════════ -->
<!-- Loading Overlay -->
<!-- ══════════════════════════════════════════════ -->
<div class="sp-loading is-hidden" id="loading-overlay">
<div class="sp-spinner"></div>
<span id="loading-text">جارٍ التحليل...</span>
</div>
<!-- Toast -->
<div class="sp-toast" id="toast"></div>
<!-- ══════════════════════════════════════════════ -->
<!-- Scripts — vendor libs + shared modules -->
<!-- ══════════════════════════════════════════════ -->
<script src="../shared/vendor/mammoth.browser.min.js"></script>
<script src="../shared/vendor/docx.umd.js"></script>
<script src="../shared/vendor/html2pdf.bundle.min.js"></script>
<script src="../shared/constants.js"></script>
<script src="../shared/config.js"></script>
<script src="../shared/bayan-renderer.js"></script>
<script src="../shared/bayan-ui.js"></script>
<script src="../shared/bayan-patches.js"></script>
<script src="../shared/bayan-api.js"></script>
<script src="sidepanel.js"></script>
</body>
</html>