Update app.py

app.py

@@ -1,282 +1,8 @@
-from fasthtml.common import *
-from home_components import *
-from content import *
-
-_blank = dict(target="_blank", rel="noopener noreferrer")
-description = 'Modern web applications in pure Python'
-
-def benefit(title, content):
-    return Div(
-        H3(title, cls=f"text-black heading-3"),
-        P(content, cls=f"l-body mt-6 lg:mt-6"),
-        cls="w-full p-6 bg-soft-yellow rounded-2xl xl:p-12 lg:h-[22rem] lg:w-[26rem]")
-
-def faq_item(question, answer, id):
-    return accordion(
-        id=id, question=question, answer=answer,
-        question_cls="text-black s-body",
-        answer_cls="s-body text-black/80 col-span-full",
-        container_cls=f"{col} justify-between bg-soft-blue rounded-[1.25rem] {bnset}"
-    )
-
-def hero_section():
-    return (
-    Header(
-        Nav(
-            A(
-                Img(src='/assets/logo.svg', alt='FastHTML', width='105', height='24'),
-                href='#'),
-            A('Read docs', href='/docs', **_blank,
-              cls=f'bg-black text-white py-2 px-4 s-body rounded-[62.5rem] hover:bg-black/80 transition-colors duration-300 px-4 py-1 h-10 {center} justify-center'),
-            cls=f'py-2 px-4 {between} items-center rounded-full w-full max-w-[400px] bg-white/50 backdrop-blur-lg border border-white/20'),
-        cls=f'fixed top-0 w-full left-0 p-4 {center} justify-center z-50'),
-    Section(
-        Div(
-            File('assets/hero-shapes.svg'),
-            cls='absolute z-0 lg:-top-[15%] top-0 left-1/2 -translate-x-1/2 grid grid-cols-1 grid-rows-1 w-[120%] aspect-square max-w-[2048px] min-w-[900px]'),
-        Div(
-            Div(cls='lg:flex-1 max-lg:basis-[152px]'),
-            Div(
-                H1(description, cls='heading-1 max-w-3xl'),
-                P('Built on solid web foundations, not the latest fads - with\nFastHTML you can get started on anything from simple dashboards to\nscalable web applications in minutes.',
-                    cls='m-body max-w-[40rem] text-center'),
-                cls=f'flex-1 {col} items-center justify-center gap-6 text-center w-full text-black'
-            ),
-            Div(
-                A('Learn more', href='https://fastht.ml/about', **_blank,
-                    cls=f'{bnset} m-body px-4 py-1 rounded-full bg-black hover:bg-black/80 transition-colors duration-300 text-white h-[76px] w-full max-w-[350px] flex items-center justify-center'),
-                video_button('Watch intro', '/assets/thumb.png', '7min 30sec', "QqZUzkPcU7A?si=lTtHuMT5HPC66-49"),
-                cls=f'flex-1 {center} justify-center content-center flex-wrap lg:gap-6 gap-4 m-body'),
-                video_player('Try now'),
-            cls=f'{col} flex-1 relative px-4 lg:px-16'),
-        cls=f'{col} relative w-full h-screen max-h-[1024px] min-h-[720px] overflow-hidden bg-grey')
-    )
-
-def code_display(file_name, code_snippet, snippet_id):
-    return Div(
-        Div(
-            Div(
-                P(file_name, cls=f"xs-mono-body {center}"),
-                Button(
-                    Div(
-                        Img(cls="button-content w-4 h-4", src="assets/icons/copy-icon.svg", alt="Copy"),
-                        Span("Copied!", cls=f"absolute bg-inherit rounded-l-[0.5rem] {center} py-2 h-full right-0 copied-text overflow-hidden w-0 peer-clicked:w-fit s-body text-white/80 transition-transform transition-all duration-600 ease-out"),
-                        cls=f"relative bg-black/20 rounded-[0.5rem] {center} p-2 h-8 w-fit"),
-                    cls="copy-button"),
-                cls=f"w-full {between}"),
-            cls="bg-black/20 text-white/80 w-full max-w-2xl lg:max-w-xl p-4 rounded-2xl"),
-        Pre(
-            Code(code_snippet, cls="python w-full mono-body"),
-            id=snippet_id,
-            cls="code-snippet relative max-h-[25rem] overflow-hidden hide-scrollbar"),
-        Div(cls="absolute code-fade-out bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-[#3a2234] pointer-events-none"),
-        cls=f"relative {col} gap-6 lg:max-w-[45rem] w-full overflow-hidden"
-    )
-
-def code_demo(title, file_name, code_snippet, demo_content, is_active=False):
-    snippet_id = f"{title.lower().replace(' ', '-')}-code-snippet"
-    demo_cls = f"{center} my-11 p-4 flex-none whitespace-normal justify-center h-96 rounded-3xl bg-soft-purple lg:p-8 w-full max-w-2xl lg:max-w-md lg:mx-28 lg:my-8 overflow-y-auto {'lg:items-start hide-scrollbar' if snippet_id == 'reusable-code-snippet' else ''}"
-    return Div(
-        code_display(file_name, code_snippet, snippet_id),
-        Div(demo_content, cls=demo_cls),
-        aria_labelledby=f"tab-{title.lower().replace(' ', '-')}", role="tabpanel",
-        cls=f"code-container pt-8 lg:pt-16 tab-panel relative hide-scrollbar toggle-element {col} lg:flex-row lg:justify-between overflow-hidden w-full lg:max-w-[1440px] xl:mx-auto {'hidden' if not is_active else ''}",
-        id=f"{title.lower().replace(' ', '-')}-code-demo")
-
-def tab_button(title, is_active=False):
-    classes = f"z-10 button-container flex-none relative px-8 py-2 w-[10.59375rem] h-11 rounded-full {center}"
-    active = f"{classes} current active transition-all duration-300 text-white"
-    inactive = f"{classes} text-white/80 hover:text-white"
-    return Li(
-        Button(
-            Div(title, cls="m-body w-max mx-auto"),
-            id=f"tab-{title.lower().replace(' ', '-')}",
-            cls="toggle-button w-full cursor-pointer",
-            data_target=f"{title.lower().replace(' ', '-')}-code-demo",
-            tabindex="-1" if not is_active else None,
-            name=f"tab-{title.lower().replace(' ', '-')}"),
-        role="tab", aria_selected="true" if is_active else "false",
-        cls=active if is_active else inactive)
-
-async def component_preview_section():
-    cs = await components()
-    return Section(
-        Div(
-        Div(
-            H2("This home page is a FastHTML app.", cls="text-white heading-2 pt-8"),
-            P("Click the buttons below to see four small, live components in action.", cls=f"text-white pt-8 l-body {maxrem(32)}"),
-            cls=f"{maxrem(50)} mx-auto {col} {center} text-center gap-6"
-        ),
-        *[code_demo(title, file_name, code_snippet, demo_content, i == 0) for i, (title, file_name, code_snippet, demo_content) in enumerate(cs)],
-        Ul(
-            *[tab_button(title, i == 0) for i, (title, _, _, _) in enumerate(cs)],
-            Div(id="highlighter", cls=f"{inset} z-0 highlighter w-[10.59375rem] absolute bg-white/20 h-[2.75rem] rounded-[62.5rem] transition-transform duration-300"),
-            role="tablist", id="tab-list",
-            cls=f"relative mt-12 text-white/80 flex-none rounded-[62.5rem] bg-black/20 p-2 max-w-full overflow-x-auto lg:mx-auto {center} hide-scrollbar lg:max-w-[43.375rem]"),
-            cls=f"{col} {center}"),
-        cls="relative bg-purple px-4 lg:px-16 pb-24 -mt-8 lg:-mt-10 flex-col xl:items-center items-start gap-6 lg:gap-16 rounded-t-3xl lg:rounded-t-[2.5rem] overflow-x-hidden")
-
-def stacked_cards_section():
-    return Section(
-        Div(
-            Div(
-                Div(
-                    P("TECH STACK", cls="mono-body text-opacity-60"),
-                    H2("FastHTML scales up and scales down.", cls="text-black heading-2"),
-                    P("Read more about our ", 
-                        A("design philosophy here", href="https://fastht.ml/about/vision", **_blank,
-                          cls="border-b-2 border-b-black/30 hover:border-b-black/80"),
-                        ", or click a button below:",
-                        cls=f"l-body {maxrem(32)}"),
-                    cls=f"{maxrem(50)} mx-auto {col} {center} text-center gap-6"),
-                cls="py-8 lg:pt-16 px-4 lg:px-16 rounded-t-3xl lg:rounded-t-[2.5rem] bg-green"),
-            cls="bg-yellow sticky top-0 bottom-[calc(100%-300px)] w-full"),
-        Div(
-            Div(
-                *[stacked_card(title, description, tech_stack, "bg-soft-green") for title, description, tech_stack in stacked],
-                id="stacked-cards", cls=f"{maxrem(50)} mx-auto"),
-            cls="px-4 lg:px-16 w-full bg-green pt-8"),
-        id="stacked-cards-section", cls="relative")
-
-def samples_section():
-    text = "FastHTML can be used for everything from collaborative games to multi-modal UI. We've selected small self-contained examples for you to learn from."
-    return section_wrapper(
-            (section_header("SAMPLES", "See FastHTML in action", text, max_width=40),
-            Div(
-                *[Div(
-                    A(
-                        File(f"assets/{svg}"),
-                        Div(
-                            P(name, cls="border-b-2 border-b-black/30 hover:border-b-black/80 regular-body"),
-                            Img(src=f"{icons}/arrow-up-right.svg", alt="Arrow right icon", cls="group-hover:translate-y-[-0.1rem] transition-all ease-in-out duration-300"),
-                            cls=f"{gap2} transition-transform transform relative items-center mt-4 lg:mt-6"),
-                        href=url, cls=f"{col} items-center"),
-                    cls="group px-2"
-                ) for name, svg, url in samples],
-                cls="grid max-w-5xl lg:grid-cols-4 lg:max-w-7xl lg:gap-x-12 grid-cols-2 gap-x-4 gap-y-8 w-full mx-auto"),
-            A("Discover all", href=eg_url,
-                cls=f"{bnset} bg-black text-white py-2 px-4 s-body rounded-full hover:bg-black/70 transition-colors duration-300")),
-        bg_color="grey")
-
-def how_it_works_section():
-    msg = "With FastHTML you create good-looking modern web applications in pure Python and deploy them in minutes."
-    return section_wrapper(
-        (Div(
-            section_header( "GET STARTED IN MINUTES", "The fastest way to create a real web application.", msg),
-            cls="max-w-3xl w-full mx-auto flex-col items-center text-center gap-6 mb-8 lg:mb-8"),
-            Div(*[benefit(title, content) for title, content in benefits],
-                cls=f"{col} w-full lg:flex-row gap-4 items-center lg:gap-8 max-w-7xl mx-auto justify-center"),),
-        bg_color="yellow", flex=False)
-
-def faq_section():
-    return section_wrapper(
-        Div(
-            section_header( "FAQ", "Questions? Answers.", "Your top FastHTML questions clarified.",
-                max_width=21, center=False),
-            Div(
-                *[faq_item(question, answer, i+3) for i, (question, answer) in enumerate(faqs)],
-                cls=f"{col} gap-4 {maxrem(32)} transition ease-out delay-[300ms]"),
-            cls=f"{section_base} w-full mx-auto lg:flex-row items-start max-w-7xl"),
-        bg_color="blue")
-
-def testimonials_section():
-    testimonial_cards = [testimonial_card(i, *args) for i, args in enumerate(testimonials)]
-    return section_wrapper(
-        Div(
-            section_header(
-                "LOVE IS IN THE AIR", "What the experts say",
-                "Top web programmers tell us that they love working with FastHTML.",
-                max_width=21, center=False),
-            carousel(testimonial_cards),
-            cls=f"{section_base} {maxrem(90)} mx-auto lg:flex-row items-start"),
-        bg_color="pink")
-
-def footer_link(text, href, **kw):
-    return Li(A(
-        Span(text, cls="border-b border-b-transparent border-b-white/50"),
-        Img(src=f"{icons}/arrow-up-right-white.svg", alt="Arrow right icon", width="16", height="16", cls="w-4 h-4"),
-        href=href, cls=f"{gap2} items-center hover:text-white border-b border-b-transparent hover:border-b-white", **kw))
-
-def footer():
-    return Section(
-        Div(
-            Div(
-                P("© 2024 onwards AnswerDotAI. All rights reserved.", cls="mr-auto"),
-                Nav(
-                    Ul(
-                    footer_link("Github", "https://github.com/AnswerDotAI/fasthtml", **_blank),
-                    footer_link("Join Discord", "https://discord.gg/qcXvcxMhdP", **_blank),
-                    footer_link("Docs", "/docs", **_blank),
-                    footer_link("Site design", "https://tinloof.com/", **_blank),
-                    cls="flex max-lg:flex-col max-lg:items-start gap-4 lg:gap-6 flex-wrap")),
-                cls="relative z-[1] mono-s flex max-lg:flex-col gap-6 text-white/80 px-4 lg:px-16 pb-16"),
-            Div(
-                Div(
-                    File("assets/footer-shapes.svg"),
-                    cls=f"absolute z-0 lg:-top-[15%] top-0 left-1/2 -translate-x-1/2 grid grid-cols-1 grid-rows-1 lg:w-[150%] w-[200%] aspect-square max-w-none min-w-max"),
-                File("assets/footer-path.svg"),
-                cls=f"relative z-0 w-full px-4 lg:px-16 pb-1 {col} flex-1 justify-end"),
-            cls=f"relative w-full h-[420px] lg:h-[600px] {col} pt-8 lg:pt-12 rounded-t-3xl lg:rounded-t-[2.5rem] bg-black overflow-hidden -mt-8 lg:-mt-10"))
-
-hdrs = [
-    Meta(charset='UTF-8'),
-    Meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0'),
-    Meta(name='description', content=description),
-    *Favicon('favicon.ico', 'favicon-dark.ico'),
-    *Socials(title='FastHTML',
-        description=description,
-        site_name='fastht.ml',
-        twitter_site='@answerdotai',
-        image=f'/assets/og-sq.png',
-        url=''),
-    # surrsrc,
-    Script(src='https://cdn.jsdelivr.net/gh/gnat/surreal@main/surreal.js'),
-    scopesrc,
-    Link(href='css/main.css', rel='stylesheet'),
-    Link(href='css/tailwind.css', rel='stylesheet'),
-    Link(href='css/stack.css', rel='stylesheet'),
-    Link(href='css/preview-stack.css', rel='stylesheet'),
-    Link(href='css/highlighter-theme.css', rel='stylesheet')]
-
-from about.main import app as about_app
-routes = [Mount(f"/about", about_app),
-          Mount('/docs', StaticFiles(directory='docs', html=True)),
-          ]
-
-bodykw = {"class": "relative bg-black font-geist text-black/80 font-details-off"}
-app,rt = fast_app(hdrs=hdrs, default_hdrs=False, bodykw=bodykw, on_startup=[startup], routes=routes)
-
-
-scripts = (
-    Script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'),
-    Script(src='https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js'),
-    # Script(src='js/videoPopup.js'),
-    Script(src='js/pythonHighlighter.js'),
-    Script(src='js/carouselScroll.js'),
-    Script(src='js/stack.js'),
-    Script(src='js/togglePreview.js'),
-    Script(src='js/codeOverflow.js'),
-    Script(src='js/copyCode.js'),
-    )
-
-from fastcore.xtras import timed_cache
-
-@timed_cache(seconds=60)
-async def home():
-    return (Title(f"FastHTML - {description}"),
-        Main(
-            hero_section(),
-            await component_preview_section(),
-            how_it_works_section(),
-            stacked_cards_section(),
-            samples_section(),
-            faq_section(),
-            testimonials_section(),
-            footer()),
-        *scripts)
-
-@rt("/")
-async def get(): return await home()
-
-serve()
-
+import streamlit as st
+from src.some_module import your_pipeline  # whatever you need
+
+st.title("Home-FastHTML in Streamlit")
+input_html = st.text_area("Paste HTML here")
+if st.button("Transform"):
+    output = your_pipeline(input_html)
+    st.code(output, language="html")