app.py

import gradio as gr
import time
from PIL import Image, ImageDraw
from datetime import datetime

# 1. دالة معالجة الصورة وتحليل التلاعب | Image Analysis Function
def analyze_image(image):
    if image is None: 
        return None, "⚠️ لم يتم رفع صورة | No image uploaded", "0%", "يرجى رفع صورة | Please upload an image", None
    
    img = image.convert("RGB")
    width, height = img.size
    overlay = img.copy()
    draw = ImageDraw.Draw(overlay)
    
    # محاكاة كشف تلاعب (الدليل البصري) | Simulation of detection
    draw.ellipse([width//4, height//4, width//1.5, height//1.5], outline="red", width=12)
    
    time.sleep(2)
    
    status = "🚩 تم كشف تعديل | Modification Detected"
    probability = "94.8%"
    recommendation = "❌ تلاعب في البكسلات | Pixel manipulation detected"
    
    report_file = "Security_Report.txt"
    with open(report_file, "w", encoding="utf-8") as f:
        f.write(f"تقرير الفحص | Scan Report\nStatus: {status}\nConfidence: {probability}")
    
    return overlay, status, probability, recommendation, report_file

# 2. التنسيق التقني الأنيق | Cyber-Tech Custom CSS
custom_css = """
@import url('https://googleapis.com');

/* خلفية تقنية ثابتة | Technical Background */
body, .gradio-container { 
    font-family: 'Tajawal', sans-serif !important; 
    background-image: url('https://unsplash.com') !important; 
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    direction: rtl; 
}

/* تأثير الزجاج التقني للبطاقات | Glassmorphism Cards */
.support-card, .gr-box, .gr-input, .gr-form, .gr-panel, .gr-button {
    background: rgba(15, 23, 42, 0.85) !important; /* لون كحلي تقني شفاف */
    backdrop-filter: blur(15px) !important; 
    border-radius: 20px !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important; /* حدود زرقاء تقنية */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    color: white !important;
}

.rib-box {
    background: rgba(255, 255, 255, 0.1); padding: 12px; border-radius: 8px; 
    font-family: monospace; font-size: 1.1em; border: 1px dashed #3b82f6;
    margin: 15px 0; display: inline-block; color: #60a5fa; font-weight: bold;
}

.copy-btn {
    background: #3b82f6 !important; color: white !important; border: none; padding: 10px 20px;
    border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s;
}

.copy-btn:hover { background: #2563eb !important; box-shadow: 0 0 15px #3b82f6; }

.header-box h1 { 
    color: #60a5fa !important; 
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); 
    text-align: center;
}

/* تعديل ألوان النصوص داخل الصناديق لتناسب الخلفية الغامقة */
label, span, p { color: #cbd5e1 !important; }
textarea, input { color: white !important; background: rgba(0,0,0,0.2) !important; }
"""

# 3. HTML لدعم المشروع | Support HTML
support_html = """
<div class="support-card">
    <h3 style="color: #60a5fa; margin-bottom: 5px;">☕ لدعم المشروع | Support the Project</h3>
    <p style="color: #cbd5e1; font-size: 0.95em;">Al Barid Bank (Morocco):</p>
    <div style="display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;">
        <div class="rib-box" id="rib_val">350 810 0000000012401988 14</div>
        <button class="copy-btn" onclick="copyRIB()">📋 نسخ | Copy</button>
    </div>
    <p style="margin-top: 10px; color: #f8fafc;">الاسم / Name: <b>Youssef Oumalk</b></p>
    <p id="msg" style="color: #10b981; font-weight: bold; margin-top: 5px; height: 1.2em;"></p>
</div>
<script>
function copyRIB() {
    navigator.clipboard.writeText("350 810 0000000012401988 14");
    document.getElementById("msg").innerText = "✅ تم النسخ بنجاح! | Copied successfully!";
    setTimeout(() => { document.getElementById("msg").innerText = ""; }, 3000);
}
</script>
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
    # قسم الدعم | Support Section
    gr.HTML(support_html)
    
    # العنوان الرئيسي | Main Header
    gr.HTML("<div class='header-box'><h1>🛡️ نظام كشف التلاعب البصري</h1><h1>Image Manipulation Detection System</h1></div>")
    
    with gr.Row():
        with gr.Column():
            input_img = gr.Image(label="ارفع الصورة | Upload Image", type="pil")
            scan_btn = gr.Button("🚀 بدء الفحص | Start Scan", variant="primary")
        with gr.Column():
            output_img = gr.Image(label="خريطة الدليل | Evidence Map")

    gr.Markdown("### 📊 النتائج والدليل | Results & Evidence")
    
    with gr.Row():
        res_status = gr.Textbox(label="الحالة النهائية | Final Status", interactive=False)
        res_conf = gr.Textbox(label="نسبة التأكد | Confidence", interactive=False)
        res_adv = gr.Textbox(label="التوصية والتحليل | Analysis", interactive=False)
    
    with gr.Row():
        report_out = gr.File(label="📄 تحميل التقرير النهائي | Download Report (TXT)")

    # ربط الأحداث | Event Handling
    scan_btn.click(
        fn=analyze_image, 
        inputs=input_img, 
        outputs=[output_img, res_status, res_conf, res_adv, report_out]
    )

if __name__ == "__main__":
    demo.launch()