Merge pull request #570 from Avaiga/doc/update-understanding-gui-tuto…

…rial

Update understanding gui tutorial

docs/tutorials/complete_applications/understanding_gui/index.md

@@ -1,35 +1,41 @@
-# Getting Started with Taipy GUI
-
 !!! important "Supported Python versions"
 
     Taipy requires **Python 3.8** or newer.
 
-Welcome to the **Getting Started** guide for Taipy GUI. This tour shows you how to use Taipy GUI to create an interactive Web application. Taipy GUI implements a modern backend for any data-driven application based on your business case.
-
-![Getting Started GUI application](step_07/result.png){ width=700 style="margin:auto;display:block;border: 4px solid rgb(210,210,210);border-radius:7px" }
+Welcome to the **Tutorial** for using Taipy frontend. This guide will demonstrate how to utilize Taipy to build an interactive web application.
 
-# Taipy GUI
+![GUI application](step_07/result.png){ width=700 style="margin:auto;display:block;border: 4px solid rgb(210,210,210);border-radius:7px" }
 
-Taipy GUI is one of the components of Taipy to create easily Web application. There are a lot of reasons for using Taipy GUI:
+Taipy aims to simplify web application development:
 
-- It fastens the creation of an application.
+- Accelerates application building.
 
-- It manages easily and efficiently variables and events.
+- Streamlines management of variables and events.
 
-- Easy visualization with Markdown syntax.
+- Offers intuitive visualization using Markdown syntax.
 
-Each step of the **"Getting Started"** will focus on basic concepts of *Taipy*. Note that every step is dependent on 
-the code of the previous one. After completing the last step, you will have the skills to develop your own Taipy 
-application. 
+In each part of the **"Tutorial"** we'll emphasize the basic principles of *Taipy*. 
+It's important to note that each step builds on the code from the previous one. 
+By the end of the final step, you'll be equipped with the ability to create your own Taipy application.
 
 ## Before we begin
 
-Only Taipy has to be installed. **Taipy** package requires Python 3.8 or newer;
+**Taipy** package requires Python 3.8 or newer;
 
 ``` console
 $ pip install taipy
 ```
 
+Once you finish step 5, the application will include a Natural Language Processing (NLP) algorithm 
+for demonstration purposes. Note that this algorithm is compatible only with Python versions 3.8 to 3.10. 
+To incorporate this NLP feature, you'll need to install Transformers and Torch. 
+However, if you prefer, you can proceed with the tutorial guide without using this algorithm.   
+
+``` console
+$ pip install torch
+$ pip install transformers
+```
+
 !!! info 
 
     `pip install taipy` is the preferred method to install the latest stable version of Taipy.
@@ -40,26 +46,26 @@ $ pip install taipy
 
 ## Using Notebooks
 
-This **Getting Started** is for Python scripts (*.py*) only. If you want to use **Jupyter Notebooks**, download this [notebook](https://docs.taipy.io/en/latest/getting_started/getting-started-gui/getting_started.ipynb).
+This **Tutorial** is for Python scripts (*.py*) only. If you want to use **Jupyter Notebooks**, download this [notebook](../../../../getting_started/getting-started-gui/getting_started.ipynb).
 
 ## Taipy Studio
 
-Taipy Studio is a VS Code extension that provides an autocompletion of Taipy visual elements. The creation of a Taipy application can be done more easily and quickly through Taipy Studio.
+[Taipy Studio](../../../manuals/studio/index.md) is a VS Code extension that provides an auto-completion of Taipy visual elements. Creating a Taipy application can be done more easily and quickly through Taipy Studio.
 
 So, without further delay, let's begin to code!
 
 ## Steps
 
-1. [First Web page](step_01/ReadMe.md)
+1. [First Web page](step_01/step_01.md)
 
-2. [Visual elements](step_02/ReadMe.md)
+2. [Visual elements](step_02/step_02.md)
 
-3. [Interaction](step_03/ReadMe.md)
+3. [Interaction](step_03/step_03.md)
 
-4. [Charts](step_04/ReadMe.md)
+4. [Charts](step_04/step_04.md)
 
-5. [Python expression in properties](step_05/ReadMe.md)
+5. [Python expression in properties](step_05/step_05.md)
 
-6. [Page layout](step_06/ReadMe.md)
+6. [Page layout](step_06/step_06.md)
 
-7. [Multi-pages, navbars, and menus](step_07/ReadMe.md)
+7. [Multi-pages, navbars, and menus](step_07/step_07.md)

docs/tutorials/complete_applications/understanding_gui/src/step_01.py

@@ -1,5 +1,3 @@
 from taipy import Gui
 
-# A dark mode is available in Taipy
-# However, we will use the light mode for the Getting Started
-Gui(page="# Getting started with *Taipy*").run(dark_mode=False)
+Gui(page="# Getting started with *Taipy*").run()

docs/tutorials/complete_applications/understanding_gui/src/step_02.py

@@ -3,8 +3,6 @@
 text = "Original text"
 
 page = """
-<|toggle|theme|>
-
 # Getting started with Taipy GUI
 
 My text: <|{text}|>

docs/tutorials/complete_applications/understanding_gui/src/step_03.py

@@ -4,26 +4,23 @@
 
 # Definition of the page
 page = """
-<|toggle|theme|>
-
 # Getting started with Taipy GUI
 
 My text: <|{text}|>
 
 <|{text}|input|>
 
-<|Analyze|button|on_action=local_callback|>
+<|Run local|button|on_action=on_button_action|>
 """
 
-def local_callback(state):
+def on_button_action(state):
     notify(state, 'info', f'The text is: {state.text}')
     state.text = "Button Pressed"
 
 def on_change(state, var_name, var_value):
-    print(var_name, var_value, state.text)
-    # be aware of 
-    if var_name == "text" and len(var_value) > 8:
-        notify(state, 'warning', 'Length of input superior to 8')
+    if var_name == "text" and var_value == "Reset":
+        state.text = ""
+        return
 
 
-Gui(page).run()
+Gui(page).run()

docs/tutorials/complete_applications/understanding_gui/src/step_04.py

@@ -31,11 +31,12 @@ def local_callback(state):
     notify(state, 'info', f'The text is: {state.text}')
 
     temp = state.dataframe.copy()
-    state.dataframe = temp.append({"Text":state.text,
-                                   "Score Pos":0,
-                                   "Score Neu":0,
-                                   "Score Neg":0,
-                                   "Overall":0}, ignore_index=True)
+    temp.loc[len(temp)] = {"Text":state.text,
+                            "Score Pos":0,
+                            "Score Neu":0,
+                            "Score Neg":0,
+                            "Overall":0}
+    state.dataframe = temp
     state.text = ""
 
 Gui(page).run()

docs/tutorials/complete_applications/understanding_gui/src/step_05.py

@@ -19,6 +19,8 @@
                           "Score Neg":[0.33],
                           "Overall":[0]})
 
+# Torch is, for now, only available for the Python version between 3.8 and 3.10. 
+# If you cannot install these packages, just return a dictionary of random numbers for the `analyze_text(text).`
 def analyze_text(text):
     # Run for Roberta Model
     encoded_text = tokenizer(text, return_tensors='pt')
@@ -37,7 +39,8 @@ def local_callback(state):
     notify(state, 'Info', f'The text is: {state.text}', True)
     temp = state.dataframe.copy()
     scores = analyze_text(state.text)
-    state.dataframe = temp.append(scores, ignore_index=True)
+    temp.loc[len(temp)] = scores
+    state.dataframe = temp
     state.text = ""
 
 

docs/tutorials/complete_applications/understanding_gui/src/step_06.py

@@ -9,45 +9,33 @@
 text = "Original text"
 
 page = """
-<|toggle|theme|>
-
 # Getting started with Taipy GUI
 
 <|layout|columns=1 1|
 <|
 My text: <|{text}|>
 
 Enter a word:
-
 <|{text}|input|>
-
 <|Analyze|button|on_action=local_callback|>
 |>
 
 
 <|Table|expandable|
 <|{dataframe}|table|width=100%|number_format=%.2f|>
 |>
-
 |>
 
 <|layout|columns=1 1 1|
-<|
-## Positive
-<|{float(np.mean(dataframe['Score Pos']))}|text|format=%.2f|>%
-|>
+## Positive <|{float(np.mean(dataframe['Score Pos']))}|text|format=%.2f|raw|>%
 
-<|
-## Neutral
-<|{float(np.mean(dataframe['Score Neu']))}|text|format=%.2f|>%
-|>
+## Neutral <|{float(np.mean(dataframe['Score Neu']))}|text|format=%.2f|raw|>%
 
-<|
-## Negative
-<|{float(np.mean(dataframe['Score Neg']))}|text|format=%.2f|>%
-|>
+## Negative <|{float(np.mean(dataframe['Score Neg']))}|text|format=%.2f|raw|>%
 |>
 
+<br/>
+
 <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|>
 """
 
@@ -80,7 +68,8 @@ def local_callback(state):
     notify(state, 'Info', f'The text is: {state.text}', True)
     temp = state.dataframe.copy()
     scores = analyze_text(state.text)
-    state.dataframe = temp.append(scores, ignore_index=True)
+    temp.loc[len(temp)] = scores
+    state.dataframe = temp
     state.text = ""
 
 Gui(page).run()

docs/tutorials/complete_applications/understanding_gui/src/step_07.py

@@ -16,34 +16,22 @@
 My text: <|{text}|>
 
 Enter a word:
-
 <|{text}|input|>
-
 <|Analyze|button|on_action=local_callback|>
 |>
 
 
 <|Table|expandable|
 <|{dataframe}|table|width=100%|number_format=%.2f|>
 |>
-
 |>
 
 <|layout|columns=1 1 1|
-<|
-## Positive
-<|{np.mean(dataframe['Score Pos'])}|text|format=%.2f|> %
-|>
+## Positive <|{np.mean(dataframe['Score Pos'])}|text|format=%.2f|raw|>
 
-<|
-## Neutral
-<|{np.mean(dataframe['Score Neu'])}|text|format=%.2f|> %
-|>
+## Neutral <|{np.mean(dataframe['Score Neu'])}|text|format=%.2f|raw|>
 
-<|
-## Negative
-<|{np.mean(dataframe['Score Neg'])}|text|format=%.2f|> %
-|>
+## Negative <|{np.mean(dataframe['Score Neg'])}|text|format=%.2f|raw|>
 |>
 
 <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|>
@@ -79,7 +67,8 @@ def local_callback(state):
     notify(state, 'Info', f'The text is: {state.text}', True)
     temp = state.dataframe.copy()
     scores = analyze_text(state.text)
-    state.dataframe = temp.append(scores, ignore_index=True)
+    temp.loc[len(temp)] = scores
+    state.dataframe = temp
     state.text = ""
 
 
@@ -116,7 +105,8 @@ def analyze_file(state):
         state.treatment = int((i+1)*100/len(file_list))
         temp = state.dataframe2.copy()
         scores = analyze_text(text)
-        state.dataframe2 = temp.append(scores, ignore_index=True)
+        temp.loc[len(temp)] = scores
+        state.dataframe2 = temp
 
     state.path = None
 

docs/tutorials/complete_applications/understanding_gui/step_01/step_01.md

@@ -0,0 +1,37 @@
+> You can download the code for
+<a href="./../src/step_01.py" download>Step 1</a> 
+or all the steps <a href="./../src/src.zip" download>here</a>. 
+
+
+!!! warning "For Notebooks"
+
+    The "Getting Started" Notebook is available [here](../../../../getting_started/getting-started-gui/getting_started.ipynb). In Taipy GUI, the process to execute a Jupyter Notebook is different from executing a Python Script.
+
+# Step 1: First Web page
+
+You only need one line of code to create your first Taipy web page. Just create a `Gui` object with a string and run it. 
+
+In the console, you'll find a client link. All you need to do is copy and paste it into your web browser to open your first Taipy web client!
+
+
+```python
+from taipy import Gui
+
+Gui(page="# Getting started with *Taipy*").run() # use_reloader=True
+```
+
+By default, the page won't refresh on its own after you make a code modification.
+
+If you want to alter this behavior, you can add `use_reloader=True` in the `.run()` method. This will cause 
+the application to automatically reload when you make changes to a file in your application and save it. 
+It's typically used in development mode.
+
+If you wish to run multiple servers concurrently, you can modify the server port number (5000 by default) in the `.run()` method. For example, `Gui(...).run(port=xxxx)`. Other options of the `.run()` can be found [here](../../../../manuals/gui/configuration.md/#configuring-the-gui-instance).
+
+
+Keep in mind that you have the option to format your text. Taipy uses Markdown syntax to style your text 
+and more. Therefore, `#` creates a title, `##` makes a subtitle. 
+Put your text in `*` for *italics* or in `**` to have it in **bold**.
+
+
+![First Web Page](result.png){ width=700 style="margin:auto;display:block;border: 4px solid rgb(210,210,210);border-radius:7px" }