Add application file

app.py

@@ -10,32 +10,52 @@ import time
 
 # Custom CSS for better styling
 custom_css = """
+/* فایل CSS مدرن و حرفه‌ای برای سیستم تبدیل متن فارسی به گفتار */
+
 .gradio-container {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
+    background: linear-gradient(135deg, #f0f4fc 0%, #d4e2f9 100%);
+    font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;
+    color: #334155;
 }
 
 .main-header {
-    color: #2d3748;
+    color: #1e3a8a;
     text-align: center;
-    margin-bottom: 2rem;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    margin: 1.5rem 0 2.5rem;
+    font-size: 2.4rem;
+    font-weight: 700;
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
+    position: relative;
+}
+
+.main-header:after {
+    content: "";
+    display: block;
+    width: 120px;
+    height: 4px;
+    background: linear-gradient(90deg, #3b82f6, #2563eb);
+    margin: 1rem auto;
+    border-radius: 2px;
 }
 
 .container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: white;
-    border-radius: 12px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    max-width: 1000px;
+    margin: 0 auto 2rem;
+    padding: 2rem;
+    background-color: rgba(255, 255, 255, 0.92);
+    border-radius: 20px;
+    box-shadow: 0 15px 35px rgba(49, 52, 125, 0.12), 0 5px 15px rgba(0, 0, 0, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 .footer {
     text-align: center;
-    margin-top: 2rem;
-    color: #4a5568;
-    font-size: 0.9rem;
+    margin-top: 2.5rem;
+    color: #475569;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    padding: 0 1rem;
 }
 
 /* Persian text alignment */
@@ -44,42 +64,195 @@ textarea, .label {
     direction: rtl;
 }
 
+.label {
+    font-size: 1.25rem !important;
+    font-weight: 600 !important;
+    color: #1e40af !important;
+    margin-bottom: 0.75rem !important;
+    display: block;
+}
+
 /* Button styling */
 button.primary {
-    background: linear-gradient(to right, #4776E6, #8E54E9);
-    border: none;
-    border-radius: 8px;
-    color: white;
-    font-weight: bold;
-    transition: all 0.3s ease;
+    background: linear-gradient(45deg, #3b82f6, #4f46e5) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 1.05rem !important;
+    padding: 0.6rem 1.5rem !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
 }
 
 button.primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4) !important;
+    background: linear-gradient(45deg, #2563eb, #4338ca) !important;
+}
+
+button.primary:active {
+    transform: translateY(0) !important;
 }
 
+/* Panels styling */
 .input-panel, .output-panel {
     background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 10px;
-    padding: 15px;
-    margin-bottom: 15px;
+    border-radius: 16px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
     border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
+}
+
+.input-panel:hover, .output-panel:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+    border-color: #cbd5e1;
+}
+
+/* Textbox styling */
+.input-text textarea {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 1rem !important;
+    transition: all 0.3s ease !important;
+    font-size: 1.05rem !important;
+    background-color: rgba(255, 255, 255, 0.8) !important;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+.input-text textarea:focus {
+    border-color: #60a5fa !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    background-color: rgba(255, 255, 255, 0.95) !important;
+}
+
+/* Slider styling */
+.speed-slider input[type="range"] {
+    height: 8px !important;
+    border-radius: 8px !important;
+    background: linear-gradient(90deg, #bfdbfe, #93c5fd) !important;
+}
+
+.speed-slider input[type="range"]::-webkit-slider-thumb {
+    background: #3b82f6 !important;
+    border: 3px solid white !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
+    height: 20px !important;
+    width: 20px !important;
+}
+
+.speed-slider .label {
+    font-size: 1rem !important;
+    color: #334155 !important;
+    font-weight: 500 !important;
 }
 
 .examples-panel {
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 10px;
-    padding: 10px;
+    background-color: rgba(241, 245, 249, 0.7);
+    border-radius: 16px;
+    padding: 1.5rem;
     border: 1px solid #e2e8f0;
+    margin-top: 2rem;
 }
 
 .status-panel {
-    background-color: #edf2f7;
-    border-radius: 8px;
-    padding: 10px;
-    margin-bottom: 15px;
+    background: linear-gradient(45deg, #f1f5f9, #e2e8f0);
+    border-radius: 12px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
     text-align: center;
+    font-weight: 500;
+    border-right: 4px solid #3b82f6;
+    transition: all 0.3s ease;
+}
+
+/* Status messages */
+#status:contains("✅") {
+    color: #16a34a;
+    background: linear-gradient(45deg, #f0fdf4, #dcfce7);
+    border-right-color: #16a34a;
+}
+
+#status:contains("❌") {
+    color: #dc2626;
+    background: linear-gradient(45deg, #fef2f2, #fee2e2);
+    border-right-color: #dc2626;
+}
+
+#status:contains("در حال") {
+    color: #2563eb;
+    background: linear-gradient(45deg, #eff6ff, #dbeafe);
+    border-right-color: #2563eb;
+}
+
+/* Audio player styling */
+audio {
+    border-radius: 12px !important;
+    background: linear-gradient(to right, #dbeafe, #e0e7ff) !important;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
+    width: 100% !important;
+}
+
+/* Examples styling */
+.examples-panel button {
+    border: 1px solid #cbd5e1 !important;
+    background: rgba(255, 255, 255, 0.7) !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
+}
+
+.examples-panel button:hover {
+    background: white !important;
+    border-color: #93c5fd !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Animation effects */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.container {
+    animation: fadeIn 0.6s ease-out;
+}
+
+/* Wave effect for audio processing */
+@keyframes wave {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+#status:contains("در حال تبدیل") {
+    background-size: 200% 200%;
+    animation: wave 2s ease infinite;
+    background-image: linear-gradient(45deg, #dbeafe, #eff6ff, #dbeafe);
+}
+
+/* RTL support for all UI elements */
+.gradio-container [dir="rtl"],
+.gradio-container [style*="direction: rtl"] {
+    font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding: 1.5rem;
+        margin: 0 1rem 1.5rem;
+    }
+    
+    .main-header {
+        font-size: 1.8rem;
+    }
+    
+    .label {
+        font-size: 1.1rem !important;
+    }
 }
 """