Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>البيانات الطبية - منصة تقطير المعرفة</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="/static/css/style.css" rel="stylesheet"> | |
| <style> | |
| .dataset-card { | |
| border: 1px solid #dee2e6; | |
| border-radius: 12px; | |
| padding: 25px; | |
| margin-bottom: 20px; | |
| background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| } | |
| .dataset-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .modality-badge { | |
| font-size: 0.75em; | |
| padding: 4px 8px; | |
| margin: 2px; | |
| border-radius: 12px; | |
| } | |
| .specialty-badge { | |
| font-size: 0.7em; | |
| padding: 3px 6px; | |
| margin: 1px; | |
| border-radius: 8px; | |
| background-color: #e3f2fd; | |
| color: #1976d2; | |
| } | |
| .size-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| background: #e8f5e8; | |
| color: #2e7d32; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 0.8em; | |
| font-weight: 500; | |
| } | |
| .samples-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| background: #fff3e0; | |
| color: #f57c00; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 0.8em; | |
| font-weight: 500; | |
| } | |
| .dataset-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .medical-icon { | |
| font-size: 2.5em; | |
| color: #1976d2; | |
| margin-bottom: 15px; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(255,255,255,0.9); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| z-index: 10; | |
| } | |
| .dataset-status { | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 0.7em; | |
| font-weight: bold; | |
| } | |
| .status-available { background: #d4edda; color: #155724; } | |
| .status-loading { background: #fff3cd; color: #856404; } | |
| .status-loaded { background: #cce5ff; color: #004085; } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-brain me-2"></i> | |
| منصة تقطير المعرفة | |
| </a> | |
| <div class="navbar-nav ms-auto"> | |
| <a class="nav-link" href="/">الرئيسية</a> | |
| <a class="nav-link" href="/tokens">إدارة الرموز</a> | |
| <a class="nav-link active" href="/medical-datasets">البيانات الطبية</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mt-4"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="d-flex justify-content-between align-items-center mb-4"> | |
| <div> | |
| <h2><i class="fas fa-database me-2"></i>قواعد البيانات الطبية</h2> | |
| <p class="text-muted">قواعد بيانات متخصصة للصور الشعاعية والتشخيص الطبي</p> | |
| </div> | |
| <div> | |
| <button class="btn btn-outline-primary" onclick="medicalDatasets.refreshDatasets()"> | |
| <i class="fas fa-sync-alt me-2"></i>تحديث | |
| </button> | |
| </div> | |
| </div> | |
| <!-- System Status --> | |
| <div class="row mb-4"> | |
| <div class="col-md-3"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-memory text-primary fa-2x mb-2"></i> | |
| <h6>استهلاك الذاكرة</h6> | |
| <span id="memory-usage" class="h5 text-primary">--</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-microchip text-success fa-2x mb-2"></i> | |
| <h6>معالج CPU</h6> | |
| <span id="cpu-cores" class="h5 text-success">--</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-database text-info fa-2x mb-2"></i> | |
| <h6>البيانات المحملة</h6> | |
| <span id="loaded-datasets" class="h5 text-info">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-key text-warning fa-2x mb-2"></i> | |
| <h6>الرمز المستخدم</h6> | |
| <span id="active-token" class="h6 text-warning">رمز طبي</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Datasets Grid --> | |
| <div id="datasets-grid" class="row"> | |
| <div class="col-12 text-center"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">جاري تحميل البيانات...</span> | |
| </div> | |
| <p class="mt-2 text-muted">جاري تحميل قواعد البيانات المتاحة...</p> | |
| </div> | |
| </div> | |
| <!-- Dataset Management Section --> | |
| <div class="dataset-management mt-5"> | |
| <h3><i class="fas fa-database"></i> إدارة قواعد البيانات الطبية</h3> | |
| <!-- Management Tabs --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <ul class="nav nav-tabs card-header-tabs" id="dataset-tabs" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="search-tab" data-bs-toggle="tab" data-bs-target="#search-panel" type="button" role="tab"> | |
| <i class="fas fa-search"></i> البحث في Hugging Face | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="manual-tab" data-bs-toggle="tab" data-bs-target="#manual-panel" type="button" role="tab"> | |
| <i class="fas fa-plus"></i> إضافة يدوية | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="manage-tab" data-bs-toggle="tab" data-bs-target="#manage-panel" type="button" role="tab"> | |
| <i class="fas fa-cog"></i> إدارة قواعد البيانات | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card-body"> | |
| <div class="tab-content" id="dataset-tab-content"> | |
| <!-- Search Panel --> | |
| <div class="tab-pane fade show active" id="search-panel" role="tabpanel"> | |
| <div class="search-section"> | |
| <div class="row mb-3"> | |
| <div class="col-md-8"> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" id="search-query" placeholder="ابحث عن قواعد البيانات الطبية..."> | |
| <button class="btn btn-primary" type="button" id="search-datasets"> | |
| <i class="fas fa-search"></i> بحث | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <select class="form-select" id="search-category"> | |
| <option value="">جميع الفئات</option> | |
| <option value="medical">طبية</option> | |
| <option value="radiology">أشعة</option> | |
| <option value="pathology">علم الأمراض</option> | |
| <option value="clinical">سريرية</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Search Results --> | |
| <div id="search-results" class="search-results" style="display: none;"> | |
| <h6><i class="fas fa-list"></i> نتائج البحث</h6> | |
| <div id="search-results-list" class="results-list"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manual Add Panel --> | |
| <div class="tab-pane fade" id="manual-panel" role="tabpanel"> | |
| <form id="add-dataset-form"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="dataset-name" class="form-label">اسم قاعدة البيانات</label> | |
| <input type="text" class="form-control" id="dataset-name" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="dataset-id" class="form-label">معرف Hugging Face</label> | |
| <input type="text" class="form-control" id="dataset-id" placeholder="organization/dataset-name" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="mb-3"> | |
| <label for="dataset-category" class="form-label">الفئة</label> | |
| <select class="form-select" id="dataset-category"> | |
| <option value="medical">طبية</option> | |
| <option value="radiology">أشعة</option> | |
| <option value="pathology">علم الأمراض</option> | |
| <option value="clinical">سريرية</option> | |
| <option value="research">بحثية</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="mb-3"> | |
| <label for="dataset-language" class="form-label">اللغة</label> | |
| <select class="form-select" id="dataset-language"> | |
| <option value="Arabic">العربية</option> | |
| <option value="English">الإنجليزية</option> | |
| <option value="Multilingual">متعددة اللغات</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="mb-3"> | |
| <label for="dataset-modality" class="form-label">نوع البيانات</label> | |
| <select class="form-select" id="dataset-modality"> | |
| <option value="text">نص</option> | |
| <option value="image">صورة</option> | |
| <option value="audio">صوت</option> | |
| <option value="multimodal">متعدد الوسائط</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="dataset-description" class="form-label">الوصف</label> | |
| <textarea class="form-control" id="dataset-description" rows="3"></textarea> | |
| </div> | |
| <div class="d-flex gap-2"> | |
| <button type="button" class="btn btn-secondary" id="validate-dataset"> | |
| <i class="fas fa-check"></i> التحقق من صحة البيانات | |
| </button> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-plus"></i> إضافة قاعدة البيانات | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Manage Panel --> | |
| <div class="tab-pane fade" id="manage-panel" role="tabpanel"> | |
| <div class="manage-section"> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <h6><i class="fas fa-list"></i> قواعد البيانات المُعدة</h6> | |
| <button class="btn btn-sm btn-outline-primary" id="refresh-databases"> | |
| <i class="fas fa-sync"></i> تحديث | |
| </button> | |
| </div> | |
| <div id="configured-databases" class="configured-databases"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dataset Loading Modal --> | |
| <div class="modal fade" id="loadingModal" tabindex="-1"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title"> | |
| <i class="fas fa-download me-2"></i> | |
| تحميل قاعدة البيانات | |
| </h5> | |
| </div> | |
| <div class="modal-body text-center"> | |
| <div class="spinner-border text-primary mb-3" role="status"></div> | |
| <h6 id="loading-dataset-name">جاري التحميل...</h6> | |
| <p class="text-muted" id="loading-status">يرجى الانتظار...</p> | |
| <div class="progress mt-3"> | |
| <div class="progress-bar progress-bar-striped progress-bar-animated" | |
| role="progressbar" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dataset Details Modal --> | |
| <div class="modal fade" id="datasetDetailsModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="dataset-details-title"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| تفاصيل قاعدة البيانات | |
| </h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body" id="dataset-details-content"> | |
| <!-- Content will be populated by JavaScript --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> | |
| <button type="button" class="btn btn-primary" id="load-dataset-btn"> | |
| <i class="fas fa-download me-2"></i>تحميل قاعدة البيانات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success/Error Messages --> | |
| <div class="toast-container position-fixed bottom-0 end-0 p-3"> | |
| <div id="success-toast" class="toast" role="alert"> | |
| <div class="toast-header bg-success text-white"> | |
| <i class="fas fa-check-circle me-2"></i> | |
| <strong class="me-auto">نجح</strong> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button> | |
| </div> | |
| <div class="toast-body" id="success-message"></div> | |
| </div> | |
| <div id="error-toast" class="toast" role="alert"> | |
| <div class="toast-header bg-danger text-white"> | |
| <i class="fas fa-exclamation-circle me-2"></i> | |
| <strong class="me-auto">خطأ</strong> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button> | |
| </div> | |
| <div class="toast-body" id="error-message"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="/static/js/medical-datasets.js"></script> | |
| </body> | |
| </html> | |