Robo Scheduler

Inspiration

This project is inspired by the theme of the hackathon. I looked up what people in the mid-19th Century thought education would look like in the future. One of the things they believed was that robots and AI would be key in facilitating mentorship and instruction to students. So, I decided to create a schedule recommending bot to take in assignment deadline data and give a great suggestion on how to finish the assignments on time with a feasible schedule.

What it does

The extension scrapes for all the assignment data from courses on Canvas. Then, it passes this data through an LLM, which then analyses the data and gives a natural language response on how to schedule assignments based on their deadlines. It also creates a convenient list of all the assignments that someone has.

Code Sample: Scraping Assignment Data

javascript // Iterate over each course for (const [courseId, assignments] of Object.entries(data)) { const courseCard = document.createElement('div'); courseCard.className = 'course-card'; courseCard.innerHTML =

Course: ${courseId}

// Create a list for the assignments
const assignmentsList = document.createElement('ul');
assignmentsList.className = 'assignments-list';

// Iterate over each assignment
for (const [assignmentId, assignmentInfo] of Object.entries(assignments)) {
    const assignmentItem = document.createElement('li');
    assignmentItem.className = 'assignment-item';
    assignmentItem.innerHTML = `
        <h3>${assignmentInfo.title}</h3>
        <p>Due Date: ${assignmentInfo.dueDate}</p>
        <p>Score: ${assignmentInfo.score}</p>
    `;
    assignmentsList.appendChild(assignmentItem);
}

courseCard.appendChild(assignmentsList);
coursesContainer.appendChild(courseCard);

} `

How I built it

The development of this Chrome extension utilized a combination of vanilla JavaScript for scripting, HTML for structuring the popup and full-page views, and CSS for styling everything with a retro-futuristic theme. The Chrome Web API played a crucial role in enabling the functionality to scrape assignment data from Canvas, store this information efficiently, and manage the display of data within the user's browser.

Key Technologies and Techniques:

JavaScript: For the logical operations, including scraping assignment data, communicating with the background script, and dynamically updating the HTML based on the fetched assignment data and AI-generated recommendations.
HTML: Used to create the basic structure of the popup and the full-page view, which includes buttons for user interaction, containers for displaying assignment data, and sections for rendering the AI's scheduling recommendations.
CSS: Styled the extension's UI with a retro-futuristic look, incorporating elements like neon glows, futuristic fonts, and a dark theme to give users an engaging and thematic experience.
Chrome Web API: Leveraged to scrape assignment information from Canvas, enabling the extension to access and manipulate web pages, and store and retrieve data using chrome. storage, and open new tabs with the full-page view.
Cloudflare Workers: Hosted the AI processing backend, utilizing Cloudflare's serverless platform to receive assignment data, pass it through a Llama-2 LLM (Large Language Model) for processing, and return insightful and natural-language scheduling recommendations.

Challenges we ran into

The biggest challenge was learning how to make a Chrome extension. I have never made a web browser extension before and had to go through a full tutorial on how to make an extension on the Chrome Web Developer page. And then start to code the application. This took a huge chunk of my first 5 hours of development. I have also never used CloudFlare before to create an API endpoint and this was quite confusing at first but I managed to get a hang of it. I also had an issue with CORS in Chrome. This security feature blocked my API endpoint responses and I had to figure out how to add headers to my server response to allow my response to be fetched by the script. My agreed-upon teammate before the hackathon got sick so I ended up having to take the whole workload on my own which was a significant challenge. I think I was however able to adapt and create something. I have not been able to implement the full spectrum of features that I wanted to. I wanted to add features like:

A sync to calendar API
Add a calendar to the UI page separate from the list to show the users already set calendars
Add auto-scheduling features which implement the suggested schedule by the LLM into the calendar's free time slots. ## Accomplishments that I am proud of This is my first Chrome Extension code. It is also the first time I have incorporated an LLM API into my coding project. I have also not done extensive scraping of data from a website. So this was a fun challenge to take on. ## What we learned I have learnt how to make Chrome extensions and how to use the Chrome Web API. I think this is important considering all major browsers are now based on Chromium. This is a great skill to learn to create user experiences with web applications which need browser extension support.