add generic data viewer. separate routes

common.py

@@ -0,0 +1,7 @@
+from fasthtml.common import *
+from fasthtml.components import *
+
+
+def common_steps():
+    return Div(Section(H2(P("Common Steps")), id="inner-text"))
+

curated.py

@@ -1,5 +1,12 @@
 from fasthtml.common import *
+from fasthtml.components import *
+from plotly import graph_objects as go
+from fh_plotly import plotly2fasthtml
+import pandas as pd
 import json
+from data_viewer import view_data, gen_random_id
+from rich import print
+import uuid
 
 
 data_sources = [
@@ -20,7 +27,7 @@ data_sources = [
 ]
 
 
-def get_data(data_source: str = "Freelaw", doc_id: int = 3):
+def get_data(data_source: str = "Freelaw", doc_id: int = 3, target: str = "foo"):
     doc_id = max(0, min(int(doc_id), 9))
 
     if data_source == "Freelaw":
@@ -77,60 +84,193 @@ def get_data(data_source: str = "Freelaw", doc_id: int = 3):
 
     raw_json = raw_sample_doc[doc_id]
     extracted_json = extracted_sample_doc[doc_id]
-
-    drop_down = Select(
-        *[Option(ds, value=ds, selected=(ds == data_source)) for ds in data_sources],
-        name="data_source",
-        hx_get="/curated",
-        hx_target="#colcontent",
-        hx_trigger="change",
-        hx_swap="innerHTML",
+    return view_data(
+        raw_json,
+        extracted_json,
+        doc_id=doc_id,
+        data_source=data_source,
+        data_sources=data_sources,
+        target=target,
     )
 
-    slider = Input(
-        type="range",
-        name="doc_id",
-        min="0",
-        max="9",
-        value=str(doc_id),
-        hx_get="/curated",
-        hx_target="#colcontent",
-        hx_trigger="change",
-        hx_swap="innerHTML",
-        hx_include="[name='data_source']",
+
+def get_chart_28168342():
+    fig = go.Figure()
+    filter_names = [
+        "Download",
+        "Language",
+        "Min word count",
+        "Title Abstract",
+        "Majority language",
+        "Paragraph count",
+        "Frequency",
+        "Unigram log probability",
+        "Local dedup",
+    ]
+
+    data_sources = [
+        ("Wikipedia", [100, 90, 80, 70, 60, 50, 40, 30, 20]),
+        ("Freelaw", [100, 90, 80, 70, 60, 50, 40, 20, 20]),
+        ("DM Maths", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("USPTO", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PG19", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Hackernews", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Ubuntu IRC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Europarl", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("StackExchange", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Arxiv", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("S2ORC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("S2ORC Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PubMed Central", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PubMed Central Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PhilPapers", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+    ]
+
+    for name, x_values in data_sources:
+        fig.add_trace(
+            go.Funnel(
+                name=name,
+                orientation="h",
+                y=filter_names,
+                x=x_values,
+                textinfo="value+percent total",
+                textposition="inside",
+            )
+        )
+
+    fig.update_layout(height=500, plot_bgcolor="rgba(0,0,0,0)")
+    return fig
+
+
+def curated(request):
+    # Partial Updates
+    params = dict(request.query_params)
+    if target := params.get("target"):
+        if data_source := params.get(f"data_source_{target}"):
+            return get_data(
+                data_source, params.get(f"doc_id_{target}", 3), params.get("target")
+            )
+        if doc_id := params.get(f"doc_id_{target}"):
+            return get_data(
+                params.get(f"data_source_{target}"), doc_id, params.get("target")
+            )
+
+    data_preparation_steps = pd.DataFrame(
+        {
+            "Method": [
+                "HTTP/FTP dumps",
+                "Web crawling",
+                "Archive snapshot",
+                "Generated",
+                "Curated",
+            ],
+            "Description": [
+                "Acquiring data from HTTP/FTP dumps",
+                "Crawling websites to extract data",
+                "Working with archive dumps",
+                "Generating synthetic data",
+                "High quality curated data",
+            ],
+            "Source": [
+                "Freelaw | Wikipedia | PhilPapers | Arxiv | S2ORC | Pubmeds",
+                "USPTO | Hackernews | Ubuntu IRC",
+                "StackExchange",
+                "DM Maths",
+                "PG19 | Europarl",
+            ],
+        }
     )
 
-    form = Form(
-        Div(
-            Label("Data source: ", drop_down),
-        ),
+    table_html = data_preparation_steps.to_html(index=False, border=0)
+    table_div = Div(NotStr(table_html), style="margin: 40px;")
+
+    text = P("""This initial stage serves as the foundation for the entire
+    process. Here, we focus on acquiring and extracting the raw data, which can
+    come from various sources such as crawling websites, using HTTP/FTP dumps,
+    or working with archive dumps.  For instance, to download and prepare a
+    dataset, we can specific downloaders based on the data source. Each dataset
+    might have its own downloader script which can be updated in real time to
+    handle changes in the data source.  Here is a general outline of the data
+    preparation process: It's worth noting that some pipelines might require
+    invoking additional functions or scripts to handle specific data sources or
+    formats.  These helper scripts can be located within specific directories
+    or modules dedicated to the dataset.""")
+
+    data_preparation_div = Div(
+        H3("Data Preparation"),
+        text,
+        table_div,
         Div(
-            Label("Data sample: ", slider, f"{doc_id}", cls="plotly_slider"),
+            get_data(target=gen_random_id()),
+            style="border: 1px solid #ccc; padding: 20px;",
         ),
-        cls="plotly_input_container",
     )
 
-    col1 = Div(
-        H3("Raw format"),
-        Pre(
-            json.dumps(raw_json, indent=4),
-            style="white-space: pre-wrap; word-break: break-all;",
-        ),
-        style="width: 48%; float: left; overflow-x: auto;",
-    )
+    text = P("""Data preprocessing is a crucial step in the data science
+    pipeline. It involves cleaning and transforming raw data into a format that
+    is suitable for analysis. This process includes handling missing values,
+    normalizing data, encoding categorical variables, and more.""")
 
-    col2 = Div(
-        H3("Extracted format"),
-        Pre(
-            json.dumps(extracted_json, indent=4),
-            style="white-space: pre-wrap; word-break: break-all;",
-        ),
-        style="width: 48%; float: right; overflow-x: auto;",
+    preprocessing_steps = pd.DataFrame(
+        {
+            "Step": [
+                "Language Filter",
+                "Min Word Count",
+                "Title Abstract",
+                "Majority Language",
+                "Paragraph Count",
+                "Frequency",
+                "Unigram Log Probability",
+            ],
+            "Description": [
+                "Filtering data based on language",
+                "Setting a minimum word count threshold",
+                "Extracting information from the title and abstract",
+                "Identifying the majority language in the dataset",
+                "Counting the number of paragraphs in each document",
+                "Calculating the frequency of each word in the dataset",
+                "Calculating the log probability of each unigram",
+            ],
+            "Need": [
+                "To remove documents in unwanted languages",
+                "To filter out documents with very few words",
+                "To extract relevant information for analysis",
+                "To understand the distribution of languages in the dataset",
+                "To analyze the structure and length of documents",
+                "To identify important words in the dataset",
+                "To measure the significance of individual words",
+            ],
+            "Pros": [
+                "Improves data quality by removing irrelevant documents",
+                "Filters out low-quality or incomplete documents",
+                "Provides additional information for analysis",
+                "Enables language-specific analysis and insights",
+                "Helps understand the complexity and content of documents",
+                "Identifies important terms and topics in the dataset",
+                "Quantifies the importance of individual words",
+            ],
+            "Cons": [
+                "May exclude documents in less common languages",
+                "May remove documents with valuable information",
+                "May introduce bias in the analysis",
+                "May not accurately represent the language distribution",
+                "May not capture the complexity of document structure",
+                "May be sensitive to noise and outliers",
+                "May not capture the semantic meaning of words",
+            ],
+        }
     )
 
-    data_display = Div(
-        col1,
-        col2,
-        style="overflow: auto; clear: both; height: 600px; border: 1px solid #ccc; padding: 20px;",
+    table_html = preprocessing_steps.to_html(index=False, border=0)
+    table_div = Div(NotStr(table_html), style="margin: 40px;")
+    data_preprocessing_div = Div(H3("Data Preprocessing"), text, table_div)
+
+    return Div(
+        Section(
+            H2("Curated Sources"),
+            plotly2fasthtml(get_chart_28168342()),
+            data_preparation_div,
+            data_preprocessing_div,
+            id="inner-text",
+        )
     )
-    return Div(form, data_display, style="margin-top: 10px;", id="colcontent")

data_viewer.py

@@ -0,0 +1,83 @@
+from fasthtml.common import *
+from fasthtml.components import *
+import json
+import string
+import random
+
+
+def gen_random_id() -> str:
+    return "".join(random.choices(string.ascii_lowercase, k=8))
+
+
+def view_data(
+    before,
+    after,
+    doc_id,
+    data_source: str,
+    data_sources=None,
+    target: str = "colcontent",
+):
+    if data_sources is not None:
+        drop_down = Select(
+            *[
+                Option(ds, value=ds, selected=(ds == data_source))
+                for ds in data_sources
+            ],
+            name=f"data_source_{target}",
+            hx_get="/curated",
+            hx_target=f"#{target}",
+            hx_trigger="change",
+            hx_swap="innerHTML",
+            hx_vals=json.dumps({"target": f"{target}"}),
+        )
+
+    slider = Input(
+        type="range",
+        name=f"doc_id_{target}",
+        min="0",
+        max="9",
+        value=str(doc_id),
+        hx_get="/curated",
+        hx_target=f"#{target}",
+        hx_trigger="change",
+        hx_swap="innerHTML",
+        hx_include=f'[name="data_source_{target}"]',
+        hx_vals=json.dumps({"target": f"{target}"}),
+    )
+
+    form = Form(
+        Div(
+            Label("Data source: ", drop_down),
+        )
+        if (data_sources is not None)
+        else None,
+        Div(
+            Label("Data sample: ", slider, f"{doc_id}", cls="plotly_slider"),
+        ),
+        cls="plotly_input_container",
+    )
+
+    col1 = Div(
+        H3("Raw format"),
+        Pre(
+            json.dumps(before, indent=4),
+            style="white-space: pre-wrap; word-break: break-all;",
+        ),
+        style="width: 48%; float: left; overflow-x: auto;",
+    )
+
+    col2 = Div(
+        H3("Extracted format"),
+        Pre(
+            json.dumps(after, indent=4),
+            style="white-space: pre-wrap; word-break: break-all;",
+        ),
+        style="width: 48%; float: right; overflow-x: auto;",
+    )
+
+    data_display = Div(
+        col1,
+        col2,
+        style="overflow: auto; clear: both; height: 600px; border: 1px solid #ccc; padding: 20px;",
+    )
+    return Div(form, data_display, style="margin-top: 10px;", id=target)

main.py

@@ -1,115 +1,120 @@
 from fasthtml.common import *
 from fasthtml.components import *
 from fasthtml.components import D_title, D_article, D_front_matter, D_contents, D_byline
-from fasthtml.components import HR
 from plotly import graph_objects as go
 from fh_plotly import plotly2fasthtml
 import pandas as pd
 import json
 from rich import print
+import curated
+import web
+import common
+import results
 
 
-app, rt = fast_app(debug=True)
+app, rt = fast_app(
+    debug=True,
+    pico=False,
+    hdrs=(
+        Meta(charset="UTF-8"),
+        Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
+        Script(src="https://distill.pub/template.v2.js"),
+        Script(src="https://unpkg.com/htmx.org@next/dist/htmx.min.js"),
+        Script(src="https://cdn.plot.ly/plotly-latest.min.js"),
+        Link(rel="stylesheet", href="style.css"),
+        MarkdownJS(),
+        HighlightJS(langs=["python", "javascript", "html", "css"]),
+    ),
+)
 
 
 @app.get("/")
 def main():
-    return Html(
-        Head(
-            Meta(charset="UTF-8"),
-            Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
-            Script(src="https://distill.pub/template.v2.js"),
-            Script(src="https://unpkg.com/htmx.org@next/dist/htmx.min.js"),
-            Script(src="https://cdn.plot.ly/plotly-latest.min.js"),
-            Link(rel="stylesheet", href="style.css"),
-        ),
-        Body(
-            D_title(
-                H1(
-                    "TxT360: fully open and transparent fusion of web and curated corpora for pre-training large language models",
-                    cls="l-body",
-                    style="text-align: center;",
-                ),
-                Div(
-                    Img(src="images/llm360_logo.png"),
-                    id="title-plot",
-                    cls="main-plot-container l-page",
-                ),
+    return Div(
+        D_front_matter(),
+        D_title(
+            H1(
+                "TxT360: fully open and transparent fusion of web and curated corpora for pre-training large language models",
+                cls="l-body",
+                style="text-align: center;",
             ),
-            D_article(
-                D_contents(
-                    Nav(
-                        H3("Table of Contents"),
-                        Div(
-                            A("TxT360", href="#_self"),
-                            hx_get="/intro",
-                            hx_target="#inner-text",
-                        ),
-                        Div(
-                            Ul(
-                                Li(
-                                    A(
-                                        "Introduction",
-                                        href="/intro#section1",
-                                        hx_get="/intro#section1",
-                                        hx_target="#inner-text",
-                                    )
-                                ),
-                                Li(
-                                    A(
-                                        "Background",
-                                        href="/intro#section2",
-                                        hx_get="/intro#section2",
-                                        hx_target="#inner-text",
-                                    )
-                                ),
-                                Li(
-                                    A(
-                                        "Main Content",
-                                        href="/intro#section3",
-                                        hx_get="/intro#section3",
-                                        hx_target="#inner-text",
-                                    )
-                                ),
-                                Li(
-                                    A(
-                                        "Conclusion",
-                                        href="/intro#section4",
-                                        hx_get="/intro#section4",
-                                        hx_target="#inner-text",
-                                    )
-                                ),
+            Div(
+                Img(src="images/llm360_logo.png"),
+                id="title-plot",
+                cls="main-plot-container l-page",
+            ),
+        ),
+        D_article(
+            D_contents(
+                Nav(
+                    H3("Table of Contents"),
+                    Div(
+                        A("TxT360", href="#_self"),
+                        hx_get="/intro",
+                        hx_target="#inner-text",
+                    ),
+                    Div(
+                        Ul(
+                            Li(
+                                A(
+                                    "Introduction",
+                                    href="/intro#section1",
+                                    hx_get="/intro#section1",
+                                    hx_target="#inner-text",
+                                )
+                            ),
+                            Li(
+                                A(
+                                    "Background",
+                                    href="/intro#section2",
+                                    hx_get="/intro#section2",
+                                    hx_target="#inner-text",
+                                )
+                            ),
+                            Li(
+                                A(
+                                    "Main Content",
+                                    href="/intro#section3",
+                                    hx_get="/intro#section3",
+                                    hx_target="#inner-text",
+                                )
+                            ),
+                            Li(
+                                A(
+                                    "Conclusion",
+                                    href="/intro#section4",
+                                    hx_get="/intro#section4",
+                                    hx_target="#inner-text",
+                                )
                             ),
                         ),
-                        Div(
-                            A("Web Data", href="#inner-text"),
-                            hx_get="/webdata",
-                            hx_target="#inner-text",
-                        ),
-                        Div(
-                            A("Curated Sources", href="#inner-text"),
-                            hx_get="/curated",
-                            hx_target="#inner-text",
-                        ),
-                        Div(
-                            A("Common Steps", href="#inner-text"),
-                            hx_get="/common",
-                            hx_target="#inner-text",
-                        ),
-                        Div(
-                            A("TxT360 Results", href="#inner-text"),
-                            hx_get="/results",
-                            hx_target="#inner-text",
-                        ),
-                        role="navigation",
-                        cls="l-text figcaption",
                     ),
-                    prerendered="true",
+                    Div(
+                        A("Web Data", href="#inner-text"),
+                        hx_get="/webdata",
+                        hx_target="#inner-text",
+                    ),
+                    Div(
+                        A("Curated Sources", href="#inner-text"),
+                        hx_get="/curated",
+                        hx_target="#inner-text",
+                    ),
+                    Div(
+                        A("Common Steps", href="#inner-text"),
+                        hx_get="/common",
+                        hx_target="#inner-text",
+                    ),
+                    Div(
+                        A("TxT360 Results", href="#inner-text"),
+                        hx_get="/results",
+                        hx_target="#inner-text",
+                    ),
+                    role="navigation",
+                    cls="l-text figcaption",
                 ),
-                intro(),
             ),
+            intro(),
         ),
-        lang="en",
     )
 
 
@@ -254,197 +259,12 @@ def intro():
     )
 
 
-@app.get("/webdata")
-def web_data():
-    return Div(Section(H2(P("Web Data")), id="inner-text"))
-
-
-def get_chart_28168342():
-    fig = go.Figure()
-    filter_names = [
-        "Download",
-        "Language",
-        "Min word count",
-        "Title Abstract",
-        "Majority language",
-        "Paragraph count",
-        "Frequency",
-        "Unigram log probability",
-        "Local dedup",
-    ]
-
-    data_sources = [
-        ("Wikipedia", [100, 90, 80, 70, 60, 50, 40, 30, 20]),
-        ("Freelaw", [100, 90, 80, 70, 60, 50, 40, 20, 20]),
-        ("DM Maths", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("USPTO", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("PG19", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("Hackernews", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("Ubuntu IRC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("Europarl", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("StackExchange", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("Arxiv", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("S2ORC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("S2ORC Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("PubMed Central", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("PubMed Central Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-        ("PhilPapers", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
-    ]
-
-    for name, x_values in data_sources:
-        fig.add_trace(
-            go.Funnel(
-                name=name,
-                orientation="h",
-                y=filter_names,
-                x=x_values,
-                textinfo="value+percent total",
-                textposition="inside",
-            )
-        )
-
-    fig.update_layout(height=500, plot_bgcolor="rgba(0,0,0,0)")
-    return fig
-
-
-@app.get("/curated")
-def curated(request):
-    from curated import get_data
-
-    # Partial Updates
-    params = request.query_params
-    if data_source := params.get("data_source"):
-        return get_data(data_source, params.get("doc_id", 3))
-    if doc_id := params.get("doc_id"):
-        return get_data(params.get("data_source"), doc_id)
-
-    hr = HR()
-    data_preparation_steps = pd.DataFrame(
-        {
-            "Method": [
-                "HTTP/FTP dumps",
-                "Web crawling",
-                "Archive snapshot",
-                "Generated",
-                "Curated",
-            ],
-            "Description": [
-                "Acquiring data from HTTP/FTP dumps",
-                "Crawling websites to extract data",
-                "Working with archive dumps",
-                "Generating synthetic data",
-                "High quality curated data",
-            ],
-            "Source": [
-                "Freelaw | Wikipedia | PhilPapers | Arxiv | S2ORC | Pubmeds",
-                "USPTO | Hackernews | Ubuntu IRC",
-                "StackExchange",
-                "DM Maths",
-                "PG19 | Europarl",
-            ],
-        }
-    )
-
-    table_html = data_preparation_steps.to_html(index=False, border=0)
-    table_div = Div(NotStr(table_html), style="margin: 40px;")
-
-    text = P("""This initial stage serves as the foundation for the entire
-    process. Here, we focus on acquiring and extracting the raw data, which can
-    come from various sources such as crawling websites, using HTTP/FTP dumps,
-    or working with archive dumps.  For instance, to download and prepare a
-    dataset, we can specific downloaders based on the data source. Each dataset
-    might have its own downloader script which can be updated in real time to
-    handle changes in the data source.  Here is a general outline of the data
-    preparation process: It's worth noting that some pipelines might require
-    invoking additional functions or scripts to handle specific data sources or
-    formats.  These helper scripts can be located within specific directories
-    or modules dedicated to the dataset.""")
-
-    data_preparation_div = Div(
-        H3("Data Preparation"),
-        text,
-        table_div,
-        Div(get_data(), style="border: 1px solid #ccc; padding: 20px;"),
-    )
-
-    text = P("""Data preprocessing is a crucial step in the data science
-    pipeline. It involves cleaning and transforming raw data into a format that
-    is suitable for analysis. This process includes handling missing values,
-    normalizing data, encoding categorical variables, and more.""")
-
-    preprocessing_steps = pd.DataFrame(
-        {
-            "Step": [
-                "Language Filter",
-                "Min Word Count",
-                "Title Abstract",
-                "Majority Language",
-                "Paragraph Count",
-                "Frequency",
-                "Unigram Log Probability",
-            ],
-            "Description": [
-                "Filtering data based on language",
-                "Setting a minimum word count threshold",
-                "Extracting information from the title and abstract",
-                "Identifying the majority language in the dataset",
-                "Counting the number of paragraphs in each document",
-                "Calculating the frequency of each word in the dataset",
-                "Calculating the log probability of each unigram",
-            ],
-            "Need": [
-                "To remove documents in unwanted languages",
-                "To filter out documents with very few words",
-                "To extract relevant information for analysis",
-                "To understand the distribution of languages in the dataset",
-                "To analyze the structure and length of documents",
-                "To identify important words in the dataset",
-                "To measure the significance of individual words",
-            ],
-            "Pros": [
-                "Improves data quality by removing irrelevant documents",
-                "Filters out low-quality or incomplete documents",
-                "Provides additional information for analysis",
-                "Enables language-specific analysis and insights",
-                "Helps understand the complexity and content of documents",
-                "Identifies important terms and topics in the dataset",
-                "Quantifies the importance of individual words",
-            ],
-            "Cons": [
-                "May exclude documents in less common languages",
-                "May remove documents with valuable information",
-                "May introduce bias in the analysis",
-                "May not accurately represent the language distribution",
-                "May not capture the complexity of document structure",
-                "May be sensitive to noise and outliers",
-                "May not capture the semantic meaning of words",
-            ],
-        }
-    )
-
-    table_html = preprocessing_steps.to_html(index=False, border=0)
-    table_div = Div(NotStr(table_html), style="margin: 40px;")
-    data_preprocessing_div = Div(H3("Data Preprocessing"), text, table_div)
-
-    return Div(
-        Section(
-            H2("Curated Sources"),
-            plotly2fasthtml(get_chart_28168342()),
-            data_preparation_div,
-            data_preprocessing_div,
-            id="inner-text",
-        )
-    )
-
-
-@app.get("/common")
-def common_steps():
-    return Div(Section(H2(P("Common Steps")), id="inner-text"))
+rt("/curated")(curated.curated)
 
+rt("/webdata")(web.web_data)
 
-@app.get("/results")
-def results():
-    return Div(Section(H2(P("Results")), id="inner-text"))
+rt("/common")(common.common_steps)
 
+rt("/results")(results.results)
 
 serve()

results.py

@@ -0,0 +1,7 @@
+from fasthtml.common import *
+from fasthtml.components import *
+
+
+def results():
+    return Div(Section(H2(P("Results")), id="inner-text"))
+

web.py

@@ -0,0 +1,7 @@
+from fasthtml.common import *
+from fasthtml.components import *
+
+
+def web_data():
+    return Div(Section(H2(P("Web Data")), id="inner-text"))
+