nicegui/main.py

#!/usr/bin/env python3
from pathlib import Path

import docutils.core
from pygments.formatters import HtmlFormatter

from nicegui import Client, ui
from website import demo_card, reference
from website.constants import ACCENT_COLOR, HEADER_HEIGHT, STATIC
from website.example import bash_window, browser_window, python_window

ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')


def add_head_html() -> None:
    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
    ui.add_head_html(docutils.core.publish_parts('', writer_name='html')['stylesheet'])
    ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
    ui.add_head_html('''
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
        <link rel="manifest" href="/favicon/site.webmanifest">
        <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000000">
        <link rel="shortcut icon" href="/favicon/favicon.ico">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-config" content="/favicon/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    ''')  # https://realfavicongenerator.net/
    ui.add_head_html(f'''
        <style>
        html {{
            scroll-behavior: smooth;
        }}
        body {{
            background-color: #f8f8f8;
        }}
        em {{
            font-style: normal;
            color: {ACCENT_COLOR};
        }}
        a:hover {{
            opacity: 0.9;
        }}
        </style>
    ''')
    ui.add_head_html(f'''
    <style>
    .q-header {{
        height: calc({HEADER_HEIGHT} + 20px);
        background-color: {ACCENT_COLOR};
    }}
    .q-header.fade {{
        height: {HEADER_HEIGHT};
        background-color: {ACCENT_COLOR}d0;
        backdrop-filter: blur(5px);
    }}
    </style>
    <script>
    window.onscroll = () => {{
        const header = document.querySelector(".q-header");
        if (document.documentElement.scrollTop > 50)
            header.classList.add("fade");
        else
            header.classList.remove("fade");
    }};
    </script>
    ''')


def add_header() -> None:
    with ui.header() \
            .classes('items-center duration-200 px-4', remove='q-pa-md') \
            .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
        ui.html((STATIC / 'happy_face.svg').read_text()).classes('w-8 stroke-white')
        with ui.link(target=index_page):
            ui.html((STATIC / 'nicegui_word.svg').read_text()).classes('w-24')
        with ui.row().classes('items-center ml-auto'):
            ui.link('Features', '/#features').classes(replace='text-lg text-white')
            ui.link('Installation', '/#installation').classes(replace='text-lg text-white')
            ui.link('Examples', '/#examples').classes(replace='text-lg text-white')
            ui.link('API Reference', reference_page).classes(replace='text-lg text-white')
            with ui.link(target='https://github.com/zauberzeug/nicegui/'):
                ui.html((STATIC / 'github.svg').read_text()).classes('fill-white scale-125 m-1')


@ui.page('/')
async def index_page(client: Client):
    client.content.classes(remove='q-pa-md gap-4')
    add_head_html()
    add_header()

    with ui.row() \
            .classes('w-full h-screen q-pa-md items-center gap-12 no-wrap') \
            .style(f'transform: translateX(-250px)'):
        ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
        with ui.column().classes('gap-8'):
            ui.html('Meet the <em>NiceGUI</em>.') \
                .style('font-size: 400%; line-height: 0.9; font-weight: 500')
            ui.markdown('And let every browser be the frontend\n\nof your Python code.') \
                .style('font-size: 200%; line-height: 0.9')

    with ui.row() \
            .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
            .style(f'background: {ACCENT_COLOR}'):
        with ui.column().classes('gap-6'):
            ui.markdown('Interact with buttons, dialogs, 3D scenes, plots and much more.') \
                .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
            ui.label('''
                NiceGUI handles all the web development details for you.
                So you can focus Python code that needs a user interface.
                Anything from short scripts and dashboards to full robotics projects, IoT solutions, 
                smart home automations and machine learning projects can benefit from having all code in one place.
                
            ''').style('font-size: 150%; color: white').classes('leading-tight')
            with ui.row().style('font-size: 150%; color: white').classes('leading-tight gap-2'):
                ui.html('''
                    Available as
                    <a href="https://pypi.org/project/nicegui/"><strong>PyPI package</strong><span class="material-icons">north_east</span></a>,
                    <a href="https://hub.docker.com/r/zauberzeug/nicegui"><strong>Docker image</strong><span class="material-icons">north_east</span></a> and on
                    <a href="https://github.com/zauberzeug/nicegui"><strong>GitHub</strong><span class="material-icons">north_east</span></a>.
                ''')

        demo_card.create()

    ui.link_target('features').style(f'position: relative; top: -{HEADER_HEIGHT}')
    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
        ui.label('Features').classes('text-bold text-lg')
        ui.html('Do it the <em>nice</em> way') \
            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
        with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between'):
            with ui.column().classes('gap-1'):
                ui.label('User Interface').classes('text-bold mb-4')
                ui.markdown('- common elements like label, button, checkbox, switch, slider, input, ...')
                ui.markdown('- page layout with navigation bars, tabs, panels, ...')
                ui.markdown('- grouping with rows, columns, cards and dialogs')
                ui.markdown('- HTML and markdown elements')
                ui.markdown('- high-level elements like charts, tables, trees, 3D scenes, joystick, ...')
                ui.markdown('- built-in timer to refresh data in intervals')
                ui.markdown('- notifications, dialogs and menus')
                ui.markdown('- keyboard input')
            with ui.column().classes('gap-1'):
                ui.label('Under the hood').classes('text-bold mb-4')
                ui.markdown('- browser-based graphical user interface')
                ui.markdown('- based on FastAPI and Uvicorn')
                ui.markdown('- live-cycle events and session data')
                ui.markdown('- customizable page layout and colors')
            with ui.column().classes('gap-1'):
                ui.label('Development').classes('text-bold mb-4')
                ui.markdown('- implicit reload on code change')
                ui.markdown('- straight-forward data binding')

    ui.link_target('installation').style(f'position: relative; top: -{HEADER_HEIGHT}')
    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
        ui.label('Installation').classes('text-bold text-lg')
        ui.html('Get <em>started</em>') \
            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
        with ui.row().classes('w-full no-wrap text-lg leading-tight'):
            with ui.column().classes('w-1/3 gap-2'):
                ui.html('<em>1.</em>').classes('text-3xl text-bold')
                ui.markdown('Install').classes('text-lg')
                with bash_window().classes('w-full h-52'):
                    ui.markdown('```bash\npython3 -m pip install nicegui\n```')
            with ui.column().classes('w-1/3 gap-2'):
                ui.html('<em>2.</em>').classes('text-3xl text-bold')
                ui.markdown('Write file __main.py__').classes('text-lg')
                with python_window().classes('w-full h-52'):
                    ui.markdown('''```python\n
from nicegui import ui

ui.label('Hello NiceGUI!')

ui.run()
```''')
            with ui.column().classes('w-1/3 gap-2'):
                ui.html('<em>3.</em>').classes('text-3xl text-bold')
                ui.markdown('Launch it with').classes('text-lg')
                with bash_window().classes('w-full h-52'):
                    ui.markdown('```bash\npython3 main.py\n```')
            with ui.column().classes('w-1/3 gap-2'):
                ui.html('<em>4.</em>').classes('text-3xl text-bold')
                ui.markdown('Enjoy').classes('text-lg')
                with browser_window().classes('w-full h-52'):
                    ui.label('Hello NiceGUI!')

    ui.link_target('examples').style(f'position: relative; top: -{HEADER_HEIGHT}')
    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
        ui.label('Examples').classes('text-bold text-lg')
        ui.html('Try <em>this</em> out') \
            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
        reference.create_intro()

    with ui.row() \
            .classes('w-full items-center gap-28 px-32 py-16 no-wrap') \
            .style(f'background: {ACCENT_COLOR}'):
        with ui.column().classes('gap-4'):
            ui.markdown('Go to the API reference to see a ton of live examples.') \
                .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
            ui.html('Fun-Fact: The whole page here is coded with NiceGUI itself.') \
                .style('font-size: 150%; color: white')
        ui.link('API reference', '/reference') \
            .classes('rounded-full mx-auto px-12 py-2 text-xl text-bold bg-white')

    with ui.column().classes('w-full q-pa-xl q-mb-xl'):
        ui.label('In-depth demonstrations').classes('text-bold text-lg')
        ui.html('Pick your <em>solution</em>') \
            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
        with ui.row().classes('w-full no-wrap text-lg leading-tight'):
            with ui.column().classes('w-1/3'):
                example_link('Slideshow', 'implements a keyboard-controlled image slideshow')
                example_link('Authentication', 'shows how to use sessions to build a login screen')
                example_link(
                    'Modularization',
                    'provides an example of how to modularize your application into multiple files and reuse code')
                example_link(
                    'FastAPI',
                    'illustrates the integration of NiceGUI with an existing FastAPI application')
            with ui.column().classes('w-1/3'):
                example_link(
                    'Map',
                    'demonstrates wrapping the JavaScript library leaflet to display a map at specific locations')
                example_link(
                    'AI Interface',
                    'utilizes the great [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
                example_link('3D Scene', 'creates a webGL view and loads an STL mesh illuminated with a spotlight')
            with ui.column().classes('w-1/3'):
                example_link('Custom Vue Component', 'shows how to write and integrate a custom vue component')
                example_link('Image Mask Overlay', 'shows how to overlay an image with a mask')
                example_link('Infinite Scroll', 'presents an infinitely scrolling image gallery')

    with ui.row() \
            .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
            .style(f'background: {ACCENT_COLOR}'):
        with ui.column().classes('gap-6'):
            ui.markdown('Why?') \
                .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
            ui.html('''
                We like
                <strong><a href="https://streamlit.io/">Streamlit</a></strong>
                but find it does
                <strong><a href="https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651">too much magic</a></strong>
                when it comes to state handling.
                In search for an alternative nice library to write simple graphical user interfaces in Python we discovered
                <strong><a href="https://justpy.io/">JustPy</a></strong>.
                Although we liked the approach, it is too "low-level HTML" for our daily usage.
                But it inspired us to use
                <strong><a href="https://vuejs.org/">Vue</a></strong>
                and
                <strong><a href="https://quasar.dev/">Quasar</a></strong>
                for the frontend.<br/>

                We have build on top of
                <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
                which itself is based on the ASGI framework
                <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
                and the ASGI webserver
                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>
                because of their great performance and ease of use.
            ''').style('font-size: 150%; color: white').classes('leading-tight')

        ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-white').style('width: 1500px')


def example_link(title: str, description: str) -> None:
    name = title.lower().replace(' ', '_')
    with ui.column().classes('gap-0'):
        ui.link(title, f'https://github.com/zauberzeug/nicegui/tree/main/examples/{name}/main.py') \
            .classes(replace='text-black text-bold')
        ui.markdown(description)


@ui.page('/reference')
def reference_page():
    add_head_html()
    add_header()
    reference.create_full()


ui.run()