app.py

import gradio as gr
import pandas as pd
import json
import random

# Parameters for value checking
parameters = {
    "speed": 50, 
    "speed_uncertainty": 4,
    "flow": 10.4,
    "flow_uncertainty": 0.2,
    "env_temperature": 35,
    "sup_temperature": 50,
    "gap": 0.1,
}

def check_value(parameter, value, parameters):
    if parameter == "Velocity":
        return parameters["speed"] - parameters["speed_uncertainty"] <= value <= parameters["speed"] + parameters["speed_uncertainty"]
    elif parameter == "Flow":
        return parameters["flow"] - parameters["flow_uncertainty"] <= value <= parameters["flow"] + parameters["flow_uncertainty"]
    elif parameter == "Env. Temperature":
        return value < parameters["env_temperature"]
    elif parameter == "Sup. Temperature":
        return value < parameters["sup_temperature"]
    elif parameter == "Gap":
        return value < parameters["gap"]
    return None

def generate_table_html(df, parameters):
    # Build CSS and table
    html = """
    <style>
    table.custom-table {
        width: 100%;
        border-collapse: collapse;
    }
    table.custom-table th, table.custom-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    button.action-btn {
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    </style>
    """
    html += '<table class="custom-table">\n'
    html += "  <tr>\n"
    for col in df.columns:
        html += f"    <th>{col}</th>\n"
    html += "    <th>Details</th>\n"
    html += "  </tr>\n"
    
    for _, row in df.iterrows():
        row_data = row.to_dict()
        row_data_json = json.dumps(row_data)
        html += "  <tr>\n"
        for col in df.columns:
            value = row[col]
            color = check_value(col, value, parameters)
            style = f' style="color: {"#00C005" if color else "#DE0000"};"' if color is not None else ""
            html += f'    <td{style}>{value}</td>\n'
        # When the button is clicked, call sendToPython with the row's JSON data.
        html += f'    <td><button class="action-btn" onclick=\'sendToPython(this)\' data-row=\'{row_data_json}\' >Show Info</button></td>\n'
        html += "  </tr>\n"
    
    html += "</table>\n"
    return html


script = """
<script>
    function sendToPython(btn) {
        var data = btn.getAttribute('data-row');
        var rowData = JSON.parse(data);
        console.log("Sending row data to Python:", rowData);
        var inputElem = document.querySelector('#hidden_textbox textarea');
        if (inputElem) {
            const event = new Event('input');
            Object.defineProperty(event, "target", {value: inputElem})
            inputElem.value = JSON.stringify(rowData);
            inputElem.dispatchEvent(event);
        } else {
            console.error("Hidden textbox not found!");
        }
    }
</script>
"""

def generate_filename():
    uf = f"UF{random.randint(1, 5)}"
    cd = "CD"
    pr1 = f"PR{random.randint(10, 99)}"
    pr2 = f"PR{random.randint(10, 99)}"
    return f"{uf}_{cd}_{pr1}_{pr2}"

# Create a sample DataFrame
data = {
    "File name": [generate_filename() for _ in range(10)],
    "Status PDF": [random.choice(["Complete", "Incomplete", "Error"]) for _ in range(10)],
    "Start-End": [f"{random.randint(0, 12)}:00 - {random.randint(13, 23)}:59" for _ in range(10)],
    "Env. Temperature": [round(random.uniform(15.0, 30.0), 2) for _ in range(10)],
    "Sup. Temperature": [round(random.uniform(30.0, 50.0), 2) for _ in range(10)],
    "Flow": [round(random.uniform(5.0, 20.0), 2) for _ in range(10)],
    "Velocity": [round(random.uniform(0.5, 5.0), 2) for _ in range(10)],
    "Gap": [round(random.uniform(0.1, 1.0), 2) for _ in range(10)],
    "Observations": ["" for _ in range(10)]
}
df = pd.DataFrame(data)

def handle_click(input_value):
    print("Button clicked, row data:", input_value)
    return input_value

with gr.Blocks(head=script) as demo:
    gr.Markdown("### Data Table with Action Button")
    # Use a hidden gr.Textbox (which reliably fires change events) to capture the data.
    hidden_textbox = gr.Textbox(value="", elem_id="hidden_textbox", visible=False)
    # Render the table as HTML.
    html_component = gr.HTML(generate_table_html(df, parameters), container=True)
    hidden_textbox.input(fn=handle_click, inputs=[hidden_textbox], outputs=[hidden_textbox])


if __name__ == "__main__":
    demo.launch()