Creating a web based editor specifically for 'Taipy'

[yaten2302]

Description

This is a feature request for creating a web based editor specifically designed for Taipy. As of now, if we want to use Taipy, then we've to install it and then do our work. But, by creating a web based editor, a user can create some projects(just for testing) very easily without having the need to install it.

For example:

1. If I'm a new user and want to try Taipy for the first time, then I've to install Taipy as a pip file and start learning about it. But, with the web editor, I can straight away start editing some basic files like creating buttons, dialogs etc.
2. If, suppose a user is creating a project in Taipy and the user gets stuck somewhere, and wants to check if by adding a particular piece of code, will the project work or not, but the user wants to do this on a different file/dir, then the user has to create a new file/dir and then do the same. But, by the web editor, the user can easily test the code and after closing the browser, the previously created file by the user will be lost i.e. in the web based editor, it'll be like a temporary file, just for testing, by the user.

Solution Proposed

A web editor for Taipy can be created for users so that, they can try their piece of code easily, like a temporary file.

Impact of Solution

No response

Additional Context

I just found a web based editor kind of thing. The Kotlin language has a web editor and the same can be implemented for Taipy as well.

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
• [ ] Create related issue in taipy-doc for documentation and Release Notes.
• [ ] Check if a new demo could be provided based on this, or if legacy demos could be benefit from it.
• [ ] Ensure any change is well documented.

Code of Conduct

• [X] I have checked the existing issues.
• [X] I am willing to work on this issue (optional)

[aazam-gh]

Hi! I'd love to take this up for hacktoberfest :)

[jrobinAV]

Hello @aazam-gh,

Thank you for your help. I just assigned the issue to you.

Cheers

[aazam-gh]

@jrobinAV I have been trying out a number of approaches for this. What is the current stack of the taipy website? I believe running a docker container that has taipy installed by default would be the best apporach. This would allow the web code editor to execute the commands within the docker enviornment and display the changes live

[yaten2302]

@aazam-gh , here's the link for the taipy website's repo. The website is build in next-js.

On this page, maybe before the Optimized for Insights section, we can have a 'Why Taipy?' Section as in Kotlin's website and then a basic run command?

What do you think @jrobinAV @FabienLelaquais @FredLL-Avaiga ?

[FabienLelaquais]

Wait wait... This issue, that @yaten2302 has created, has a lot of value. We've had this in mind for years. And really, the hosting part of that is not the difficult part.

What we want to do is an equivalent of Codepen, tuned for Taipy. So you would have a Python coding area (with edition facilities including code highlight), a 'page definition' area (not so clear since Taipy supports Markdown, raw HTML, and Python simultaneously), a rendering area (what the page looks like), and potentially a styling page to apply CSS rules for tuning.

Several problems show up immediately. Hosting is certainly one of them since we need to provide a hosting environment with a Python interpreter up and running, ready to process concurrent environments (every running app). But this edition section is a real problem as well. Furthermore, this kind of online service will soon enough be very related to the Taipy Designer offering, which provides a WYSIWYG approach that is more than relevant for this proposal.

Short answer: we're on it. Hosting will definitively be an issue, but just not right now.

[yaten2302]

@FabienLelaquais , it's good to know that this issue useful for Taipy :) BTW, I've a doubt, that are you folks working on this issue or like it needs to be started from scratch? I was just asking this because, if there's some work required from my side in creating the playground or the web editor, then I would definitely like to work 👍

[aazam-gh]

I have been looking into the website repo. Since it's pure js, I tried to test with Monaco. However the same issue drawback tends to occur because we'd want an isolated environment for installing pip.

I'd love to hear any suggestions too!

[quest-bot[bot]]

New Quest!

A new Quest has been launched in @Avaiga’s repo. Merge a PR that solves this issue to loot the Quest and earn your reward.

---

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #1409 to link your PR to this Quest.

Questions? Check out the docs.

[Harish-2003]

How about hosting taipy console/interpreter in taipy.github.io like linking the console in the website will that work ?

[Aryan-webp]

Isn't it possible to get taipy included in pyodide? Coz, if it is; it would be a piece of cake to get this up and running Otherwise, can't we compile the basic functionality in a javascript environment and upload it on a cdn; (ik the language isn't technically accurate, bear with me please 😢) just like streamlit did with their stlite.js thing This accounts for the execution of the code As for rendering it on the display, I guess the best bet would be to use an iframe

[preeti13456]

Is this issue taken if not I want to take part in it.

[preeti13456]

Some of the approach I'm thinking that could go along are:

1. Cloud-based Execution: To create separate Python environments for every user session, utilize a cloud platform such as AWS Lambda or Google Cloud Functions. Although it could necessitate a substantial infrastructure build, this could solve the hosting issue.
2. Investigate compiling a portion of Taipy's essential features for WebAssembly (WASM) and executing them straight in the browser. Although this method eliminates the need for a server-side Python interpreter, it may restrict the functionality that are accessible. One possible tool for this strategy is Pyodide, which was discussed in the comments.
3. Combining a limited server-side component for particular Taipy functions that are not transferable to WASM with a Monaco editor for Python code is known as a hybrid approach. This might provide a harmony between performance and usefulness.
4. Editor with Limited Functionality: Make a simple editor that concentrates on fundamental Taipy

On top of that if we want to use some additional libraries we can use Monaco as mentioned by @aazam-gh as well in one of the conversations.

Kindly let me know what approach is aligning or there is some other proposed solution that you guys have in mind .

[yaten2302]

Hey @preeti13456 These points are really nice!! I was also researching pyodide.

1. As for the first point, in which you suggested using cloud services like AWS, etc... this approach ig might not work for us? Because this has to be implemented by the Taipy team themselves and also ig these cloud services are not free? Some subscriptions need to be taken, ig, we're thinking of some solutions that are easily accessible.

2. I think the second point, which you told, should research that. According to me this I found the most promising solution!! Wdyk?

3. Actually, I wasn't able to understand the third point. Could you please elaborate on it a bit more?

@FabienLelaquais @FredLL-Avaiga

[preeti13456]

Hey I'm also looking more on the second solution but I needed to understand if the above plausible solutions we can use for certain functionalities

[yaten2302]

@FabienLelaquais @FredLL-Avaiga , could you also provide your thoughts regarding this 👀?

[github-actions[bot]]

This issue has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this issue, please add another comment or create a PR that links to this issue. If a PR has already been created which refers to this issue, then you should explicitly mention this issue in the relevant PR. Otherwise, you will be unassigned in 14 days. For more information please refer to the contributing guidelines.

[github-actions[bot]]

This issue has been unassigned automatically because it has been marked as "🥶Waiting for contributor" for more than 14 days with no activity.