base space

app.py

@@ -9,19 +9,18 @@ BASE_URL = os.environ.get("BASE_URL", "")
 
 # Custom CSS for aesthetic design
 custom_css = """
-.health-status {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.metric-card {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     padding: 15px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 12px;
-    margin-bottom: 20px;
+    border-radius: 10px;
+    margin: 5px;
+    color: white;
+    text-align: center;
 }
 
 .status-dot {
-    width: 20px;
-    height: 20px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     animation: pulse 2s infinite;
     margin-top: 25px;
@@ -49,90 +48,21 @@ custom_css = """
     }
 }
 
-.metric-card {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    padding: 15px;
-    border-radius: 10px;
-    margin: 5px;
-    color: white;
-    text-align: center;
-}
-
-.metric-label {
-    font-size: 12px;
-    opacity: 0.9;
-    margin-bottom: 5px;
-}
-
-.metric-value {
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.voice-card {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
-    padding: 10px;
-    border-radius: 8px;
-    margin: 5px 0;
-}
-
-.gradio-container {
-    max-width: 1200px !important;
-    margin: auto !important;
-}
-
-.main-title {
-    text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 48px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    margin-top: 0;
-}
-
-.subtitle {
-    text-align: center;
-    color: #666;
-    font-size: 18px;
-    margin-bottom: 30px;
-}
-
-/* Title bar behind the heading text */
 .title-bar {
     display: flex;
     align-items: center;
-    justify-content: center;
+    # justify-content: center;
     gap: 15px;
     margin-bottom: 20px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 12px;
     padding: 8px 16px;
-    height: 60px;           /* compact header height */
+    height: 100px;           /* compact header height */
     min-height: 60px;
     overflow: hidden;
+    width: 100%
 }
 
-/* Make title text solid and place gradient behind it */
-.title-bar .main-title {
-    background: none !important;
-    -webkit-text-fill-color: #ffffff !important;
-    color: #ffffff !important;
-    margin: 0;
-    font-size: 22px;        /* smaller title for compact header */
-    line-height: 1.2;
-}
-
-.logo {
-    height: 18px !important; /* ensure the image itself is small */
-    width: auto !important;
-    display: inline-block;
-    margin-right: 8px;
-    object-fit: contain;
-    flex-shrink: 0;
-}
 """
 
 
@@ -252,9 +182,13 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
         dot_class = "status-dot-green" if is_healthy else "status-dot-red"
         return f"""
         <div class="title-bar">
-            <img src="https://storage.googleapis.com/desivocal-prod/desi-vocal/logo.png" width="50" height="50">
-            <h1 class='main-title'>RinggAI - Text-to-Speech</h1>
-            <div class="status-dot {dot_class}" style="margin-top: 0;"></div>
+        
+        <img src="https://storage.googleapis.com/desivocal-prod/desi-vocal/logo.png" width="50" height="50">
+        <h1 class='main-title' style="margin-top: -3px;">
+            RinggAI - Text-to-Speech
+            <span class="status-dot {dot_class}" style="margin-top: 0;"></span>
+        </h1>
+            
         </div>
         """
 
@@ -282,16 +216,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             )
 
         with gr.Column(scale=1):
-            # Status Message
-            # status_output = gr.Markdown("ℹ️ Ready to generate speech")
-
-            # Audio Output
-
             audio_output = gr.Audio(label="Listen to your audio", type="filepath")
-
-            # Metrics Display (hidden until available)
             metrics_header = gr.Markdown("### 📊 Generation Metrics", visible=False)
-
             metrics_output = gr.Code(
                 label="Metrics", language="json", interactive=False, visible=False
             )
@@ -361,13 +287,6 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     # Refresh health status on load
     demo.load(fn=get_title_with_status, outputs=[health_status])
 
-    # Set up periodic refresh if Timer is available
-    try:
-        health_timer = gr.Timer(value=120)
-        health_timer.tick(fn=get_title_with_status, outputs=[health_status])
-    except Exception:
-        pass  # Timer not available in this Gradio version
-
 if __name__ == "__main__":
     demo.queue()
     demo.launch(share=False, server_name="0.0.0.0", server_port=7860)

pyproject.toml

@@ -0,0 +1,8 @@
+[project]
+name = "ringg-tts-v1-0"
+version = "0.1.0"
+requires-python = ">=3.10"
+dependencies = [
+    "gradio>=5.49.1",
+    "requests>=2.32.5",
+]