محمد_عاطف

نعم هذه هي المكتبة يمكنك التمرير إلى الأسفل والضعط على github للذهاب إلى مستودع المكتبة ورؤية الأمثلة الخاصة بها وكيفية تثبيتها وإستخدامها في الموقع الذي في الصورة هذا ما تقوم به المكتبة عن التمرير لأسفل.

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

وعليكم السلام ورحمة الله وبركاته. لاحظ أنك أولا قمت باستخدام plt.subplot(2,2,2) مرتين بدون رسم في المرة الأولى وهذا سيؤدي إلى مشكلة بسبب التعارض. يمكنك إذا أردت وضع الكود بأكمله في دالة وذلك منعا للتكرار لو تقوم بتنفيذ الكود أكثر من مرة : import matplotlib.pyplot as plt import seaborn as sns def plot_demographics(data_train, data_train_demographics): plt.figure(figsize=(12, 8)) # الرسم البياني الأول: KDE Plot plt.subplot(2, 2, 1) sns.kdeplot(data_train_demographics['adult_child'], fill=True, color='skyblue', bw_adjust=0.5) plt.title("KDE Plot of Age") plt.xlabel("Age") # الرسم البياني الثاني: Histogram plt.subplot(2, 2, 2) sns.histplot(data_train_demographics['hla_match_dqb1_high'], kde=False, color='skyblue') plt.title('Distribution of HLA Match DQB1 High') plt.xlabel("HLA Match DQB1 High") plt.ylabel("Count") # الرسم البياني الثالث: Count Plot ل TCE IMM Match plt.subplot(2, 2, 3) sns.countplot(data=data_train, x='tce_imm_match', color='blue') plt.title('Distribution of TCE IMM Match') plt.xlabel("TCE IMM Match") plt.ylabel("Count") # الرسم البياني الرابع: Count Plot ل HLA NMDP 6 plt.subplot(2, 2, 4) sns.countplot(data=data_train, x='hla_nmdp_6', color='blue') plt.title('Distribution of HLA NMDP 6') plt.xlabel("HLA NMDP 6") plt.ylabel("Count") plt.tight_layout() plt.show() # استدعاء الدالة و تمرير البيانات لها plot_demographics(data_train, data_train_demographics) أما لو أردت إستعمال OOP حيث تجعل لكل رسم دالة خاصة به وذلك لرسمه دون تكرار للأكواد يمكنك إستخدام التالي : import matplotlib.pyplot as plt import seaborn as sns class DemographicVisualizer: def __init__(self, data_train, data_train_demographics, figsize=(12, 8)): self.data_train = data_train self.data_train_demographics = data_train_demographics self.figsize = figsize self.colors = {'kde': 'skyblue', 'count': 'blue'} def plot_kde(self, ax, column, title, xlabel): sns.kdeplot(self.data_train_demographics[column], fill=True, color=self.colors['kde'], bw_adjust=0.5, ax=ax) ax.set_title(title) ax.set_xlabel(xlabel) def plot_histogram(self, ax, column, title, xlabel, ylabel): sns.histplot(self.data_train_demographics[column], kde=False, color=self.colors['kde'], ax=ax) ax.set_title(title) ax.set_xlabel(xlabel) ax.set_ylabel(ylabel) def plot_count(self, ax, column, title, xlabel, ylabel, data_source='data_train'): data = self.data_train if data_source == 'data_train' else self.data_train_demographics sns.countplot(data=data, x=column, color=self.colors['count'], ax=ax) ax.set_title(title) ax.set_xlabel(xlabel) ax.set_ylabel(ylabel) def plot_all(self): fig, axes = plt.subplots(2, 2, figsize=self.figsize) # الرسم البياني الأول: KDE Plot self.plot_kde(axes[0, 0], 'adult_child', 'KDE Plot of Age', 'Age') # الرسم البياني الثاني: Histogram self.plot_histogram(axes[0, 1], 'hla_match_dqb1_high', 'Distribution of HLA Match DQB1 High', 'HLA Match DQB1 High', 'Count') # الرسم البياني الثالث: Count Plot ل TCE IMM Match self.plot_count(axes[1, 0], 'tce_imm_match', 'Distribution of TCE IMM Match', 'TCE IMM Match', 'Count', data_source='data_train') # الرسم البياني الرابع: Count Plot ل HLA NMDP 6 self.plot_count(axes[1, 1], 'hla_nmdp_6', 'Distribution of HLA NMDP 6', 'HLA NMDP 6', 'Count', data_source='data_train') plt.tight_layout() plt.show() # استخدام الكائن visualizer = DemographicVisualizer(data_train, data_train_demographics) visualizer.plot_all() وهكذا وضعنا كل رسم في دالة داخل الصنف حيث يمكنك إستخدامها وطباعتها بشكل منفصل . وأيضا قمنا بتجميع طباعة جميع الرسومات في الدالة plot_all وبمجرد إستدعائها يصبح الكود كما الكود الذي أرفقته أنت.

يمكنك إستخدام مكتبة AOS لإضافة animation للموقع وجعل شكله أفضل وجذاب . يمكنك إضافة نموذج بداخل modal مثلا عند الضعط على زر Contact Me يظهر به النموذج وفيه بيانات الطبيب أو نموذج يتم إرساله لحجز الموعد. يمكنك إضافة قسم للتقيمات وأراء العملاء وتجعل المستخدمين يقيمون الخدمة. الموقع بسيط لهذا لا توجد إضافات كثيرة يمكنك العمل عليها .

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

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

وعليكم السلام ورحمة الله وبركاته . إذا قمت بالذهاب إلى موقع PageSpeed Insights وأظهر لك أن 64% performance فستجد أنه يخبرك بالمشاكل الموجودة والنصائح التي تجعل النسبة تزيد لديك. أولا أنصحك بإستخدام مكتبة lazyload في جافاسكريبت نظرا لوجود الكثير من الصور لديك وهذا الأمر سيجعل النسبة ترتفع كثيرا . حيث تلك المكتبة لا تقوم بتحميل الصور جميعا مرة واحدة عند تحميل الصفحة . بل تقوم بتحميل فقط الصور بمجرد دخولها إلى الجزء الظهار في الشاشة في المتصفح . فمثلا لو جميع الصور في أسفل الموقع لن يتم إرسال طلب بإحضار الصور إلى عند التمرير لأسفل وبمجرد دخول صورة إلى نافذة المتصفح يتم إرسال الطلب وعرضها في الموقع. أيضا يفضل إستخدام ال pagination إذا كان يتم عرض محتوى دايناميكي وذلك لمنع تكبير محتوى HTML بشكل يؤثر على الأداء. أيضا من المهم جدا أن تضع للعناصر مثل الصور أو العناصر التي يتم تحميلها من ال API أى التي تأخذ وقتا لإحضارها من مصدر خارجي أن تجعل لها طول وعرض ثابتين . وذلك لتجنب إزاحة المحتوي فهذا الأمر مهم ويتم إحتسابه من ضمن الأداء . حيث مثلا تخيل أن هناك زر أسفل أعلى صورة مثلا ولم يتم تحميلها حتى الآن والمستخدم يرد الضغط على جزء أسفل الصورة ولكن بمجرد تحميل الصورة تجد أن الصورة أخذت طول وعرض مما أزاح المحتوى وجعل المستخدم يضغط على الزر الخاطئ ومن الممكن أن هذا الزر يفعل إجرار لا يريده المستخدم . وهذا الأمر يقلل تجربة المستخدم والتي تقلل من الأداء. أيضا يفضل عدم تضمين ملفات js ليست مستخدمه ولو كنت لا تستخدم cdn أن تقوم بتفعيل ال cache فلا يتم تحميل الملفات الثابته كل مرة .

يتم حفظ التنبؤ والإحتمالات في جدول prediction : وإذا ذهبت إلى : http://127.0.0.1:5000/dashboard ستجد أنه يحضر النتائج التي تم حفظها في جدول prediction : إذا أردت حفظ أى بيانات أخرى يمكنك تعديل الجدول بما تريده وإضافة البيانات في ملف api.py في هذا السطر : pr = Prediction(result=y, proba=probs, user=current_user._get_current_object())

هل تقصد أن يتم إعادة توجيه المستخدم عند تسجيل الدخول أو إنشاء حساب جديد إلى صفحة ال predict ؟ إذا كان كذلك فيجب عليك في ملف auth.py أن تقوم بإعادة التوجيه إلى auth.predictفي login . وفي register تقوم أولا بتسجيل دخول المستخدم بعد إنشاءه وبعدها تقوم بتوجيه هكذا : from flask import Blueprint, render_template, request, redirect, url_for, flash from flask_login import login_user, logout_user, login_required from models import db, User bp = Blueprint('auth', __name__) @bp.route('/register', methods=['GET', 'POST']) def register(): if request.method == 'POST': u, p = request.form['username'], request.form['password'] if User.query.filter_by(username=u).first(): flash('اسم المستخدم موجود') else: user = User(username=u) user.set_password(p) db.session.add(user) db.session.commit() flash('تم التسجيل') login_user(user) return redirect(url_for('auth.predict')) return render_template('register.html') @bp.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': u = User.query.filter_by(username=request.form['username']).first() if u and u.check_password(request.form['password']): login_user(u) return redirect(url_for('auth.predict')) flash('بيانات غير صحيحة') return render_template('login.html') @bp.route('/predict', methods=['GET']) @login_required def predict(): return render_template('predict.html') @bp.route('/logout') def logout(): logout_user() return redirect(url_for('auth.login')) def load_user(user_id): return User.query.get(int(user_id)) وإنه بالفعل يتم حفظ البيانات في قاعدة البيانات ويجب أن تظهر لك في dbGate ولكن تأكد من الإتصال بقاعدة البيانات الصحيحة . فلو ذهبت إلى dashboard ستجد أنه يتم إعادة السجلات السابقة بالتنبؤ لهذا المستخدم.

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

هذا بسبب أنك لم تضع العناصر بداخل عنصر cards كما تفعل في دالة burger . لذلك يجب إضافة العنصر : <div class="cards"> بعد سطر 45 و 82 و 118 في ملف script.js . script.js

هل أنت مشترك في دورة تطوير الألعاب هنا ؟ إذا كان كذلك فإنه يتم شرح بالفعل كيفية إضافة الصور إلى مشروع godot وإستخدامها وإذا كانت تواجهك مشكلة في هذا الأمر فيرجى أسفل الدرس الخاص الذي به مشكلتك أن تقوم بوضع سؤالك هنا أسفل صندوق التعليقات. ولكن إليك الطريقة بالتفصيل . تأكد أولا أن الصورة لديك بصيغة تدعمها Godot مثل .png أو .jpg. وببساطة يمكنك سحب الصورة من المكان الموجودة فيه وتوجيها إلى برنامج godot وأن تفلتها داخل نافذة Godot في القسم الخاص ب FileSystem في الأسفل : ولإظهار الصورة داخل المشهد فممن شجرة العقد (Scene Tree) على اليسار قم بالضغط على + لإضافة عقدة جديدة وقم بإختيار Sprite2D أو TextureRect حسب نوع الاستخدام : ومن خصائص العقدة على اليمين (Inspector) سترى خاصية اسمها Texture قم بالضغط عليها ثم اختر الصورة التي أضفتها من الملفات : الآن سترى الصورة ظهرت داخل نافذة اللعبة.

وعليكم السلام ورحمة الله وبركاته. يجب عليك ألا تشعر بالملل سريعا فإن مجال البرمجة كبير ولا يمكن إختصاره وإلا لن يكون مستواك بالمستوى المطلوب والذي يؤهلك للوصول إلى الوظائف بسهولة وبسرعه. أنصحك إذا مللت ولا تريد إكمال دورة علوم الحاسوب ولكن من إكمالها . أن تقوم على الأقل بدراسة المسارات التالية : قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه ويمكنك حينها الإنتقال إلى دورة تطوير واجهات المستخدم . ونعم بالفعل دورة تطوير واجهات المستخدم تؤهلك لأن تصبح مطور مواقع ثابته وأن تقوم بتصميم صفحات الهبوط وغيرها من الوظائف التي تتطلب تصميم واجهات المستخدم .

لقد فهمت المشكلة التي تقصدها . هذا بسبب مشاكل كثيرة لديك في التنسيقات . أولا في ملف style.css سطر 405 لاحظ أنك وضعت العرض بقيمة 100vh وهذا خاطئ حيث vh هي للأطوال أم vw للعرض ولكن تلك القيمة كبيرة وهي سبب تلك المشكلة لذلك يجب حذف هذا السطر . ثانيا المشكلة في الصور في قسم article لاحظ أنك وضعت لها عرض ثابت 600px ولهذا في الشاشات الأقل من 600px الصورة تأخذ عرض أكبر بكثير من الشاشة . وأيضا في قسم services قد وضعت padding كبير لهذا يجب تقليله في الشاشات الصغيرة . وإليك الملف بعد تعديل الأخطاء لك . style.css

الخطأ الذي يظهر هو ValueError: X has 13 features, but StandardScaler is expecting 15 features as input. وهو بسبب السطر Xs = scaler.transform(df). وهذا الأمر يعني أن scaler.joblib الذي قمت بتحميله في تطبيق Flask يتوقع 15 ميزة كمدخل لديك بالرغم أن df الذي تنشأه من args يحتوي على 13 ميزة فقط. وفي الملف notebook.ipynb الذي أرفقته يظهر أنه تم تدريب StandardScaler على 5 ميزات رقمية فقط وهي age و trestbps و chol و thalch و oldpeak. فالكود الحالي في api.py يقوم بتمرير جميع ال 13 ميزة إلى scaler.transform. ولحل المشكلة يجب علينا التأكد من أن df الذي يتم إدخاله إلى scaler.transform يحتوي على 15 ميزة قبل تمريره إلى ال scaler. وهذا يعني أن ال 5 ميزات الرقمية الأصلية age و trestbps و chol و thalch و oldpeak يجب ألا يتم تمريرها إلى هذا ال scaler. وإليك الملف api.py بعد تعديله وإصلاح الأخطاء. api.py

هل يمكنك توضيح المشكلة التي تقصدها ؟ فالموقع والصورة المرفقة لا توجد بها أى مشكلة.

أولا في ملف api.py يجب تغير get إلى post في Predict في السطر 22 هكذا : class Predict(Resource): @login_required def post(self): args = parser.parse_args() print(args) df = pd.DataFrame([args]); Xs = scaler.transform(df) Xdl = extractor.predict(Xs); X = np.hstack([Xs, Xdl]) y = int(rf.predict(X)[0]); probs = rf.predict_proba(X)[0].tolist() rec = (["مراجعة طبيب قلب","رسم قلب","متابعة مستمرة"] if y>=2 else ["نظام غذائي","رياضة","متابعة سنوية"]) pr = Prediction(result=y, proba=probs, user=current_user._get_current_object()) db.session.add(pr); db.session.commit() print(y,probs,rec) return jsonify(prediction=y, probabilities=probs, recommendations=rec) بعد ذلك يجب إنشاء ملف templates\predict.html ولقد قمت بإرفاقه لك يمكنك وضعه مباشرة في مجلد templates وهذا هو الذي سيحوي النموذج والمدخلات إلى الخادم. والآن في ملف auth.py يجب وضع المسار الجديد الذي يعرض النموذج هكذا : @bp.route('/predict', methods=['GET']) @login_required def predict(): return render_template('predict.html') يجب إيقاف الخادم الآن وإعادة تشغيله والذهاب إلى العنوان http://127.0.0.1:5000/predict وسيظهر لك النموذج . predict.html

هل تقصد إرسال البيانات إلى العنوان predict ؟ إذا كان كذلك فيمكنك إرساله في ال body هكذا من خلال برنامج postman ولكن يجب عليك أن تكون قد قمت بتسجيل الدخول أولا : وهذه هي البيانات التي يمكنك إدخالها : { "age":10, "sex":1.0, "cp":1, "trestbps":1, "chol":1, "fbs":1, "restecg":1, "thalch":2, "oldpeak":1, "slope":1, "thal":1, "ca":1, "exang":1 } ولكن يفضل تغير نوع الطلب إلى post وليس get للتعامل معه بشكل أفضل.

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

هذا يعتمد على حجم المشروع وحجم التلاعب بالعناصر DOM . وأيضا هل تريد أن يكون المشروع هو مشروع صفحة واحدة أم لا . أولا إن التلاعب بال DOM هو أمر صعب ومكلف أى إذا لم يتم إستخدامه بشكل صحيح فإنه يستهلك موارد الجهاز ويجعل الموقع بطيئا مما يعطي تجربة مستخدم سيئة . بعكس React والذي يتعامل مع ال DOM بشكل أفضل بكثير بفضل ال Virtual Dom . إذا لو مثلا كان مشروعك عبارة عن صفحة واحدة أو بعض الصفحات البسيطة والتي لا تتطلب أن يكون المشروع عبارة عن صفحة واحدة أى يمكن تحديث الصفحة دون مشكلة . فهنا بالطبع الأفضل ال DOM لأنه سيوفر وقت ومجهود في إنشاء مشروع React وتخصيصه . أما إذا كان المشروع يتطلب إرسال طلبات إلى الخادم API وإحضار بيانات وعرضها وتحديثها في الصفحة فالأفضل هنا بالطبع React لتوفير الوقت والمجهود عليك وأيضا لجعل الموقع سريع .

إذا يجب عليك إستخدام React Route لتحقيق ذلك فأنت في ملف src\App.jsx تقوم بإتخدام مكون Home و About معا حيث تستدعي About أسفل Home . ولكن يجب عليك إستدعائه المكون عند الذهاب إلى العنوان نفسه . فأولا يجب تثبيت الحزمة من خلال الأمر : npm install react-router-dom بعد ذلك نقوم بتعديل ملف App ليكون كالتالي : import React from "react" import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Navbar from "./Components/Navbar/Navbar" import Home from "./Components/Navbar/Home/Home" import About from "./Components/About/About" function App() { return ( <> <Router> <Navbar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> </> ) } export default App والآن في ملف src\Components\Navbar\Navbar.jsx نقوم بتغيره إلى التالي : import React from 'react'; import { Link } from 'react-router-dom'; import './Navbar.css'; import logo from '../../assets/logo.webp' const Navbar = () => { return ( <nav className='navbar'> <div className="logo"> <img src={logo} alt="img" /> </div> <div className="nav_link"> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link></li> <li> <Link to="/menu">Menu</Link></li> <li> <Link to="/service">Services</Link></li> <li> <Link to="/review">Review</Link></li> <li> <Link to="/contact">Contact</Link></li> </ul> </div> </nav> ) } export default Navbar والآن سيتم إستدعاء كل مكون عند الذهاب إلى العنوان الصحيح.

السؤال غير واضح هل تقصد جعل قسم ال about يظهر فقط عند الذهاب إلى عنوان about وال home يظهر فقط في ال home أم ماذا ؟

هل سؤال بخصوص إحدى دروس الدورات ؟ إذا كان كذلك فستجد أسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى طرح سؤالك أسفل الدرس وليس هنا حيث هنا قسم الأسئلة العامة ولا نقوم بإجابة الأسئلة الخاصة بمحتوى الدورة أو الدرس، وذلك لمعرفة الدرس الذي توجد به مشكلتك و لمساعدتك بشكل أفضل. أما بخصوص إصدار بايثون فيمكنك فعليا تنزيل أى إصدار لديك على ويندوز . ولكن ويندوز 7 أو xp ليس كل الإصدارات متاحة لهم.

وعليكم السلام ورحمة الله وبركاته. هل تعمل على إطار عمل لارافيل ؟ إذا كان كذلك فنعم يجب تثبيب حزمة doctrine/dbal لتغير طول الأعمدة . حيث هي مطلوبة للسماح ل Laravel بإجراء تغييرات معقدة على الأعمدة مثل تغيير الطول عند إستدعاء الدالة change . لذلك يجب تثبيت الحزمة من خلال الأمر التالي : composer require doctrine/dbal الآن بداخل ملفات التهجير لتغير طول العمود يكون من خلال كود كالتالي : $table->string(‘name’, 80)->change(); حيث نقوم بكتابة إسم العمود الذي نريد تغير الطول الخاص به ومن ثم الطول الجديد وفي النهاية إستدعاء الدالة change .

في مسار "تحليل البيانات Data Analysis" يتم شرح مكتبات مهمة في تحليل البيانات والتي سيتم إستخدامها في المسارات التالية في تعلم الآلة وغيرها من التطبيقات العملية . مثل مكتبة Pandas لتمثيل البيانات . ومكتبات مثل Matplotlib و Seaborn وأيضا يتم شرح كيفية تنظيف البيانات والتي سيتم إستخدامها بكثرة في المسارات التالية لمسار تحليل البيانات . أما مسار التعامل مع البيانات فهو منفصل عن مسار تحليل البيانات . حيث في مسار التعامل مع البيانات يتم شرح قواعد البيانات وكيفية التعامل معها ومع البيانات الموجودة بها وأيضا كيفية التعامل معل ملفات ال Excel و ال CSV وكيفية إحضار البيانات منها وقرائتها والتي سيتم إستخدامها بكثرة في مسار تعلم الآلة والمسارات التي تليه مثل مسار "تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني" والذي يتعامل مع قواعد البيانات وال API لإحضار البيانات . لهذا تم وضع مسار تحليل البيانات قبل المسارات التي تعتمد عليه و مسار التعامل مع البيانات قبل المسارات التي تعتمد عليه وهكذا يصبح لديك المعرفة المسبقة وتستطيع فهم ما يستخدمه المدرب لأنه تم شرح أساسياته في المسارات السابقة.