main.py 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. #!/usr/bin/env python3
  2. from pathlib import Path
  3. import docutils.core
  4. from pygments.formatters import HtmlFormatter
  5. from nicegui import Client, ui
  6. from website import demo_card, reference
  7. from website.constants import ACCENT_COLOR, HEADER_HEIGHT, STATIC
  8. from website.example import bash_window, python_window
  9. ACCENT_COLOR = '#428BF5'
  10. HEADER_HEIGHT = '70px'
  11. STATIC = Path(__file__).parent / 'website' / 'static'
  12. ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
  13. def add_head_html() -> None:
  14. ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
  15. ui.add_head_html(docutils.core.publish_parts('', writer_name='html')['stylesheet'])
  16. ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
  17. ui.add_head_html('''
  18. <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
  19. <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
  20. <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
  21. <link rel="manifest" href="favicon/site.webmanifest">
  22. <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#000000">
  23. <link rel="shortcut icon" href="favicon/favicon.ico">
  24. <meta name="msapplication-TileColor" content="#ffffff">
  25. <meta name="msapplication-config" content="favicon/browserconfig.xml">
  26. <meta name="theme-color" content="#ffffff">
  27. ''') # https://realfavicongenerator.net/
  28. ui.add_head_html(f'''
  29. <style>
  30. html {{
  31. scroll-behavior: smooth;
  32. }}
  33. body {{
  34. background-color: #f8f8f8;
  35. }}
  36. em {{
  37. font-style: normal;
  38. color: {ACCENT_COLOR};
  39. }}
  40. </style>
  41. ''')
  42. def add_header() -> None:
  43. with ui.header() \
  44. .classes('items-center') \
  45. .style(f'background-color: {ACCENT_COLOR}; height: {HEADER_HEIGHT}; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
  46. ui.html((STATIC / 'happy_face.svg').read_text()).classes('w-8 stroke-white')
  47. with ui.link(target=index_page):
  48. ui.html((STATIC / 'nicegui_word.svg').read_text()).classes('w-24')
  49. with ui.row().classes('items-center ml-auto'):
  50. ui.link('Features', '/#features').classes(replace='text-lg text-white')
  51. ui.link('Installation', '/#installation').classes(replace='text-lg text-white')
  52. ui.link('Examples', '/#examples').classes(replace='text-lg text-white')
  53. ui.link('API Reference', reference_page).classes(replace='text-lg text-white')
  54. with ui.link(target='https://github.com/zauberzeug/nicegui/'):
  55. ui.html((STATIC / 'github.svg').read_text()).classes('fill-white scale-125 m-1')
  56. @ui.page('/')
  57. async def index_page(client: Client):
  58. client.content.classes(remove='q-pa-md gap-4')
  59. add_head_html()
  60. add_header()
  61. with ui.row() \
  62. .classes('w-full q-pa-md items-center gap-12 no-wrap') \
  63. .style(f'height: calc(100vh - {HEADER_HEIGHT}); transform: translateX(-250px)'):
  64. ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
  65. with ui.column().classes('gap-8'):
  66. ui.html('Meet the <em>NiceGUI</em>.') \
  67. .style('font-size: 400%; line-height: 0.9; font-weight: 500')
  68. ui.markdown('An easy-to-use Python-based UI framework\n\nwhich shows up in your web browser.') \
  69. .style('font-size: 200%; line-height: 0.9')
  70. with ui.row() \
  71. .classes('w-full q-pa-md items-center gap-28 p-32 no-wrap') \
  72. .style(f'height: calc(100vh - {HEADER_HEIGHT}); background: {ACCENT_COLOR}'):
  73. with ui.column().classes('gap-6'):
  74. ui.markdown('Create buttons, dialogs, markdown,\n\n3D scenes, plots and much more at ease.') \
  75. .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
  76. ui.label('''
  77. It is great for micro web apps, dashboards, robotics projects, smart home solutions
  78. and similar use cases. You can also use it in development, for example when
  79. tweaking/configuring a machine learning algorithm or tuning motor controllers.
  80. ''').style('font-size: 150%; color: white').classes('leading-tight')
  81. with ui.row().style('font-size: 150%; color: white').classes('leading-tight gap-2'):
  82. ui.html('''
  83. NiceGUI is available as
  84. <a href="https://pypi.org/project/nicegui/"><strong>PyPI package</strong><span class="material-icons">north_east</span></a>,
  85. <a href="https://hub.docker.com/r/zauberzeug/nicegui"><strong>Docker image</strong><span class="material-icons">north_east</span></a> and on
  86. <a href="https://github.com/zauberzeug/nicegui"><strong>GitHub</strong><span class="material-icons">north_east</span></a>.
  87. ''')
  88. demo_card.create()
  89. ui.link_target('features').style(f'position: relative; top: -{HEADER_HEIGHT}')
  90. with ui.column().classes('w-full q-pa-xl'):
  91. ui.label('Features').classes('text-bold text-lg')
  92. ui.html('What has <em>NiceGUI</em> to offer?') \
  93. .style('font-size: 300%; font-weight: 500; margin-top: -20px')
  94. with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between'):
  95. with ui.column().classes('gap-1'):
  96. ui.label('User Interface').classes('text-bold mb-4')
  97. ui.markdown('- common elements like label, button, checkbox, switch, slider, input, ...')
  98. ui.markdown('- layouting with rows, columns, cards and dialogs')
  99. ui.markdown('- HTML and markdown elements')
  100. ui.markdown('- high-level elements like charts, tables, trees, 3D scenes, joystick, ...')
  101. ui.markdown('- built-in timer to refresh data in intervals')
  102. ui.markdown('- notifications, dialogs and menus')
  103. ui.markdown('- keyboard input')
  104. with ui.column().classes('gap-1'):
  105. ui.label('Under the hood').classes('text-bold mb-4')
  106. ui.markdown('- browser-based graphical user interface')
  107. ui.markdown('- based on FastAPI and Uvicorn')
  108. ui.markdown('- live-cycle events and session data')
  109. ui.markdown('- customizable page layout and colors')
  110. with ui.column().classes('gap-1'):
  111. ui.label('Development').classes('text-bold mb-4')
  112. ui.markdown('- implicit reload on code change')
  113. ui.markdown('- straight-forward data binding')
  114. ui.link_target('installation').style(f'position: relative; top: -{HEADER_HEIGHT}')
  115. with ui.column().classes('w-full q-pa-xl'):
  116. ui.label('Installation').classes('text-bold text-lg')
  117. ui.html('Getting <em>started</em>') \
  118. .style('font-size: 300%; font-weight: 500; margin-top: -20px')
  119. with ui.row().classes('w-full no-wrap text-lg leading-tight'):
  120. with ui.column().classes('w-1/3 gap-2'):
  121. ui.html('<em>1.</em>').classes('text-3xl text-bold')
  122. ui.markdown('Install').classes('text-lg')
  123. with bash_window().classes('w-full h-52'):
  124. ui.markdown('```bash\npython3 -m pip install nicegui\n```')
  125. with ui.column().classes('w-1/3 gap-2'):
  126. ui.html('<em>2.</em>').classes('text-3xl text-bold')
  127. ui.markdown('Write file __main.py__').classes('text-lg')
  128. with python_window().classes('w-full h-52'):
  129. ui.markdown('''```python\n
  130. from nicegui import ui
  131. ui.label('Hello NiceGUI!')
  132. ui.run()
  133. ```''')
  134. with ui.column().classes('w-1/3 gap-2'):
  135. ui.html('<em>3.</em>').classes('text-3xl text-bold')
  136. ui.markdown('Launch it with').classes('text-lg')
  137. with bash_window().classes('w-full h-52'):
  138. ui.markdown('```bash\npython3 main.py\n```')
  139. ui.link_target('examples').style(f'position: relative; top: -{HEADER_HEIGHT}')
  140. with ui.column().classes('w-full q-pa-xl'):
  141. ui.label('Documentation').classes('text-bold text-lg')
  142. ui.html('Interactive <em>Examples</em>') \
  143. .style('font-size: 300%; font-weight: 500; margin-top: -20px')
  144. reference.create_intro()
  145. with ui.row() \
  146. .classes('w-full items-center gap-28 px-32 py-16 no-wrap') \
  147. .style(f'background: {ACCENT_COLOR}'):
  148. with ui.column().classes('gap-4'):
  149. ui.markdown('Go to the API reference to see a ton of live examples.') \
  150. .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
  151. ui.html('The whole content of <a href="https://nicegui.io/">nicegui.io</a> is implemented with NiceGUI itself.') \
  152. .style('font-size: 150%; color: white')
  153. ui.link('API reference', '/reference') \
  154. .classes('rounded-full mx-auto px-12 py-2 text-xl text-bold bg-white')
  155. with ui.column().classes('w-full q-pa-xl'):
  156. ui.label('In-depth demonstration').classes('text-bold text-lg')
  157. ui.html('What else can you do with <em>NiceGUI</em>?') \
  158. .style('font-size: 300%; font-weight: 500; margin-top: -20px')
  159. with ui.row().classes('w-full no-wrap text-lg leading-tight'):
  160. with ui.column().classes('w-1/3'):
  161. ui.markdown(
  162. 'You may also have a look at the following examples for in-depth demonstrations of what you can do with NiceGUI:')
  163. example_link('Slideshow', 'implements a keyboard-controlled image slideshow')
  164. example_link('Authentication', 'shows how to use sessions to build a login screen')
  165. example_link(
  166. 'Modularization',
  167. 'provides an example of how to modularize your application into multiple files and create a specialized page decorator')
  168. with ui.column().classes('w-1/3'):
  169. example_link('Map', 'uses the JavaScript library leaflet to display a map at specific locations')
  170. example_link(
  171. 'AI Interface',
  172. 'utilizes the great but non-async API from <https://replicate.com> to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
  173. example_link('3D Scene', 'creates a 3D scene and loads an STL mesh illuminated with a spotlight')
  174. with ui.column().classes('w-1/3'):
  175. example_link('Custom Vue Component', 'shows how to write and integrate a custom vue component')
  176. example_link('Image Mask Overlay', 'shows how to overlay an image with a mask')
  177. example_link('Infinite Scroll', 'shows an infinitely scrolling image gallery')
  178. with ui.row() \
  179. .classes('w-full q-pa-md items-center gap-28 p-32 no-wrap') \
  180. .style(f'height: calc(100vh - {HEADER_HEIGHT}); background: {ACCENT_COLOR}'):
  181. with ui.column().classes('gap-6'):
  182. ui.markdown('Why?') \
  183. .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
  184. ui.html('''
  185. We like
  186. <strong><a href="https://streamlit.io/">Streamlit</a></strong>
  187. but find it does
  188. <strong><a href="https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651">too much magic</a></strong>
  189. when it comes to state handling.
  190. In search for an alternative nice library to write simple graphical user interfaces in Python we discovered
  191. <strong><a href="https://justpy.io/">JustPy</a></strong>.
  192. Although we liked the approach, it is too "low-level HTML" for our daily usage.
  193. Therefore we created NiceGUI on top of
  194. <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
  195. which itself is based on the ASGI framework
  196. <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
  197. and the ASGI webserver
  198. <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>.
  199. ''').style('font-size: 150%; color: white').classes('leading-tight')
  200. ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-white').style('width: 1500px')
  201. def example_link(title: str, description: str) -> None:
  202. name = title.lower().replace(' ', '_')
  203. with ui.column().classes('gap-0'):
  204. ui.link(title, f'https://github.com/zauberzeug/nicegui/tree/main/examples/{name}/main.py') \
  205. .classes(replace='text-black text-bold')
  206. ui.markdown(description)
  207. @ui.page('/reference')
  208. def reference_page():
  209. add_head_html()
  210. add_header()
  211. reference.create_full()
  212. ui.run()