import streamlit as st
from transformers import T5Tokenizer, T5ForConditionalGeneration
import torch

# تعيين سمات CSS مخصصة لتصميم أنثوي متجاوب
st.markdown("""
<style>
    .main {
        background-color: #FDF2F9;
        background-image: linear-gradient(120deg, #FDF2F9 0%, #FFEBEE 100%);
    }
    .stTextArea textarea {
        border: 2px solid #FF80AB;
        border-radius: 15px;
        padding: 10px;
        font-family: 'Arial', sans-serif;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    .stTextArea textarea:focus {
        border-color: #F06292;
        box-shadow: 0 0 10px #F48FB1;
    }
    .css-4yfn50, div[data-baseweb="base-button"] {
        background-color: #F06292 !important;
        color: white !important;
        border-radius: 20px !important;
        border: none !important;
        padding: 10px 25px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        box-shadow: 0 4px 12px rgba(240, 98, 146, 0.4) !important;
        transition: all 0.3s ease !important;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .css-4yfn50:hover, div[data-baseweb="base-button"]:hover {
        background-color: #E91E63 !important;
        box-shadow: 0 6px 14px rgba(233, 30, 99, 0.5) !important;
        transform: translateY(-2px) !important;
    }
    .stTitle {
        color: #D81B60;
        font-family: 'Brush Script MT', cursive;
        font-size: 3em !important;
        text-align: center;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px !important;
    }
    .summary-container {
        background-color: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-left: 5px solid #F06292;
        margin-top: 20px;
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .summary-title {
        color: #D81B60;
        font-weight: bold;
        font-size: 1.5em;
        margin-bottom: 10px;
        font-family: 'Arial', sans-serif;
    }
    .app-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    .footer {
        text-align: center;
        margin-top: 50px;
        padding: 20px;
        color: #E91E63;
        font-style: italic;
    }
    .header-image {
        display: block;
        margin: 0 auto 30px auto;
        max-width: 100%;
        height: auto;
    }
    /* تحسينات الاستجابة للشاشات الصغيرة */
    @media screen and (max-width: 768px) {
        .stTitle {
            font-size: 2em !important;
        }
        .stTextArea textarea {
            font-size: 14px;
        }
        .summary-container {
            padding: 15px;
        }
        .summary-title {
            font-size: 1.2em;
        }
    }
</style>
""", unsafe_allow_html=True)

# تحميل النموذج والـ Tokenizer
model_path = "./saved_model"
tokenizer_path = "./saved_tokenizer"

try:
    tokenizer = T5Tokenizer.from_pretrained(
        tokenizer_path,
        local_files_only=True
    )
    
    model = T5ForConditionalGeneration.from_pretrained(
        model_path,
        local_files_only=True,
        ignore_mismatched_sizes=True
    )
    
    device = torch.device("cpu")  # تحديد الجهاز على CPU
    model.to(device)  # نقل النموذج إلى CPU
    model_loaded = True
    
except Exception as e:
    st.error(f"Error loading model: {e}")
    model_loaded = False

# دالة توليد الملخص
def generate_summary(text):
    try:
        inputs = ["summarize: " + text]
        inputs = tokenizer(inputs, max_length=1024, truncation=True, return_tensors="pt").to(device)
        outputs = model.generate(
            inputs.input_ids, 
            max_length=150, 
            length_penalty=2.0, 
            num_beams=4, 
            early_stopping=True
        )
        return tokenizer.decode(outputs[0], skip_special_tokens=True)
    except Exception as e:
        st.error(f"Error generating summary: {e}")
        return None

# واجهة المستخدم باستخدام Streamlit
st.markdown('<div class="app-container">', unsafe_allow_html=True)

st.title("✨ تطبيق التلخيص الذكي ✨")

# إضافة صورة زخرفية (اختياري)
st.markdown("""
<div style="text-align: center; margin-bottom: 30px;">
    <img src="https://api.placeholder.com/300x150?text=✨Summary Magic✨" width="300" class="header-image">
</div>
""", unsafe_allow_html=True)

text = st.text_area("أدخل النص الذي تريد تلخيصه...", height=200)

col1, col2, col3 = st.columns([1, 2, 1])
with col2:
    if st.button("✨ قم بالتلخيص ✨"):
        if text and model_loaded:
            with st.spinner("جاري إنشاء الملخص... 💫"):
                summary = generate_summary(text)
                if summary:
                    st.markdown('<div class="summary-container"><div class="summary-title">💕 الملخص 💕</div>' + 
                                summary + '</div>', unsafe_allow_html=True)
                else:
                    st.error("❌ فشل إنشاء الملخص. يرجى التحقق من النص المدخل.")
        elif not model_loaded:
            st.error("❌ فشل تحميل النموذج. يرجى التحقق من سجلات التطبيق.")
        else:
            st.warning("⚠️ يرجى إدخال نص للتلخيص.")

# إضافة فوتر جميل
st.markdown("""
<div class="footer">
    تطبيق التلخيص الذكي - صمم بكل الحب 💖
</div>
</div>
""", unsafe_allow_html=True)