Update app.py

app.py

@@ -452,14 +452,18 @@ def create_download_link(audio_path):
         return None
 
     filename = Path(audio_path).name
-    base_url = "https://hivecorp-w-t-p-01.hf.space"
-    file_url = f"{base_url}/gradio_api/file={audio_path}"
+    # Update URL format to match Gradio's file serving pattern
+    base_url = "hivecorp-w-t-p-01.hf.space"
+    file_url = f"https://{base_url}/file={audio_path}"
 
     return f"""
     <a href="{file_url}" 
        download="{filename}" 
        target="_blank" 
        rel="noopener noreferrer" 
+       style="display: inline-block; padding: 10px 20px; background: linear-gradient(135deg, #4776E6, #8E54E9); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease;"
+       onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 15px rgba(71, 118, 230, 0.3)';"
+       onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';"
        onclick="event.preventDefault(); fetch(this.href).then(resp => resp.blob()).then(blob => {{
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
@@ -471,7 +475,7 @@ def create_download_link(audio_path):
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }});">
-        Click here to download audio
+        Download Audio File
     </a>
     """
 
@@ -492,7 +496,7 @@ async def text_to_speech_edge(text, language_code, speaker, tashkeel_checkbox=Fa
     # Define the character limit
     char_limit = 100000000
     if len(text) > char_limit:
-        return f"Error: Use 150,000 Words at a time.", None, None
+        return f"Error: Use 15,000 Words at a time.", None, None
 
     # Get the voice for the selected language and speaker
     voice = language_dict[language_code][speaker]
@@ -522,94 +526,135 @@ def get_speakers(language):
 default_language = None
 default_speaker = None
 with gr.Blocks(
-    title="Writoo AI V2",
+    title="WritooAI Free Plan",
     css="""
+        :root {
+            --primary-color: #4776E6;
+            --secondary-color: #8E54E9;
+            --background-light: #ffffff;
+            --card-light: #f8f9fa;
+            --text-dark: #2d3436;
+            --text-gray: #636e72;
+            --border-color: #e0e0e0;
+        }
+
         @media (max-width: 768px) {
             .container {
-                margin: 5px !important;
                 padding: 10px !important;
             }
             .header h1 {
                 font-size: 1.5em !important;
             }
-            .header p {
-                font-size: 1em !important;
-            }
-            .input-section, .output-section {
-                padding: 10px !important;
-            }
-            .mobile-full {
-                width: 100% !important;
-            }
-            .mobile-stack {
-                flex-direction: column !important;
-            }
-            .mobile-stack > * {
-                width: 100% !important;
-                margin-bottom: 10px !important;
-            }
         }
-        .container { 
-            background-color: #f5f7fb;
-            border-radius: 20px;
-            padding: 20px;
-            margin: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            max-width: 1200px;
-            margin-left: auto;
-            margin-right: auto;
+
+        body {
+            background-color: var(--background-light);
         }
+
         .container { 
-            background-color: #f5f7fb;
-            border-radius: 20px;
+            background-color: var(--background-light);
+            max-width: 1200px;
+            margin: 0 auto;
             padding: 20px;
-            margin: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+
         .header {
             text-align: center;
-            margin-bottom: 20px;
-            background: linear-gradient(90deg, #2193b0, #6dd5ed);
-            padding: 20px;
+            margin-bottom: 30px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            padding: 25px;
             border-radius: 15px;
             color: white;
+            box-shadow: 0 4px 15px rgba(71, 118, 230, 0.2);
         }
-        .input-section {
-            background-color: white;
-            padding: 20px;
+
+        .input-section, .output-section {
+            background-color: var(--card-light);
+            padding: 25px;
             border-radius: 15px;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            border: 1px solid var(--border-color);
+            width: 100%;
         }
-        .output-section {
-            background-color: white;
-            padding: 20px;
-            border-radius: 15px;
+
+        .input-box textarea {
+            min-height: 120px !important;
+            font-size: 16px !important;
+            border: 1px solid var(--border-color) !important;
+            border-radius: 10px !important;
+            padding: 15px !important;
+            width: 100% !important;
+        }
+
+        .dropdown {
+            width: 100% !important;
+        }
+
+        select, input[type="text"] {
+            width: 100% !important;
+            padding: 12px !important;
+            border-radius: 8px !important;
+            border: 1px solid var(--border-color) !important;
         }
+
         .generate-btn {
-            background: linear-gradient(90deg, #2193b0, #6dd5ed) !important;
-            border: none !important;
-            color: white !important;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+            padding: 15px 30px !important;
+            border-radius: 10px !important;
+            font-weight: 600 !important;
+            letter-spacing: 0.5px !important;
+            width: 100% !important;
+            margin-top: 15px !important;
         }
+
         .generate-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3) !important;
+            box-shadow: 0 5px 15px rgba(71, 118, 230, 0.3) !important;
         }
+
         .download-btn {
-            margin-top: 10px;
+            margin-top: 20px;
             text-align: center;
         }
+
         .download-btn a {
-            background: linear-gradient(90deg, #2193b0, #6dd5ed);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
             color: white;
-            padding: 10px 20px;
-            border-radius: 5px;
+            padding: 12px 25px;
+            border-radius: 10px;
             text-decoration: none;
-            display: inline-block;
+            font-weight: 600;
+            letter-spacing: 0.5px;
             transition: all 0.3s ease;
+            gap: 8px;
+            width: 100%;
+            max-width: 300px;
         }
+
+        .download-btn a:before {
+            content: "⬇️";
+            font-size: 1.2em;
+        }
+
         .download-btn a:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
+            box-shadow: 0 5px 15px rgba(71, 118, 230, 0.3);
+        }
+
+        /* Audio player styling */
+        audio {
+            width: 100% !important;
+            margin: 15px 0 !important;
+            border-radius: 10px !important;
+        }
+
+        /* Hide output text */
+        #output-text {
+            display: none !important;
         }
     """
 ) as demo:
@@ -617,8 +662,7 @@ with gr.Blocks(
         gr.HTML(
             """
             <div class="header">
-                <h1>✨ Writoo AI Text-to-Speech ✨</h1>
-                <p style="font-size: 1.2em;">Convert text to natural-sounding speech in multiple languages</p>
+                <h2>WritooAI Pro Plan - 15+  more Human-like Voice </h2>
             </div>
             """
         )
@@ -662,7 +706,7 @@ with gr.Blocks(
                 )
 
             with gr.Column(elem_classes="output-section mobile-full"):
-                output_text = gr.Textbox(label="Processed Text")
+                output_text = gr.Textbox(label="", visible=False)  # Hidden
                 output_audio = gr.Audio(
                     type="filepath",
                     label="Generated Audio"