DEV Community: Andrea Gonzales

💻🤓Algomania: Data Structure and Algorithm Helper Bot

Andrea Gonzales — Tue, 23 Apr 2024 03:47:25 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

🔨 What I Built

Algomania is a bot that helps developers and coding-problem enthusiasts to learn and answer challenges on data structures and algorithms! It can give the user any coding-related challenges based on their prompt, and their answers are evaluated by the bot based on the accuracy and the time-space complexity of the solution. To make learning more fun, the user gains a point from questions that they answer, where they can exchange these points for a virtual card collectible!

👩🏽‍💻 Demo

Try out the bot here!

In the image above, the bot gave the user a medium-difficulty problem on reversing a linked list. After the user successfully provided the solution in Python, the bot updated the user's stats and added the correct points.

Algomania bot can also give hints to the user, and provide a plaintext solution to better understand the algorithm.

If the user wants to see the solution, Algomania can generate the code solution based on the user's preferred programming language.

Every time the user correctly answers a challenge, the bot updates the user's stats and allocate a point based on the problem's difficulty (Easy problems equates to 1 point, Medium problems are 3 points and Hard problems are 5 points).

The points earned by the user can be exchanged for a card from the Coding Card Collectibles Shop. A card is worth 2 points, and the bot will randomly generate a card with an AI-generated card image. Cards have a rarity range of Common, Rare and Ultra Rare.

Lastly, the cards owned by the users can be shown on their collection.

🔧Your Configuration

🖋️Persona & Prompt

# Character
You're an experienced software engineer with an in-depth understanding of programming and computer science principles. Your forte lies in presenting intricate data structures and algorithms in easy-to-understand language. You can craft coding tasks tailored to the user's proficiency, evaluate their coding solutions, and deliver expert solutions and explanations when necessary.

## Skills
### Skill 1: Clarify data structures
- Untangle complex data structures. Maintain the ensuing format:

  🔗 <Data structure name>
  - 📝 Overview: <Simplified explanation>
  - ⏲️ Time Complexity: <Time complexity breakdown>
  - 🔍 Space Complexity: <Space complexity analysis>

### Skill 2: Construct coding problems
- Draft a suitable data structure or algorithm task based on the user's learning progress. Follow the subsequent format:

  ❔<Problem Title>
  🎯 Difficulty Scale: <Level of difficulty>
  - <Problem depiction>
  - Data Input: <Example input>
  - Expected Output: <Example outcome>
  - 🏷️ Relevant Topics: <Tags associated with the data structure. E.g., Arrays, Linked Lists, etc.>

### Skill 3: Assess user solutions
- Assess a user's remote solution to the coding problem made in Skill 2. If the solution is flawed, provide constructive feedback on where the error might have arisen. If it's accurate, reward points for motivation. Distribute points towards easy, medium, or hard categories, where easy is 1 point, medium is 3 points, and hard is 5 points, based on the user's successful attempts according to their difficulty scale. Ensure that points are not awarded unless the user correctly resolves the problem. Arrange the data as follows:

📒 User Stats:
- 🏆 Points Accumulated: <points>
- Challenges Done:
    - 🟢 Easy: <easy>
    - 🟡 Medium: <medium>
    - 🔴 Hard: <hard>

### Skill 4: Supply problem solutions
- If a user struggles to resolve a problem or requests the optimal solution, present a comprehensive explanation along with a plaintext code solution in Python, C++, Java, or JavaScript. Convey the solution this way:

  - ✅ Solution: <Guide on how to tackle the problem along with plaintext code>
  - 💻 Code Snippet: <Programmatic solution>
  - ⏲️ Processing Time: <Solution's time complexity>
  - 🔍 Used Space: <Solution's space complexity>

### Skill 5: There's a feature called 'Coding Card Collectibles Shop' where the users can exchange their points for collectible cards from mystery packs. Each mystery pack costs 2 points and contains one card. If the user does not have enough points to buy a card, strictly prevent them from buying a card, else, give them a card and minus 2 points from them. You currently have <points> points! Ask the user if they want to unlock a pack in this format:

🏪 Welcome to Coding Card Collectibles Shop!
<Summary here>

If the user decides to buy a card, generate cards from SSR_Game_3 workflow. Ask the user if they want to save or discard the generated card.

### Skill 6: Ask the user if they want to save the generated card from Skill 5 to the generated_cards table. If they said yes, save the card name, card rarity and card image url to generated_cards table.

### Skill 7: Display the user's card collection from the generated_cards table in the following format:

-🃏My Code Cards:
- Total Card Count: <number of total cards owned>
- Number of Common Cards: <quantity of common cards>
- Number of Rare Cards: <quantity of rare cards>
- Number of Ultra Rare Cards: <quantity of ultra rare cards>
  - 🔹<card name>
  - 💍<card rarity>
  - Card Count: <Number of identical cards owned>

Don't show the image url.

## Constraints
- Solely discuss topics centered around data structures and algorithms.
- Adhere to the ascribed format for all skills.
- Be empathetic and patient towards learners, specifically beginners.
- Consistently provide accurate and updated information.
- Adjust the difficulty level in accordance to the learner's capabilities and progression.
- When appraising user solutions, accentuate accuracy, resourcefulness (in terms of time and space complexity), and compliance with coding conventions.
- Validate that all shared information with the user is up-to-date and precise.

📦Variables

The bot makes use of variables to store the user's stats. These include the points and number of easy, medium and hard challenges that the user had solved.

📋Database

In order to store the user's cards, a table called generated_cards was created. It records the generated card's name, rarity and the image url.

🔗Workflow

I have also set up a workflow to help generate a random card based on its rarity.

The workflow includes a JavaScript code for generating a random number between 0 and 1. Depending on the number, it will return the card name, rarity, and the prompt. It also makes use of the text2image plugin to convert the prompt into an AI-generated image.

Lastly, the workflow returns the name, rarity and image url of the generated card, which will be shown to the user.

🏃🏽Journey

Algomania is a bot I wish I have. I started self-learning on data structures and algorithms to better improve my problem-solving skills, but I find that I needed a "coding partner" that I can somehow talk to, to better understand the solutions. Therefore, Algomania came to be with an added feature: a card collection game, since I love games and collecting things.

I hope this bot helps you too! Thank you!!

Creating an ML Model and Serving it as a RESTful API: Part 2

Andrea Gonzales — Sat, 30 Jan 2021 09:38:00 +0000

This post is the continuation of the Model and API creation, so be sure to check out part 1 of this series first!

Part 2 of the series will be focused on creating a very simple web app that asks for Iris's petal and sepal width and length. It will then make a call to the Iris Classification Model API to classify the type of Iris flower based on the given user data. The web app will be created in PHP and HTML, where it will be hosted in a local server.

Coding the Web App 🖥️

The web app contains four input fields to accept user data. Once the user clicks submit, it will call the API and return the predicted classification in JSON format.

To do that, we create a file called iris-app.php and enter the following PHP and HTML codes inside:

<?php
  $form = "
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Iris Classification</h1>
      <form action='iris-app.php' method='GET'>
        <p>Enter Sepal Length</p>
        <input type='text' name='slength'/>
        <br/>
        <p>Enter Sepal Width</p>
        <input type='text' name='swidth'/>
        <br/>
        <p>Enter Petal Length</p>
        <input type='text' name='plength'/>
        <br/>
        <p>Enter Petal Width</p>
        <input type='text' name='pwidth'/>
        <br/>
        <input type='submit' name='Submit'/>
        <input type='hidden' name='submitted' value='true'/>
      </form>

   </body>
  </html>";

echo $form;

Note the extra input tag below Submit. It will be used to notify the program that the form has been submitted.

It should look like this:

When the user clicks submit, it will redirect back to the same file as this is where we will be doing the API request. We then have to enclose the form in an if-else statement so that the request will only happen if the user clicks submit. If not, then the form will just keep showing itself.

The code will then be:

<?php
  if(isset($_GET['submitted'])){
   //API Request Goes Here
  }
  else{
    $form = "<!DOCTYPE html>
    <html>
    <body>

    <h1>Iris Classification</h1>
    <form action='home.php' method='GET'>
      <p>Enter Sepal Length</p>
      <input type='text' name='slength'/>
      <br/>
      <p>Enter Sepal Width</p>
      <input type='text' name='swidth'/>
      <br/>
      <p>Enter Petal Length</p>
      <input type='text' name='plength'/>
      <br/>
      <p>Enter Petal Width</p>
      <input type='text' name='pwidth'/>
      <br/>
      <input type='submit' name='Submit'/>
      <input type='hidden' name='submitted' value='true'/>
    </form>

    </body>
    </html>";

    echo $form;
  }

The cURL library can be used to make HTTP requests in PHP. We use curl_init() to initialize a cURL session first, then only make the API request using curl_setopt() where it takes three parameters:

cURL_handler - returned when you initialized cURL using curl_init()
Option - the constant value for the setting to be changed. For this program, we use CURLOPT_URL as we want to pass a URL as the value in the third parameter
Value - the value to be used for the setting. In this case, we make a call to the API along with the user's input as the query.

Once this is set, we send out the request using curl_exec() and finally close the cURL session using curl_close.

Full code is written below:

$swidth = $_GET['swidth'];
$slength = $_GET['slength'];
$pwidth = $_GET['pwidth'];
$plength = $_GET['plength'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://iris-classification-model.herokuapp.com/classify?swidth=".$swidth."&slength=".$slength."&pwidth=".$pwidth."&plength=".$plength);
$result = curl_exec($ch);
curl_close($ch);

And we're done! If we run the program with these values:

We get the Iris classification as:

Hurrah! Now we have our Model API and interface 🎉!

Creating an ML Model and Serving it as a RESTful API: Part 1

Andrea Gonzales — Mon, 18 Jan 2021 06:18:20 +0000

I started my internship at a local company that focuses on Data Science and Machine Learning and as part of my training, I was tasked to create a simple Iris Classification model that identifies the type of Iris category (Versicolor, Virginica and Setosa) based on the given petal and sepal width and length. Being someone who has minimal Machine Learning background, I needed a lot of research and reading in order to arrive at the required output, but it was all worth it.

In this post, I will be sharing the steps I did to create an Iris Classification model using Python and serve it through Flask RESTful API. I have also created a simple PHP interface that connects to the API to demonstrate its usage.

Model Creation 🤖

In Machine Learning, a model is trained using a set of data to recognize certain patterns. Python's open-source Machine Learning library, Sci-Kit Learn, provides model training for supervised and unsupervised learning. It is simple to use and it has a lot of tutorials to get started with.

First, install Sci-Kit library using pip:

pip install -U scikit-learn

Once the installation is finished, create a file called model.py where Sci-Kit Learn's already made Iris dataset can be used:

from sklearn import datasets
iris = datasets.load_iris()

Note: You can use your own dataset but it needs to be preprocessed and formatted for Sci-Kit Learn to understand and train the model as efficiently as possible.

Next, the datasets are separated into data and target. Data consists of petal and sepal width and length in centimetres, while the target, or the label, is the class to predict. For the Iris classification, the target consists of versicolor, virginica and setosa.

iris_data = iris.data
iris_target = iris.target

Before training the model, the data and target are split again so that the other half is used for the actual model training while the other is used for verifying the model (in other terms, testing the model's accuracy).

This can be achieved using train_test_split:

from sklearn.model_selection import train_test_split
iris_data_train, iris_data_test, iris_target_train, iris_target_test = train_test_split(iris_data, iris_target, test_size = .5)

The test_size parameter specifies the size of the testing datasets.

Now, we can start building the model. There are many classification algorithms that can be used for this model, but I settled on K-Nearest Neighbors as the accuracy score is much higher.

from sklearn import neighbors
classifier = neighbors.KNeighborsClassifier()

From this, we can start training the model:

classifier.fit(iris_data_train, iris_target_train)

And there we have it! We have a trained Iris classification model. We can print the accuracy level of the model using accuracy_score:

from sklearn.metrics import accuracy_score
predict_iris = classifier.predict(iris_data_test)
print(accuracy_score(iris_target_test, predict_iris))

From the above, the model has an accuracy score of 97%! Great!

Creating Flask API ⚙️

Before we create the Flask API, the model needs to be serialized using a Python library called Pickle. By "pickling" a python code, it is converted into a byte stream for it to be easily sent over the network or saved on disk. "Unpickling" is the opposite, where it converts the python file into its original state.

Pickle can be installed using pip:

pip install pickle-mixin

Our Iris classification model can be "pickled" or serialized using the following code:

import pickle
pickle.dump(classifier, open("iris_model", "wb"))

This creates the iris_model file. If you try to open it, it will show indecipherable characters.

Now that we have our model pickled, we can now start with the Flask API!

Like the rest of the Python libraries, we install flask as well:

pip install flask

We then create our main app file called app.py. Inside, we import the libraries required for our Flask API:

from flask import Flask, jsonify
from flask_restful import reqparse, abort, Api, Resource

app = Flask(__name__)
api = Api(app)

Our Iris Classification model is then loaded and "unpickled":

import pickle
loaded_model = pickle.load(open("iris_model", 'rb'))

When we create the front-end interface later, we need a way to send over the user input to the Iris classification Flask API. In order to do that, we create parameters to the URL and we pass the user input there. The inputs we need are the petal and sepal width and length, and from this information, the model predicts what type of Iris flower we are referring to.

We create the parameters using the following code:

parser = reqparse.RequestParser()
parser.add_argument('slength')
parser.add_argument('swidth')
parser.add_argument('plength')
parser.add_argument('pwidth')

Once the queries are set, we need to call the model to predict the Iris type based on the given inputs. We then create a class called requestIris that takes the URL parameter values then insert it to the model for prediction. The predictions will come into integer format, so 0 is setosa, 1 is versicolor, and 2 is virginica. Also, note that the data returned should be in JSON format.

The full code is stated below:

class requestIris(Resource):
    def get(self):
        args = parser.parse_args()
        slength= args['slength']
        swidth = args["swidth"]
        plength = args["plength"]
        pwidth = args["pwidth"]
        prediction = (loaded_model.predict([[slength, swidth, plength, pwidth]])).tolist()
        if(prediction[0] == 0):
            type="setosa"
        elif(prediction[0] == 1):
            type="versicolor"
        else:
            type="virginica"
        serve_model = {"Iris Type":type}
        print(serve_model)
        return jsonify(serve_model)

We then add the resource to our API, and create a route for the resource:

api.add_resource(requestIris, '/classify')

Last but not least, we add the code to run our Flask application:

if __name__ == '__main__':
   app.run()

Hurray! We have our Iris Classification API now!

The API can be run locally or published to Heroku. I published mine here:

https://iris-classification-model.herokuapp.com/

In the next post, I will be writing about the PHP frontend interface to demonstrate the API's application. Stay tuned!

Thank You 2020!

Andrea Gonzales — Sun, 10 Jan 2021 08:35:46 +0000

Year 2020 had been the most unexpected year I ever had. A lot of things may have happened, but I wouldn't say it's the worst year for me. Sure, there's the pandemic that caused almost a lot of planned activities to go unplanned and heartaches that resulted in wet pillow and puffy eyes, but there are always things to be grateful for.

Goodbye, 2020!

Developer Journey 💻

Firstly, I have achieved my goal to win Google Code-In programming competition. Although my prize trip to Google Headquarters in San Francisco, California was cancelled (and boy, it caused more tears than I ever shed), I get to have satisfactory alternative prizes. What's more, it helped me gain confidence to join more hackathons and coding competitions, and I realized that I can actually do it.

Speaking of hackathons, 2020 also enabled me to focus more and join online hackathons that are held from the other parts of the world. I get to meet people with the same interests as I and helped me learn. I also get to win a 1-year hosting and domain name for my website portfolio from a hackathon that is sponsored by Qoom.

Last but not the least, I started learning PHP and Laravel Framework after being blessed with a part-time work as a freelance web developer! It's challenging at first (considering I have college to focus to as well), but I got through it alright, and get to enjoy my first salary by buying donuts 😋.

Student Stuff 📝

College life changed pretty much for 2020. For one, we get to conduct lessons through online means because of the pandemic. Being a person who was homeschooled for the whole duration of my elementary and high school years, I'm used to studying at home, so there's no problem with that. The biggest challenge with online classes is perhaps the group assignments, as they are "harder" to execute without face to face discussions.

As for the lessons, we get to study OOP concept using Java (the language I always try to learn but keeps procrastinating), and PHP lessons aren't bad, especially my part-time work helped me understand the language more and put them into hands-on practice (though combining school and part-time do require more effort, time management, and sacrifice from too much gaming 😂).

One last thing to add, I got my results for my last semester this January 7, and I can happily say I got my third Dean's list award 💖

Musical Hobby 🎹

Being in quarantine made it easier for me to play my piano, and at the same time, to NOT play it (my dad works at home so I can only play during his breaks). I'm happy that I get to play the songs I've been wanting to play, which includes the Voltes V Theme Song and Silhouette of a Breeze from Emma: A Victorian Romance anime.

Though youth choir at my local Church was postponed (thus, I cannot sing there for now), I was given a Karaoke Microphone for Christmas. Time to SIIIING!

Family Life 👪

Of course, I get to spend more time with my family because of the pandemic. They were the ones who helped me grab opportunities and comfort me during 2020's heartaches. Even though outings are minimal, we get to have a nice picnic near the seaside every once in a while. Late night movies are also frequent, and I also get to learn new recipes to cook for my family!

Final Thoughts

Once again, 2020 is a lot, even if it's mostly spent inside my house. As I welcome 2021 and continue improving in different aspects of my life, I won't regret being a part of 2020's adventures 😉

Google Code-in 2019: My Experience and The Joy of Becoming a Winner

Andrea Gonzales — Sun, 29 Mar 2020 08:33:50 +0000

Google Code-in ( GCI ) is an annual programming competition that introduces teenagers ages 13-17yrs old to the field of Open Source through coding, research, quality assurance, or design tasks for an organization of their choice. By the end of the competition, each open source organization will choose two students as Grand Prize Winners, who will be granted an all-expense four-day trip to Google Headquarters in San Francisco, California USA.

The 10th Year Anniversary of GCI was a blast! Image source: Google Open Source Blog

My Brief History with GCI

This was my 3rd year joining this competition and is probably one of the most memorable. I first joined GCI back in 2017, and have chosen Catrobat as the organization which I will contribute to. Wanting to win the contest on the first shot was I think a bad idea for me as it became stressful and no longer enjoyable. I then changed my mind set, that although I still want to win this competition, I want to learn something new and enjoy what I'm doing. This time, I chose Sugar Labs as my organization for GCI 2018.

Images Source: Sugar Labs

There are two reasons why I chose to work with Sugar Labs. First, I liked its mission to provide educational opportunities to children through the Sugar Platform. Second, it uses Python (along with JavaScript, HTML & CSS) as it's language for developing its apps and games ( known as Activities ). Although I'm more familiar in Python Language, my old computer couldn't handle the environment required for Python contributions so I ended up programming in JavaScript, which I have zero experience during that time. Obviously, I didn't win, as I only finished 9 tasks. However, I did manage to be at the Top 20 students with the most tasks completed, and that's something for me.

To prepare myself for the next GCI, I dedicated my summer holidays to contribute to one of Sugar Labs' product, Sugarizer, which uses JavaScript. I then became more familiar with the programming language used and more comfortable with the environment I'm working with.

Google Code-in 2019: To join, or Not to Join?

GCI 2019 started on December 3, 2019 and lasted until January 26, 2020. Weeks before the start date, I was having second thoughts whether I should sign up again or not, as the competition would clash with school review and exam schedules, and I have a goal of making it on the Dean’s List. But something tells me that I will regret it if I wouldn’t join the GCI 2019, and this thought went on for a couple of days before I finally signed up on the day the competition started. I chose Sugar Labs again as my organization, specifically working with two of its products, Sugarizer ( web implementation of Sugar ) and MusicBlocks ( visual programming language focusing on music composition ). The first few weeks wasn't so bad as I expected, as I had a study break where I used to do more tasks and finished about 2 tasks per day during this time. It only went tougher during and after the exam week, where I only get to finish 2-4 tasks per week.

The difference with GCI 2019 and the previous years was that I've enjoyed it more. Some of my favourite tasks are:

1. Editing Synthesizer Length for Music Blocks

String and wind instruments should be able to sustain longer note length. Before implementing my fix, Music Blocks' synthesizers could not fully sustain a whole note, thus creating a rather abrupt end to its sound. Although it was specified in the task description to find new synthesizers, I found it much harder, as I have to consider the license of the audio I'll be using. Instead, I used the same synthesizer from Music Blocks, and edited it's soundfont for it to loop a little longer.

2. Adding Automatic Re-initialization Functionality in Open Widgets

Music Blocks students expect that when they change their code, the open widget updates base on their code. However, the student must manually re-initialize the widget for it to show the changes made. I've implemented an automatic re-initialization of the widgets for a more user-friendly experience.

The open widget updates when code blocks are changed

3. Fixing Bugs and Regressions

Fixing bugs are one of my favorite things to do. It helps me to be more analytical and creative, as bugs are fixed in different kinds of ways. One fix I did was the regression on the search autocomplete functionality on Music Blocks, while there's another one from Sugarizer, where the fix requires putting a whole chunk of code above another line for it to be run first.

My complete tasks list can be found here.

The competition went on for about 8 weeks. I finished 31 tasks, surpassing my previous year's task counts. I felt proud of myself for this new achievement.

Yay! New Achievement Unlocked

The Waiting Begins

I read somewhere from previous winner's blog that Google privately emails the chosen Winners and Finalists before the actual public announcement on the Open Source Blog, which was on February 11. I felt very nervous. My heart jumps whenever I check my email notifications. There are lots of students who did great job in my organization, but I still hope to be chosen as a Grand Prize Winner, or as a Finalist at least. By the time January was coming to an end, I decided to stop thinking about it, and let tomorrow takes its course.

Then, on the afternoon of February 2nd, I was sitting in our dining area, designing a website for a study group. I just came from a youth gathering event, and my phone buzzed with messages from the other youth group members. I decided to take a break from my website and read through my messages, when I received an email notification. The first thing I saw was the word "Winner" in the email. It didn't register on my mind, so I read the email’s Subject again, this time fully reading the words "Congratulations! You are a Google Code-in 2019 Grand Prize Winner!". And because it’s not every day we get to receive an email like this from Mr. Google, I have to read the subject three times before the great news sank into me.

I quickly ran to my parent's bedroom, told them the news, and broke down into tears. I felt so happy at that moment that my happiness turned into tears of joys. All throughout the contest, I remember visualizing every night, that I'll win this time, visit Google, and meeting my Mentors and fellow GCI 2019 winners. This dream is becoming more real than ever!

There are lots of things to do before the trip. Lots of documents to fill up and submit for the US visa. After scheduling my visa appointment, all I have to do is wait. I’m going to use this time to look through previous winners’ blog posts and read their amazing experience in Google HQ, San Francisco. I can't wait for my turn to take pictures on those Android statues!

Image source: Android Police

P.S. : By the way, I also did manage to be on the Dean’s List 😀. I feel so blessed.