app.py

import pandas as pd
import gradio as gr
 
df = pd.read_csv("liked_images.csv")
df['url'] = df['url'].apply(lambda x: '<a href= "' + str(x) + '" target="_blank"> <img src= "' + str(x) + '"/> </a>') #'<img src= "' + str(x) + '"/> </a>')
df['seed'] = df['seed'].apply(lambda x: str(x))
df['width'] = df['width'].apply(lambda x: str(x))
df['height'] = df['height'].apply(lambda x: str(x))
df['steps'] = df['steps'].apply(lambda x: str(x))
df['source'] = df['source'].apply(lambda x: str(x))
df = df[[ 'url', 'prompt', 'seed', 'width', 'height', 'steps', 'source']]

def display_df():
  df_images = df.head(10)
  return df_images

def display_next10(dataframe, end):
  start = (end  or dataframe.index[-1]) + 1
  end = start + 9
  df_images = df.loc[start:end]
  return df_images, end

custom_css = """
#image_dataframe td:first-child img {
    width: 300px !important;
    height: auto !important;
    max-width: none !important;
}
"""

#Gradio Blocks
with gr.Blocks(css=custom_css) as demo:
  gr.Markdown("<h1><center>Utility Gradio Space for viewing PlaygroundAI Images</center></h1>")
  gr.Markdown(
        """<div align="center">This Tool helps you to analyze and inspect the images and corresponding prompts from <a href = "https://playgroundai.com/">Playground AI</a> Images.<br><a href="https://twitter.com/Suhail">Suhail</a> has recently shared an open dataset of all the liked images and their prompts from PlaygroundAI on <a href="https://github.com/playgroundai/liked_images">Github here</a>. This is an attempt to explore this dataset beautifully using the power and flexibility of Gradio!<br><b>To use the tool:</b>First, click on the 'Initial' button, and then iteratively on the 'Next 10' button.<br><b>Bonus:</b>Click on images to get the original PlaygroundAI image displayed on next tab</div>""")

  with gr.Row():
    num_end = gr.Number(visible=False)
    b2 = gr.Button("Next 10 Rows")
    
  with gr.Row():
    out_dataframe = gr.Dataframe(wrap=True, 
                                 row_count=(10, 'fixed'), 
                                 datatype = ["markdown", "markdown", "str", "str", "str", "str", "str", "str"], 
                                 interactive=False,
                                 elem_id = 'image_dataframe'
                                )
    
  b2.click(fn=display_next10, inputs= [out_dataframe, num_end ], outputs=[out_dataframe, num_end], api_name="next_10_rows")
    
  #gr.Markdown("<center>Please note that the Playground AI dataset shared on GitHub doesn't have images but links to those images. The idea is to get the maximum benefit out of this dataset and to find the best way to explore this dataset. Gradio enables us to embed markdowns within a dataframe, thus this app is able to display actual images instead of direct links(meh!). I hope you will have as much fun playing with this Space as I had building it.</center>")
  demo.load(fn=display_df, outputs=out_dataframe, api_name="initial_dataframe")
demo.launch(debug=True, show_error=True)