NiceGUI Component Bazaar #1618
Replies: 20 comments 4 replies
-
|
What would be the workflow to integrate these components into my project? Is there something like a package manager (similar to pip)? Is it just a website that I copy code from and paste into my project? Maybe a NiceGUI website you run locally and can install the components for you utilizing web based resources (I like this option)? |
Beta Was this translation helpful? Give feedback.
-
|
Do you have examples of other projects which provide such a bazar? |
Beta Was this translation helpful? Give feedback.
-
|
Some examples - commercial and non commercial (entry numbers as of 2023-09-14):
Wordpress is a good example how the success of the platform is directly linked to the success of the availability of plugins for specific needs. Borland Delphi used to have a component store at the time it was having its heyday. |
Beta Was this translation helpful? Give feedback.
-
|
These are certainly very valid examples. |
Beta Was this translation helpful? Give feedback.
-
|
Just an idea on implementation.
from nicegui import app, ui
class FlashyBanner:
def __init__(self, title) -> None:
ui.label(title)
class MenuDisplay:
def __init__(self, items) -> None:
ui.label("MENU")
with ui.column():
for key, value in items.items():
ui.label(f"{key} is ${value}")
class ShoppingCart:
def __init__(self, items) -> None:
ui.label("CART")
with ui.column():
for key, value in items.items():
with ui.row():
ui.label(f"{key} is ${value}")
ui.button("BUY")
class Bazaar:
def __init__(self, comps, path="bazzar") -> None:
self.comps = comps
for comp in self.comps:
setattr(self.__class__, comp, eval(comp))
b = Bazaar(comps=["FlashyBanner", "MenuDisplay", "ShoppingCart"])
b.FlashyBanner(title="Buy My Food!")
food = {"Fish": 5, "Cheese": 15}
b.MenuDisplay(food)
b.ShoppingCart(food)
ui.run()In a final implementation I am pretty sure this is viable but there might be some reason why python could not implement this possibly. Also, there is the matter of offline behaviour that would need to be determined. This sounded like an interesting implementation to me but I am not sure if anyone else feels it is worth pursuing. |
Beta Was this translation helpful? Give feedback.
-
|
Interesting idea, @natankeddem! I like starting from the user's perspective and playing with a possible API.
|
Beta Was this translation helpful? Give feedback.
-
|
I think you have digested my intent here quite well. Type hinting will be one of the challenges that might not be solved or require some additional thought/research. In the worse case the user will need to import the paths to the modules\elements in any case so no worse than if they were manually downloading code and throwing it in their folder. The goal with this implementation is to not stray to far from the existing |
Beta Was this translation helpful? Give feedback.
-
|
The Bazar could also be queried/used via an CLI (see #1462). That way it would be similar to pip. But then, why not use pip in the first place? The Bazar could simply be a list of additional packages which extend NiceGUIs functionality. Like https://github.com/ofenbach/CatDesign for example. |
Beta Was this translation helpful? Give feedback.
-
|
see http://ngdemo.bitplan.com/docs Currently developers seem to mostly use github and pypi - there are only a few gitlab users at this time. The nicegui search on pypi reveals some 27 packages and on github the query retrievs >160. |
Beta Was this translation helpful? Give feedback.
-
|
A first step would be simply tagging repositories and pip entries with "nicegui". Then at least we'd have a list of applicants. Then the next step is some kind of quality rating to be applied which could have objective aspects such as compatbility tests and code and repository quality as well as subjective ones (user stars ...) |
Beta Was this translation helpful? Give feedback.
-
|
see also https://github.com/zauberzeug/nicegui/tree/main/examples and the nicegui documentation |
Beta Was this translation helpful? Give feedback.
-
|
There is such a site for streamlit. |
Beta Was this translation helpful? Give feedback.
-
|
With the source code at https://github.com/jrieke/components-hub |
Beta Was this translation helpful? Give feedback.
-
|
see WolfgangFahl/nicegui_widgets#50 for the start of some actual work on this
{
"name": "niceguitools",
"package": "niceguitools",
"demo": null,
"forum_post": null,
"github": null,
"pypi": null,
"image_url": null,
"stars": null,
"github_description": "# niceguitools\r\n",
"pypi_description": "A collection of tools for nicegui",
"avatar": null,
"search_text": null,
"github_author": null,
"pypi_author": null,
"created_at": null,
"downloads": null,
"categories": [],
"version": "0.0.1"
} |
Beta Was this translation helpful? Give feedback.
-
|
Demo is now at http://ngdemo.bitplan.com/solutions |
Beta Was this translation helpful? Give feedback.
-
|
and improved to |
Beta Was this translation helpful? Give feedback.
-
Technical Guide for NiceGUI Project Inclusion in the Solutions ListObjectiveThis guide outlines the steps required for your NiceGUI project's automatic inclusion in the NiceGUI solutions list, as detailed in the provided source code. Automatic Inclusion CriteriaYour project's presence in http://ngdemo.bitplan.com/solutions is determined by specific metadata from your GitHub and PyPI repositories. GitHub Requirements
PyPI Requirements
Project Detail AttributesIf you have set up your project as described above, the solution list update will effectively retrieve and display your project. Important attributes include:
Steps for Developers
Candidate ProjectsTo explore existing candidate projects for NiceGUI or to gauge the landscape, you can use the following search queries:
Updating Project InformationChanges in your GitHub or PyPI metadata will be reflected in the NiceGUI solutions list during the next update cycle. Further InformationFor more discussions or questions about the inclusion process, refer to the initial discussion at NiceGUI GitHub Discussion #1618. |
Beta Was this translation helpful? Give feedback.
-
|
From the solutions/projects view I'd like now to go the the components. I think we should have
as the releavant parts. To pick up this information and standarize it i propose to add .components.yaml files to the project in which the components are listed with these details. Given that similar work has already been done for justpy and as a basis for justpy users wanting to migrate justpy components will be included in the solution lists with the hope to be able to link traditional justpy components to nicegui components. |
Beta Was this translation helpful? Give feedback.
-
|
For the automated inclusion of components in the NiceGUI solutions list, a structured see http://ngdemo.bitplan.com/components/WolfgangFahl_nicegui_widgets and the declaration at # Components
# WF 2023-12-16
components:
- name: dict_edit.py
source: /ngwidgets/dict_edit.py
issue: 47
demo_url: http://ngdemo.bitplan.com/dictedit
demo_image_url: https://github.com/WolfgangFahl/nicegui_widgets/assets/1336221/d1682fce-975a-4ecc-a82e-c2c397e8222a
- name: color_schema.py
source: /ngwidgets/color_schema.py
issue: 15
demo_url: http://ngdemo.bitplan.com/color_schema
demo_image_url: https://github.com/WolfgangFahl/nicegui_widgets/assets/1336221/2bb926d4-da56-4201-a04c-af032d4de08eExplanation of Fields in
|
Beta Was this translation helpful? Give feedback.
-
|
see https://www.reddit.com/r/nicegui/comments/18ke09e/nicegui_solutions_bazaar_prototype/ |
Beta Was this translation helpful? Give feedback.
-
|
well done, amigo |
Beta Was this translation helpful? Give feedback.
-
|
maybe we can take inspiration from shadcn/ui? https://www.shadcn-vue.com/docs/components/accordion.html |
Beta Was this translation helpful? Give feedback.
-
|
First of all thanks for starting the discussion and your first catalog implementation approach @WolfgangFahl . I also just wanted to propose shadn as well here but @patrickwasp was a bit faster. Not having worked with Wordpress yet like @falkoschindler but massively with Tensorflow, Keras, Pytorch etc. and all the extensions to those it became really a pain in the ass very quickly if you have an awesome library some student started at some point during his off-time ... you build your project upon it, the student does not care anymore and with every major change or update of tf/pytorch/keras and/or CUDA things get worse and worse, especially if he pushes it to pypi, includes some hard restrictions such as If you would on the other hand solve it the "shadn/ui way" like so: Which scans the repo for a config file (e.g. official compatible NiceGUI versions w/ the option for force/ignore it, if you are sure it works nevertheless). ... which then resolves to nicegui_widgets.progress if there is no collision or explicit via Would then download the full source code but only the two files of that one single component (progress.py+progress.js) and all requirements (base components), e.g into a local "components" directory. Within this component directory an config file would be maintained by the system, components.toml, yaml, what ever, a bit like pyproject.toml... which tracks which component had which absolute origin source, potentially checksum to be able to detect if the user made changes to the code etc. and to prevent them being overwritten by updates. And if there was a major some level API change to NiceGUI which bricked one of your components... and the student is still alive: And if the student is not alive anymore and it was just a minor API change, then:
All this if course requires well defined directory structures, unique names to prevent collisions, well isolated components so you don't have to embed like half the repo just to add a more beautiful button. |
Beta Was this translation helpful? Give feedback.
-
|
@Alyxion WolfgangFahl/nicegui_widgets#52 has the current description of how to add components. I have tried to get some open source projects to add a .component.yaml file as you can see with the linked tickets but so far the reactions were subpar. I doubt that we'll get much active support by developers (yet). For the time being we migh need to seek som AI approaches that do support the creation of component descriptions and checking for compliance with some rudimentary standards we might want to set. At least the current prototype shows candidate projects ... |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
🌟 Proposal: Introducing the NiceGUI Component Bazaar 🌟
🔍 Problem Statement:
While NiceGUI has seen rapid adoption and offers a robust set of features, there is an untapped potential in community contributions. Custom components developed by individual developers often remain isolated and are not easily discoverable by the wider user base.
🌐 Solution: The NiceGUI Component Bazaar:
Imagine a marketplace, a hub, where developers can share, discover, and integrate custom components built for NiceGUI. A bazaar where innovation thrives, collaboration is seamless, and the limits of what NiceGUI can do are pushed daily.
💡 Key Features:
🌱 Benefits:
🚀 Roadmap:
🤝 Let's transform how we think about NiceGUI components and create a vibrant marketplace that serves, celebrates, and accelerates our community's collective genius.
see
justpy-org/justpy#372
Beta Was this translation helpful? Give feedback.
All reactions