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> | |
| .token-card { | |
| border: 1px solid #dee2e6; | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-bottom: 15px; | |
| background: #f8f9fa; | |
| } | |
| .token-type-badge { | |
| font-size: 0.8em; | |
| padding: 4px 8px; | |
| } | |
| .token-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .security-level { | |
| display: inline-block; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 0.7em; | |
| font-weight: bold; | |
| } | |
| .security-medium { background-color: #fff3cd; color: #856404; } | |
| .security-high { background-color: #d1ecf1; color: #0c5460; } | |
| .security-very-high { background-color: #d4edda; color: #155724; } | |
| .token-form { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 25px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .help-text { | |
| font-size: 0.9em; | |
| color: #6c757d; | |
| margin-top: 5px; | |
| } | |
| </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 active" href="/tokens">إدارة الرموز</a> | |
| <a class="nav-link" href="/medical-datasets">البيانات الطبية</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mt-4"> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <h2><i class="fas fa-key me-2"></i>إدارة الرموز المميزة</h2> | |
| <p class="text-muted">إدارة رموز Hugging Face للوصول للنماذج والبيانات</p> | |
| <!-- Tokens List --> | |
| <div id="tokens-list"> | |
| <div class="d-flex justify-content-center"> | |
| <div class="spinner-border" role="status"> | |
| <span class="visually-hidden">جاري التحميل...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <!-- Token Selector for Tasks --> | |
| <div class="token-form mb-4"> | |
| <h4><i class="fas fa-tasks me-2"></i>اختيار الرمز حسب المهمة</h4> | |
| <div class="mb-3"> | |
| <label for="task-type" class="form-label">نوع المهمة</label> | |
| <select class="form-select" id="task-type"> | |
| <option value="read">قراءة النماذج والبيانات</option> | |
| <option value="download">تحميل النماذج</option> | |
| <option value="medical">البيانات الطبية</option> | |
| <option value="private">النماذج الخاصة</option> | |
| <option value="write">رفع النماذج</option> | |
| <option value="upload">مشاركة المحتوى</option> | |
| <option value="commercial">المشاريع التجارية</option> | |
| <option value="enterprise">المؤسسات</option> | |
| </select> | |
| <div class="help-text" id="task-help">اختر نوع المهمة للحصول على الرمز المناسب</div> | |
| </div> | |
| <button type="button" class="btn btn-primary w-100" id="get-task-token"> | |
| <i class="fas fa-key me-2"></i>الحصول على الرمز المناسب | |
| </button> | |
| <div id="task-token-result" class="mt-3" style="display: none;"> | |
| <div class="alert alert-success"> | |
| <strong>الرمز المناسب:</strong> | |
| <div id="selected-token-info"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add New Token Form --> | |
| <div class="token-form"> | |
| <h4><i class="fas fa-plus me-2"></i>إضافة رمز جديد</h4> | |
| <form id="token-form"> | |
| <div class="mb-3"> | |
| <label for="token-name" class="form-label">اسم الرمز</label> | |
| <input type="text" class="form-control" id="token-name" required> | |
| <div class="help-text">اسم مميز لتذكر الرمز</div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="token-value" class="form-label">قيمة الرمز</label> | |
| <input type="password" class="form-control" id="token-value" required> | |
| <div class="help-text">رمز Hugging Face الخاص بك</div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="token-type" class="form-label">نوع الرمز</label> | |
| <select class="form-select" id="token-type"> | |
| <option value="read">رمز قراءة</option> | |
| <option value="write">رمز كتابة</option> | |
| <option value="fine_grained">رمز مخصص</option> | |
| </select> | |
| <div class="help-text" id="token-type-help">للتطوير والتعلم</div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="token-description" class="form-label">الوصف (اختياري)</label> | |
| <textarea class="form-control" id="token-description" rows="2"></textarea> | |
| </div> | |
| <div class="mb-3 form-check"> | |
| <input type="checkbox" class="form-check-input" id="is-default"> | |
| <label class="form-check-label" for="is-default"> | |
| تعيين كرمز افتراضي | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-primary w-100"> | |
| <i class="fas fa-save me-2"></i>حفظ الرمز | |
| </button> | |
| </form> | |
| <!-- Token Validation --> | |
| <div class="mt-3"> | |
| <button type="button" class="btn btn-outline-secondary w-100" id="validate-token"> | |
| <i class="fas fa-check-circle me-2"></i>التحقق من صحة الرمز | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Token Types Info --> | |
| <div class="mt-4"> | |
| <h5>أنواع الرموز</h5> | |
| <div class="accordion" id="token-types-accordion"> | |
| <div class="accordion-item"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#read-token-info"> | |
| رمز القراءة <span class="security-level security-medium ms-2">متوسط الأمان</span> | |
| </button> | |
| </h2> | |
| <div id="read-token-info" class="accordion-collapse collapse" data-bs-parent="#token-types-accordion"> | |
| <div class="accordion-body"> | |
| <strong>الاستخدام:</strong> التطوير والتعلم<br> | |
| <strong>الأذونات:</strong> قراءة النماذج والبيانات<br> | |
| <strong>القيود:</strong> لا يمكن رفع المحتوى | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#write-token-info"> | |
| رمز الكتابة <span class="security-level security-high ms-2">أمان عالي</span> | |
| </button> | |
| </h2> | |
| <div id="write-token-info" class="accordion-collapse collapse" data-bs-parent="#token-types-accordion"> | |
| <div class="accordion-body"> | |
| <strong>الاستخدام:</strong> مشاركة النماذج<br> | |
| <strong>الأذونات:</strong> قراءة وكتابة كاملة<br> | |
| <strong>القيود:</strong> محدود بأذونات الحساب | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fine-grained-token-info"> | |
| رمز مخصص <span class="security-level security-very-high ms-2">أمان فائق</span> | |
| </button> | |
| </h2> | |
| <div id="fine-grained-token-info" class="accordion-collapse collapse" data-bs-parent="#token-types-accordion"> | |
| <div class="accordion-body"> | |
| <strong>الاستخدام:</strong> المشاريع التجارية<br> | |
| <strong>الأذونات:</strong> مخصصة لكل مستودع<br> | |
| <strong>القيود:</strong> محدود زمنياً ومكانياً | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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/token-manager.js"></script> | |
| </body> | |
| </html> | |