Forem: David

NFC Board

David — Thu, 23 Nov 2023 23:00:23 +0000

Starters 🏁

Welcome back to new series, where I will be going through the development process of a software project conducted by me and my friend. I will post weekly updates on progress, milestones, road blocks, and code review.

What is NFC Board? 🎯

The inspiration behind NFC board revolves around the innovative use of Near Field Communication (NFC) tags for automating and streamlining data collection and processing tasks.

Our goal is to develop a dashboard system where NFC tags can be easily initialized and managed for modular design. All the users have to do is set up the dashboard for stat tracking through simply user interface. This approach aims to enhance the user experience by simplifying interactions with the NFC tags.

Our Tech Stack 💻

Frontend:
- React, Redux, Next.js (Vercel Later)
- TypeScript
- Routing handled by Next.js
- Tailwind
Backend:
- Express, Node, Mongo
- Modularly working for now — can add further features later on such as saving user for future access and stat tracking etc.
Things to consider (for further iterations)
- JEST (React Testing Library)

Conclusion ⛳️

Thank you for taking the time to read and I would appreciate any suggestions to improve the quality of my blog. Stay tuned for upcoming progress posts on the NFC Board Series. 🤠

Video Content Aggregator - MoviePy 🎬

David — Mon, 02 Oct 2023 08:37:48 +0000

Starters 🏁

Welcome back to another installment of the "Project" series, where I delve into the technical components of the projects I've undertaken. I apologize for the delays in my posts; the past few weeks have been hectic with school, co-op applications, and just life (haha).
This week, I'll discuss a personal project I made using MoviePy, the YouTube API, and the OpenAI API. If you're unfamiliar with me, please refer to my introductory post. 👇

Pilot - Start of my blog journey 🛫

David ・ Sep 7 '23

#computerscience #programming #pilot #career

Project Overview (Video Content Aggregator) 🙆

As a personal project, I worked on a tool called the "Video Content Aggregator". This tool, combining the YouTube API, OpenAI API, and MoviePy, aids in the creation of dynamic video content in the form of YouTube Shorts. I leaned on a mix of contemporary APIs and MoviePy to ensure the tool's functionality and reliability. Here's a quick overview of the technologies used:

APIs: YouTube, OpenAI, Pexels
Language: Python
Video Editing: MoviePy

Code review 🔍

Requirements ✔️

The code utilizes several libraries including moviepy, google-api-python-client, openai, gtts, etc. You should ensure that you have these libraries installed, along with their dependencies.
Ensure you have the right API keys and the environment variables are set correctly.
Ensure you have ffmpeg installed as it's a prerequisite for moviepy.
You can check the entire list of requirements at requirements.txt.

OpenAI API 🤖

The code interacts with the OpenAI API to generate a fact, a title based on the fact, and a main subject noun based on the fact.
These are three distinct interactions with the API: Fact, Title, and Subject noun, which are important components in fetching video data, aggregation, generation, and upload to YouTube.

def generate_fact():
    prompt = "Give me around 75 words based on an interesting fact."
    response = openai.Completion.create(
        engine="text-davinci-003", prompt=prompt, max_tokens=200)
    return response.choices[0].text.strip()

def generate_title(fact):
    prompt = f"Based on the generated fact, {fact}, return a short title for the video."
    response = openai.Completion.create(
        engine="text-davinci-003", prompt=prompt, max_tokens=30)
    video_title = response.choices[0].text.strip()
    return video_title

def generate_subject_noun(fact):
    prompt = f"Based on the generated fact, {fact}, return a main subject noun."
    response = openai.Completion.create(
        engine="text-davinci-003", prompt=prompt, max_tokens=30)
    return response.choices[0].text.strip()

Fetch Video API Calls 🎥

The code fetches videos from two sources: Pexels and YouTube.
Each fetch function returns up to three videos based on a keyword derived from the generated fact. The keyword is sourced from the generate_subject_noun(fact).

def test_fetch_pexels_videos():
    videos = fetch_pexels_videos("earth")
    assert videos, "Failed to fetch videos from Pexels"

def test_fetch_youtube_videos():
    videos = fetch_youtube_videos("earth")
    assert videos, "Failed to fetch videos from YouTube"

Aggregate and Generate Videos 🎬

The code processes the fetched videos and compiles them, adding subtitles and adjusting their lengths. The videos are resized and cropped.
Audio from Google TTS is used as the background for the video.

def get_tts_audio_clip(text):
    tts = gTTS(text, lang='en', tld='com.au', slow=False)
    audio_bytes = BytesIO()
    tts.write_to_fp(audio_bytes)
    audio_bytes.seek(0)
    temp_audio_filename = os.path.join(OUTPUT_FOLDER, "temp_audio.mp3")
    with open(temp_audio_filename, "wb") as f:
        f.write(audio_bytes.read())
    audio_clip = AudioFileClip(temp_audio_filename)
    return audio_clip

def process_youtube_videos(youtube_videos, audio_clip_duration):
    video_clips = []
    target_duration = audio_clip_duration / 3

    for video_info in youtube_videos:
        video_id = video_info.get('id', {}).get('videoId')
        if video_id:
            youtube_video_url = f"https://www.youtube.com/watch?v={video_id}"
            yt = YouTube(youtube_video_url)
            video_stream = yt.streams.filter(
                progressive=True, file_extension="mp4").order_by("resolution").desc().first()
            video_filename = os.path.join(
                OUTPUT_FOLDER, f"youtube_video_{video_id}.mp4")
            video_stream.download(output_path=OUTPUT_FOLDER,
                                  filename=os.path.basename(video_filename))
            video_clip = VideoFileClip(video_filename).subclip(5)

            if video_clip.duration < target_duration:
                loop_count = int(target_duration // video_clip.duration) + 1
                video_clip = concatenate_videoclips([video_clip] * loop_count)

            video_clip = video_clip.set_duration(target_duration)
            video_clips.append(video_clip)
    return video_clips

def generate_subtitles(fact, final_video_duration):
    fact_parts = textwrap.wrap(fact, width=40)
    subs = []
    interval_duration = 2.95
    start_time = 0
    for part in fact_parts:
        end_time = min(start_time + interval_duration, final_video_duration)
        subs.append(((start_time, end_time), part))
        start_time = end_time
    return subs


def annotate_video_with_subtitles(video, subtitles):
    def annotate(clip, txt, txt_color="white", fontsize=50, font="Xolonium-Bold"):
        txtclip = TextClip(txt, fontsize=fontsize, color=txt_color,
                           font=font, bg_color="black").set_duration(clip.duration)
        txtclip = txtclip.set_position(
            ("center", "center")).set_duration(clip.duration)
        cvc = CompositeVideoClip([clip, txtclip])
        return cvc

    annotated_clips = [annotate(video.subclip(from_t, min(
        to_t, video.duration)), txt) for (from_t, to_t), txt in subtitles]
    return concatenate_videoclips(annotated_clips)

Upload to YouTube 🍿

The code uses YouTube's v3 API to authenticate and upload videos.
The video is uploaded with a title derived from the filename and a pre-defined description.

def authenticate_youtube():
    os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

    flow = google_auth_oauthlib.flow.InstalledAppFlow.from_client_secrets_file(
        CLIENT_SECRETS_FILE, OAUTH_SCOPE)
    credentials = flow.run_local_server(port=0)

    youtube = googleapiclient.discovery.build(
        API_SERVICE_NAME, API_VERSION, credentials=credentials)
    return youtube


def upload_video_to_youtube(youtube, file_path, title, description):
    request = youtube.videos().insert(
        part="snippet,status",
        body={
            "snippet": {
                "categoryId": "22",
                "description": description,
                "title": title
            },
            "status": {
                "privacyStatus": "private",
                "selfDeclaredMadeForKids": False,
                "publishAt": "2023-08-24T00:00:00.0Z"
            }
        },
        media_body=MediaFileUpload(
            file_path, mimetype='video/mp4', resumable=True)
    )
    return request.execute()

Considerations 🧐

I should prioritize restructuring the current linear code to be more modular, breaking tasks down into smaller functions. Handling potential errors is essential, especially in cases where video fetching might yield no results or if there's an unexpected response from the OpenAI API. It's also crucial to manage rate limits and any potential hiccups when interfacing with third-party APIs. Given the concurrent nature of the video processing, I must ensure all resources, like video clips, are appropriately closed after use. Lastly, implementing error handling mechanisms, particularly try-except blocks, in the critical sections will be essential to maintain the stability of the program.

Conclusion ⛳️

Thank you for taking the time to read and I would appreciate any suggestions to improve the quality of my blog. Stay tuned for future posts. 🤠
Check out the YouTube channel!

Check out the project embedded repository below! 👇

gdcho / vc_aggregator

Generate engaging video content utilizing the YouTube API, OpenAI API, and MoviePy. Harness the power of AI and Python automation to craft dynamic YouTube Shorts 🎬

Table of Contents

Video Content Aggregator

Video Content Generator with YouTube API, OpenAI API, and MoviePy. Create dynamic video content with a vc aggregator

Explore the docs »

View Clips
·
Report Bug
·
Request Feature

Technology used

Getting Started

Clone the repo

git clone https://github.com/gdcho/algo_v

Obtain API keys from YouTube, OpenAI, and Pexels and save them in .env file
Install Python requirements
```
pip install -r requirements.txt
```
Obtain OAuth Client Secret from Google Cloud Platform and create yt_client_secret.json
Run the python script
```
 python3 main.py
```

File Contents of folder

📦
├── README.md
├── __pycache__
│   ├── aggregate_fv2.cpython-311.pyc
│   └── upload_yt.cpython-311.pyc
├── aggregate_fv2.py
├── environment_variables.py
├── img
│   ├── logo.png
│   └── vca.png
├── main.py
├── output_folder
│   └── note.txt
├── requirements.txt
├── test_api
│   ├── gpt_prompt.py
│   └── youtube_video_data.py
├── test_script
│   └── test_aggregate.py
├── upload_yt.py
└── yt_client_secret.json

…

View on GitHub

COMP 2800 - Collaborative Story Telling Platform 🤖

David — Sun, 17 Sep 2023 04:18:35 +0000

Starters 🏁

Welcome back to another series of the "Project" series, where I delve into the technical components of the projects I've undertaken. This week, I'll discuss a course project I completed for COMP 2800 at BCIT. If you're unfamiliar with me, please refer to my introductory post.

Pilot - Start of my blog journey 🛫

David ・ Sep 7 '23

#computerscience #programming #pilot #career

COMP 2800 🤖

COMP 2800 is a five-week-long project course for all first and second-term Computer Systems Technology (CST) students at the British Columbia Institute of Technology (BCIT). This year, the project theme was Impactful Intelligence - AI Powered Web Solutions, challenging students to harness artificial intelligence for benevolent purposes or assistance. You can read the full project details here.

Agile scrum methodology 🔄

For this project, we adopted the agile scrum methodology, a blend of agile philosophy and the scrum framework. "Agile" denotes an incremental approach, allowing teams to develop projects in small increments. Scrum, a specific type of agile methodology, is renowned for segmenting projects into sizable chunks known as "sprints." In essence, we employed the agile methodology through weekly sprints and daily scrum meetings.
To learn more about the agile methodology, please refer here 👇

COMP 1800 - A Simple Full-Stack Web Application 🌱

David ・ Sep 11 '23

#javascript #webdev #beginners #tutorial

Project overview 🙆

Our team, comprising four members (including myself), chose to develop a community platform connecting writers and readers. This platform facilitates the crafting of unique stories with the assistance of the OpenAI API. We opted to use the modern technology framework, Next.js. Below, I've outlined our entire tech stack for the project.

Language: JavaScript
Frameworks: Next.js, Node.js, Prisma ORM
Database: MongoDB
Hosting: Vercel

Code review 🔍

Backend

Prisma ORM Initially, we selected Prisma as the ORM for our MongoDB database. What is an ORM? ORM (Object-relational mapping) serves as a "bridge" between object-oriented programs and relational databases, streamlining CRUD operations. For instance, an SQL query fetching specific user information might look like:

 "SELECT id, name, email, country, phone_number FROM users WHERE id = 20"

However, using ORM, we can simplify that process, for example:

users.GetById(20)

Prisma Schema

Prisma's journey begins with its schema, where we define database models and their relationships using the Prisma schema language. One can either craft the Prisma schema from scratch or link it to an existing database. Below is an example of a user model crafted with the Prisma schema.

model User {
  id            String    @id @default(auto()) @map("_id") @db.ObjectId
  name          String?
  penName       String     @default("")
  email         String?    @unique
  emailVerified DateTime?
  image         String?
  voteBranchThreads String[] @default([])
  likeThreads   Json @default("{}")
  accounts      Account[]
  sessions      Session[]
  mainThread    MainThread[]
  branchThread  BranchThread[]
}

Based on the established Prisma schema, we can commence our database queries using the ORM. I'll delve deeper into this in the API routes section.

API routes (Prisma client utility functions)

In this project, I was tasked with backend responsibilities. This involved crafting database queries in form of utility function using the Prisma ORM and developing API route handlers for various HTTP methods. I specifically focused on the branch queries and route handlers. Below, I'll present examples of (1) returning main threads and (2) returning main threads by user id.

(1) Returning main threads

/**
 * getMainThreads
 *
 * @returns {Promise<{threads: any}>}
 */
export async function getMainThreads() {
  try {
    const threads = await prisma.mainThread.findMany({
      include: {
        branchThread: true,
      },
    });
    return { threads };
  } catch (error) {
    return { error };
  } finally {
  }
}

(2) Returning main threads by userId

/**
 * getMainThreadsById
 *
 * @param {ObjectId} id
 * @returns {Promise<{mainThreads}>}
 */
export async function getMainThreadsById(userId) {
  try {
    const mainThreads = await prisma.mainThread.findMany({
      where: { userId },
    });

    return { mainThreads };
  } catch (error) {
    return { error };
  }
}

As evident, the components of these two codes encompass the function signature (name, parameters, return type), functionality (e.g., findMany, include, where), and error handling. For (1) Returning main threads, it's clear that it doesn't require parameters, unlike (2) Returning main threads by userId, which necessitates the userId parameter. Additionally, the database query employs findMany, distinguishing between the 'include' option (which fetches related data) and the 'where' option (filtering based on the provided parameter).

API Route Handlers

From the utility functions created, such as createMainThread, I had to create handlers for the API route. In our repository, we organized the api routes in pages/api folder. Below, I will provide an example of an api route handler using createMainThread utility function. To begin, we have to import the necessary utility function.

import {
  createMainThread,
  getRandomMainThreads,
  getSearchMainThreads,
} from "@/lib/prisma/mainThreads";

Then we have to declare the request and respond of our api route which involves the HTTP method. For example:

const handler = async (req, res) => {
  if (req.method === "GET") {
    try {
      const searchParam = req.query.search;
      const genreParam = req.query.genre;
      const tagParam = req.query.tag;

      const getMainThread =
        searchParam || genreParam || tagParam
          ? getSearchMainThreads(searchParam, genreParam, tagParam)
          : getRandomMainThreads();

      const { randomMainThreads, error } = await getMainThread;

      if (error) throw new Error(error);
      return res.status(200).json({ randomMainThreads });
    } catch (error) {
      return res.status(500).json({ error: error.message });
    }
  }
}

In this code, if the request method is GET, the queries for search, genre, and tag are executed.
const {randomMainThreads, error} = await getMainThread;
This line awaits the result of the getMainThread function, which is expected to return a Promise. It then destructures the result to extract the randomMainThreads and error properties. If any errors are present, an error message will be returned. If there are no errors, the function sends a response with a status code of 200 (OK) and a JSON body containing the randomMainThreads data.

Frontend

As I was mainly tasked with backend, I did not contribute much to the design in the frontend. However, there was a few that I worked on, such as the easter eggs, and the main thread renders, and OpenAI API calls.

React hooks

In the render react hooks, the key points are the useState, useEffect, and useCallback hooks.

useState - useState is a hook that lets you add state management to functional components in React.

const [mainThread, setMainThread] = useState({}));

useEffect - useEffect is a hook that lets you perform side effects in functional components. It can be thought of as componentDidMount, componentDidUpdate, and componentWillUnmount combined from class components.

 useEffect(() => {
    if (mainThread.phase === 6) {
      handleAIGenreGenerate();
    }
  }, [mainThread.phase]);

useCallback - useCallback is a hook that returns a memoized version of the callback function that only changes if one of the dependencies has changed. It's useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

 const handleAIGenreGenerate = useCallback(async () => {
    const contentBody = mainThread.contentBody;
    const endpoint = "https://api.openai.com/v1/completions";

    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        model: "ada:ft-personal-2023-05-02-07-34-38",
        prompt: `${contentBody} \n\n###\n\n`,
        temperature: 0.5,
        max_tokens: 2000,
      }),
    };

API calls (OpenAI)

const handleAIGenreGenerate = useCallback(async () => {
    const contentBody = mainThread.contentBody;
    const endpoint = "https://api.openai.com/v1/completions";

    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        model: "ada:ft-personal-2023-05-02-07-34-38",
        prompt: `${contentBody} \n\n###\n\n`,
        temperature: 0.5,
        max_tokens: 2000,
      }),
    };

    const response = await fetch(endpoint, options);

    const { choices, error } = await response.json();

Breakdown of the code above:
Endpoint: The function targets the https://api.openai.com/v1/completions URL, which is OpenAI's endpoint for generating completions based on a given prompt.
Headers & Body: The request method is POST. The headers specify the content type as application/json and include an authorization token from the environment variables. The body of the request contains a JSON string with several parameters.
Fetching Data: The function uses the fetch API to make the request to the endpoint with the specified options. Once the response is received, it is converted to JSON format.
Response Handling: The function extracts choices and error from the JSON response. The choices typically contain the generated text from OpenAI, while error would contain any error messages if the request failed.

Finetuning

Kaggle dataset
One of the requirements for the project was to make use of a dataset. Since our application was based on story building, we decide to use book genre dataset to implement genre prediction.
OpenAI GPT
For finetuning based on the dataset, I followed the documentations.
The steps in fine-tuning involve:
Installation of openai using pip install
Obtaining API key
Prepare training data in JSONL format and in "prompt", "completion" format
CLI data prepartion and upload
Fine-tuning.
For more information on finetuning, you can check out my research repository.

Conclusion ⛳️

Thank you for taking the time to read and I would appreciate any suggestions to improve the quality of my blog. Stay tuned for future posts. 🤠
Check out the project embedded repository below! 👇

MiSaengg / 2800-202310BBY19

A community platform that connects writers and readers, enabling the creation of unique stories with the help of the OpenAI API 🤖

Table of Contents

Stories of Million

A community platform that connects writers and readers, fosters collaboration, provides feedback, and assists in creating unique stories leveraging the OpenAI API.

Explore the docs »

See Project
·
Report Bug
·
Request Feature

Contributors

Jasper	David	Noel	Juan
_Hi, My name is Jasper, Let's do this! _	_Hi, my name is David, time to harness the power of AI :D _	_Hi, my name is Noel, We got this o2o _	_Hi, my name is Juan! _
`Team Lead Fullstack`	`Fullstack`	`Fullstack`	`Fullstack`

How to use?

1. Create New story	2. Collaborate to story	3. Merge the story

Technology used

How did we use AI?

AI played a pivotal role in the creation of our app, particularly in the coding phase. We employed OpenAI's…

View on GitHub

COMP 1800 - A Simple Full-Stack Web Application 🌱

David — Mon, 11 Sep 2023 04:59:16 +0000

Starters 🏁

This blog post delves into my project experience with COMP 1800. If you're unfamiliar with who I am, you can refer to my introductory post.
For a brief overview of COMP 1800, please check out my most recent post.
I've heard that having a deep understanding of one's projects can be beneficial during interviews. With that in mind, I'm launching a new series titled "Projects", where I'll discuss and delve into the technical components of the projects I've worked on.

COMP 1800 🌱

In COMP 1800, the theme of the project was to address issues related to extreme weather. The project focused on several considerations, including prevention, prediction, preparation, coping, and recovery. My team, consisting of three members, chose to focus on prevention by promoting an eco-friendly lifestyle.

Agile Methodology 💨

COMP 1800 adopted the agile software development life cycle (SDLC) methodology, and the weeks were divided into sprints. As illustrated in the image above, the steps are: (1) Plan, (2) Design, (3) Develop, (4) Test, (5) Deploy, and (6) Review.

Plan
During the planning stage, we crafted new user stories for each sprint, focusing on implementing features based on the red route analysis. We utilized tools like Trello and Figjam for this purpose.
Design
In the design phase, we created wireframes for the features we decided to implement, corresponding to the user story for that specific sprint.
Develop
In the development stage, we began the actual coding for our user stories. Our tech stack included HTML5/CSS3, JavaScript, Bootstrap, Node.js, Express.js, Firebase, and Google Cloud API. I'll delve deeper into this later.
Test
Given that this project was our first, our testing was limited. We didn't implement unit or integration tests. However, we did conduct usability tests with our peers.
Deploy
Diverging from the typical agile process, we didn't fully deploy our application until the end. We used glitch.me for deployment.
Review
Our review took the form of a presentation within the course, during which we received feedback and addressed questions from our peers.

Code review 🔍

Node and express

Initialization 🏁

In our app, we use Express as our Node.js web framework middleware.

// Initialization
const express = require("express");
const app = express();
// Middleware
app.use(express.json());

CORS Headers 💻

We've also set up Cross-Origin Resource Sharing (CORS) headers to allow requests from any origin.

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

Static File Serving & Routes 🚏

With Express, we utilize static file serving. For instance, any files in the ./public/js directory can be accessed via the /js route.

app.use(express.static('app'));
app.use("/js", express.static("./public/js"));
app.use("/css", express.static("./public/css"));
app.use("/img", express.static("./public/img"));

We also manually set up routes for all of our pages, which was somewhat tedious. An example is:

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/app/html/index.html');
});

Server Initialization 🏁

Lastly, we initialized and ran our Express server on port 8000.

app.listen(8000, () => {
  console.log('Server started on port 8000');
});

Firebase

Initialization 🏁

Initializing firebase was relative simple. All we had to do was go to firebase.google.com and start a project. After the project setup, all we had to do was install firebase as node package ($ npm install firebase) and copy the firebase configurations.

//----------------------------------------
//  Your web app's Firebase configuration
//----------------------------------------
var firebaseConfig = { //Input firebase API keys
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

//--------------------------------------------
// initialize the Firebase app
// initialize Firestore database if using it
//--------------------------------------------
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const storage = firebase.storage();

Authentication 🔒

We also used firebase for authentication since it was provided. We used the Firebase UI Widget for authentication and user log-ins. You can check the authentication and the sign in flow here.

JavaScript specifics
The JavaScript code we wrote deals with Document Object Models (DOM), which I will explain in the code that I specifically wrote.

Leaderboard 🏆

Firstly, a variable was made to retrieve a reference to the DOM element with the ID 'leaderboard-body', which involves the tbody element of the leaderboard table.

var leaderboardTable = document.getElementById("leaderboard-body");

Based off the leaderboard logic, I used document.createElement and appendChild method to display the users accordingly.

var user = doc.data();
var points = user.points;

// Increment rank if points are lower than previous user's points
if (points !== previousPoints) {
    rank++;
}

var row = document.createElement("tr");
var rankCell = document.createElement("td");
rankCell.textContent = rank;
row.appendChild(rankCell);

var nameCell = document.createElement("td");
nameCell.appendChild(
    document.createTextNode(user.displayName || user.name)
        );
row.appendChild(nameCell);

var pointsCell = document.createElement("td");
pointsCell.textContent = points;
row.appendChild(pointsCell);

Tasks 📌

For tasks, I randomly displayed tasks using random seed value from the Firestore database.

 const ecoActions = await getEcoActions();
 const randomTasks = [];

 for (let i = 0; i < 3; i++) {
    const randomIndex = Math.floor(Math.random(seed) * ecoActions.length);
    const randomTask = ecoActions[randomIndex];
    randomTasks.push(randomTask);
    ecoActions.splice(randomIndex, 1);
 }

 const taskList = document.getElementById("task-list");
 taskList.innerHTML = "";

Based on the tasks, I implemented functions to pick an image file to upload to call Google Vision API to analyze the image using label detection.

const imageUrl = await fileRef.getDownloadURL();

// Call the Google Vision API to analyze the image
const apiKey = API_KEY;
const url = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
const data = {
      requests: [
         {
           image: {
           source: {
              imageUri: imageUrl,
           },
         },
           features: [
         {
             type: "LABEL_DETECTION",
           },
          ],
         },
      ],
};

const response = await fetch(url, {
      method: "POST",
      headers: {
         "Content-Type": "application/json",
      },
          body: JSON.stringify(data),
});

const json = await response.json();

If the response returns as valid, the task is marked as completed, associated points are added, and completed tasks are removed.

Conclusion ⛳️

This has been a lengthy post, and I thank you for taking the time to read it. I'm not sure if this is the correct way to conduct my code review, so any suggestions are much appreciated!

If you're interested in delving deeper into the code, you can check out the repository.

Github Repository

Thank you once again! Stay tuned for future posts. 🤠

Recap - Reflection of Term 1 🧐

David — Sat, 09 Sep 2023 23:08:08 +0000

Starters 🏁

This blog post discusses my experience during the first term of BCIT's Computer Systems Technology program. For those unfamiliar with me, you can refer to my initial post.

British Columbia Institute of Technology (BCIT) 🎓

BCIT is a public polytechnic institute located in Burnaby, British Columbia. Unlike traditional colleges or universities, the British Columbia Institute of Technology emphasizes practical, flexible, and applied education. The instructors here bring direct, hands-on experience from their respective fields.

Computer Systems Technology (CST) program 💻

The CST program at BCIT is among the most challenging and rigorous diploma programs available. This program melds computer systems theory with hands-on experience in software development. For more details about the program, click here.

Courses in Term 1 📚

COMM 1116 (Business Communications 1)

This is one of the more relaxed courses. It covers writing professional emails, informal reports, and oral presentations. It serves as a prerequisite for COMM 2216 and aids international students in enhancing their English reading and writing skills.

COMP 1100 (CST Program Fundamentals)

Another laid-back course. It operates on a pass/fail system, requiring students to attend lectures and submit weekly journals. The focus is on introducing essential information and resources for success in the CST Diploma Program.

COMP 1113 (Applied Mathematics)

This course is manageable with consistent effort. It covers partial discrete mathematics, an introduction to linear equations, and is segmented into: (1) Boolean algebra and logic circuit design; (2) number systems and data representation; and (3) functions, linear equations, vectors, and matrices. Based off this course, I made a web application to assist in learning.

COMP 1510 (Programming Methods)

This is among the more challenging courses for many CST Term 1 students. It introduces the basics of object-oriented programming in Java (Burnaby campus) or Python (Downtown campus). The course covers programming fundamentals, including design, development, testing, debugging, error-handling, and problem-solving.

COMP 1537 (Web Development 1)

Some may find this course challenging, while those with prior web development experience might find it more accessible. It delves into both front-end and back-end programming using JavaScript, AJAX, DOM, and JSON.

COMP 1712 (Business Analysis and System Design)

This was one of the courses I found most challenging. It delves into the methodologies and tools for designing and developing information systems, covering concepts, processes, communication, decision-making, the software development life cycle (SDLC), data and process modeling, entity-relationship diagrams, databases, and more.

COMP 1800 (Projects 1)

This was one of my favorite courses. It involved group projects to create a small-scale responsive web application, incorporating the UX design process, agile methodology, and software management workflow.

Reflections 🙏

Overall, while Term 1 was demanding, I found it more enjoyable than anticipated. I forged numerous personal and professional connections and learned a tremendous amount in just five months. Beyond the academic growth, the rigorous schedule instilled discipline in my studies and inspired me to plan personal projects for the summer. I'll delve into these in upcoming posts.

Thank you for reading, and stay tuned for future posts! 🤠

Pilot - Start of my blog journey 🛫

David — Thu, 07 Sep 2023 01:31:26 +0000

Welcome to my first post!

I'm glad you're here to witness history.
To those of you who do not know me, my name is David Cho, and I am a Computer Systems Technology at the British Columbia Institute of Technology (BCIT). Before enrolling at BCIT, I graduated from the University of Waterloo with a degree in Honours Science - Bioinformatics.

Why Did I Switch from Science to Tech?

During my time at the University of Waterloo, many of my close friends and roommates were studying computer science. Their influence may have played a role in my eventual decision to pursue a tech career. Another major factor was my love for problem-solving and critical thinking. As a child, I was fascinated by puzzles and riddles and even dreamed of growing up to be like Sherlock Holmes. Fortunately, after taking a few introductory computer science courses at the University of Waterloo, I felt like I had found my calling.

Why Did I Choose BCIT and the CST Program?

After extensive research, I discovered that BCIT and its CST program are popular among new graduates and career switchers. The 2-year CST program emphasizes hands-on learning and focuses more on practical skills than theory, making it ideal for those looking to advance their education.

Did I Make the Right Choice?

As the saying goes, "Life is like a box of chocolates; you never know what you're going to get." I've completed my first term in the CST program and have just started my second term. So far, everything is going well, but life is full of surprises—who knows, I might even become a trout farmer one day.