test plotly & html

.gitignore

@@ -0,0 +1 @@
+.idea/

app.py

@@ -5,35 +5,71 @@ import librosa
 import librosa.display
 import base64
 from io import BytesIO
+import soundfile as sf
+import numpy as np
+import IPython.display as ipd
+import plotly.graph_objects as go
+import plotly
+from scipy.signal import csd
+from scipy.ndimage import interpolation
+from plotly import tools
+import scipy.signal as ssig
+import matplotlib.pyplot as plt
+import librosa
+import librosa.display
+
 
 def plot_stft(audio_file):
+
     # Load audio file
-    y, sr = librosa.load(audio_file)
-    
-    # Compute the Short-Time Fourier Transform (STFT)
-    D = librosa.stft(y)
-    S_db = librosa.amplitude_to_db(np.abs(D), ref=np.max)
-    
-    # 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)')
-    
-    # Save the plot to a BytesIO object
-    buf = BytesIO()
-    plt.savefig(buf, format='png')
-    plt.close()
-    buf.seek(0)
-    
-    # Encode the image as base64
-    image_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
-    buf.close()
-    
-    # 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
+    audio, sampling_rate = librosa.load(audio_file)
+
+    # Compute stft
+    freq, frames, stft = ssig.stft(audio,
+                                   sampling_rate,
+                                   window='hann',
+                                   nperseg=512,
+                                   noverlap=412,
+                                   nfft=1024,
+                                   return_onesided=True,
+                                   boundary='zeros',
+                                   padded=True,
+                                   axis=- 1)
+
+
+    spectrogram = go.Heatmap(z=librosa.amplitude_to_db(np.abs(stft), ref=np.max),
+                                     x=frames,
+                                     y=freq,
+                                     colorscale='Viridis')
+
+
+
+    fig = go.Figure(spectrogram)
+
+
+    fig.update_layout(
+        #width=300,
+        #height=500,
+        font=dict(family='Latin Modern Roman', size=18),
+        xaxis=dict(
+            title='Time (seconds)',
+            titlefont=dict(family='Latin Modern Roman',
+                           size=18)),
+        yaxis=dict(
+            title='Frequency (Hz)',
+            titlefont=dict(family='Latin Modern Roman',
+                           size=18)),
+        margin=dict(l=0, r=0, t=0, b=0),
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)')
+
+    fig.update_traces(colorbar_thickness=8, selector=dict(type='heatmap'))
+    fig.update_traces(showscale=True, showlegend=False, visible = True)
+    fig.update_xaxes(visible=True, showgrid=False)
+    fig.update_yaxes(visible=True, showgrid=False)
+    plotly.offline.plot(fig, filename='stft.html', config={'displaylogo': False, 'modeBarButtonsToRemove': ['toImage','zoomIn', 'zoomOut','resetScale']})
+
+    return 'stft.html'
 
 # Gradio interface
 demo = gr.Interface(fn=plot_stft,