🌐 تطبيق CardioGuard للكشف المبكر عن أمراض القلب - الويب

🔗 روابط المشاريع

نظرة عامة

CardioGuard Web هو تطبيق ويب حديث يستخدم تقنيات التعلم الآلي للكشف المبكر عن أمراض القلب. يعتمد التطبيق على ثلاثة نماذج للذكاء الاصطناعي لتقديم تقييم دقيق لمخاطر الإصابة بأمراض القلب.

المميزات الرئيسية ✨

• 🤖 ثلاثة نماذج للذكاء الاصطناعي: KNN، Naive Bayes، Decision Tree
• 🌐 دعم لغتين كامل: العربية والإنجليزية مع دعم RTL
• 🎨 واجهة مستخدم حديثة: تصميم عصري بتقنية Svelte و Tailwind CSS
• 📊 رسوم بيانية تفاعلية: مخططات شريطية لعرض النتائج
• 🎯 نظام ألوان ذكي: يتغير حسب مستوى الخطر
• 📱 تصميم متجاوب: يعمل على جميع أحجام الشاشات والأجهزة
• ⚡ أداء عالي: بناء ثابت (Static) وتحميل سريع
• 🔒 آمن: لا يتم تخزين البيانات الطبية

نماذج التعلم الآلي 🧠

نظام الألوان 🎨

متطلبات النظام 📋

• Node.js: v18.0 أو أحدث
• npm/pnpm/yarn: أي مدير حزم
• المتصفحات: Chrome/Firefox/Safari/Edge (آخر إصدارين)
• الاتصال بالإنترنت: مطلوب للاتصال بالـ API

التقنيات المستخدمة 🛠️

• Framework: SvelteKit 2.x
• اللغة: TypeScript
• التنسيق: Tailwind CSS 4.x
• الرسوم البيانية: Chart.js
• البناء: Vite 7.x
• الـ Adapter: Static Adapter (للنشر الثابت)
• معمارية التطبيق: Component-Based Architecture

البنية المعمارية 🏗️

📁 frontend/
├── 📁 src/
│   ├── 📄 app.html                      # HTML Template
│   ├── 📄 app.css                       # Global Styles
│   ├── 📁 routes/
│   │   ├── 📄 +layout.svelte           # Layout الرئيسي
│   │   └── 📄 +page.svelte             # الصفحة الرئيسية
│   ├── 📁 lib/
│   │   ├── 📁 components/
│   │   │   ├── 📄 Header.svelte        # الهيدر
│   │   │   ├── 📄 Hero.svelte          # قسم البطل
│   │   │   ├── 📄 RiskCalculator.svelte # حاسبة المخاطر
│   │   │   ├── 📄 About.svelte         # حول المشروع
│   │   │   ├── 📄 ModelComparison.svelte # مقارنة النماذج
│   │   │   └── 📄 Footer.svelte        # التذييل
│   │   ├── 📁 stores/
│   │   │   └── 📄 language.ts          # إدارة اللغات
│   │   └── 📄 index.ts                 # Barrel Export
│   └── 📁 assets/                      # الصور والملفات
├── 📁 static/
│   ├── 📄 robots.txt                   # SEO
│   └── 📁 data/
│       └── 📄 heart.csv                # بيانات التدريب
├── 📁 build/                           # البناء النهائي
├── 📄 package.json                     # Dependencies
├── 📄 svelte.config.js                 # Svelte Configuration
├── 📄 vite.config.ts                   # Vite Configuration
├── 📄 tailwind.config.js               # Tailwind Configuration
├── 📄 tsconfig.json                    # TypeScript Configuration
└── 📄 README.md                        # هذا الملف

كيفية البناء والتشغيل 🚀

المتطلبات الأساسية:

• Node.js 18+ (تحميل Node.js)
• npm/pnpm/yarn

خطوات البناء:

1. استنساخ المشروع:

   git clone https://github.com/HazemAlhajIhmid/Master-Thesis--CardioGuard---Early-Detection-of-Heart-Disease-System.git
   cd heart-disease-detection/frontend
   

2. تثبيت التبعيات:

   npm install
   # أو
   pnpm install
   # أو
   yarn install
   

3. إعداد متغيرات البيئة (اختياري):

   # إنشاء ملف .env
   echo "VITE_API_BASE_URL=http://localhost:5000" > .env
   

4. تشغيل بيئة التطوير:

   npm run dev
   # أو
   npm run dev -- --open  # يفتح المتصفح تلقائياً
   

الوصول إلى التطبيق: http://localhost:5173

5. بناء للإنتاج:

   npm run build
   

6. معاينة البناء:

   npm run preview
   

ملفات التوثيق 📚

حالات الاختبار السريعة 🧪

🟢 مخاطر منخفضة:

عمر: 30، جنس: أنثى، ضغط الدم: 110، كوليسترول: 180
النتيجة المتوقعة: 10-25% 🟢 منخفض

🟠 مخاطر متوسطة:

عمر: 50، جنس: ذكر، ضغط الدم: 130، كوليسترول: 240
النتيجة المتوقعة: 35-55% 🟠 متوسط

🔴 مخاطر مرتفعة:

عمر: 65، جنس: ذكر، ضغط الدم: 160، كوليسترول: 300
النتيجة المتوقعة: 70-95% 🔴 مرتفع

المكونات الرئيسية 📦

1. Header Component

• التنقل بين الأقسام
• تبديل اللغة (عربي/إنجليزي)
• قائمة متجاوبة للهاتف

2. Hero Component

• عرض المعلومات الرئيسية للمشروع
• أزرار الإجراءات السريعة
• رسوم توضيحية متحركة
• معلومات الجامعة والبحث

3. RiskCalculator Component

• نموذج إدخال البيانات الطبية (13 حقل)
• التحقق من صحة المدخلات
• عرض النتائج مع نسبة المخاطر
• مقارنة النماذج الثلاثة
• رسوم بيانية تفاعلية
• نصائح وتوضيحات لكل حقل

4. About Component

• معلومات عن الباحث والمشرفين
• منهجية البحث
• معلومات الجامعة

5. ModelComparison Component

• مقارنة بين النماذج الثلاثة
• عرض الدقة والأداء
• مقاييس التقييم

6. Footer Component

• معلومات الحقوق
• روابط التواصل
• معلومات إضافية

الشاشات الرئيسية 📸

الصفحة الرئيسية                 قسم الحاسبة                عرض النتائج
      ┌────┐                      ┌────┐                   ┌────┐
      │ 🏠 │  ──────────────>    │ 📝 │  ──────────────>  │ 📊 │
      └────┘                      └────┘                   └────┘
    - عرض البطل                - إدخال 13 حقل           - مستوى المخاطر
    - معلومات الجامعة          - التحقق التلقائي         - مقارنة 3 نماذج
    - نظرة عامة                - توضيحات للحقول          - رسوم بيانية
    - مقارنة النماذج            - حساب المخاطر            - نسبة الثقة

نظام اللغات 🌐

آلية العمل:

• دعم كامل للغتين العربية والإنجليزية
• دعم RTL للعربية و LTR للإنجليزية
• تبديل فوري بدون إعادة تحميل
• الترجمة مخزنة في language.ts

التبديل بين اللغات:

// في أي مكون
import { language } from '$lib/stores/language';

// تغيير اللغة
$language = 'ar';  // للعربية
$language = 'en';  // للإنجليزية

التكامل مع الـ API 🔌

Endpoint الرئيسي:

POST /api/prediction/predict

مثال الطلب:

{
  "Age": 50,
  "Sex": 1,
  "CP": 1,
  "TrestBPS": 130,
  "Chol": 240,
  "FBS": 0,
  "RestECG": 0,
  "Thalach": 150,
  "Exang": 0,
  "Oldpeak": 1.0,
  "Slope": 1,
  "CA": 1,
  "Thal": 2
}

مثال الاستجابة:

{
  "ensemble": {
    "riskScore": 0.4523,
    "riskLevel": "moderate",
    "prediction": false
  },
  "knn": {
    "confidence": 55.84,
    "prediction": true,
    "accuracy": 82
  },
  "naiveBayes": {
    "confidence": 48.23,
    "prediction": false,
    "accuracy": 82
  },
  "decisionTree": {
    "confidence": 32.56,
    "prediction": false,
    "accuracy": 70
  }
}

النشر 🚀

التطبيق يدعم النشر على عدة منصات:

1. Vercel (الموصى به)

npm install -g vercel
vercel

2. Netlify

npm run build
# ثم رفع مجلد build/ إلى Netlify

3. GitHub Pages

npm run build
# ثم رفع محتويات build/ إلى gh-pages branch

4. خادم ثابت

npm run build
# نسخ محتويات build/ إلى خادم الويب

لمزيد من التفاصيل، راجع DEPLOYMENT_GUIDE.md

معلومات البحث 🎓

الباحث: حازم خضر الحاج احميد الإشراف:

• د.م. جورج أنور كراز (المشرف الأساسي)
• د. ماجدة البكور (المشرف المشارك)

الجامعة: الجامعة الافتراضية السورية
الوزارة: وزارة التعليم العالي - الجمهورية العربية السورية

عنوان البحث: تطوير خوارزميات التنقيب عن البيانات في تحسين عملية تشخيص أمراض القلب

البريد الإلكتروني:

• الباحث: Hazem_82763@svuonline.org
• المشرف الأول: T_gkarraz@svuonline.org
• المشرف الثاني: T_mbakour@svuonline.org

المساهمة 🤝

هذا المشروع البحثي مفتوح للمساهمات. يرجى:

1. عمل Fork للمشروع
2. إنشاء Branch جديد (git checkout -b feature/amazing-feature)
3. Commit التغييرات (git commit -m 'Add amazing feature')
4. Push إلى Branch (git push origin feature/amazing-feature)
5. فتح Pull Request

المشاكل المعروفة والحلول 🔧

الأمان والخصوصية 🔒

• ✅ لا يتم تخزين البيانات الطبية في المتصفح
• ✅ اتصال آمن مع Backend API
• ✅ لا يتم مشاركة البيانات مع أطراف ثالثة
• ✅ يتم حذف البيانات بعد الحصول على النتيجة
• ⚠️ هذا النظام للأغراض البحثية فقط ولا يحل محل الاستشارة الطبية

الترخيص 📜

© 2026 CardioGuard - جميع الحقوق محفوظة

هذا المشروع للأغراض البحثية الأكاديمية فقط. لا يحل محل الاستشارة الطبية المتخصصة.

الدعم الفني 📞

للمساعدة والاستفسارات:

• GitHub Issues: افتح Issue جديد
• البريد الإلكتروني: Hazem_82763@svuonline.org

الإصدارات 📅

v1.0.0 (2026-02-08)

• ✅ إطلاق النسخة الأولى
• ✅ دعم اللغتين العربية والإنجليزية
• ✅ ثلاثة نماذج للتعلم الآلي
• ✅ واجهة مستخدم حديثة بـ SvelteKit
• ✅ نظام ألوان ديناميكي حسب مستوى الخطر
• ✅ رسوم بيانية تفاعلية
• ✅ تصميم متجاوب كامل
• ✅ أداء محسّن وتحميل سريع

الموارد الإضافية 📚

• Svelte Documentation
• SvelteKit Documentation
• Tailwind CSS Documentation
• Chart.js Documentation
• TypeScript Documentation

شكر وتقدير 🙏

• الجامعة الافتراضية السورية
• وزارة التعليم العالي
• المشرفون على البحث
• UCI Machine Learning Repository (مصدر البيانات)

تاريخ آخر تحديث: 8 فبراير 2026
الإصدار: 1.0.0
الحالة: ✅ مستقر ومكتمل