Transcription
In this video, we will explore a very interesting Python framework that allows you to create modern graphical interfaces.
On the screen, you can see the applications that were created using this framework. In this video, we will look at similar examples. I will show you what this tool is capable of and what applications it allows you to create.
We have already had several videos on similar frameworks on our channel, each with its own features. For instance, just recently, I created graphical applications for working with the USSR and demonstrated the specifics of that approach.
So, why am I showing another framework? The thing is, all these frameworks are good in their own way, and for each task, you need to choose the right tool. This tool contributes to a specific list of tasks and may be better suited than all the previous tools.
Therefore, after watching this video, I recommend checking out all the other videos I mentioned in the description. This will help you not miss out on the top features I showcased for each framework individually.
In this video, we will examine a very powerful framework called Reflex. I will show you real applications, and you will be able to see all its features through real examples.
Initially, it provides over 60 ready-made components, offering its own ORM and working well with any byte libraries. The interface is designed in such a way that you don't need to separate the frontend and backend; you simply create the interface using ready-made components and then attach handlers to them. For example, when a user clicks a button, it will call a specified function.
Reflex, like other frameworks such as Flat and Streamlit, aims to create a tool that beginners can use first and foremost. The projects allow you to save time on development by eliminating the need to create an interface from scratch. If you need to create an interface very quickly without getting bogged down with different technologies, this will be a very good solution.
By using ready-made widgets, you get a beautiful and user-friendly application with minimal effort. In the future, they plan to offer free hosting where you can publish your applications with just one command. Currently, you can deploy it on your own server, but the question remains: what applications can be created with this framework?
Now, we will look at application examples and the principles of how the tool works. After that, I will show you the top components that this project provides.
Let's try to gather 3,000 likes; this will serve as motivation for creating new videos with selected features.
So, let's start testing everything. First, we need to open the terminals in this folder. Next, we must set up a virtual environment, which can be either venv or virtualenv; you can choose any.
I am using Ploder, so I will do `pip install`. The package is called Lesson, and then I just hit Enter. After that, we need to add the packages themselves. I am using `pip install` for Reflex and OpenAI, the latter I use to create one project from our tests.
Next, we need to enter the environment and set up Reflex. We get such files: the next folder, and then a separate folder called Lesson. Again, our path is as follows, and the folder above, which contains all these files, is also called Lesson.
So, Reflex will gather the name, create a folder, and also create an entry point inside. Here we have a template for the default page, and there is also `rexconfig`. Again, the name comes from the folder name. Moreover, we also have hidden files.
In the future, to change our applications, I will modify this file. The next path to deploy our application uses the command `reflex run`. The first time we run it, it compiles, and then we get the address of our page. Initially, this is a simple application, just a default template, and also the path to our file. If we click here, we get a link to the documentation.
Now, I will show you several features from this project, and then we will also look at real applications.
So, this is the default application generated by Reflex. Initially, it imports several constants. This is a link to the documentation, the path to the main file, and then the sites we will look at later. The index is the entry point; this function is tied here, creating the application.
Then we add the style and compile everything. Here we have alignment, the title, and also the link. We use all styles and also specify the font directly, and in the end, we get this.
Next, we have the second application. Here we have GPT; you need to insert the API key using this link. The user can use this technology to generate images. Initially, we write what we want to create, click, and get the result, but we need a token and credits for this technology.
Here we have the sites index; in the index, there is only the input. Here we have text in the background; if we enter something, it disappears. Then there is a button; when we click it, this function is triggered. This function is in the site, and these variables display the state.
We will also have a separate video for images. Again, I will enter something here, click on "Create," and we will get an error because I didn't set the key.
In addition, there is a separate upload. So, how does it work? When we click the button, it works, and then the status variables change to true and false. We get a response in the form of an image from GPT.
Next, we write all this to `image_url` and then change the status, turning off the loading indicator to false and setting complete to true. In the end, we have that status processing and also get the image.
If we have complete, we get the image itself. I will show you on the screen how it looks in the documentation.
Next, we have the third example, which also has a site and an index. The decrement button ties to the same function, and this button has different styles. Then there is a heading; this is the title, and we set the next font size.
We tie everything in the site. Here we have two functions, and after each change, the heading will update. We get such an application with two buttons and one heading.
We all noticed that artificial intelligence is increasingly taking over various industries. That is why it is important to stay updated and gain knowledge in the field to be in demand in the job market.
This is what the University of Artificial Intelligence from Terray is doing, which offers a professional course on GPT. To try it out, you can join a free webinar for the professional GPT course.
You will learn how to earn with GPT, create nine employees in five lessons, and understand how to teach them to assist in professional activities rather than be competitors. The university teaches not only how to ask the right questions but also shows how to create projects with it and fulfill client orders.
According to Residen Builder, over 50% of companies have replaced their employees in certain tasks with GPT. Therefore, the skill of working with it will soon become mandatory for most professions.
More than 6,000 students from around the world have already passed through the university, and their training has been approved by the Russian Academy of Sciences and many other educational organizations.
In the full course, the university provides guaranteed internships on real projects in large companies. Students create projects and write their own theses during the university. The university has already employed students in companies like Huawei, Dell, VTB, Yandex, and many others.
The courses are suitable for anyone looking to expand their skill set. You can join the free webinar for the professional GPT course using the link in the description.
As a bonus for registration, the university offers a webinar chat on creating a neural network without a single line of code.
The next example directly concerns styles. We specify the same styles from CSS, and then we can use these styles within ready-made components.
Next, there is a function that returns a component. We create a box and text, and also styles for this component. We align it to the right, and this one to the left.
Before we look at the other functions, I will show you visually how the application represents a regular chat. On the right, we align our messages to the left, and the bot's response goes to the right.
Then there is the input field and a button to send the message. First, let's look at how to build such a block, and then I will show you how it works with text lines.
In the end, the chat function, which is an RX component, contains the messages that are here and returns a box where the question and answer are passed.
This is the function mentioned earlier, which sets up such components representing messages. Next, the action bar is the line where we input text. Again, there is an input field and a button.
In Yandex, we simply initialize the chat and the action bar, and the most important part of this example is the styles.
Thus, we get a chat.
Next, the fifth example is purely a collection of interesting components. These are avatars that take a name and surname and create such a value.
Then there is a button; if we click here, it creates a shadow. There is also a slider; if we increase it, it changes color, and if we decrease it, it returns to its original state.
With just one button, I can change the style. But how is this implemented? We have a status line for this indicator, where the value is stored.
Then we have the index; I center everything, and then two avatars. All styles are fully custom. You can create your own button, set the layer, gradient, color, and so on.
Then we have the indicator and a button to change the theme. Again, there is an icon, and we simply specify the icon name to get such an icon.
I thought this was the final example, but it turns out there is another one. Then we move on to components and features.
So, this is a more powerful example. We need to go to Lesson, delete the `laston.py` package, and insert this file as the entry point.
Therefore, we need to change the setup to Lesson. Initially, if we look at the code, we will recognize the same chat, but we have a few more files.
Again, we added a state to keep the chat history. There is an answer function that takes our message and responds accordingly. Moreover, I also added a typing animation as part of GPT.
We also had styles; I moved them all to a separate module. In this project, there is a small error: it was initially called Sauce, and now it is called Lesson.
So, we need to change all imports and specify Lesson. The project looks like this; I run the software from the root. Therefore, we need to specify the package.
Earlier, in the chat, it was not possible to send messages; now we have the class state and also the answer function, which allows us to both send and receive messages.
So, we write "hello," click the button, and get such a result. Each new request creates additional components.
Again, let's refresh the page and get such a result. The entire chat history was saved because there is state.
Did you think that was all? Not at all! I will now show you the gallery, then my features, documentation, and the sweetest part: the components.
I will not show each application separately; I will just scroll through everything so you can understand what it allows you to do.
This is the application we already created in this video, with possibilities for direct interaction. Then there are chart compositions, and this is the application.
Then there are forms; you can fill all this out and submit it. For example, you can accept homework, reports, and so on. Even Twitter clones can be viewed later to see the code.
Next, we have a translator and such clocks. By the way, on the site, it may hang. Initially, I thought it was a very slow framework, but then it turned out that if you deploy everything locally, it won't hang.
At the beginning of the video, I also mentioned its own ORM. We need to use this code to interact with the ORM from Reflex, and also support for pages.
You can create a huge number of pages by simply binding your app directly. There is even dynamic routing, meaning if a user enters, for example, 123, it goes here, and they get the necessary pages.
All this is supplied instead of this template.
And now, the most interesting part is the components. I will take the most interesting components from this entire list and show you those that stand out among other frameworks and that I personally found interesting.
So, the first is highlighting. Also, there is a form that was initially a regular checkbox and radio button, then a button, and the result comes here with the value.
Next, we have different types of buttons, including a loading indicator on the button itself, as well as inactive and active buttons. There are these types of buttons, then increments, the same checkboxes of full size, and so on.
Next, we have fields; if we click here, it turns into an input. Then, if we click below, we have a multi-line field.
We can also select a date and get the result. You may have used sites where you need to enter a PIN code; this is that component. We can request a PIN code from the user and then give them this component to enter it.
Next, we have indicators; there are these or with styles. Then, as always, there are dropdown menus of different types.
And the final example is a menu with a different border color. Then we have the same indicators, but directly with one slider, and also different radio buttons.
You can upload an image directly by dragging a file here. The user clicks on "Select File," chooses the image, and gets the result.
As always, you can attach an image and select zoom. Again, I don't understand why there is Naruto here. Let me use a different image because we still have top components to cover, and you need to watch the video until the end.
Again, I will set the image source. So, in the end, everything works.
So, what awaits us next? There are many interesting examples. Again, the menu can be different pages of the site. There is also this option.
Then we have a code block; we make a record in the form of a regular string, specify the language, and it does syntax highlighting and outputs it to the page.
Then my table with filtering; we have regular sorting. By the way, it also shows matches and pages.
Then we have statistics; you can create your own affiliate program or store and track sales or losses. Various alerts can be output to the page.
Then we have dialog windows, and a very interesting topic is the skeleton, which shows loading content to provide visibility during loading.
Then we have those icons that we specify through tags. In previous examples, we used Moon; we can use any icon.
Next, there are different types of menus. Let's scroll down a bit and click here. This is a menu at the top.
And the final example is the next component.
Let's try to gather 3,000 likes; this will serve as motivation for creating new videos with selected features. Also, check the description; I left a lot of useful material that is worth watching right now.