Hugging Face's logo

Spaces:
nlphuji
/
whoops-dataset-viewer
Runtime error

App Files Community
whoops-dataset-viewer
File size: 7,086 Bytes 
7930e1d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
# import gradio as gr
# import ast
# import requests
#
# # Using Gradio Demos as API - This is Hot!
# API_URL_INITIAL = "https://ysharma-playground-ai-exploration.hf.space/run/initial_dataframe"
# API_URL_NEXT10 = "https://ysharma-playground-ai-exploration.hf.space/run/next_10_rows"
#
#
# # define inference function
# # First: Get initial images for the grid display
# def get_initial_images():
#     response = requests.post(API_URL_INITIAL, json={
#         "data": []
#     }).json()
#     # data = response["data"][0]['data'][0][0][:-1]
#     response_dict = response['data'][0]
#     return response_dict  # , [resp[0][:-1] for resp in response["data"][0]["data"]]
#
#
# # Second: Process response dictionary to get imges as hyperlinked image tags
# def process_response(response_dict):
#     return [resp[0][:-1] for resp in response_dict["data"]]
#
#
# response_dict = get_initial_images()
# initial = process_response(response_dict)
# initial_imgs = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);">\n' + "\n".join(
#     initial[:-1])
#
#
# # Third: Load more images for the grid
# def get_next10_images(response_dict, row_count):
#     row_count = int(row_count)
#     # print("(1)",type(response_dict))
#     # Convert the string to a dictionary
#     if isinstance(response_dict, dict) == False:
#         response_dict = ast.literal_eval(response_dict)
#     response = requests.post(API_URL_NEXT10, json={
#         "data": [response_dict, row_count]  # len(initial)-1
#     }).json()
#     row_count += 10
#     response_dict = response['data'][0]
#     # print("(2)",type(response))
#     # print("(3)",type(response['data'][0]))
#     next_set = [resp[0][:-1] for resp in response_dict["data"]]
#     next_set_images = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); ">\n' + "\n".join(
#         next_set[:-1])
#     return response_dict, row_count, next_set_images  # response['data'][0]
#
#
# # get_next10_images(response_dict=response_dict, row_count=9)
# # position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
#
# # Defining the Blocks layout
# with gr.Blocks(css="""#img_search img {width: 100%; height: 100%; object-fit: cover;}""") as demo:
#     gr.HTML(value="top of page", elem_id="top", visible=False)
#     gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
#         <div
#         style="
#             display: inline-flex;
#             align-items: center;
#             gap: 0.8rem;
#             font-size: 1.75rem;
#         "
#         >
#         <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 5px;">
#             Using Gradio Demos as API - 2 </h1><br></div>
#         <div><h4 style="font-weight: 500; margin-bottom: 7px; margin-top: 5px;">
#             Stream <a href="https://github.com/playgroundai/liked_images" target="_blank">PlaygroundAI Images</a> ina beautiful grid</h4><br>
#         </div>""")
#     # with gr.Accordion(label="Details about the working:", open=False, elem_id='accordion'):
#     #     gr.HTML("""
#     #     <p style="margin-bottom: 10px; font-size: 90%"><br>
#     #     ▶️Do you see the "view api" link located in the footer of this application?
#     #     By clicking on this link, a page will open which provides documentation on the REST API that developers can use to query the Interface function / Block events.<br>
#     #     ▶️In this demo, I am making such an API request to the <a href="https://huggingface.co/spaces/ysharma/Playground_AI_Exploration" target="_blank">Playground_AI_Exploration</a> Space.<br>
#     #     ▶️I am exposing an API endpoint of this Gradio app as well. This can easily be done by one line of code, just set the api_name parameter of the event listener.
#     #     </p></div>""")
#
#     with gr.Column():  # (elem_id = "col-container"):
#         b1 = gr.Button("Load More Images").style(full_width=False)
#         df = gr.Textbox(visible=False, elem_id='dataframe', value=response_dict)
#         row_count = gr.Number(visible=False, value=19)
#         img_search = gr.HTML(label='Images from PlaygroundAI dataset', elem_id="img_search",
#                              value=initial_imgs)  # initial[:-1] )
#
#     gr.HTML('''<center><a href="https://huggingface.co/spaces/ysharma/Stream_PlaygroundAI_Images?duplicate=true"><img src="https://bit.ly/3gLdBN6" alt="Duplicate Space"></a></center>
#     #     </p></div>''')
#     b1.click(get_next10_images, [df, row_count], [df, row_count, img_search], api_name="load_playgroundai_images")
#
# demo.launch(debug=True)

import pandas as pd
import gradio as gr

df = pd.read_csv("/Users/yonatanbitton/Downloads/whoops_dataset.csv")
df['image_url'] = df['image_url'].apply(lambda x: '<a href= "' + str(x) + '" target="_blank"> <img src= "' + str(
    x) + '"/> </a>')
df['designer_explanation'] = df['designer_explanation'].apply(lambda x: str(x))
df['selected_caption'] = df['selected_caption'].apply(lambda x: str(x))
df['crowd_captions'] = df['crowd_captions'].apply(lambda x: str(x))
df['crowd_underspecified_captions'] = df['crowd_underspecified_captions'].apply(lambda x: str(x))
df['question_answering_pairs'] = df['question_answering_pairs'].apply(lambda x: str(x))
df['commonsense_category'] = df['commonsense_category'].apply(lambda x: str(x))
df['image_id'] = df['image_id'].apply(lambda x: str(x))
df['image_designer'] = df['image_designer'].apply(lambda x: str(x))
df = df[['image_url', 'designer_explanation', 'selected_caption', 'crowd_captions', 'crowd_underspecified_captions',
         'question_answering_pairs', 'commonsense_category', 'image_id', 'image_designer']]

LINES_NUMBER = 20

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


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


# Gradio Blocks
with gr.Blocks() as demo:
    gr.Markdown("<h1><center>WHOOPS! Dataset Viewer</center></h1>")

    with gr.Row():
        num_end = gr.Number(visible=False)
        b1 = gr.Button("Get Initial dataframe")
        b2 = gr.Button("Next 10 Rows")

    with gr.Row():
        out_dataframe = gr.Dataframe(wrap=True, max_rows=LINES_NUMBER, overflow_row_behaviour="paginate",
                                     datatype=["markdown", "markdown", "str", "str", "str", "str", "str", "str","str","str"],
                                     interactive=False)

    b1.click(fn=display_df, outputs=out_dataframe, api_name="initial_dataframe")
    b2.click(fn=display_next10, inputs=[out_dataframe, num_end], outputs=[out_dataframe, num_end],
             api_name="next_10_rows")

demo.launch(debug=True, show_error=True)