Inspiration
One of the main challenges in education is that some times we do not require to develop a deep knowledge on how something is built but rather to develop a structured thinking process to make it work.
To mention an example, this is the current situation Industrial Engineering students at UNAM are facing in automation. In their current educational methodology, they learn about complex contents such as inverse kinematics, denavit-hartenberg parameters, etc. only to learn how automation is done and thus make it more efficient. Thus, students struggle, feel frustrated and the overall learning process is not completely achieved.
In this way, we develop a learning platform that allows students to develop thinking processes rather than memorizing concepts and formulas, through vibe coding. We created a centralized webpage in which you can find a flowchart creation platform, a chatbot and a simulator. In this way, you can learn programing rules and methodologies by creating flowcharts that will then translated into working code using a gemini AI model. Also, they will be able to develop rapid prototyping skills through the natural language chatbot that can generate both functional code and general purpose answers. Finally, they can see their algorithms in the webots simulator that is integrated in the page.
For this we implemented the following approaches:
We choose a web page based on HTML5, CSS and JS, since this allows us to easily integrate external applications using API methods and iframe tags, so that the product can be more adaptable to specific needs.
For a better experience, we integrated a drawing application using APIs that exports the final image to the gemini model which translates the flowchart into real code.
For the simulator, we chose webots because it allows local web streaming, so that students still can directly learn from the simulation if they want to.
Then, we used a flask server in python as main back end. Its funtion is to render the web page and bridge the gemini API using a .env method, for security. To merge the model, we used the google python library. Then, the frontend just send the prompts and images when the user indicates, and waits until the reponse is ready.
To make a more robust platform, we integrated simple agents. Thus, if the users wants to generate code, a code agent implements the gemini-pro model, and if it requires general questions, it uses the fast-model. In this way, we make it more efficient in time and tokens. Also, this allows us to implement rules for each agent that will make the model to answer based on a learning approach.
Challenges we ran into
We ran into various challenges. First, developing a full working flowchart creator platform consumes a lot of time and is very complex to make it work smooth and pleasant for studying. Thus, we opted to use developer methods to integrate already existent "Excalidraw" with javascript.
Another challenge was agents development, since they can become very complex. The approach we used was to take advantage of gemini API to implement simple agents for which we first send the propmt the user made to gemini, asking it to classify it as CODE or DOUBT, and then we send again the prompt but now using a model depending on the classification gemini made. Also, in the second prompt we include a heading description that tells the model how to answer, as its rules.
Finally, we encountered a huge challenge while using the Gemini API, since it asks for card numbers and tax information, which no one from our team had. Thus, we could not test any prompt but we verified our integration because it returned a NO CREDIT error. However, since Agents required various series of prompts, they could not be completly tested because the second prompt could not be executed.
Accomplishments that we're proud of
The integration of simple agents is a very good implementation since it allows our application to be efficient and also customizable to every school. Also, integrating a simulator inside the page allows students to rapidly visualize its code, making them to have a better experience.
What we learned
We learned how agents works and their main advantages in AI models integration. We also learned how to integrate APIs in both java script and python.
What's next for Intuitive Education Platform for Line Manufacturing Learning
A very good advantage of this project is that a lot of things can be upgraded or added. Firstly, we would implement more complex systems for the agent, so that it can have more available tools. We will also implement another simulators and robots. Finally, we will implement database to store data so that sessions can be stored.
Built With
- agents
- api
- css
- gemini
- html5
- javascript
- python
Log in or sign up for Devpost to join the conversation.