import gradio as gr
import pandas as pd

with gr.Blocks(theme=gr.themes.Glass(), css=".gradio-container {background: url('https://undsgn.com/wp-content/uploads/2018/04/ltotbngnzzu-uai-1600x900.jpg'); opacity:10}") as demo:
    gr.Markdown(
        """
        # OPM Song Recommender
        #### Music is an integral part of human life. However, local artists tend to struggle financially due to the saturated market. Similarly, listeners may find it difficult to support their local artists, or even find local tracks in the first place. How is an interested listener going to find Filipino music that is similar to their tastes?
        #### This application takes in a track (both OPM and non-OPM) and seeks to find OPM music with similar features. Try it out!
        """
    )
    
    input_text = gr.Textbox(label="Search (Case-sensitive)", placeholder="Search for a song")
    suggestion = gr.Textbox('', label="Suggestions Available", placeholder="Available song in dataset will be shown here.")
    
    # input_text.change(filter_and_select, inputs=input_text, outputs=suggestion)
        
    button = gr.Button(value="Search Similar OPM")
    result = gr.Textbox(label="Result", value="Result will be shown here.")
    
    # button.click(find_closest_song, inputs=input_text, outputs=result)
    
    ma = gr.Dataframe(pd.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]}))
    # match_percentage = gr.Markdown(label="Match Percentage", value='')

    
    # result.change(match, outputs=match_percentage)
    
demo.launch()