Log Click on HTML Table to CSV
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
2023-03-13T17:43:53Z
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?
2023-03-13T18:32:14Z
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)
2023-03-17T00:23:23Z
Hi@bradley6597In 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 yourFastAPI app.Here’s a complete demo including syncing the flagged data with a dataset on Hugging Face hub:huggingface.coGradio Track Clicks Dataset - a Hugging Face Space by radamesDiscover amazing ML apps made by the communityHere’s a simple implementationimport 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)
2023-03-17T13:31:01Z
radames: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)This works great@radames. Two final questions:Is there a way I can now get the value from a textbox to fill the data alongside the click?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!