main.py 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. #!/usr/bin/env python3
  2. from pathlib import Path
  3. from pygments.formatters import HtmlFormatter
  4. from nicegui import Client, ui
  5. from website import demo_card, reference, svg
  6. from website.example import bash_window, browser_window, python_window
  7. from website.style import example_link, features, header_link, heading, link_target, section_heading, subtitle, title
  8. ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
  9. def add_head_html() -> None:
  10. ui.add_head_html((Path(__file__).parent / 'website' / 'static' / 'header.html').read_text())
  11. ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
  12. ui.add_head_html(f"<style>{(Path(__file__).parent / 'website' / 'static' / 'style.css').read_text()}</style>")
  13. def add_header() -> None:
  14. menu_items = {
  15. 'Features': '/#features',
  16. 'Installation': '/#installation',
  17. 'Examples': '/#examples',
  18. 'API Reference': '/reference',
  19. 'Demos': '/#demos',
  20. 'Why?': '/#why',
  21. }
  22. with ui.header() \
  23. .classes('items-center duration-200 p-0 px-4 no-wrap') \
  24. .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
  25. with ui.link(target=index_page).classes('row gap-4 items-center no-wrap mr-auto'):
  26. svg.face().classes('w-8 stroke-white stroke-2')
  27. svg.word().classes('w-24')
  28. with ui.row().classes('lg:hidden'):
  29. with ui.menu().classes('bg-primary text-white text-lg') as menu:
  30. for title, target in menu_items.items():
  31. ui.menu_item(title, on_click=lambda _, target=target: ui.open(target))
  32. ui.button(on_click=menu.open).props('flat color=white icon=menu')
  33. with ui.row().classes('max-lg:hidden'):
  34. for title, target in menu_items.items():
  35. header_link(title, target)
  36. with ui.link(target='https://github.com/zauberzeug/nicegui/'):
  37. svg.github().classes('fill-white scale-125 m-1')
  38. @ui.page('/')
  39. async def index_page(client: Client):
  40. client.content.classes(remove='q-pa-md gap-4')
  41. add_head_html()
  42. add_header()
  43. with ui.row().classes('w-full h-screen items-center gap-8 pr-4 no-wrap into-section'):
  44. svg.face(half=True).classes('stroke-black w-[200px] md:w-[230px] lg:w-[300px]')
  45. with ui.column().classes('gap-4 md:gap-8 pt-32'):
  46. title('Meet the *NiceGUI*.')
  47. subtitle('And let any browser be the frontend of your Python code.') \
  48. .classes('max-w-[20rem] sm:max-w-[24rem] md:max-w-[30rem]')
  49. with ui.link(target='#about') \
  50. .classes('column mt-6 items-center ml-[-12px] hover:translate-y-1 duration-100 ease-out'):
  51. ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mb-[-0.95em]')
  52. ui.icon('keyboard_arrow_down').classes('text-6xl text-black')
  53. ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mt-[-0.85em]')
  54. with ui.row().classes('''
  55. dark-box min-h-screen no-wrap
  56. justify-center items-center flex-col md:flex-row
  57. p-8 lg:p-16
  58. gap-8 sm:gap-16 md:gap-8 lg:gap-16
  59. '''):
  60. link_target('about')
  61. with ui.column().classes('text-white max-w-4xl'):
  62. heading('Interact with Python through buttons, dialogs, 3D scenes, plots and much more.')
  63. with ui.column().classes('gap-2 bold-links arrow-links text-lg'):
  64. ui.markdown(
  65. 'NiceGUI handles all the web development details for you. '
  66. 'So you can focus on writing Python code. '
  67. 'Anything from short scripts and dashboards to full robotics projects, IoT solutions, '
  68. 'smart home automations and machine learning projects can benefit from having all code in one place.'
  69. )
  70. ui.markdown(
  71. 'Available as '
  72. '[PyPI package](https://pypi.org/project/nicegui/), '
  73. '[Docker image](https://hub.docker.com/r/zauberzeug/nicegui) and on '
  74. '[GitHub](https://github.com/zauberzeug/nicegui).')
  75. demo_card.create()
  76. with ui.column().classes('w-full p-8 lg:p-16 bold-links max-w-[1600px] mx-auto'):
  77. link_target('features', '-50px')
  78. section_heading('Features', 'Code *nicely*')
  79. with ui.row().classes('w-full text-lg leading-tight grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8'):
  80. features('swap_horiz', 'Interaction', [
  81. 'buttons, switches, sliders, inputs, ...',
  82. 'notifications, dialogs and menus',
  83. 'keyboard input',
  84. 'on-screen joystick',
  85. ])
  86. features('space_dashboard', 'Layout', [
  87. 'navigation bars, tabs, panels, ...',
  88. 'grouping with rows, columns and cards',
  89. 'HTML and markdown elements',
  90. 'flex layout by default',
  91. ])
  92. features('insights', 'Visualization', [
  93. 'charts, diagrams and tables',
  94. '3D scenes',
  95. 'progress bars',
  96. 'built-in timer for data refresh',
  97. ])
  98. features('brush', 'Styling', [
  99. 'customizable color themes',
  100. 'custom CSS and classes',
  101. 'modern look with material design',
  102. 'built-in [Tailwind](https://tailwindcss.com/) support',
  103. ])
  104. features('source', 'Coding', [
  105. 'live-cycle events',
  106. 'implicit reload on code change',
  107. 'straight-forward data binding',
  108. 'execute javascript from Python',
  109. ])
  110. features('anchor', 'Foundation', [
  111. 'generic [Vue](https://vuejs.org/) to Python bridge',
  112. 'dynamic GUI through [Quasar](https://quasar.dev/)',
  113. 'content is served with [FastAPI](http://fastapi.tiangolo.com/)',
  114. 'Python 3.7+',
  115. ])
  116. with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
  117. link_target('installation', '-50px')
  118. section_heading('Installation', 'Get *started*')
  119. with ui.row().classes('w-full text-lg leading-tight grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8'):
  120. with ui.column().classes('w-full max-w-md gap-2'):
  121. ui.html('<em>1.</em>').classes('text-3xl text-bold')
  122. ui.markdown('Create __main.py__').classes('text-lg')
  123. with python_window(classes='w-full h-52'):
  124. ui.markdown('''```python\n
  125. from nicegui import ui
  126. ui.label('Hello NiceGUI!')
  127. ui.run()
  128. ```''')
  129. with ui.column().classes('w-full max-w-md gap-2'):
  130. ui.html('<em>2.</em>').classes('text-3xl text-bold')
  131. ui.markdown('Install and launch').classes('text-lg')
  132. with bash_window(classes='w-full h-52'):
  133. ui.markdown('```bash\npip3 install nicegui\npython3 main.py\n```')
  134. with ui.column().classes('w-full max-w-md gap-2'):
  135. ui.html('<em>3.</em>').classes('text-3xl text-bold')
  136. ui.markdown('Enjoy!').classes('text-lg')
  137. with browser_window(classes='w-full h-52'):
  138. ui.label('Hello NiceGUI!')
  139. with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
  140. link_target('examples', '-50px')
  141. section_heading('Examples', 'Try *this*')
  142. with ui.column().classes('w-full'):
  143. reference.create_intro()
  144. with ui.column().classes('dark-box p-8 lg:p-16 my-16'):
  145. with ui.column().classes('mx-auto items-center gap-y-8 gap-x-32 lg:flex-row'):
  146. with ui.column().classes('gap-1 max-lg:items-center max-lg:text-center'):
  147. ui.markdown('Browse through plenty of live examples.') \
  148. .classes('text-white text-2xl md:text-3xl font-medium')
  149. ui.html('Fun-Fact: This whole website is also coded with NiceGUI.') \
  150. .classes('text-white text-lg md:text-xl')
  151. ui.link('API reference', '/reference') \
  152. .classes('rounded-full mx-auto px-12 py-2 text-white bg-white font-medium text-lg md:text-xl')
  153. with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
  154. link_target('demos', '-50px')
  155. section_heading('In-depth demonstrations', 'Pick your *solution*')
  156. with ui.row().classes('w-full text-lg leading-tight grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4'):
  157. example_link('Slideshow', 'implements a keyboard-controlled image slideshow')
  158. example_link('Authentication', 'shows how to use sessions to build a login screen')
  159. example_link(
  160. 'Modularization',
  161. 'provides an example of how to modularize your application into multiple files and reuse code')
  162. example_link(
  163. 'FastAPI',
  164. 'illustrates the integration of NiceGUI with an existing FastAPI application')
  165. example_link(
  166. 'Map',
  167. 'demonstrates wrapping the JavaScript library [leaflet](https://leafletjs.com/) to display a map at specific locations')
  168. example_link(
  169. 'AI Interface',
  170. 'utilizes the [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
  171. example_link('3D Scene', 'creates a webGL view and loads an STL mesh illuminated with a spotlight')
  172. example_link('Custom Vue Component', 'shows how to write and integrate a custom Vue component')
  173. example_link('Image Mask Overlay', 'shows how to overlay an image with a mask')
  174. example_link('Infinite Scroll', 'presents an infinitely scrolling image gallery')
  175. with ui.row().classes('bg-primary w-full min-h-screen mt-16'):
  176. link_target('why')
  177. with ui.column().classes('''
  178. max-w-[1600px] p-8 lg:p-16 m-auto
  179. items-center justify-center no-wrap flex-col md:flex-row gap-16
  180. '''):
  181. with ui.column().classes('gap-8'):
  182. heading('Why?')
  183. with ui.column().classes('gap-2 text-xl text-white bold-links arrow-links'):
  184. ui.markdown(
  185. 'We like '
  186. '[Streamlit](https://streamlit.io/) '
  187. 'but find it does '
  188. '[too much magic](https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651) '
  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. '[JustPy](https://justpy.io/). '
  192. 'Although we liked the approach, it is too "low-level HTML" for our daily usage. '
  193. 'But it inspired us to use '
  194. '[Vue](https://vuejs.org/) '
  195. 'and '
  196. '[Quasar](https://quasar.dev/) '
  197. 'for the frontend.')
  198. ui.markdown(
  199. 'We have built on top of '
  200. '[FastAPI](https://fastapi.tiangolo.com/), '
  201. 'which itself is based on the ASGI framework '
  202. '[Starlette](https://www.starlette.io/) '
  203. 'and the ASGI webserver '
  204. '[Uvicorn](https://www.uvicorn.org/) '
  205. 'because of their great performance and ease of use.'
  206. )
  207. svg.face().classes('stroke-white shrink-0 w-[200px] md:w-[300px] lg:w-[450px]')
  208. @ui.page('/reference')
  209. def reference_page():
  210. add_head_html()
  211. add_header()
  212. with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
  213. section_heading('Documentation and Examples', '*API* Reference')
  214. reference.create_full()
  215. ui.run(uvicorn_reload_includes='*.py, *.css, *.html')