test_gradio_audio_serving.py

"""
Test script to verify Gradio audio file serving.

This creates a minimal Gradio app with HTML5 audio controls to test
if audio files can be served via Gradio's /file= endpoint.
"""

import os
import gradio as gr

# Get project root
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))

# Audio file paths (absolute)
MUSIC_FILE = os.path.join(PROJECT_ROOT, "wrdler", "assets", "audio", "music", "background.mp3")
HIT_EFFECT = os.path.join(PROJECT_ROOT, "wrdler", "assets", "audio", "effects", "hit.mp3")
MISS_EFFECT = os.path.join(PROJECT_ROOT, "wrdler", "assets", "audio", "effects", "miss.mp3")

# Audio directory paths for allowed_paths
MUSIC_DIR = os.path.join(PROJECT_ROOT, "wrdler", "assets", "audio", "music")
EFFECTS_DIR = os.path.join(PROJECT_ROOT, "wrdler", "assets", "audio", "effects")

print(f"Project Root: {PROJECT_ROOT}")
print(f"Music file exists: {os.path.exists(MUSIC_FILE)}")
print(f"Hit effect exists: {os.path.exists(HIT_EFFECT)}")
print(f"Miss effect exists: {os.path.exists(MISS_EFFECT)}")
print(f"Music dir exists: {os.path.exists(MUSIC_DIR)}")
print(f"Effects dir exists: {os.path.exists(EFFECTS_DIR)}")

# Convert to website-relative URLs (full path from website root)
def get_file_url(absolute_path):
    """Convert absolute path to /file= URL with full relative path from project root."""
    # Get path relative to project root (website root)
    rel_path = os.path.relpath(absolute_path, PROJECT_ROOT)
    # Normalize to forward slashes for URLs
    url_path = rel_path.replace(os.sep, '/')
    return f"/gradio_api/file={url_path}"

# Generate URLs with full relative paths from website root
music_url = get_file_url(MUSIC_FILE)
hit_url = get_file_url(HIT_EFFECT)
miss_url = get_file_url(MISS_EFFECT)

print(f"\nFile URLs (relative to website root):")
print(f"Music: {music_url}")
print(f"Hit: {hit_url}")
print(f"Miss: {miss_url}")

# Create HTML with audio controls using website-relative paths
html_content = f"""
<div style="padding: 20px; font-family: Arial, sans-serif;">
    <h2>Gradio Audio File Serving Test (Full Relative Paths)</h2>
    
    <div style="margin: 20px 0; padding: 15px; background: #f0f0f0; border-radius: 5px;">
        <h3>Background Music</h3>
        <p><strong>Absolute path:</strong> {MUSIC_FILE}</p>
        <p><strong>URL (from website root):</strong> {music_url}</p>
        <audio controls style="width: 100%;">
            <source src="{music_url}" type="audio/mpeg">
            Your browser does not support audio.
        </audio>
    </div>
    
    <div style="margin: 20px 0; padding: 15px; background: #f0f0f0; border-radius: 5px;">
        <h3>Hit Sound Effect</h3>
        <p><strong>Absolute path:</strong> {HIT_EFFECT}</p>
        <p><strong>URL (from website root):</strong> {hit_url}</p>
        <audio controls style="width: 100%;">
            <source src="{hit_url}" type="audio/mpeg">
            Your browser does not support audio.
        </audio>
    </div>
    
    <div style="margin: 20px 0; padding: 15px; background: #f0f0f0; border-radius: 5px;">
        <h3>Miss Sound Effect</h3>
        <p><strong>Absolute path:</strong> {MISS_EFFECT}</p>
        <p><strong>URL (from website root):</strong> {miss_url}</p>
        <audio controls style="width: 100%;">
            <source src="{miss_url}" type="audio/mpeg">
            Your browser does not support audio.
        </audio>
    </div>
    
    <div style="margin: 20px 0; padding: 15px; background: #fff3cd; border-radius: 5px;">
        <h3>Testing Instructions</h3>
        <ol>
            <li>Check the browser console for any 404 errors</li>
            <li>Try playing each audio file using the controls</li>
            <li>Check the Network tab to see if files load successfully</li>
        </ol>
        <p><strong>Note:</strong> Using full relative paths from website root (e.g., /file=wrdler/assets/audio/music/background.mp3)</p>
    </div>
</div>
"""

# Create Gradio interface
with gr.Blocks(title="Audio Serving Test") as demo:
    gr.HTML(html_content)

if __name__ == "__main__":
    # Configure allowed paths - include specific audio directories
    launch_kwargs = {
        "server_name": "0.0.0.0",
        "server_port": 7861,  # Different port to avoid conflict
        "share": False,
        "show_error": True,
        # Allow Gradio to serve files from these directories
        "allowed_paths": [
            PROJECT_ROOT,      # Project root (fallback)
            MUSIC_DIR,         # wrdler/assets/audio/music
            EFFECTS_DIR,       # wrdler/assets/audio/effects
        ],
    }
    
    print(f"\nLaunching test server on http://localhost:7861")
    print(f"Allowed paths:")
    for path in launch_kwargs['allowed_paths']:
        print(f"  - {path}")
    
    demo.launch(**launch_kwargs)