Project Files

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

Procfile

@@ -0,0 +1 @@
+web: python app.py

app.py

@@ -0,0 +1,162 @@
+from flask import Flask, render_template, request, jsonify
+import torch
+import transformers
+from transformers import AutoTokenizer, AutoModel , AutoModelForCausalLM
+from transformers import AutoModelForSeq2SeqLM
+import pickle
+import numpy as np
+import pandas as pd
+import seaborn as sns
+import matplotlib.pyplot as plt
+import nltk
+from nltk.tokenize import word_tokenize
+import re
+import string
+from nltk.corpus import stopwords
+from tashaphyne.stemming import ArabicLightStemmer
+import pyarabic.araby as araby
+from sklearn.feature_extraction.text import TfidfVectorizer
+from flask import Flask, render_template, request, redirect, url_for
+import os
+nltk.download('punkt')
+
+
+app = Flask(__name__)
+
+
+with open('tfidf_vectorizer.pkl', 'rb') as f:
+    vectorizer = pickle.load(f)
+
+with open('svm_model.pkl', 'rb') as f:
+    model_classify = pickle.load(f)
+
+
+model = AutoModelForSeq2SeqLM.from_pretrained("bushra1dajam/AraBART")
+tokenizer = AutoTokenizer.from_pretrained('bushra1dajam/AraBART')
+
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model.to(device)
+
+def summarize_text(text):
+    inputs = tokenizer("summarize: " + text, return_tensors="pt", max_length=512, truncation=True)
+    inputs = {k: v.to(device) for k, v in inputs.items()}
+
+    summary_ids = model.generate(
+    inputs["input_ids"],
+    max_length=512,
+    num_beams=8,
+    #no_repeat_ngram_size=4,  # Prevents larger n-gram repetitions
+    early_stopping=True)
+    summary = tokenizer.decode(summary_ids[0], skip_special_tokens=True)
+    return summary
+
+def remove_numbers(text):
+    cleaned_text = re.sub(r'\d+', '', text)
+    return cleaned_text
+
+def Removing_non_arabic(text):
+    text =re.sub(r'[^0-9\u0600-\u06ff\u0750-\u077f\ufb50-\ufbc1\ufbd3-\ufd3f\ufd50-\ufd8f\ufd50-\ufd8f\ufe70-\ufefc\uFDF0-\uFDFD.0-9٠-٩]+', ' ',text)
+    return text
+
+nltk.download('stopwords')
+ara_punctuations = '''`÷×؛<>_()*&^%][ـ،/:"؟.,'{}~¦+|!”…“–ـ''' + string.punctuation
+stop_words = stopwords.words()
+
+def remove_punctuations(text):
+    translator = str.maketrans('', '', ara_punctuations)
+    text = text.translate(translator)
+
+    return text
+
+
+def remove_tashkeel(text):
+    text = text.strip()
+    text = re.sub("[إأٱآا]", "ا", text)
+    text = re.sub("ى", "ي", text)
+    text = re.sub("ؤ", "ء", text)
+    text = re.sub("ئ", "ء", text)
+    text = re.sub("ة", "ه", text)
+    noise = re.compile(""" ّ    | # Tashdid
+                             َ    | # Fatha
+                             ً    | # Tanwin Fath
+                             ُ    | # Damma
+                             ٌ    | # Tanwin Damm
+                             ِ    | # Kasra
+                             ٍ    | # Tanwin Kasr
+                             ْ    | # Sukun
+                             ـ     # Tatwil/Kashida
+                         """, re.VERBOSE)
+    text = re.sub(noise, '', text)
+    text = re.sub(r'(.)\1+', r"\1\1", text)
+    return araby.strip_tashkeel(text)
+
+arabic_stopwords = stopwords.words("arabic")
+def remove_stop_words(text):
+    Text=[i for i in str(text).split() if i not in arabic_stopwords]
+    return " ".join(Text)
+
+def tokenize_text(text):
+    tokens = word_tokenize(text)
+    return tokens
+
+def Arabic_Light_Stemmer(text):
+
+    Arabic_Stemmer = ArabicLightStemmer()
+    text=[Arabic_Stemmer.light_stem(y) for y in text]
+
+    return " " .join(text)
+
+def preprocess_text(text):
+    text = remove_numbers(text)
+    text = Removing_non_arabic(text)
+    text = remove_punctuations(text)
+    text = remove_stop_words(text)
+    text = remove_tashkeel(text)
+    text = tokenize_text(text)
+    text = Arabic_Light_Stemmer(text)
+    return text
+
+class_mapping = {
+    0: "جنائية",
+    1: "احوال شخصية",
+    2: "عامة"
+}
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/result', methods=['GET', 'POST'])
+def result():
+    if request.method == 'POST':
+        input_text = request.form['text']
+        if input_text:
+            prepro = preprocess_text(input_text)
+            features = vectorizer.transform([prepro])
+            prediction = model_classify.predict(features)
+            classifiy = prediction[0]
+            classifiy_class = class_mapping.get(classifiy, "لم يتم التعرف")
+            summarized_text = summarize_text(input_text)
+        return render_template('result.html', classification=classifiy_class, summary=summarized_text, input_text=input_text)
+
+    return render_template('result.html')
+
+
+
+@app.route('/profile')
+def profile():
+    return render_template('profile.html')
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    return render_template('login.html')
+
+@app.route('/create_account', methods=['GET', 'POST'])
+def create_account():
+    return render_template('create_account.html')
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,30 @@
+Flask==3.0.3
+gunicorn==22.0.0
+Jinja2==3.1.2
+itsdangerous==2.2.0
+MarkupSafe==2.1.3
+Werkzeug==3.0.3
+numpy==1.26.4
+pandas==2.2.2
+scikit-learn==1.5.1
+scipy==1.14.0
+matplotlib==3.9.1
+matplotlib-inline==0.1.6
+Flask-Cors==4.0.1
+Flask-Login==0.6.3
+flask-ngrok==0.0.25
+aiohttp==3.9.5
+python-json-logger==2.0.7
+eventlet==0.36.1
+gevent==24.2.1
+gevent-websocket==0.10.1
+openai==0.28.0
+json5==0.9.14
+Werkzeug==3.0.3
+joblib==1.4.2
+transformers==4.30.0
+torch
+seaborn
+nltk
+tashaphyne
+huggingface-hub==0.26.2

static/js/Script.js

@@ -0,0 +1,133 @@
+function logintoHome(event) {
+    // Prevent the form submission
+    event.preventDefault(); 
+    // Redirect to the Flask profile route
+    window.location.href = '/profile'; 
+}
+
+const casesData = {
+    "cases": [
+        {
+            "type": "جنائية",
+            "summary": "قضية سرقة منزل في حي السلام",
+            "date": "2024-01-15"
+        },
+        {
+            "type": "جنائية",
+            "summary": "حادث مروري في شارع الملك فهد",
+            "date": "2024-02-20"
+        },
+        {
+            "type": "أحوال شخصية",
+            "summary": "دعوى نفقة وحضانة",
+            "date": "2024-01-10"
+        },
+        {
+            "type": "أحوال شخصية",
+            "summary": "طلب تعديل زيارة أطفال",
+            "date": "2024-03-05"
+        },
+        {
+            "type": "عام",
+            "summary": "نزاع تجاري بين شركتين",
+            "date": "2024-02-01"
+        }
+    ]
+};
+function processData(data) {
+    const counts = {
+        "جنائية": 0,
+        "أحوال شخصية": 0,
+        "عام": 0
+    };
+    
+    data.cases.forEach(caseItem => {
+        counts[caseItem.type]++;
+    });
+
+    return {
+        labels: Object.keys(counts),
+        data: Object.values(counts)
+    };
+}
+
+// Create doughnut chart
+function createDoughnutChart(processedData) {
+    const ctx = document.getElementById('caseChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: processedData.labels,
+            datasets: [{
+                data: processedData.data,
+                backgroundColor: ['#003366', '#36A2EB', '#8dc9e5'],
+                hoverBackgroundColor: ['#40372E', '#A88A6C', '#ADA195'],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: {
+                        font: { size: 14 }
+                    }
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.label || '';
+                            const value = context.formattedValue;
+                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                            const percentage = Math.round((context.raw / total) * 100);
+                            return `${label}: ${value} (${percentage}%)`;
+                        }
+                    }
+                }
+            },
+            cutout: '60%'
+        }
+    });
+}
+
+// Display summaries
+function displaySummaries(data) {
+    const summariesContainer = document.getElementById('caseSummaries');
+    data.cases.forEach(caseItem => {
+        const summaryDiv = document.createElement('div');
+        let className = '';
+        switch(caseItem.type) {
+            case 'جنائية':
+                className = 'criminal';
+                break;
+            case 'أحوال شخصية':
+                className = 'personal';
+                break;
+            case 'عام':
+                className = 'general';
+                break;
+        }
+        summaryDiv.className = `case-summary ${className}`;
+        summaryDiv.innerHTML = `
+            <strong>${caseItem.type}</strong>
+            <p>${caseItem.summary}</p>
+            <small>${new Date(caseItem.date).toLocaleDateString('ar-SA')}</small>
+        `;
+        summariesContainer.appendChild(summaryDiv);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const doughnutData = processData(casesData);
+    const totalDocuments = casesData.cases.length; // Calculate total number of documents (cases)
+
+    // Create doughnut chart
+    createDoughnutChart(doughnutData);
+
+    // Display the total number of documents
+    document.getElementById('totalDocuments').innerHTML = `إجمالي عدد القضايا: ${totalDocuments}`;
+
+    // Display case summaries
+    displaySummaries(casesData);
+});

static/styles.css

@@ -0,0 +1,835 @@
+/* General Styles for Both Pages */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Cairo', sans-serif;
+}
+
+body {
+    background-color: #f4f4f9;
+    direction: rtl;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+}
+
+
+/* Header Styles */
+.header {
+    text-align: center;
+    width: 100%;
+    height: 1; /* Adjust the height to account for the fixed nav */
+    background-image: url('/static/images/logo.png');
+    background-color: #445a75; /* Set the background color to #445a75 */
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center top;
+    position: sticky; /*relative */
+    padding: 10px 8%; 
+    color: #ffffff; /* White text for visibility */
+    font-family: Arial, sans-serif;
+}
+
+.header h1 {
+    color: #ffffff; /* Keep text white for better contrast */
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle text shadow for readability */
+}
+
+/* Navigation Bar */
+nav {
+    background-color: #f5f5f5; /* Background color for the nav */
+    display: flex;
+    padding: 1rem 2rem;
+    color: #663300;
+    font-weight: bold;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    position: sticky; /*sticky */
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    height: 80px; /* Define a fixed height for the nav */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
+}
+
+nav.scrolled {
+    background-color: #bdd1d038; /* Stable color when scrolled */
+}
+
+.logo img {
+    width: 110px;
+    height: auto;
+}
+
+/* Content Section */
+.content {
+    padding: 20px;
+    padding-top: 250spx; /* Add padding to push content below the fixed nav */
+    background-color: #f5f5f5; /* Light gray background for contrast */
+    color: #333; /* Dark gray text color */
+    font-family: Arial, sans-serif;
+    height: 1500px; /* Simulated height for scrolling */
+}
+/* Content Section */
+
+.nav-links {
+    position: absolute;
+    right: 20%;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    /* Distributes items evenly */
+    gap: 5px;
+    /* Ensure there's enough space between navigation items */
+    margin-right: 30px;
+    margin-left: 40vw;
+    font-size: 64px;
+    padding:0;
+
+}
+
+.nav-links li {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #663300;
+    /* Ensure text is visible with a dark color */
+    font-weight: bold;
+    font-size: 18px;
+    transition: color 0.3s ease;
+    /* Add a smooth transition effect */
+    padding: 20px;
+}
+
+.nav-links a:hover {
+    color: #007bff;
+    /* Add a hover effect for better user experience */
+}
+
+.right-icons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* Auth Buttons */
+.auth-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.auth-buttons a {
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.auth-buttons .login {
+    background-color: #fff;
+    border: 1px solid #003366;
+    color: #003366;
+}
+
+.auth-buttons .create-account {
+    background-color: #003366;
+    color: #fff;
+}
+
+/* About Us Section (Landing Page) */
+.about-us {
+    background-color: #fff;
+    padding: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-bottom: 50px;
+    background: radial-gradient(circle, rgba(210, 227, 255, 0.2) 50%, transparent 50%);
+    border-radius: 25px;
+}
+
+.about-us .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.about-us .image img {
+    width: 400px;
+    margin-left: 40px;
+    /* Move the lawyer image to the right */
+}
+
+.about-us .text {
+    max-width: 500px;
+    text-align: right;
+}
+
+.about-us .text h1 {
+    font-size: 36px;
+    color: #003366;
+    /* Darker blue for headings */
+    margin-bottom: 20px;
+}
+
+.about-us .text p {
+    font-size: 18px;
+    color: #666;
+    line-height: 1.8;
+}
+
+/* Goals Section (Landing Page) */
+.goals {
+    text-align: center;
+    padding: 50px 0;
+}
+
+.team {
+    text-align: center;
+    padding: 50px 0;
+}
+.goals h2 {
+    font-size: 36px;
+    margin-bottom: 30px;
+    color: #003366;
+}
+
+.team h2 {
+    font-size: 36px;
+    margin-bottom: 30px;
+    color: #003366;
+}
+.goal-cards {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.goal-cards .card {
+    background-color: #fff;
+    padding: 20px;
+    width: 250px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.goal-cards .card h3 {
+    font-size: 24px;
+    margin-bottom: 15px;
+    color: #007bff;
+}
+
+.goal-cards .card p {
+    font-size: 16px;
+    color: #666;
+}
+
+/* Login Page Layout */
+.login-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+
+
+.login-container {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    max-width: 1000px;
+    width: 100%;
+}
+
+.quote-section {
+    background: radial-gradient(circle, rgba(210, 227, 255, 0.2) 50%, transparent 50%);
+    padding: 40px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #003366;
+    line-height: 1.8;
+    text-align: center;
+    background-color: #f4f4f9;
+}
+
+.login-form {
+    flex: 1;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.login-form h2 {
+    margin-bottom: 20px;
+    color: #003366;
+    font-size: 28px;
+}
+
+/* Form Styling and Alignment for Login Page */
+.login-form form {
+    display: flex;
+    flex-direction: column;
+}
+
+.login-form .input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.login-form label {
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 5px;
+}
+
+.login-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.login-form .login-btn {
+    background-color: #003366;
+    color: #fff;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.login-form .login-btn:hover {
+    background-color: #0056b3;
+}
+
+.login-form p {
+    margin-top: 10px;
+    font-size: 16px;
+}
+
+.login-form a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+#cssportal-grid {
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2.6px);
+    -webkit-backdrop-filter: blur(2.6px);
+    position: sticky;
+    right: 30%;
+    left: 30%;
+    z-index: -2;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    padding: 20px;
+    padding-right: 0;
+    width: max-content;
+    height: auto;
+    overflow: hidden;
+    margin: 50px auto;
+}
+
+/* User profile section */
+#div1 {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+    margin-right: 20px;
+    flex-direction: row;
+    width: fit-content;
+}
+
+.user-image img {
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+}
+
+.user-name h3 {
+    color: #000436;
+    font-size: 28px;
+}
+
+/* Section title */
+.header {
+    background-color: #000436;
+    color: #FFFFFF;
+    padding: 15px;
+    width: fit-content;
+    margin-top: 20px;
+    margin-right: 0;
+    font-size: 16px;
+    border-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    font-weight: bold;
+    position: sticky;
+
+}
+
+/* Chart and card section */
+#div2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+}
+
+#div3 {
+    width: auto;
+    display: flex;
+    flex-direction: row-reverse;
+    font-weight: bold;
+    position: sticky;
+    top: -30px;
+
+}
+
+#donut_single {
+    width: 300px;
+    height: 300px;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.11);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(4.5px);
+    -webkit-backdrop-filter: blur(4.5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+    padding: 20px;
+}
+
+/* Button style */
+.btn {
+    font-size: 17px;
+    text-transform: uppercase;
+    padding: 1em 2.5em;
+    border-radius: 6em;
+    background-color: rgb(0, 7, 45);
+    color: #FFFFFF;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(255, 255);
+}
+
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.action-buttons .btn {
+    padding: 15px 30px;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.action-buttons .btn.previous {
+    background-color: #b3815f;
+    color: white;
+}
+
+.action-buttons .btn.classify {
+    background-color: #007bff;
+    color: white;
+}
+
+.action-buttons .btn:hover {
+    opacity: 0.9;
+}
+
+.container {
+    position: relative;
+    top: 50px;
+    max-width: 600px;
+    margin: 50px auto; /* First value is top/bottom, second is left/right */
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    margin-top: 0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.headerofresult{
+    color: #663300;
+    text-align: center;
+    margin-top: 60px;
+    background-color: #ffffff;
+    margin-bottom: 0;
+    width: fit-content;
+    padding: 0 50px 0 50px ;
+    position: relative;
+    right: 43%;
+    border-radius:20px ;
+    border-bottom-left-radius:0 ;
+    border-bottom-right-radius:0 ;
+    border-top: solid 2px #663300;
+    top: 50px;
+
+}
+
+textarea {
+    width: 100%;
+    height: 200px;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    margin-bottom: 20px;
+}
+
+button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #003366;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #003366;
+}
+
+#classification-result {
+    margin-top: 20px;
+}
+
+#classification-result h3 {
+    color: #333;
+}
+
+#classification-predict {
+    padding: 10px;
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+#summary-result {
+    margin-top: 20px;
+}
+
+#summary-result h2 {
+    color: #333;
+}
+
+#summary-text {
+    padding: 10px;
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.dashboard {
+    max-width: 1000px;  /* Reduce the max-width for a smaller layout */
+    margin: 30px auto; /* Reduce margin to make the layout closer to the edges */
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px;
+}
+
+/* Charts Row */
+.charts-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+/* Chart Container */
+.chart-container {
+    flex: 1;
+    min-width: 100px;  /* Increase min-width for better readability, but keep it small */
+    background: white;
+    padding: 10px;  /* Reduce padding for a smaller container */
+    border-radius: 5px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);  /* Make the shadow smaller and subtler */
+    margin: 10px;  /* Reduce margin for less spacing between elements */
+}
+
+/* Summary Section */
+.summary-section {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.total-documents {
+    font-size: 30px;         /* Set the font size */
+    font-weight: bold;       /* Make the text bold */
+    color: #003366;          /* Set the text color */
+    margin-top: 70px;        /* Add space from the chart */
+    text-align: center;      /* Horizontally center the text */
+    padding: 10px;           /* Add padding for better spacing */
+    background-color: #ffffff; /* Add a background color */
+    border-radius: 10px;     /* Rounded corners for a soft look */
+    width: 100%;             /* Make it take the full width */
+    max-width: 300px;        /* Limit the width to 300px for better presentation */
+    margin-left: auto;       /* Center the div horizontally */
+    margin-right: auto;      /* Center the div horizontally */
+    display: flex;           /* Enable flexbox layout */
+    justify-content: center; /* Horizontally center the text */
+    align-items: center;     /* Vertically center the text */
+    height: 300px;           /* Set a fixed height for vertical centering */
+    box-sizing: border-box;  /* Include padding in width/height calculations */
+}
+
+
+/* Titles */
+.title {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+/* Case Summary Cards */
+.case-summary {
+    margin: 10px 0;
+    padding: 40px;
+    border-right: 3px solid;
+    background: #f8f9fa;
+    border-radius: 5px;
+    transition: transform 0.2s ease;
+}
+
+.case-summary:hover {
+    transform: translateX(-5px);
+    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+}
+
+/* Case Type Colors */
+.criminal {
+    border-color: #003366;
+}
+
+.personal {
+    border-color: #36A2EB;
+}
+
+.general {
+    border-color: #8dc9e5;
+}
+
+/* Case Summary Content */
+.case-summary strong {
+    display: block;
+    margin-bottom: 5px;
+    color: #444;
+    font-size: 1.1rem;
+}
+
+.case-summary p {
+    margin: 8px 0;
+    color: #666;
+    line-height: 1.4;
+}
+
+.case-summary small {
+    display: block;
+    color: #888;
+    font-size: 0.9rem;
+    margin-top: 5px;
+}
+
+
+.toggle {
+    display: none; /* Keeps the element hidden */
+    position: relative;
+    left: 10%; /* Moves the element 10% from the left of its containing element */
+}
+
+.team {
+    text-align: center;
+    padding: 50px 0;
+}
+
+.team-cards {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.card {
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 250px;
+    text-align: center;
+}
+
+.card .team-img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.card h3 {
+    font-size: 1.2em;
+    margin: 10px 0;
+}
+
+.card p {
+    font-size: 1em;
+    color: #555;
+}
+
+.linkedin-link {
+    display: inline-block;
+    margin-top: 10px;
+    text-decoration: none;
+    color: #0077b5;
+    font-weight: bold;
+}
+
+.linkedin-link i {
+    margin-left: 5px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+
+    .toggle{
+        display: block;
+    }
+
+    .dashboard {
+        padding: 10px;
+        gap: 15px;
+    }
+
+    .chart-container {
+        min-width: 100%;
+    }
+
+    .title {
+        font-size: 1.3rem;
+    }
+
+    .case-summary {
+        padding: 12px;
+    }
+
+    .container {    
+    right: 10%;
+    }
+
+    h2{
+    right: 30%;  
+    }
+    .nav-links{
+    display: none;
+    }
+
+    .nav-links.active{
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        position: absolute;
+        top: 80px;
+        right: 0;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        background-color: #f5f5f5;
+    }
+    .nav-links a{
+    font-size: 12px;
+    }
+    .logo img{
+    width: 64px;
+    }
+    .headerofresult{
+        position: sticky;
+        text-align: center;
+        width: 100%; /* Make the width 100% for smaller screens */
+        padding: 0 20px; /* Adjust padding */
+        margin-top: 30px; /* Adjust margin */
+        font-size: 16px; /* Adjust font size */
+    }
+    .container {
+        position: sticky;
+    }
+    .charts-row {
+        justify-content: center;  /* Center content on smaller screens */
+    }
+
+    .chart-container {
+        min-width: 200px;  /* Adjust min-width for smaller screens */
+        padding: 10px;  /* Slightly reduce padding on small screens */
+    }
+
+    .login-container {
+        flex-direction: column;
+    }
+
+    .quote-section,
+    .login-form {
+        width: 100%;
+    }
+
+    .about-us .container {
+        display: block; /* Stack the content inside the container */
+        text-align: center; /* Center-align text for better readability */
+    }
+    .about-us .image img {
+        max-width: 100%; /* Ensure the image doesn't overflow */
+        height: auto; /* Maintain the aspect ratio */
+    }
+
+    .auth-buttons a {
+        text-decoration: none;
+        padding: 9px 10px;
+        border-radius: 3px;
+        font-size: 10px;
+    }
+
+}   

svm_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56e1780885b58ab910fe9ac58d65ea5f0ddfb81e1527d6e2c0296b39b8a53351
+size 1625610

templates/create_account.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>إنشاء حساب - Wajeez</title>
+    <link rel="icon" href="/static/images/logo.png" type="image/png">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
+
+    <script>
+        // Toggle the navigation menu on small screens
+        function toggleMenu() {
+            const navLinks = document.getElementById('nav-Links');
+            navLinks.classList.toggle('active');
+        }
+    </script>
+</head>
+
+<body>
+
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Wajeez Logo">
+            </div>
+            <ul class="nav-links" id="nav-Links">
+                <li><a href="{{ url_for('index') }}">الرئيسية</a></li>
+            </ul>
+            <div class="toggle" id="toggleButton" onclick="toggleMenu()">☰</div>
+        </nav>
+    </header>
+
+    <main class="login-page">
+        <div class="login-container">
+            <div class="quote-section">
+                <p>قال رسول الله صلى الله عليه وسلم: "من مشى مع مظلوم حتى يُثبت له حقه ثبّت الله قدميه على الصراط يوم
+                    تزلّ الأقدام"</p>
+            </div>
+            <div class="login-form">
+                <h2>إنشاء حساب</h2>
+                <form action="{{ url_for('create_account') }}" method="POST">
+                    <div class="input-group">
+                        <label for="username">اسم المستخدم</label>
+                        <input type="text" id="username" name="username" required>
+                    </div>
+
+                    <div class="input-group">
+                        <label for="name">الاسم الكامل</label>
+                        <input type="text" id="name" name="full_name" required>
+                    </div>
+
+                    <div class="input-group">
+                        <label for="email">الإيميل</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+
+                    <div class="input-group">
+                        <label for="password">كلمة المرور</label>
+                        <input type="password" id="password" name="password" required>
+                    </div>
+                    <button type="submit" class="login-btn" onclick="logintoHome(event)"> إنشاء حساب</button>
+                </form>
+                <p>هل لديك حساب بالفعل؟ <a href="/login">تسجيل الدخول</a></p>
+            </div>
+        </div>
+    </main>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wajeez</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="icon" href="/static/images/logo.png" type="image/png">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
+    <script>
+        function toggleMenu() {
+            document.getElementById('nav-Links').classList.toggle('active');
+        }
+    </script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Wajeez Logo">
+            </div>
+            <ul class="nav-links" id="nav-Links">
+                <li><a href="#">الرئيسية</a></li>
+            </ul>
+            <div class="right-icons">
+                <div class="auth-buttons">
+                    <a href="/login" class="login">تسجيل الدخول</a>
+                    <a href="/create_account" class="create-account">إنشاء حساب</a>
+                </div>
+            </div>
+            <div class="toggle" id="toggleButton" onclick="toggleMenu()">☰</div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="about-us">
+            <div class="container">
+                <div class="text">
+                    <h1>من نحن؟</h1>
+                    <p>
+                        يتميز موقعنا بتوفير أداة متطورة لتصنيف وتلخيص الوثائق القانونية بكفاءة وسرعة سواء كنت محاميا
+                        مشغولا أو طالبا يدرس القانون. فإننا نوفر لك الوسيلة المثالية لتوفير الوقت والجهد في فحص وفهم
+                        الوثائق القانونية المعقدة.<br>
+                        اكتشف الطريقة الجديدة والفعالة لإدارة الوثائق القانونية مع موقعنا.
+                    </p>
+                </div>
+                <div class="image">
+                    <img src="{{ url_for('static', filename='images/lawyer-image.png') }}" alt="Lawyer Image">
+                </div>
+            </div>
+        </section>
+        <section class="goals">
+            <h2>أهدافنا</h2>
+            <div class="goal-cards">
+                <div class="card">
+                    <h3>زيادة الكفاءة في تصنيف</h3>
+                    <p>زيادة الكفاءة في تصنيف القضايا وتبسيطها بشكل آلي.</p>
+                </div>
+                <div class="card">
+                    <h3>توفير الوقت والجهود</h3>
+                    <p>توفير الوقت والجهود المبذولة في متابعة المستندات القانونية والمعلومات الأساسية.</p>
+                </div>
+                <div class="card">
+                    <h3>تعزيز اللغة العربية</h3>
+                    <p>تعزيز اللغة العربية في مجال الذكاء الاصطناعي ومعالجة الوثائق القانونية.</p>
+                </div>
+                <div class="card">
+                    <h3>زيادة كفاءة المحامين</h3>
+                    <p>زيادة كفاءة وانتاجية المحامين في معالجة قضاياهم المعقدة.</p>
+                </div>
+            </div>
+        </section>
+        <section class="team">
+            <h2>فريق العمل</h2>
+            <div class="team-cards">
+                <div class="card">
+                    <img src="{{ url_for('static', filename='images/girl_pic.png') }}" alt="Team Member 1"
+                        class="team-img">
+                    <h3>بشرى بن دعجم</h3>
+                    <p> مهندسة AI </p>
+                    <a href="https://www.linkedin.com/in/bushra-dajam" target="_blank" class="linkedin-link">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
+                </div>
+                <div class="card">
+                    <img src="{{ url_for('static', filename='images/girl_pic.png') }}" alt="Team Member 2"
+                        class="team-img">
+                    <h3>ليالي السلمي</h3>
+                    <p> مهندسة AI </p>
+                    <a href="https://www.linkedin.com/in/layali-alsolami" target="_blank" class="linkedin-link">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
+                </div>
+                <div class="card">
+                    <img src="{{ url_for('static', filename='images/girl_pic.png') }}" alt="Team Member 3"
+                        class="team-img">
+                    <h3>ريوف القرشي</h3>
+                    <p>مهندسة AI </p>
+                    <a href="https://www.linkedin.com/in/reyof-alqurashi-97447b300" target="_blank" class="linkedin-link">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
+                </div>
+                <div class="card">
+                    <img src="{{ url_for('static', filename='images/girl_pic.png') }}" alt="Team Member 4"
+                        class="team-img">
+                    <h3>ايلاف هواري </h3>
+                    <p> مهندسة AI </p>
+                    <a href="https://www.linkedin.com/in/elaf-hawwari-24357b307" target="_blank" class="linkedin-link">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
+                </div>
+                <div class="card">
+                    <img src="{{ url_for('static', filename='images/girl_pic.png') }}" alt="Team Member 4"
+                        class="team-img">
+                    <h3>شذا الظاهري</h3>
+                    <p> مهندسة AI </p>
+                    <a href="https://www.linkedin.com/in/shatha-aldhahri-1668a02b7" target="_blank" class="linkedin-link">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+
+</html>

templates/login.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تسجيل الدخول - Wajeez</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="icon" href="/static/images/logo.png" type="image/png">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
+    <script>
+        // Function to toggle the menu on small screens
+        function toggleMenu() {
+            document.getElementById('nav-Links').classList.toggle('active');
+        }
+    </script>
+</head>
+
+<body>
+
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Wajeez Logo">
+            </div>
+            <ul class="nav-links" id="nav-Links">
+                <li><a href="{{ url_for('index') }}">الرئيسية</a></li>
+            </ul>
+            <div class="toggle" id="toggleButton" onclick="toggleMenu()">☰</div>
+        </nav>
+    </header>
+
+    <main class="login-page">
+        <div class="login-container">
+            <div class="quote-section">
+                <p>قال رسول الله صلى الله عليه وسلم: "من مشى مع مظلوم حتى يُثبت له حقه ثبّت الله قدميه على الصراط يوم تزلّ الأقدام"</p>
+            </div>
+
+            <div class="login-form">
+                <h2>تسجيل الدخول</h2>
+                <form action="{{ url_for('login') }}" method="POST">
+                    <div class="input-group">
+                        <label for="username">اسم المستخدم</label>
+                        <input type="text" id="username" name="username" required>
+                    </div>
+                    
+                    <div class="input-group">
+                        <label for="password">كلمة المرور</label>
+                        <input type="password" id="password" name="password" required>
+                    </div>
+                
+                    <button type="submit" class="login-btn" onclick="logintoHome(event)" >تسجيل الدخول</button>
+
+                </form>
+                
+                <p>ليس لديك حساب؟ <a href="{{ url_for('create_account') }}">إنشاء حساب</a></p>
+            </div>
+        </div>
+    </main>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

templates/profile.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ar">
+    
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>الملف الشخصي</title>
+    <link rel="icon" href="/static/images/logo.png" type="image/png">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Function to toggle the menu on small screens
+        function toggleMenu() {
+            document.getElementById('nav-Links').classList.toggle('active');
+        }
+    </script>
+</head>
+
+<body dir="rtl"> 
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Wajeez Logo">
+            </div>
+            <ul class="nav-links" id="nav-Links">
+                <li><a href="{{ url_for('index') }}">الرئيسية</a></li>
+                <li><a href="{{ url_for('result') }}">صنف ولخص !</a></li> 
+            </ul>
+            <div class="right-icons">
+                <div class="auth-buttons">
+                    <a href="/login" class="login">خروج</a>
+                </div>
+            </div>
+            <div class="toggle" onclick="toggleMenu()">☰</div> <!-- Mobile menu toggle -->
+        </nav>
+    </header>
+
+    <div class="dashboard">
+        <div class="charts-row">
+            <div class="chart-container">
+                <h2 class="title">توزيع القضايا حسب النوع</h2>
+                <canvas id="caseChart"></canvas>
+            </div>
+            <div class="chart-container">
+                <div id="totalDocuments" class="total-documents"></div> 
+            </div>
+        </div>
+
+        <div class="summary-section">
+            <h2 class="title">ملخص القضايا</h2>
+            <div id="caseSummaries"></div> 
+        </div>
+    </div>
+
+    <!-- Link to your external JavaScript file -->
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script> 
+</body>
+</html>

templates/result.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>صنف ولخص</title>
+    <Script src="Script.js"></Script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="icon" href="/static/images/logo.png" type="image/png">
+    <script>
+        function toggleMenu() {
+            document.getElementById('nav-Links').classList.toggle('active');}
+    </script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Wajeez Logo">
+            </div>
+            <ul class="nav-links" id="nav-Links">
+                <li><a href="{{ url_for('index') }}">الرئيسية</a></li>
+                <li><a href="{{ url_for('profile') }}">الملف الشخصي</a></li>
+                <li><a href="#">صنف ولخص !</a></li>
+            </ul>
+            <div class="right-icons">
+                <div class="auth-buttons">
+                    <a href="/login" class="login">خروج</a>
+                </div>
+            </div>
+            <div class="toggle" id="toggleButton" onclick="toggleMenu()">☰</div>
+        </nav>
+    </header>
+
+    <div>
+        <h2 class="headerofresult">صنف ولخص !</h2>
+    </div>
+
+    <main class="container">
+        <form method="POST">
+            <textarea name="text" id="text-input"
+                placeholder="ادخل النص" >{{ input_text if input_text else '' }}</textarea>
+            <button type="submit">ارسال</button>
+        </form>
+
+        {% if classification %}
+        <div id="classification-result">
+            <h3>تصنيف القضية:</h3>
+            <p id="classification-predict">{{ classification }}</p>
+        </div>
+        {% endif %}
+
+        {% if summary %}
+        <div id="summary-result">
+            <h3>ملخص القضية :</h3>
+            <p id="summary-text">{{ summary }}</p>
+        </div>
+        {% endif %}
+    </main>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>

tfidf_vectorizer.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a69fa5f5c65c4043d928a2b1350315e12709b89b647340ba86b2c08cacefb0d
+size 231319