Category Archives: Week 12

Retreat Into Competence

Often times when moving forward in your career, you will end facing many different projects that can seem overwhelming when you do not have the full grasp on it yet. This can cause people to shutdown due to their sheer lack of motivation after being discouraged over and over. This pattern says to help fight this type of interreference, it is also okay to Retreat Into Competence. This is essentially moving back onto work that you are confident in and able to complete easily. This will allow for you to gain the needed confidence and motivation in order to start working on a harder, lesser known task. However, you can not retreat into competence for too long or the dread of restarting the hard work will outweigh the problem prior.

I find this pattern to speak to me in many ways. Often times I feel myself overextended and worn out from trying to learn a hundred new things at once in order to complete a certain project. When this happens, I tend to get discouraged easily once things start to fall apart. Thankfully, I had realized how useful this pattern is without knowing it existed. When this happens, I will always tend to move back to a smaller easier project to complete before returning. The pride of accomplishment allows for me to get back into grinding on the harder project.

I believe reading this pattern helped to reinforce the idea that returning to something more basic is not always a bad thing. Often times I will feel like I am wasting my time on simpler tasks, so I move to the harder ones but end up accomplishing neither because I lack the motivation for the harder task. From here on out, I plan on using a smaller, more well-known task as a way to kick start my work and allow for my confidence to grow. From there I believe it will end up becoming much easier for me to take on these large-scale tasks while still also being able to feel like I am continuously accomplishing something towards my goal.

From the blog CS@Worcester – Journey Through Technology by krothermich and used with permission of the author. All other rights reserved by the author.

Running Server Side Code and Serving Up Some Tasty Results

Storing files on a server from a mobile app is nifty trick, but this week for my independent study I began running code on the server to extract audio features and make predictions on a spoken digit.

In its current state, my app allows a user to record an audio file. Once done, the file is uploaded to the server and will extract the audio features and submit it to the machine learning model, which currently predicts a spoken digit. The server then allows the user to look at specific information about the audio file: a graph of the certainty of which digits were spoken, the waveplot, and the MFCC features.

This basic framework allows room for growth in the future. First, I have been taking care to design the app to easily add additional features for the user’s viewing pleasure and plan on adding a spectrogram and FFT this week. Second, the machine learning model is currently trained on MFCC features only, but this can be retrained to work better using other features. And although it currently only guesses spoken digits, additional models can be trained to make a more complex system to analyze different kinds of audio data with different applications.

The biggest issue with what I’ve wanted to do in this project has been finding datasets large enough to train a model. I’d love to extend the features of the machine learning aspect of this app, but unfortunately the amount of work required is way out of scope for a single person in a single semester. Although there are many large human speech datasets, training a model in a supervised manner would require hours of manually labeling the data.

Luckily, I’ve learned enough about signal processing to make that a main aspect of the project. And as I said at the beginning of the semester, my main goal was to gain experience in the Android framework and software development in general. Having to overcome unexpected challenges and find creative ways to approach them has probably been the most important learning experience in this project.

I also continue to be reminded of the importance of knowing the shape of your data and what is actually represents before trying to work with it. MFCC features just aren’t displayed in the same way as a spectrogram or a waveplot, so each of these requires special considerations in plotting and, in the future, training machine learning models with them.

And to finish, I’d like to describe my biggest issue of the week. I had to determine how I wanted to get the data to a user after running server-side code. The naive approach would be to send all the data at once as a response, but not only would this take a long time, but the user might not want it. Instead, I send an HTTP request to get a JSON object of metadata for a given audio recording. This contains all the extracted features with a link to them for download, if desired. Then, the app itself can determine if they should be downloaded. In my case, I currently have an interface that handles the API calls, and passes back each file download link individually in a callback method when the HTTP request is successful. The app displays each link as it is received.

This week I also had to refactor an old project for an assignment and chose my first attempt at a Scrabble game in Python. The contrast between that one and this one was a reminder of the tools I’ve picked up over the past 4 years. I never would have been able to juggle this many different technologies and still understand the architecture without the help of many software engineering concepts.

From the blog CS@Worcester – Inquiries and Queries by James Young and used with permission of the author. All other rights reserved by the author.

When It’s Easier to Just Do Everything [More] Manually

Sometimes doing things the hard way is a lot easier. The more tools you use and the more complicated those tools are, the more complexity you have to deal with. So while it may be nice to call a few simple methods and have a framework do everything for you behind the scenes, you’ll have to to learn how the framework works and maybe realize down the line it can’t do everything you want it to do. There may even be incompatibilities with other parts of your program.

This week in my independent study, I tried to figure out how I could run a machine learning model on Android. I had some success, but quickly discovered some complications. Android has the option of using TensorFlow Lite, which seems great. However, I built my model using Keras, so I needed to convert the model. That was relatively straightforward, but before I started calling my model, I realized that I needed to extract audio features on Android. This required using Python code on Android, particularly Librosa and Numpy. This led me to other potential frameworks to get this to run.

This would lead to a bloated app, so I looked into Google Cloud services and thought about running server-side code there. I already set up a way to upload and download files with Google FireBase, so this seemed reasonable. But this is a paid service and would be even more work to make it functional.

I already have all the code running on my personal machine, so what if I just set up a server with a REST API to upload and download files and run the necessary Python code locally? If I could get that working, it would be trivial to call the code I’m already running.

Getting the server to upload and download files is what I did this week. I used Flask, which makes it very easy to get a basic server up and running. For the time being, data can only be transmitted via WiFi, as there will be uncompressed audio files transmitted back and forth.

While there was some additional work to figure out HTTP requests on Android, already knowing the basic building blocks gives me much more flexibility moving forward. But with great flexibility comes great responsibility, and proper error checking will be an important part of development moving forward. Security measures are also very important to consider before deploying an app to production.

The next iteration will involve running the machine learning code with a REST API call and getting back both the results of the model’s prediction and any data I will need to plot within the app.

From the blog CS@Worcester – Inquiries and Queries by James Young and used with permission of the author. All other rights reserved by the author.

Final Project Progress

For my final project in CS 343, I have chosen to create a
Pokédex SPA that uses a public database, PokeAPI, with RESTful API. So, my
focus has been on page layout and how to search for data with limited methods
since the backend is all set.

I went through several different ways of trying to set up
the page layout, but eventually I settled on CSS grids. I found these grids to
be intuitive and easy to manipulate. It was not long until I was able to
successfully create a basic layout to work with. I used the grid-template-areas
CSS property to set a dynamically resizable layout.

CSS:       grid-template-areas:
     “header header”
                                                                “menu content”
                                                                “footer
footer”

Current page progress

I used the CSS fractional units to determine the width of
the columns (1:4) and static sizes for the height of the header and footer with
the content in-between filling the page. Now that I have a basic layout to work
with, I can focus on added functionality.

A function I have currently implemented is a search for Pokémon
by id number or name. For now, the page simply displays the name, image, and id,
but the API provides much more data that I haven’t included. The evolution tree
function is still a WIP. Connecting the evolution chains to the specified Pokémon
was a small issue. The API does not provide a way for an evolution chain to be
searched for by Pokémon. I eventually settled on creating a map, at page load, by
looping through all available chains and pairing them with their respected Pokémon.
The plan is to use the chain to render a pop-up that displays the entire evolutionary
tree. I also have a moves search that works similarly to the Pokémon search.

I am now trying to think of ways of using the pokeAPI in interesting ways. I will probably add some more search options to the menu as well as adding more options for linking relevant data. Even though my project is still fairly new, I have learned a great deal about HTML and CSS so far.

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.

Using UML for a project

I have have been working on a big term project lately for my all classes. I when me and my group were planning what to do I decided to try use a UML to do the planning like I had learned about in my class a few months ago. It was big help in figuring about how to structure the program and figure out how make it work. It also help a lot with being able to communicate with group members so we could all work on it at same and it would still be compatible.

From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.

CS-343 Final Project – Part 1

As there are now just a few weeks left in the semester, it
is time to start working on my final project for CS-343. This project is to
develop a Single Page Application in TypeScript using the Angular framework,
which we have been learning in class over the past month. From now until the
end of the semester, I will be making weekly posts documenting my progress with
this project and what I learn while working on it.

My final project began with a proposal, for which I was to
create a conceptual design for a Single Page Application using a wireframe. This
helped teach me how to design a layout for an application’s components before
programming it. My idea was to design a layout for a customizable puzzle game. When
it comes to software development, my main interest is in making games. For this
reason, I thought that using this project to make a basic game while also
learning about creating Single Page Applications in TypeScript would be
something I’d enjoy.

My current concept involves some kind of grid-based puzzle game,
such as minesweeper. The user would be able to interact with a variety of components
in an options menu to change the size of the grid as well as other aspects of
the game, like the difficulty and time limit. Changes made to these options
would update the main play area in real time without the need to reload the
page. I also included a help menu that would contain instructions and potentially
a hint button for extra interactivity in my proposal.

I drew my wireframe layout for this application concept on
paper. You can take a look at it right here:

I still am not certain that this is the idea I want to go
with for my project. I think it is a rather simple idea due to its lack of
communication with a back-end server. I also have yet to decide on the details
about the puzzle game itself, and I don’t know if such a game is even possible
to make with angular components. I will have to do more research about Angular
and TypeScript to help solidify my plan. Despite my doubts, I am looking forward
to learning more about writing applications in TypeScript, and I will definitely
get development started during Thanksgiving break.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

Final Project Update: Taking a different shape than planned

The final project for this class is taking on a different form than I initially planned. I had planned to use google sheets API in my project, and while I am not ruling out that possibility, I am running into some roadblocks. The API seems to require authentication that I can’t get to work quite right. I may end up using a different solution for a backend, but we will see.

I am also thinking that my front-end will end up looking not much like my wireframe. At this point I’m not sure I care. Figuring out HTML and CSS implementations for something that I’ve had no experience in for this project is very difficult, and I think I (like most people), will end up modeling my project off of something that already exists. As I posted last week, Tour of Heroes is a very appealing course and I am learning a lot by deep-diving into it. I would highly suggest implementing that into the course. It utilizes a lot of concepts that are useful in angular and in the project: buttons, pages, loops, and CSS stylings, and more.

The other roadblock I am running into is that the work this semester sure has been back-loaded. 5 classes, 3 projects and 4 exams to prepare for is a tough ask. As an adult student with a job and a mortgage, it sure gets stressful. I will definitely not pretend to be the most overworked student ever, and people have definitely overcome tougher obstacles. Yet even still, my despair is immeasurable.

From the blog CS@Worcester – Alan Birdgulch's Blog by cjsteinbrecher and used with permission of the author. All other rights reserved by the author.

Mock Testing

Recently in CS-443 I was introduced to testing using
mocking. Mock testing makes use of a mocking framework (we used Mockito in class)
to create mocks which the place of regular objects. A mock can call the methods
of its associated class or interface, but it will return a default value of 0
instead of actually running the behaviors specified in the class’ methods. It
is also possible to tell the mock to return specific values other than the
default to make sure that different methods return different results. It was
interesting to learn about implementing Mockito and working with mocks in my
projects, but there was one question that I kept asking myself: What is the
point? Why go through the trouble of setting up mocks when you could just
finish writing the code and test its actual behavior? I decided I would search
for an answer to these questions on my own, and in doing so I came across an
article by Michael Minella titled “The Concept of Mocking.”

The article can be found here:

https://dzone.com/articles/the-concept-mocking

Unlike the example in class, this article teaches mocking
and its purpose clearly and simply. This purpose, as the article explains, is
to test functions without executing other functions that they depend on. The
article demonstrates this with a simple example which includes a doLookup
method that calls a lookupByKey method. By using mocks, it is possible to test
doLookup without needing to make sure lookupByKey is also working correctly. This
extremely simple example has helped make the point of mocking much clearer to
me. It still seems better to me to write tests based on the actual code of a
project, but I can see mocking being useful in situations where the code a project
depends on is not all accessible. I think the example in class may have been
too complex an introduction to mocking, and the difficulties I had getting the
example code to work made it difficult for me to understand the basic concepts behind
mocking. The simplicity of this article enabled me to see the purpose of
mocking, which I think will make it easier for me to apply what I learned from
the class activity.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

FPL&S 3: Component Interaction, Custom Services, and Fear of Commit

After completing the file upload portion of the project last week, I found myself in fear of committing my changes. I have always had this problem: I want each commit to be concise, change as little as possible, and even have perfect whitespace. This minimizes changes and makes it easier to track down commits where bugs are introduced, but moving forward like this will slow me down, as it has in the past.

But once I made that first commit, things starting progressing quicker. It was time to start adding more Components. Once I could interact with the files I was uploading, it was time to be able to delete files. With more functionality and interaction with the cloud storage, it was best to remove this behavior from the Components and move them to a Service. This custom service class handles all interaction with the cloud storage service, so there aren’t some components adding files and others deleting files. Everything is nicely encapsulated, and user interaction only needs to forward actions to the Service.

I do wonder if there are downsides to this design, and whether Angular might have features I’m missing that may be better suited. However, I definitely believe that UI Components in any framework should delegate user interaction to another class that contains the logic. Even so, is importing a Service class the proper avenue? I have also considered passing commands in each Component up to the main app Component, which would have a single reference to the custom Service I created. This would quickly complicate the application architecture, however, because changes in the cloud storage will require updates in the children Components. For example, the list of Files will have to update, and a file shouldn’t be removed from the UI unless the delete action is successful, requiring a callback to be passed down to children.

The software engineering practices I’ve studied and written about this past semester are at the front of my mind. My current solution is rather simple, and although I am anticipating possible problems, I am not over-engineering and adding unnecessary complexity. I am following Clean Code principles from Robert C. Martin; making code easy it read, making it work, and refactoring when necessary.

The overall design of my final project is beginning to solidify. I naively thought I would download all file metadata from the cloud storage when loading the web page and then maintain them from there, but I’ve realized that all of this data is going to have to be stored in another database, which I will access using a REST API. This will store all the file data and URLs to the files themselves and will be a good chance to practice with data synchronization between databases.

Through the next week I will implement the database. Once I have this synced client-side, I can add Components to search/filter the files and load the files that are selected by the user.

From the blog CS@Worcester – Inquiries and Queries by ausausdauer and used with permission of the author. All other rights reserved by the author.

Final Project-Week 1

I will be completing a final project for my CS-343 class. I plan to implement a workout planner using angular and webstorm. The general idea of the website will start with the homepage. On the home page there will be any workout that the user has created. Here it will show the workout types, how many reps/sets and what each workout is. Along the side bar there will be a list of muscle groups. The user will be able to click on these side bars to display a list of different exercises that they could choose from. When the user clicks on an exercise, the tab will open up to a display a picture or video of the workout. From here the user will also be able to set their reps and sets count in which they want to add to the workout. To get started on this process I will be designing each of the slides for each workout. Once these slides are created, I will host them together in a folder. These will then be able to be used and manipulated by implementing a new component called workouts. This will contain and html file for designing the basic template of the slides and their layout. The next will be a css file. This file will allow for me to implement more stylistic changes to the pages. The last two components in the workout section will be .spec and a typescript file. The typescript file is where all the code that will allow for the user to manipulate and change pages. This will also include the code which will allow for the user to take add their reps and sets to the workout. For the first week I have been working putting together each of the slides that will be used for the site.

The tentative plan for these slides will be to make them
images and incorporate the other elements on top of the image. Each image will
have a unique ID which will allow for the code to distinguish what workout the
user is currently looking at. Once this large section has been completed, I
plan on moving onto the homepage design where the workout will be displayed. On
the homepage the user will be able to remove workouts that they no longer want
or remove their whole workout plan entirely and start from scratch. Due to the
set up of the app, the workouts will not save once disconnected because that
would require saving the data somewhere, while the app is offline.

From the blog CS@Worcester – Journey Through Technology by krothermich and used with permission of the author. All other rights reserved by the author.