Update app.py

app.py

@@ -2,60 +2,56 @@ import streamlit as st
 from transformers import T5Tokenizer, T5ForConditionalGeneration
 import torch
 
-# تعيين سمات CSS مخصصة لتصميم أنثوي متجاوب
+# Custom CSS styling for a light, elegant design
 st.markdown("""
 <style>
     .main {
-        background-color: #FDF2F9;
-        background-image: linear-gradient(120deg, #FDF2F9 0%, #FFEBEE 100%);
+        background-color: #FAFAFA;
+        background-image: linear-gradient(135deg, #ffffff 0%, #e0f7fa 100%);
     }
     .stTextArea textarea {
-        border: 2px solid #FF80AB;
+        border: 2px solid #81D4FA;
         border-radius: 15px;
         padding: 10px;
-        font-family: 'Arial', sans-serif;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        font-family: 'Segoe UI', sans-serif;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
         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;
+        border-color: #29B6F6;
+        box-shadow: 0 0 10px #4FC3F7;
     }
     .stTitle {
-        color: #D81B60;
-        font-family: 'Brush Script MT', cursive;
+        color: #0288D1;
+        font-family: 'Segoe UI', sans-serif;
         font-size: 3em !important;
         text-align: center;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
         margin-bottom: 30px !important;
     }
+    .stButton>button {
+        background-color: #29B6F6;
+        color: white;
+        border-radius: 20px;
+        border: none;
+        padding: 10px 25px;
+        font-size: 16px;
+        font-weight: bold;
+        box-shadow: 0 4px 12px rgba(41, 182, 246, 0.4);
+        transition: all 0.3s ease;
+    }
+    .stButton>button:hover {
+        background-color: #0288D1;
+        box-shadow: 0 6px 14px rgba(2, 136, 209, 0.5);
+        transform: translateY(-2px);
+    }
     .summary-container {
-        background-color: white;
+        background-color: #ffffff;
         border-radius: 15px;
         padding: 20px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-        border-left: 5px solid #F06292;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+        border-left: 5px solid #29B6F6;
         margin-top: 20px;
         width: 100%;
         max-width: 800px;
@@ -63,82 +59,45 @@ st.markdown("""
         margin-right: auto;
     }
     .summary-title {
-        color: #D81B60;
+        color: #0288D1;
         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;
+        font-family: 'Segoe UI', sans-serif;
     }
     .footer {
         text-align: center;
         margin-top: 50px;
         padding: 20px;
-        color: #E91E63;
+        color: #0288D1;
         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
+# Load model and 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
+    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")
+    model.to(device)
     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, 
+            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)
@@ -146,40 +105,34 @@ def generate_summary(text):
         st.error(f"Error generating summary: {e}")
         return None
 
-# واجهة المستخدم باستخدام Streamlit
-st.markdown('<div class="app-container">', unsafe_allow_html=True)
+st.title("🧠 Smart Text Summarizer")
 
-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">
+    <img src="https://api.placeholder.com/300x150?text=Smart+Summary" width="300" class="header-image">
 </div>
 """, unsafe_allow_html=True)
 
-text = st.text_area("أدخل النص الذي تريد تلخيصه...", height=200)
+text = st.text_area("Enter the text you want to summarize...", height=200)
 
 col1, col2, col3 = st.columns([1, 2, 1])
 with col2:
-    if st.button("✨ قم بالتلخيص ✨"):
+    if st.button("🔍 Generate Summary"):
         if text and model_loaded:
-            with st.spinner("جاري إنشاء الملخص... 💫"):
+            with st.spinner("Generating summary..."):
                 summary = generate_summary(text)
                 if summary:
-                    st.markdown('<div class="summary-container"><div class="summary-title">💕 الملخص 💕</div>' + 
+                    st.markdown('<div class="summary-container"><div class="summary-title">📋 Summary</div>' + 
                                 summary + '</div>', unsafe_allow_html=True)
                 else:
-                    st.error("❌ فشل إنشاء الملخص. يرجى التحقق من النص المدخل.")
+                    st.error("❌ Failed to generate summary. Please check your input.")
         elif not model_loaded:
-            st.error("❌ فشل تحميل النموذج. يرجى التحقق من سجلات التطبيق.")
+            st.error("❌ Failed to load model. Please check the application logs.")
         else:
-            st.warning("⚠️ يرجى إدخال نص للتلخيص.")
+            st.warning("⚠️ Please enter text to summarize.")
 
-# إضافة فوتر جميل
 st.markdown("""
 <div class="footer">
-    تطبيق التلخيص الذكي - صمم بكل الحب 💖
-</div>
+    Smart Text Summarizer.
 </div>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)