Add gradio frontend

Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /app
 
 # Install git and git-lfs
 RUN apt-get update \
-    && apt-get install -y git git-lfs libsndfile1 \
+    && apt-get install -y git git-lfs libsndfile1 nginx \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/* \
     && git lfs install
@@ -19,14 +19,17 @@ RUN pip install --no-cache-dir -r requirements.txt \
     # Install gruut[sw] separately
     && pip install -f 'https://synesthesiam.github.io/prebuilt-apps/' 'gruut[sw]'
 
+# Copy Nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
 # Copy the rest of the application code into the container
 COPY . .
 
-# Expose the port the app runs on
+# Expose the port the app runs on (from nginx)
 EXPOSE 7860
 
 HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:7860 || exit 1
+    CMD ["sh", "/app/healthcheck.sh"]
 
 # Run the application
-CMD ["gunicorn", "--bind", "0.0.0.0:7860", "server:app"]
+CMD ["gunicorn", "--bind", "0.0.0.0:8080", "server:app"]

frontend.py

@@ -0,0 +1,53 @@
+import gradio as gr
+import os
+import sys
+import logging
+import requests
+
+# Add the current directory to the path so we can import from app
+sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Function to fetch audio from a URL
+def fetch_audio(input_text):
+    # Replace with the actual backend URL for generating audio
+    backend_url = "https://stem-content-ai-project-swahili-tts-model.hf.space/text_to_speech"
+    response = requests.get(backend_url, params={"text": input_text})
+    if response.status_code == 200:
+        return response.url  # Return the URL of the generated audio
+    else:
+        return None
+    
+# Gradio interface
+def create_gradio_interface():
+    # Create the Gradio interface
+    with gr.Blocks(title="Swahili TTS Model") as demo:
+        gr.Markdown("# Swahili TTS Model")
+        gr.Markdown("Generate Swahili speech from text.")
+        
+        with gr.Row():
+            with gr.Column():
+                input_text = gr.Textbox(label="Input Text")
+                generate_btn = gr.Button("Generate Speech")
+            
+            with gr.Column():
+                # show generated audio from a url on output, href = "https://sample.com/audio.wav"
+                output = gr.Audio(label="Generated Audio", type="filepath")
+        
+            generate_btn.click(
+                fn=fetch_audio,
+                inputs=input_text,
+                outputs=output
+            )
+    return demo
+
+# Start Gradio in a separate thread
+def start_gradio(port=9090):
+    demo = create_gradio_interface()
+    demo.launch(server_name="0.0.0.0", server_port=port)

healthcheck.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+curl -f http://localhost:7860 || exit 1  # Nginx
+curl -f http://localhost:8080 || exit 1  # Flask API
+curl -f http://localhost:9090 || exit 1  # Gradio frontend

nginx.conf

@@ -0,0 +1,19 @@
+server {
+    listen 7861;
+
+    # Route /api/* to Flask (port 8080)
+    location /api/ {
+        proxy_pass http://127.0.0.1:8080/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    # Route everything else to Gradio (port 9090)
+    location / {
+        proxy_pass http://127.0.0.1:9090/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}

requirements.txt

@@ -13,4 +13,6 @@ gruut[sw] -f https://synesthesiam.github.io/prebuilt-apps
 
 librosa
 phonemizer
-g2p_id
+g2p_id
+gradio
+requests

server.py

@@ -6,6 +6,7 @@ app = Flask(__name__)
 CORS(app)  # Enable CORS for all routes
 
 # Import the TTS class
+from frontend import start_gradio
 from tts import TTS
 import numpy as np
 import onnxruntime as ort
@@ -13,13 +14,14 @@ from pathlib import Path
 import datetime
 from config import Config
 import soundfile as sf
+import threading
 
 @app.route('/')
 def index():
   return 'Server is up!'
 
 
-@app.route('/text_to_speech', methods=['POST'])
+@app.route('/api/text_to_speech', methods=['POST'])
 def text_to_speech():
     try:
         data = request.json
@@ -36,7 +38,7 @@ def text_to_speech():
             # Save the audio to a file
             TTS.save_audio(audio_array, file_path)
 
-            audio_url = f"{Config.BASE_URL}/audio/{file_name}";
+            audio_url = f"{Config.BASE_URL}/api/audio/{file_name}";
         
             return dict(success=True, audio_url=audio_url)
         except Exception as e:
@@ -44,7 +46,7 @@ def text_to_speech():
     except Exception as e:
         return dict(success=False, error=str(e))
     
-@app.route('/text_to_speech', methods=['GET'])
+@app.route('/api/text_to_speech', methods=['GET'])
 def text_to_speech2():
     try:
        # Parse GET parameters
@@ -70,16 +72,20 @@ def text_to_speech2():
                     "Content-Disposition": "inline; filename=output.wav"
                 }
             )
-        
-            return dict(success=True, audio_url=audio_url)
         except Exception as e:
             return dict(success=False, error=str(e))
     except Exception as e:
         return dict(success=False, error=str(e))
 
-@app.route('/audio/<path:path>')
+@app.route('/api/audio/<path:path>')
 def send_audio(path):
     return send_from_directory('outputs', path)
 
+
+# Start Gradio in a separate thread
+thread = threading.Thread(target=start_gradio)
+thread.daemon = True
+thread.start()
+
 if __name__ == '__main__':
     app.run(host=Config.HOST, port=Config.PORT, debug=Config.DEBUG)