Skip to content

Commit

Permalink
codegradr
Browse files Browse the repository at this point in the history
  • Loading branch information
Indira Tatikola committed Jun 7, 2024
1 parent 68c9948 commit 91b1cfc
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 34 deletions.
42 changes: 26 additions & 16 deletions project-2-codegradr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,40 @@
<div class="bubble" id="post">
<h1>Project #2: CodeGradr</h1>
<p style="color:lightgrey">2024-02-09</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp; This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition.</p>
<div class="post">
<p>&nbsp;&nbsp;&nbsp;&nbsp; This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition.</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.</p>

<img src="assets/img/codegradr/index.png">
<div class="image-container">
<img src="assets/img/codegradr/index.png">
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp; Copy and paste a student's code, then click "Generate Feedback" and receive a Chat-GPT generated response.</p>
<div class="image-container">
<img src="assets/img/codegradr/feedback.png">
<img src="assets/img/codegradr/compiled_message.png">
<img src="assets/img/codegradr/waiting_for_gpt.png">
<img src="assets/img/codegradr/gpt_response.png">
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp; The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; Copy and paste a student's code, then click "Compile" and "Run" in sequence to make sure the code works.</p>
<div class="image-container">
<img src="assets/img/codegradr/feedback.png">
<img src="assets/img/codegradr/compiled_message.png">
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp; We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. Take a look at our code <a href="https://github.com/amchelapurath2023/1332AI">here</a>.</p>
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp; Then, click "Generate Feedback" for a ChatGPT generated response based on the JUnits the student's code failed and the correct implementation.</p>
<div class="image-container">
<img src="assets/img/codegradr/waiting_for_gpt.png">
<img src="assets/img/codegradr/gpt_response.png">
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp; The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were.</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp; We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. Take a look at our code <a href="https://github.com/amchelapurath2023/1332AI">here</a>.</p>

</div>
</div>
</body>

<script>
const parent = document.getElementById('post');
const images = document.querySelector('.image-container');
images.style.width = parent.offsetWidth;
images.style.display = 'flex'
images.style.flexWrap = 'wrap'
</script>
</html>
28 changes: 10 additions & 18 deletions styles/minima.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,12 @@ img {
border-radius: 30px;
}

.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

/**
* Figures
*/
Expand Down Expand Up @@ -173,23 +179,11 @@ pre > code {
}

/**
.post-bubble {
max-width: -webkit-calc(800px - (30px * 2));
max-width: calc(800px - 30px * 2);
margin: auto;
padding-top: 10px;
background-color: #f4f1f1;
border-radius: 30px;
}
@media screen and (max-width: 1000px) {
.post-bubble {
max-width: -webkit-calc(800px - (30px));
max-width: calc(800px - (30px));
padding-right: 15px;
padding-left: 15px;
}
* Posts
*/
.post img{
justify-content: center;
}
*/

/**
* POST THUMBNAIL STYLING
Expand Down Expand Up @@ -693,8 +687,6 @@ table th {
color: #099;
}

/*# sourceMappingURL=minima.css.map */


/**
IMAGE GALLERY EXPERIMENT
Expand Down

0 comments on commit 91b1cfc

Please sign in to comment.