Update app.py

app.py

@@ -5,6 +5,8 @@ from soprano import SopranoTTS
 from scipy.io.wavfile import write as wav_write
 import tempfile
 import os
+from datetime import datetime
+import json
 
 # Detect device
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
@@ -20,7 +22,51 @@ model = SopranoTTS(
 
 SAMPLE_RATE = 32000
 
-def tts_stream(text, temperature, top_p, repetition_penalty, state):
+# Create logs directory if it doesn't exist
+LOG_DIR = "user_logs"
+os.makedirs(LOG_DIR, exist_ok=True)
+
+def log_user_activity(username, text, temperature, top_p, repetition_penalty):
+    """Log user activity to a JSON file"""
+    log_entry = {
+        "timestamp": datetime.now().isoformat(),
+        "username": username,
+        "text": text,
+        "text_length": len(text),
+        "temperature": temperature,
+        "top_p": top_p,
+        "repetition_penalty": repetition_penalty,
+        "device": DEVICE
+    }
+    
+    # Append to daily log file
+    log_file = os.path.join(LOG_DIR, f"logs_{datetime.now().strftime('%Y-%m-%d')}.json")
+    
+    try:
+        # Read existing logs
+        if os.path.exists(log_file):
+            with open(log_file, 'r') as f:
+                logs = json.load(f)
+        else:
+            logs = []
+        
+        # Append new log
+        logs.append(log_entry)
+        
+        # Write back
+        with open(log_file, 'w') as f:
+            json.dump(logs, f, indent=2)
+            
+        print(f"✅ Logged activity for user: {username}")
+    except Exception as e:
+        print(f"❌ Error logging activity: {e}")
+
+def tts_stream(text, temperature, top_p, repetition_penalty, state, request: gr.Request):
+    # Get username from Hugging Face Spaces
+    username = request.username if request.username else "anonymous"
+    
+    # Log user activity
+    log_user_activity(username, text, temperature, top_p, repetition_penalty)
     if not text.strip():
         yield None, state
         return
@@ -44,7 +90,7 @@ def save_audio(state):
     wav_write(path, SAMPLE_RATE, state)
     return path
 
-# Custom CSS for beautiful UI
+# Custom CSS for beautiful UI - Vibrant Dark Theme
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -53,16 +99,17 @@ custom_css = """
 }
 
 .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
     padding: 2rem !important;
 }
 
 .main-container {
-    background: rgba(255, 255, 255, 0.95) !important;
+    background: linear-gradient(135deg, #0f1729 0%, #1a2332 100%) !important;
     backdrop-filter: blur(10px) !important;
     border-radius: 24px !important;
     padding: 2.5rem !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
 }
 
 .header-section {
@@ -72,45 +119,52 @@ custom_css = """
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 20px;
     color: white;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
 }
 
 .header-section h1 {
     font-size: 3rem !important;
     font-weight: 700 !important;
     margin-bottom: 0.5rem !important;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, #fff 0%, #a8edea 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .header-section p {
     font-size: 1.1rem !important;
     opacity: 0.95;
     margin-top: 0.5rem !important;
+    color: #e0e7ff !important;
 }
 
 .device-badge {
     display: inline-block;
     padding: 0.5rem 1.5rem;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border-radius: 50px;
     font-weight: 600;
     font-size: 0.9rem;
     margin-top: 1rem;
     border: 2px solid rgba(255, 255, 255, 0.3);
+    color: #fff !important;
 }
 
 .info-card {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%) !important;
     padding: 1.5rem;
     border-radius: 16px;
     margin: 1rem 0;
-    border-left: 4px solid #667eea;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #8b5cf6;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+    color: #e0e7ff !important;
 }
 
 .info-card h3 {
-    color: #667eea;
+    color: #c4b5fd !important;
     font-weight: 600;
     margin-bottom: 0.8rem;
 }
@@ -124,6 +178,7 @@ custom_css = """
     padding: 0.4rem 0;
     padding-left: 1.5rem;
     position: relative;
+    color: #ddd6fe !important;
 }
 
 .info-card li:before {
@@ -133,71 +188,75 @@ custom_css = """
 }
 
 .generate-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
     font-size: 1.1rem !important;
     padding: 1rem 2rem !important;
     border-radius: 12px !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
     transition: all 0.3s ease !important;
     margin-top: 1rem !important;
 }
 
 .generate-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5) !important;
+    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.7) !important;
+    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%) !important;
 }
 
 .download-btn {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%) !important;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
     padding: 0.8rem 1.5rem !important;
     border-radius: 12px !important;
-    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3) !important;
+    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4) !important;
     transition: all 0.3s ease !important;
 }
 
 .download-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4) !important;
+    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.6) !important;
+    background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 100%) !important;
 }
 
 .textbox, .slider, .audio {
     border-radius: 12px !important;
-    border: 2px solid #e0e7ff !important;
+    border: 2px solid #4c1d95 !important;
     transition: all 0.3s ease !important;
+    background: rgba(30, 41, 59, 0.5) !important;
+    color: #e0e7ff !important;
 }
 
 .textbox:focus, .slider:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    border-color: #8b5cf6 !important;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3) !important;
 }
 
 label {
     font-weight: 600 !important;
-    color: #4a5568 !important;
+    color: #c4b5fd !important;
     margin-bottom: 0.5rem !important;
 }
 
 .accordion {
     border-radius: 12px !important;
-    background: #f7fafc !important;
-    border: 2px solid #e0e7ff !important;
+    background: rgba(30, 41, 59, 0.6) !important;
+    border: 2px solid #4c1d95 !important;
 }
 
 .footer-links {
     text-align: center;
     margin-top: 2rem;
     padding-top: 2rem;
-    border-top: 2px solid #e0e7ff;
+    border-top: 2px solid #4c1d95;
 }
 
 .footer-links a {
-    color: #667eea;
+    color: #a78bfa !important;
     text-decoration: none;
     font-weight: 600;
     margin: 0 1rem;
@@ -205,9 +264,13 @@ label {
 }
 
 .footer-links a:hover {
-    color: #764ba2;
+    color: #c4b5fd !important;
     text-decoration: underline;
 }
+
+.footer-links p {
+    color: #c4b5fd !important;
+}
 """
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
@@ -286,9 +349,12 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
                             <li>Use proper grammar and contractions</li>
                             <li>Regenerate for different variations</li>
                         </ul>
-                        <p style="margin-top: 1rem; padding-top: 1rem; border-top: 2px solid rgba(102, 126, 234, 0.2); font-weight: 600; color: {'#10b981' if DEVICE == 'cuda' else '#f59e0b'};">
+                        <p style="margin-top: 1rem; padding-top: 1rem; border-top: 2px solid rgba(139, 92, 246, 0.3); font-weight: 600; color: {'#10b981' if DEVICE == 'cuda' else '#fbbf24'};">
                             {'⚡ GPU acceleration active - maximum performance!' if DEVICE == 'cuda' else '💻 Running on CPU - may be slower but still efficient'}
                         </p>
+                        <p style="margin-top: 0.5rem; font-size: 0.85rem; color: #a78bfa;">
+                            🔒 Usage data is logged for analytics
+                        </p>
                     </div>
                 """)
         
@@ -297,6 +363,9 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             <div class="footer-links">
                 <a href="https://github.com/ekwek1/soprano" target="_blank">📦 GitHub</a>
                 <a href="https://huggingface.co/ekwek/Soprano-80M" target="_blank">🤗 Model Weights</a>
+                <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #4c1d95;">
+                    <p style="color: #a78bfa; font-weight: 500;">Made with ❤️ by <a href="https://huggingface.co/Humair-025" target="_blank" style="color: #c4b5fd; text-decoration: none; font-weight: 700;">huggingface.co/Humair-025</a></p>
+                </div>
             </div>
         """)