app.py

import gradio as gr
import pandas as pd
import re


SHEET_ID = '1MV7Z0fwJvnU4TFdPsBEC4tl-h3DSvHbee8qxaHcSYHs'
SHEET_NAME = 'Sheet1'
csv_url = f'https://docs.google.com/spreadsheets/d/{SHEET_ID}/gviz/tq?tqx=out:csv&sheet={SHEET_NAME}'

class DataList:
    def __init__(self):
        self.table = pd.read_csv(csv_url)
        self._preprocess_table()

        self.table_header = '''
            <tr>
                <th style="width:10%">Name</th>
                <thstyle="width:50%">Description</th>
                <th style="width:10%">Module</th>
                <th style="width:10%">Type (Format)</th>
                <th style="width:10%">Hashtags</th>
            </tr>'''

    def _preprocess_table(self) -> None:
        self.table['name_lowercase'] = self.table['Name'].str.lower()

        rows = []
        for row in self.table.itertuples():
            source = f'<a href="{row.URL}" target="_parent">{row.Name}</a>' if isinstance(
                row.URL, str) else '{row.Name}'
            row = f'''
                <tr>
                    <td>{source}</td>
                    <td>{row.Description}</td>
                    <td>{row.Module}</td>
                    <td>{row.Type}</td>
                    <td>{row.Hashtags}</td>
                </tr>'''
            rows.append(row)
        self.table['html_table_content'] = rows

    def render(self, search_query: str,
            filter_names: list[str],
            filter_names2: list[str],
            filter_names3: list[str],
            show_filter_checkbox: bool) -> tuple[int, str]:
        self.table = pd.read_csv(csv_url)
        self._preprocess_table()

        self.table_header = '''
            <tr>
                <td style="width:10%">Name</td>
                <td style="width:50%">Description</td>
                <td style="width:10%">Module</td>
                <td style="width:10%">Type (Format)</td>
                <td style="width:10%">Hashtags</td>
            </tr>'''
        df = self.table
        if search_query:
                df = df[df.name_lowercase.str.contains(search_query.lower())]
        df1 = self.filter_table1(df, filter_names)
        df2 = self.filter_table2(df1,filter_names2)
        df3 = self.filter_table3(df2,filter_names3,show_filter_checkbox)
        result = self.to_html(df3, self.table_header)
        return result

    @staticmethod
    def filter_table1(df: pd.DataFrame, filter_names: list[str]) -> pd.DataFrame:
        df = df.loc[df.Module.isin(set(filter_names))]
        return df

    @staticmethod
    def filter_table2(df: pd.DataFrame,filter_names2: list[str]) -> pd.DataFrame:
        df.loc[:,'Type'] = df['Type'].fillna("").astype(str);
        df= df[df.Type.str.contains('|'.join(filter_names2),case=False, regex=True)]
        return df

    @staticmethod
    def filter_table3(df: pd.DataFrame,filter_names3: list[str],show_filter_checkbox: bool) -> pd.DataFrame:
        if not show_filter_checkbox:
            return df
        if not filter_names3:
            return df
        df.loc[:,'Hashtags'] = df['Hashtags'].fillna("").astype(str);
        df= df[df.Hashtags.str.contains('|'.join(filter_names3),case=False, regex=True)]
        return df

    @staticmethod
    def to_html(df: pd.DataFrame, table_header: str) -> str:
        table_data = ''.join(df.html_table_content)
        html = f'''
        <table style="width:100%">
            {table_header}
            {table_data}
        </table>'''
        return html


data_list = DataList()

css="""
.app.svelte-fc1inc.svelte-fc1inc:not(.fill_width) {
        max-width: 100% !important;
    }
    """

def toggle_filter(show_filter: bool):
    return gr.update(visible=show_filter)
    
with gr.Blocks(css=css, theme=gr.themes.Default(primary_hue="blue", secondary_hue="gray")) as demo:
    search_box = gr.Textbox( label='Search Name', placeholder='You can search for titles with regular expressions. e.g. (?<!sur)face',max_lines=1, scale = 5)  
    filter_names = gr.CheckboxGroup(choices=["Responsible AI 101", "Responsible AI Governance", "AI System Risk and Assurance", "Generative and Agentic AI", "AI Regulation and Compliance", "AI Procurement","Premium Assets"], value=["Responsible AI 101", "Responsible AI Governance", "AI System Risk and Assurance", "Generative and Agentic AI", "AI Regulation and Compliance", "AI Procurement","Premium Assets"], label='Type')
    filter_names2 = gr.CheckboxGroup(choices=['Deck','Document/Report','Infographic','Video/Audio','Repository/Directory',], value=['Deck','Document/Report','Infographic','Video/Audio','Repository/Directory',], label='Type (Format)')
    show_filter_checkbox = gr.Checkbox(label="Filter on Hashtags", value=False)
    filter_names3 = gr.CheckboxGroup(choices=[
  "#AIImpacts",
  "#AIAssessment&Audit",
  "#AIDesign",
  "#AIDevelopment",
  "#AIDeployment",
  "#AIMonitoring",
  "#AIOperating&Maintenance",
  "#AIDecommissioning",
  "#AITesting&Evaluation",
  "#AITraining",
  "#AIStandards",
  "#AIUseCase",
  "#Accountability&Transparency",
  "#CheatSheet",
  "#Checklist",
  "#CaseStudy",
  "#Cybersecurity",
  "#Data&AI",
  "#EUAIAct",
  "#EUGDPR",
  "#EmergingTopic",
  "#Explainability&Interpretability",
  "#FactSheet",
  "#Fairness&Bias",
  "#FederalRegulations",
  "#Frameworks",
  "#FrontierAI",
  "#ForAuditors",
  "#ForDevelopers",
  "#ForDeployers",
  "#ForLeadership",
  "#GlobalStandards",
  "#Glossary",
  "#Government&PublicSector",
  "#Guide",
  "#Healthcare",
  "#HR",
  "#ISO42001",
  "#Industrial",
  "#Manufacturing",
  "#Marketing",
  "#News&Journalism",
  "#Privacy",
  "#Report",
  "#Retail",
  "#Safety",
  "#Security&Resiliency",
  "#StateRegulations",
  "#Template",
  "#Toolkit",
  "#Training",
  "#Validity&Reliability",
  "#WhitePaper"
] 
, value=[
], label='Hide the hashtags filter and hit search to see full list again.', visible=False)
    show_filter_checkbox.change(toggle_filter, inputs=show_filter_checkbox, outputs=filter_names3)
    search_button = gr.Button('Search', size = 'sm', scale =1)
    table = gr.HTML(show_label=False)
        
    demo.load(fn=data_list.render, inputs=[search_box, filter_names,filter_names2,filter_names3,], outputs=[table,])
    search_button.click(fn=data_list.render, inputs=[search_box, filter_names,filter_names2,filter_names3,show_filter_checkbox,], outputs=[table,])    

demo.queue()
demo.launch(share=False)