html with matplotlib

app.py

@@ -1,38 +1,39 @@
 import gradio as gr
 import numpy as np
-import plotly.graph_objects as go
+import matplotlib.pyplot as plt
 import librosa
+import librosa.display
+import base64
+from io import BytesIO
 
 def plot_stft(audio_file):
-    # Load the audio file
+    # Load audio file
     y, sr = librosa.load(audio_file)
     
-    # Compute the STFT
+    # Compute the Short-Time Fourier Transform (STFT)
     D = librosa.stft(y)
     S_db = librosa.amplitude_to_db(np.abs(D), ref=np.max)
     
-    # Generate time and frequency axes
-    times = librosa.times_like(S_db)
-    freqs = librosa.fft_frequencies(sr=sr)
+    # Plot the STFT
+    plt.figure(figsize=(10, 6))
+    librosa.display.specshow(S_db, sr=sr, x_axis='time', y_axis='log')
+    plt.colorbar(format='%+2.0f dB')
+    plt.title('STFT (Short-Time Fourier Transform)')
     
-    # Create Plotly figure
-    fig = go.Figure(data=go.Heatmap(
-        z=S_db,
-        x=times,
-        y=freqs,
-        colorscale='Viridis'
-    ))
+    # Save the plot to a BytesIO object
+    buf = BytesIO()
+    plt.savefig(buf, format='png')
+    plt.close()
+    buf.seek(0)
     
-    # Update layout for better visualization
-    fig.update_layout(
-        title="STFT (Short-Time Fourier Transform)",
-        xaxis_title="Time (s)",
-        yaxis_title="Frequency (Hz)",
-        yaxis_type="log"
-    )
+    # Encode the image as base64
+    image_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+    buf.close()
     
-    # Return the HTML representation of the plot
-    return fig.to_html()
+    # Create an HTML img tag with the base64 encoded image
+    html_img = f'<img src="data:image/png;base64,{image_base64}" alt="STFT plot"/>'
+    
+    return html_img
 
 # Gradio interface
 demo = gr.Interface(fn=plot_stft, 

requirements.txt

@@ -1,2 +1,5 @@
-plotly
+gradio
+numpy
+matplotlib
 librosa
+