Log Click on HTML Table to CSV

🔒 Gradio
1

I understand if this is not possible, but is there a way I can log a click on a link within a HTML table. I know I can use a onclick event but can I write this somehow to a csv? For example, can I log it into the console and then retrieve this within Gradio?

Any help would be greatly appreciated :slight_smile:

2

Hi @bradley6597,

Have you look at the Gradio flagging feature? Using Flagging, you can store a dataset on our hub collecting data from user.
What kind of data you want to store? number of clicks?

3

Hey @radames,

I’m wanting to store the url clicked by a user which is an image with a href inside a table. I’m currently using the gr.Blocks() for the base of the app and the HTML table sits inside a gr.HTML().

Here’s an example piece of code which is the same as my use case:

import pandas as pd
import gradio as gr


lst = [['<a href = "https://www.google.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png"></a>']]
df = pd.DataFrame(lst, columns = ['img_code'])

df_html = df.to_html(escape = False, render_links = True, index = False, header = False)

with gr.Blocks() as app:
    gr.HTML(df_html)
    
app.launch(debug=True, 
            share=False)
4

Hi @bradley6597

In that scenario, you might need to implement a custom tracker and attach it to your links.
Luckily, you can do that by mounting the gradio app within your FastAPI app.

Here’s a complete demo including syncing the flagged data with a dataset on Hugging Face hub:

Here’s a simple implementation

import pandas as pd
import gradio as gr
from fastapi import FastAPI, Request
import uvicorn
from pathlib import Path
FLAG_DIR = Path("./flagged_data")

logger = gr.CSVLogger()
logger.setup([gr.Text(label="URL"), gr.Text(label="Host")], FLAG_DIR)

# dummy data
websites = [
    ["https://www.google.com/"],
    ["https://www.youtube.com/"],
    ["https://www.facebook.com/"]
]

# add simple get request for tracking
websites = [
    [f"<a href={x[0]} target='_blank' onclick='fetch(\"/track?url={x[0]}\")'>{x[0]}</a>"] for x in websites]

df = pd.DataFrame(websites, columns=['img_code'])
df_html = df.to_html(escape=False, render_links=False,
                     index=False, header=False)

# create a FastAPI app
app = FastAPI()

# gradio app
with gr.Blocks() as block:
    gr.HTML(df_html)

# custom get request handler with params to flag clicks
@ app.get("/track")
async def track(url: str, request: Request):
    # host disable for privacy reasons
    # host = request.headers.get("host")
    logger.flag([url, "ip"])
    return {"message": "ok"}

# mount Gradio app to FastAPI app
app = gr.mount_gradio_app(app, block, path="/")

# serve the app
if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=7860)
1 Like
5

This works great @radames. Two final questions:

  1. Is there a way I can now get the value from a textbox to fill the data alongside the click?
  2. Is there a way to load a javascript function that the onclick calls? I’ve noticed it’s not possible using gr.HTML()

Thanks for the help, you’ve been amazing!