Jerry's Capstone Technology Blog

After a year of work, my Capstone Project has come to an end. At first I chose this project because I was interested in AI, but actually I found that in this project, the part we can be responsible for has little to do with AI. What we do is more about the front-end part of the webapp. Of course, these are still very interesting. I also learned a lot of new web front-end architecture and some knowledge of building small databases. Of course, in order to learn AI-related knowledge, I also registered CS331 and CS434.

In this year-long project, I learned a lot. For social aspect, I become doing better scheduling the tasks and improving communication with other members of the team. For technical aspects, I have knewed more about the application the front-end Python Flask and JS. These experiences let me make great progress in web development. When I apply for internships or future jobs, this experience allows me to confidently say that I have the ability to do a great job with co-workers.

Finally, appreciate the employees of HP who gave me this opportunity and the instructor and teaching assistants who provided me with the guidance of E-campus CS46X. Hope we can meet again someday in the future.

As a student nearing graduation, looking for an internship is the next important step, and most students do not have much experience in this. I am also looking for an internship, here I will share some useful resources and methods of using these resources.

The first step is to make an appointment with your advisor. They have a lot of resources and knowledge about internship searching. The questions you asked them the previous students would also ask. And they will provide you with many suggestions that you didn’t think of before.

The second step is to prepare a beautiful resume. The first thing is that the layout of the resume should look very professional. The HR needs to read dozens or even hundreds of resumes a day, and those resumes that are not professionally formatted are basically ignored. When writing a resume, assume that the person who reads the resume only has about 30 seconds to read, and don’t write too much text. This is the Career Development Center of our school, where you can learn about the difference between RÉSUMÉS and CURRICULUM VITAE (CV), and make an appointment to help you improve them.

The third step is to prepare to go to school or online platforms to communicate with your potential employers and submit your resume and cover letter. This step requires you to always pay attention to the campus interview event mentioned in the email sent to you by the school. The Handshake and LinkedIn on the Internet are also very useful resources.

Finally, I hope everyone can find a good internship.

In the process of continuing to contribute to the project, I found that the readability of the entire repository was greatly reduced, even though our team members left a lot of comments. With the increase of functions, putting all the code into app.py will make subsequent development and maintenance becomes more and more troublesome. We need to refactor the project code to make the project organization more reasonable. Since our project uses Flask as our web framework, more than 90% of our code is python code. The python environment has two very interesting concepts (Package and Module) to help developers better use python for modular programming. Through modular programming, we can split large projects into small subtasks and submodules.

The benefits of modular programming are as follows:

1. Simplify programming, no need to focus on the entire project;
2. Good maintainability, easy to troubleshoot.
3. Good reusability, directly use the written module, no need to rewrite.

Flask has no fixed requirements for the project structure, so I decided to use Packages to organize the program. You may ask, what is a package? Simply put, a package is a collection of multiple modules. When the project is large and there are many modules, we can put the modules in the package for easy management. You can use the import statement to import other Python files (modules) and use the classes, functions, or variables defined in the module to reuse the code segments.

Python module: https://docs.python.org/3/tutorial/modules.html

This week our Project owner completed their training for Neural Network and uploaded it to GitHub. When I personally called and debugged these new codes, I found that I was too unfamiliar with Github Commands (basically, I had to search on google every five minutes). I use Git every day, but I can’t remember many commands. So I decided to create my own blog for daily used Github Commands Collections.

Generally speaking, we only need to remember the 6 commands in the figure below for daily use. But if we want to use it skillfully, we have to remember 60-100 commands.

• Create New Project

# Create a new Git code repository in the current directory
$ git init

# Create a new directory and initialize it as a Git code repository
$ git init [project-name]

# Download a project and its entire code history
$ git clone [url]

• Configuration

# Show current Git configuration
$ git config --list

# Edit Git configuration file
$ git config -e [--global]

# Set user information when submitting code
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"

• Add/Delete Files

# Add the specified file
$ git add [file1] [file2] ...

# Add the specified directory, including subdirectories
$ git add [dir]

# Add all files in the current directory
$ git add .

# Before adding each change, it will ask for confirmation
# For multiple changes of the same file, it can be submitted in stages
$ git add -p

# Delete the specified file
$ git rm [file1] [file2] ...

# Stop tracking the specified file, but the file will remain in the local
$ git rm --cached [file]

# Rename the file and put this rename into the temporary storage area
$ git mv [file-original] [file-renamed]

• Upload code

# Submit the temporary storage area to the repository
$ git commit -m [message]

# Submit the specified files in the temporary storage area to the repository
$ git commit [file1] [file2] ... -m [message]

# Submit the changes in the work area since the last commit, directly to the repository
$ git commit -a

# Display all diff information when submitting
$ git commit -v

# Use a new commit to replace the previous commit
# If there is no new change in the code, it is used to rewrite the last commit information
$ git commit --amend -m [message]

# Redo the last commit and include the new changes in the specified file
$ git commit --amend [file1] [file2] ...

• Branch

# List all local branches
$ git branch

# List all remote branches
$ git branch -r

# List all local branches and remote branches
$ git branch -a

# Create a new branch but still stay in the current branch
$ git branch [branch-name]

# Create a new branch and switch to this branch
$ git checkout -b [branch]

# Create a new branch and point to the specified commit
$ git branch [branch] [commit]

# Create a new branch and establish a tracking relationship with the specified remote branch
$ git branch --track [branch] [remote-branch]

# Switch to the specified branch and update the workspace
$ git checkout [branch-name]

# Switch to the previous branch
$ git checkout -

# Establish a tracking relationship between the current branch and the specified remote branch
$ git branch --set-upstream [branch] [remote-branch]

# Merge the specified branch to the current branch
$ git merge [branch]

# Choose a commit and merge it into the current branch
$ git cherry-pick [commit]

# Delete branch
$ git branch -d [branch-name]

# Delete remote branch
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]

• View Information

# Show changed files
$ git status

# Display the version history of the current branch
$ git log

# Show the commit history and the files that have changed each time
$ git log --stat

# Search submission history according to keywords
$ git log -S [keyword]

• Remote Sync

# Download all changes in the remote repository
$ git fetch [remote]

# Show all remote repository
$ git remote -v

# Display information about a remote repository
$ git remote show [remote]

# Add a new remote repository and name it
$ git remote add [shortname] [url]

# Retrieve changes in the remote repository and merge with the local branch
$ git pull [remote] [branch]

# Upload the local specified branch to the remote repository
$ git push [remote] [branch]

# Forcibly push the current branch to the remote repository, even if there is a conflict
$ git push [remote] --force

# Push all branches to the remote repository
$ git push [remote] --all

• RollBack

# Restore the specified files in the temporary storage area to the work area
$ git checkout [file]

# Restore the specified file of a commit to the temporary storage area and work area
$ git checkout [commit] [file]

# Restore all files in the temporary storage area to the work area
$ git checkout .

# Reset the specified file in the temporary storage area to be consistent with the last commit, but the work area remains unchanged
$ git reset [file]

# Reset the temporary storage area and work area to be consistent with the last commit
$ git reset --hard

# Reset the pointer of the current branch to the specified commit and reset the temporary storage area at the same time, but the work area remains unchanged
$ git reset [commit]

# Reset the HEAD of the current branch to the specified commit and reset the temporary storage area and work area at the same time, consistent with the specified commit
$ git reset --hard [commit]

# Reset the current HEAD to the specified commit but keep the temporary storage area and work area unchanged
$ git reset --keep [commit]

# Create a new commit to revoke the specified commit
# All changes in the latter will be offset by the former and applied to the current branch
$ git revert [commit]

# Temporarily remove uncommitted changes and move them in later
$ git stash
$ git stash pop

Git Commands Tutorial ：https://guides.github.com/introduction/git-handbook/

Since the deployment of our Neural Network is approaching, this week I started to learn some primary Pytorch related knowledge (because our project is implemented by Flask, and Flask is implemented by Python, so we use the Pytorch with the same implementation by Python for our NN).

But before learning about Pytorch, I found that I first need to understand what Neural Network is.

“Neural network” is an underlying model of artificial intelligence. Many complex applications (such as pattern recognition, automatic control) and advanced models (such as deep learning) are based on it. Learning artificial intelligence must start from it.

1.Perceptron

• Perceptron
  Scientists have always hoped to simulate the human brain and create machines that can think. Why can people think? Scientists discovered that the reason lies in the human body’s neural network. Since the basis of thinking is neurons, if you can create artificial neurons, you can form an artificial neural network to simulate thinking. In the 1960s, the earliest “artificial neuron” model called “perceptron” was proposed, which is still in use today.
• Examples of perceptrons
  Let’s look at an example. The city is holding an annual video game exhibition, I can’t make up my mind whether to visit it on weekends. I decided to consider three factors.
  1. Weather: Is it sunny on weekends?
  2. Companion: Can you find someone to go with?
  3. Price: Are the tickets affordable?
• This constitutes a perceptron. The above three factors are external input, and the final decision is the output of the sensor. If all three factors are Yes (represented by 1), the output is 1 (to visit); if they are all No (represented by 0), the output is 0 (not to visit).

2. Weight and  Biases

Seeing this, you will definitely ask: If some factors are established and others are not established, what is the output? For example, the weather is good on weekends and the tickets are not expensive, but I can’t find my partner. Should I visit? In reality, various factors are rarely of equal importance: some factors are decisive factors, while others are secondary factors. Therefore, you can assign weights to these factors to represent their different importance.

3. Decision Model

A single perceptron constitutes a simple decision model, which is ready for use. In the real world, the actual decision model is much more complicated, and it is a multi-layer network composed of multiple perceptrons.

4. The Operation Process of the Neural Network

To build a neural network, three conditions need to be met.

Input and output
Weight (w) and Bias (b)
Structure of multilayer perceptron

Among them, the most difficult part is to determine the weight (w) and bias (b). So far, these two values ​​have been given subjectively, but it is difficult to estimate their values ​​in reality. There must be a way to find out.

This method is trial and error. Other parameters remain unchanged, and small changes in w (or b) are recorded as Δw (or Δb), and then observe any changes in the output. Repeat this process until we get the set of w and b corresponding to the most accurate output, which is the value we want. This process is called model training.

Therefore, the operation process of the neural network is as follows.

• Determine input and output
• Find one or more algorithms that can get output from the input
• Find a set of data sets with known answers to train the model and estimate w and b
• Once new data is generated and input into the model, the results can be obtained, and w and b are corrected at the same time.

I appreciate Michael Nielsen’s open-source textbook (Neural Networks and Deep Learning) for helping me. Of course, this blog is just my basic and primary understanding of NN. If there are some errors or miss, I hope I can correct them in the future.

Link for Neural Networks and Deep Learning：http://neuralnetworksanddeeplearning.com/index.html

This weekend is a very memorable weekend. A four-day continuous heavy snow has caused many inconveniences to the people around Portland. Power cuts, cars buried in snow, or skidded at intersections. Fortunately, due to the impact of Covid-19, there are not too many people who want to go out. However, this Saturday is the Chinese New Year, so my friends and I decided to drive to Portland for dinner. Chinese New Year is a very important festival to Chinese people, so even if we are both surrounded by endless tasks, we still want to go out and have a delicious meal. As a person from southern China, such heavy snow is unusual and seldom seen for me. The road surface marking is completely covered by snow, and the drivers don’t know how to maintain a safe distance from each other. Everyone can only drive slowly. On both sides of the highway, there are many vehicles that flipped out because of slipping and vehicles that broke down in heavy snow. When we were close to the restaurant, we arrived at a snow-covered intersection. Two cars stuck at this intersection and the cars could not move forward because of the snow. My friends and I immediately went to help them push the cart together, and finally, they left this intersection successfully. However, our car also is stuck at the intersection, but what makes people happy is that, just like we helped others, other people also helped us push the car out of this intersection. When we got back to the car, my ears and hands were numb. For a child who grew up in a city that has never snowed, this is really an interesting experience.

Last week I finally successfully deployed cfd3_input_generator.py to server.py. And Zhaoxiang re-modified the input form again so that the input form of the predict_input page can be better collected the data for the geometry preview generator to generate a better preview. But I still need to modularize cfd3_input_generator just in case I need to deploy that again in subsequent tasks.

For some personal reasons, I started to try to use Linux-like systems more proficiently. Since ubuntu has a fairly complete UI, I decided to choose it as my practicing tool for advanced technology. Since my laptop on the ubuntu system did not work well for some reason, I decided to use VMware to create a virtual machine to set up my Ubuntu system.

VMware Set Up Guide： https://www.vmware.com/support/ws5/doc/ws_newguest_setup_simple_steps.html

Ubuntu Practice：https://beginlinux.com/server_training/8-ubuntuadmin/6-ubmanual

Another busy week, I have two midterm exams this week, and another one next week. So I don’t spend too much time on the project, even though I have tried my best to rearrange my schedule. There seem to be some problems in the communication with another team. They seem to be unfamiliar with the tasks they are assigned, and the project owner says that the Neural Network for this web app is ready. Before deploying it, they hope we can have a demo for prototype 1 at the meeting next week, but the task of another team is an indispensable part of this prototype.

Our project encountered some obstacles this week. When Deloy generates static input preview page function for users. I find that the flask web framework is not easy to handle static HTML files. But the result of my current deployed cfd3_input_generator.py is to generate a static HTML file. So I am trying to deconstruct this library and redeploy it in server.py, and change the results to the image file to append to templates.

But the other parts of the project are not bad. I have complete the single input form to store the input data into the database function and also complete a draft of the output page. This simple database is implemented by SQLAlchemy, which has many very convenient encapsulated functions in python. So far this database is just a simple replacement for the global value, but it will play a big role in subsequent output saving.

SQLAlchemy： https://www.sqlalchemy.org/

This week is still a busy week, but both other courses and projects have been halfway through. Certain results can be seen in many ways. Fortunately, the accomplishment of my study plan and project plan is not bad. In ECE and math courses, I got good grades in assignments and quiz, and I have a solid grasp of them. For the Capstone project, we have achieved many prototype-compliant results in many aspects. Only a few function implementation tasks are left and the beginning of Neural Network’s deployment is close. In general, although I felt very tiring, the results I saw greatly increased my motivation.

Since the last stand-up meeting, our team has held a meeting with another team to exchange the details of the next integration and the remaining functional implementation tasks. Due to the reduction in our team members, these tasks were assigned to our two groups. At the meeting, I divided it into three main task blocks: input page, geometry preview generation, and output page. I also subdivided these tasks on the Kanban task board, and concrete them into subtasks. We have completed the prototype of the input page and output page. Before the next stand-up meeting, we will complete the task of importing parameters into the geometry preview page and generating the geometry preview page.

Of course, we have also encountered many problems. For example, the problem we are facing now is to turn multiple inputs into multiple buttons for users to select different sets of data to generate geometrical previews. And in the next task, we need to store the output page. This seems to require us to start a new learning curve.

“Let life be beautiful like summer flowers and death like autumn leaves” (Rabindranath Tagore).

Before talking about the Capstone Project process this week, I want to share a little trick I found, using n&(n-1)==0 to check if n is either zero or the exact power of two. If this logical statement is equal to true, then n is 0 or the exact power of two, otherwise, it is not. And the principle of this is very interesting and simple. All the power of two can be represented in the form 1000……0000. If you subtract one from it, you will get 111……1111. Here we are going to use AND gate, the primary knowledge from any Electrical Engineer course. After AND these two binary numbers, you will get 0000……0000. Magically, the value which is not the exact power of two will give you a non-zero result after these operations.

For this week, sadly our team member Jarrod disappeared again in the second sprint meeting. After responding to our instructor, he has been moved out of our team. In the meeting, to help us better implement our web application this week, the Project owner provided two main function prototypes. These prototypes are simply implemented by HTML and JS code, which provides great instruction for the next development. It allows the sudden situation of attrition without delaying the schedule. We also started communication with the other team under the same project to prepare the integration of the two teams. The reassignment of the tasks of the departing team members and the addition of new integration tasks necessitated the need to rearrange the Kanban task boards.

After finishing weekly work, I found that it’s been four years since the last time I spent the New Year with my family. I am still studying abroad like a stray bird, which reminds me of a poem. I put it at the beginning of this blog to encourage myself.

After winter break, it’s time to go back to our Capstone blog! During this tough time, there are no friends gatherings, no travel, no delicious restaurants, but I have a clear understanding of the basic information of the Flask web framework during this break. Although I cannot say that I understand all aspects of Flask, I believe I have enough knowledge to find a solution when I encounter a problem.

Flask tutorial is a very novice-oriented Flask tutorial, and now I am very familiar with the application of view functions and templates after going through it. This makes the code refactoring of the project I am taking over now very handy. At the same time, I am also trying to communicate with my team members to ensure they have enough knowledge about Flask to complete this project.

In terms of data visualization, group members and I are using Plotly technology to implement this user story, but currently, we have encountered a problem. When trying to represent multiple dashboards on a single webpage, we found that we can only represent one. Now we are looking for more in-depth Plotly literature to expand our skill pool.

There are three main tasks I should complete by the end of next week:

1. Refactoring code (especially HTML code) makes our code more concise and readable.
2. Find a way to represent the data via multiple dashboards on the same webpage by using Plotly.
3. Make sure everyone is learning the knowledge that contributes to this project.