├── packages └── webapp │ ├── .eslintrc.json │ ├── src │ ├── app │ │ ├── favicon.ico │ │ ├── layout.tsx │ │ ├── globals.css │ │ └── page.tsx │ ├── lib │ │ └── chatbot │ │ │ ├── ChatMessage.ts │ │ │ └── MessageHandler.tsx │ ├── pages │ │ ├── _app.tsx │ │ ├── rubric-generator │ │ │ ├── layout.tsx │ │ │ └── home │ │ │ │ └── index.tsx │ │ ├── api │ │ │ └── openai.ts │ │ └── assignment-generator │ │ │ └── home │ │ │ └── index.tsx │ ├── components │ │ └── chatbot │ │ │ ├── ChatMessage.tsx │ │ │ └── ChatInput.tsx │ └── styles │ │ ├── home.css │ │ └── globals.css │ ├── postcss.config.mjs │ ├── next.config.mjs │ ├── .gitignore │ ├── tailwind.config.ts │ ├── public │ ├── vercel.svg │ └── next.svg │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── Documents ├── AutoGraderIdeation.pdf ├── Ethical_Implications.md ├── Integration_of_rag.md └── Initial_Ideation_Expansion.md ├── pull_request_template.md ├── Notes ├── Project_Overview_Discussion.md └── RubricGenerator.md ├── Readme.md └── CONTRIBUTING.md /packages/webapp/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /Documents/AutoGraderIdeation.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autograder-org/autoGrader-frontend/HEAD/Documents/AutoGraderIdeation.pdf -------------------------------------------------------------------------------- /packages/webapp/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autograder-org/autoGrader-frontend/HEAD/packages/webapp/src/app/favicon.ico -------------------------------------------------------------------------------- /packages/webapp/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/webapp/src/lib/chatbot/ChatMessage.ts: -------------------------------------------------------------------------------- 1 | export type ChatMessage = { 2 | role: 'system' | 'user' | 'assistant' | 'function'; 3 | content: string; 4 | name?: string; // Only for function messages 5 | }; 6 | -------------------------------------------------------------------------------- /packages/webapp/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | // packages/webapp/src/pages/_app.tsx 2 | import '../styles/globals.css'; // Path to your global CSS file 3 | import type { AppProps } from 'next/app'; 4 | 5 | // The custom App component receives the Component and pageProps 6 | function MyApp({ Component, pageProps }: AppProps) { 7 | return ; 8 | } 9 | 10 | export default MyApp; 11 | -------------------------------------------------------------------------------- /packages/webapp/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | 3 | import path from 'path'; 4 | 5 | /** 6 | * @type {import('next').NextConfig} 7 | **/ 8 | const nextConfig = { 9 | webpack: (config, { isServer }) => { 10 | config.resolve.alias['@'] = path.join(process.cwd(), 'src'); 11 | return config; 12 | }, 13 | // experimental: { 14 | // appDir: true, 15 | // }, 16 | }; 17 | 18 | export default nextConfig; 19 | -------------------------------------------------------------------------------- /packages/webapp/src/pages/rubric-generator/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Inter } from "next/font/google"; 2 | import "../../styles/globals.css"; 3 | 4 | const inter = Inter({ subsets: ["latin"] }); 5 | 6 | export default function RootLayout({ 7 | children, 8 | }: Readonly<{ 9 | children: React.ReactNode; 10 | }>) { 11 | return ( 12 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Title 2 | 3 | 4 | ## Description 5 | 6 | 7 | ## Code files changed 8 | 9 | 10 | ## Screenshots 11 | 12 | 13 | ## Tests 14 | 15 | -------------------------------------------------------------------------------- /packages/webapp/src/pages/api/openai.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server'; 2 | 3 | export const runtime = 'edge'; 4 | 5 | export default async function handler(request: Request) { 6 | const apiKey = process.env.OPENAI_API_KEY; 7 | 8 | if (!apiKey) { 9 | console.error('Missing OpenAI API Key'); 10 | return new NextResponse('Internal Server Error', { status: 500 }); 11 | } else { 12 | return NextResponse.json({ apiKey }); 13 | } 14 | } -------------------------------------------------------------------------------- /packages/webapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /packages/webapp/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /packages/webapp/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /packages/webapp/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/webapp/src/components/chatbot/ChatMessage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 | import { faUser, faRobot } from '@fortawesome/free-solid-svg-icons'; 4 | import { ChatMessage as ChatMessageType } from '@/lib/chatbot/ChatMessage'; 5 | 6 | interface ChatMessageProps { 7 | message: ChatMessageType; 8 | } 9 | 10 | const ChatMessage: React.FC = ({ message }) => { 11 | const icon = message.role === 'user' ? faUser : faRobot; 12 | return ( 13 |

14 |

15 | {message.content} 16 |

17 | ); 18 | }; 19 | 20 | export default ChatMessage; 21 | -------------------------------------------------------------------------------- /packages/webapp/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": [ 4 | "dom", 5 | "dom.iterable", 6 | "esnext" 7 | ], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "esModuleInterop": true, 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "jsx": "preserve", 18 | "incremental": true, 19 | "plugins": [ 20 | { 21 | "name": "next" 22 | } 23 | ], 24 | "paths": { 25 | "@/*": [ 26 | "./src/*" 27 | ] 28 | }, 29 | "forceConsistentCasingInFileNames": true 30 | }, 31 | "include": [ 32 | "next-env.d.ts", 33 | "**/*.ts", 34 | "**/*.tsx", 35 | ".next/types/**/*.ts" 36 | ], 37 | "exclude": [ 38 | "node_modules" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/webapp/src/components/chatbot/ChatInput.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | interface ChatInputProps { 4 | onSendMessage: (message: string) => void; 5 | isLoading: boolean; // to display loading state 6 | } 7 | 8 | const ChatInput: React.FC = ({ onSendMessage, isLoading }) => { 9 | const [input, setInput] = useState(''); 10 | 11 | const handleSubmit = (e: React.FormEvent) => { 12 | e.preventDefault(); 13 | if (input.trim()) { 14 | onSendMessage(input); 15 | setInput(''); 16 | } 17 | }; 18 | 19 | return ( 20 |

21 |

setInput(e.target.value)}
24 |                 disabled={isLoading}
25 |                 placeholder="Type your message..."
26 |                 style={{ width: '80%', minHeight: '40px', resize: 'vertical' }}
27 |             />
28 |         <button type="submit" disabled={isLoading}>
29 |           {isLoading ? 'Sending...' : 'Send'}
30 |         </button>
31 |       </form>
32 |   );
33 | };
34 | 
35 | export default ChatInput;
36 |

--------------------------------------------------------------------------------
/packages/webapp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@fortawesome/free-solid-svg-icons": "^6.5.2",
13 |     "@fortawesome/react-fontawesome": "^0.2.2",
14 |     "@testing-library/jest-dom": "^5.17.0",
15 |     "@testing-library/react": "^13.4.0",
16 |     "@testing-library/user-event": "^13.5.0",
17 |     "@types/jest": "^27.5.2",
18 |     "@types/node": "^16.18.97",
19 |     "@types/react": "^18.3.2",
20 |     "@types/react-dom": "^18.3.0",
21 |     "next": "14.2.2",
22 |     "openai": "^4.45.0",
23 |     "react": "^18.3.1",
24 |     "react-dom": "^18.3.1",
25 |     "react-scripts": "^5.0.1",
26 |     "web-vitals": "^2.1.4"
27 |   },
28 |   "devDependencies": {
29 |     "@types/node": "^20",
30 |     "@types/react": "^18",
31 |     "@types/react-dom": "^18",
32 |     "eslint": "^8",
33 |     "eslint-config-next": "14.2.2",
34 |     "postcss": "^8",
35 |     "tailwindcss": "^3.4.1",
36 |     "typescript": "^4.9.5"
37 |   }
38 | }
39 |

--------------------------------------------------------------------------------
/packages/webapp/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

--------------------------------------------------------------------------------
/packages/webapp/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 |

--------------------------------------------------------------------------------
/Documents/Ethical_Implications.md:
--------------------------------------------------------------------------------
 1 | # Will TAs lose their jobs ?
 2 | 
 3 | Considering the ethical implications of this project is important, especially when it could potentially impact jobs. Here are some key points to consider:
 4 | 
 5 | 1. **Augmentation vs. Replacement**: Think of this project as a tool to assist TAs and professors, not necessarily to replace them. It can handle repetitive aspects of grading, allowing educators to focus on more nuanced and qualitative feedback.
 6 | 
 7 | 2. **Accuracy and Fairness**: Automated systems might not fully capture the complexity of student responses, especially in subjective areas. Human oversight ensures that the grading remains fair and considers the nuances that a machine might miss.
 8 | 
 9 | 3. **Educational Value**: The interaction between students and educators is a valuable part of learning. Feedback from humans can be more personalized and motivational. Consider how this tool can enhance this interaction rather than diminish it.
10 | 
11 | 4. **Job Redefinition**: Technological advancements often shift roles rather than eliminate them. TAs might spend less time on grading but more on providing in-depth feedback, mentoring students, and engaging in interactive teaching.
12 | 
13 | 5. **Transparency**: Being transparent with stakeholders about the tool's capabilities and limitations. Ensure that its implementation is in line with the educational institution's values and mission.
14 | 
15 | 6. **Continuous Learning**: Encourage the system to learn from the TAs' and professors' inputs, making it a collaborative tool that enhances educational outcomes rather than a standalone solution.
16 | 
17 | By carefully considering these aspects, we can develop a tool that supports educational goals and respects the roles of all stakeholders involved.
18 |

--------------------------------------------------------------------------------
/packages/webapp/src/styles/home.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .sidebar {
  3 |   width: 25%;
  4 |   background-color: #23272a;
  5 |   color: #fff;
  6 |   padding: 10px;
  7 | }
  8 | 
  9 | .new-chat-button {
 10 |   display: block;
 11 |   width: 100%;
 12 |   padding: 10px;
 13 |   margin-bottom: 10px;
 14 |   background-color: #7289da;
 15 |   border: none;
 16 |   color: #fff;
 17 |   cursor: pointer;
 18 | }
 19 | 
 20 | .search-bar input {
 21 |   width: 100%;
 22 |   padding: 10px;
 23 |   margin-bottom: 10px;
 24 | }
 25 | 
 26 | .chat-list {
 27 |   flex-grow: 1;
 28 | }
 29 | 
 30 | .chat-window {
 31 |   width: 75%;
 32 |   display: flex;
 33 |   flex-direction: column;
 34 | }
 35 | 
 36 | .chat-header {
 37 |   padding: 10px;
 38 |   background-color: #2c2f33;
 39 |   color: #fff;
 40 | }
 41 | 
 42 | .chat-messages {
 43 |   flex-grow: 1;
 44 |   padding: 10px;
 45 |   overflow-y: auto;
 46 |   background-color: #2c2f33;
 47 | }
 48 | 
 49 | .message {
 50 |   display: flex;
 51 |   align-items: center;
 52 |   margin-bottom: 10px;
 53 | }
 54 | 
 55 | .message-content {
 56 |   background-color: #99aab5;
 57 |   padding: 10px;
 58 |   border-radius: 5px;
 59 | }
 60 | 
 61 | .message.user .message-content {
 62 |   background-color: #7289da;
 63 | }
 64 | 
 65 | .message.assistant .message-content {
 66 |   background-color: #99aab5;
 67 | }
 68 | 
 69 | .message.loading {
 70 |   color: #99aab5;
 71 | }
 72 | 
 73 | .chat-input {
 74 |   padding: 10px;
 75 |   background-color: #23272a;
 76 |   display: flex;
 77 |   align-items: center;
 78 | }
 79 | 
 80 | .chat-input textarea {
 81 |   flex-grow: 1;
 82 |   padding: 10px;
 83 |   margin-right: 10px;
 84 |   resize: none;
 85 | }
 86 | 
 87 | .chat-input button {
 88 |   padding: 10px 20px;
 89 |   background-color: #7289da;
 90 |   border: none;
 91 |   color: #fff;
 92 |   cursor: pointer;
 93 | }
 94 | 
 95 | .chat-input button:disabled {
 96 |   background-color: #4f5d75;
 97 |   cursor: not-allowed;
 98 | }
 99 | 
100 | .message-icon {
101 |   margin-right: 10px;
102 |   color: #fff; /* Set the color of the icons to white */
103 | }

--------------------------------------------------------------------------------
/packages/webapp/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | /*@tailwind base;*/
  2 | /*@tailwind components;*/
  3 | /*@tailwind utilities;*/
  4 | 
  5 | /*:root {*/
  6 | /*  --foreground-rgb: 0, 0, 0;*/
  7 | /*  --background-start-rgb: 214, 219, 220;*/
  8 | /*  --background-end-rgb: 255, 255, 255;*/
  9 | /*}*/
 10 | 
 11 | /*input, textarea { !* Target both inputs and textareas *!*/
 12 | /*  color: inherit;          !* Inherit color from parent (body) *!*/
 13 | /*  background-color: inherit;!* Inherit background from parent (body) *!*/
 14 | /*}*/
 15 | 
 16 | /*@media (prefers-color-scheme: dark) {*/
 17 | /*  :root {*/
 18 | /*    --foreground-rgb: 255, 255, 255;*/
 19 | /*    --background-start-rgb: 0, 0, 0;   !* Black background *!*/
 20 | /*    --background-end-rgb: 0, 0, 0;    !* Black background *!*/
 21 | /*  }*/
 22 | 
 23 | /*  input, textarea {*/
 24 | /*    color: rgb(var(--foreground-rgb)); !* Explicitly set white in dark mode *!*/
 25 | /*  }*/
 26 | /*}*/
 27 | 
 28 | /*body {*/
 29 | /*  color: rgb(var(--foreground-rgb));*/
 30 | /*  background: linear-gradient(*/
 31 | /*      to bottom,*/
 32 | /*      transparent,*/
 33 | /*      rgb(var(--background-end-rgb))*/
 34 | /*    )*/
 35 | /*    rgb(var(--background-start-rgb));*/
 36 | /*}*/
 37 | 
 38 | /*@layer utilities {*/
 39 | /*  .text-balance {*/
 40 | /*    text-wrap: balance;*/
 41 | /*  }*/
 42 | /*}*/
 43 | /* globals.css */
 44 | body {
 45 |   margin: 0;
 46 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 47 | }
 48 | 
 49 | * {
 50 |   box-sizing: border-box;
 51 | }
 52 | 
 53 | /* Utility classes */
 54 | .flex {
 55 |   display: flex;
 56 | }
 57 | 
 58 | .min-h-screen {
 59 |   min-height: 100vh;
 60 | }
 61 | 
 62 | .w-4 {
 63 |   width: 25%;
 64 | }
 65 | 
 66 | .flex-1 {
 67 |   flex: 1;
 68 | }
 69 | 
 70 | /* Color classes */
 71 | .bg-black {
 72 |   background-color: #000;
 73 | }
 74 | 
 75 | .bg-gray-800 {
 76 |   background-color: #2d3748;
 77 | }
 78 | 
 79 | .bg-gray-900 {
 80 |   background-color: #1a202c;
 81 | }
 82 | 
 83 | .bg-gray-700 {
 84 |   background-color: #4a5568;
 85 | }
 86 | 
 87 | .bg-blue-500 {
 88 |   background-color: #4299e1;
 89 | }
 90 | 
 91 | .text-white {
 92 |   color: #fff;
 93 | }
 94 | 
 95 | /* Margin and Padding classes */
 96 | .p-4 {
 97 |   padding: 1rem;
 98 | }
 99 | 
100 | .mb-4 {
101 |   margin-bottom: 1rem;
102 | }
103 | 
104 | .ml-2 {
105 |   margin-left: 0.5rem;
106 | }
107 | 
108 | .rounded {
109 |   border-radius: 0.375rem;
110 | }
111 |

--------------------------------------------------------------------------------
/Notes/Project_Overview_Discussion.md:
--------------------------------------------------------------------------------
 1 | 04/02/2024
 2 | 
 3 | Your meeting with Professor Brown focused on developing an auto grader software, and the discussion revolved around a step-by-step plan to create a system that can grade assignments by comparing them to a rubric and provide meaningful feedback. Here's a summary of the key points and steps discussed:
 4 | 
 5 | 1. **Initial Assessment**: The goal is to determine how closely the tool's grading aligns with the professor's grading. This involves using a regression model to predict scores from unstructured text, essentially seeing if the tool's predicted scores are in agreement with the professor's scores.
 6 | 
 7 | 2. **Model Interpretability**: Understanding why the tool assigned a specific score (e.g., why an assignment received 89 out of 92) is crucial. This involves analyzing the factors that influenced the grading.
 8 | 
 9 | 3. **Input Requirements**: The system will anonymize student names and require assignment rubrics and scores for processing. 
10 | 
11 | 4. **Feature Extraction**: The tool will extract features from unstructured text using a language model, identifying elements like the presence of specific content, level of detail, and conceptual understanding. These features will be based on the assignment rubric.
12 | 
13 | 5. **AutoML**: Automatic Machine Learning (AutoML) will be used to predict scores, utilizing the extracted features.
14 | 
15 | 6. **Rubric Interaction**: The tool can either accept an uploaded rubric or suggest one through prompt engineering. It will interact with the user (e.g., the professor) to refine and confirm the rubric.
16 | 
17 | 7. **Feature Rating**: Once a rubric is established, the system will extract features from assignments and rate them on a scale (e.g., 1 to 20), forming the basis for the predictive model.
18 | 
19 | 8. **Data Preparation**: Anonymized assignments and rubrics will be used as training data to develop and validate the grading model.
20 | 
21 | 9. **Validation and Feedback**: The tool will use historical data to validate its grading accuracy. Once validated, it can use interpretability tools like SHAP to explain scores and leverage language models to provide constructive feedback.
22 | 
23 | 10. **Ongoing Tuning**: The software will require continuous adjustments to improve its grading accuracy and feedback relevance, focusing on effective feature extraction and understanding the impact of various features on the grading.
24 | 
25 | The meeting emphasized a comprehensive approach that combines machine learning, natural language processing, and user interaction to create an effective auto-grading tool that aligns with human grading practices and offers transparent, actionable feedback.
26 |

--------------------------------------------------------------------------------
/packages/webapp/src/lib/chatbot/MessageHandler.tsx:
--------------------------------------------------------------------------------
 1 | import { ChatMessage } from './ChatMessage';
 2 | import {useEffect, useState} from "react";
 3 | import OpenAI from "openai";
 4 | 
 5 | export default function useChat(prompt: string, assistant_greeting: string) {
 6 |   const [apiKey, setApiKey] = useState<string | null>(null);
 7 |   const [input, setInput] = useState('');
 8 |   const [loading, setLoading] = useState(false); // To show loading indicator
 9 | 
10 |   const [messages, setMessages] = useState<ChatMessage[]>([
11 |     { role: 'system', content: prompt },
12 |     { role: 'function', content: assistant_greeting, name: "greeting"},
13 |   ]);
14 | 
15 | 
16 |   useEffect(() => {
17 |     const fetchApiKey = async () => {
18 |       try {
19 |         const response = await fetch('/api/openai');
20 |         if (response.ok) {
21 |           const data = await response.json();
22 |           console.error("api key: " + data.apiKey)
23 |           setApiKey(data.apiKey);
24 |         } else {
25 |           console.error('Failed to fetch API key');
26 |         }
27 |       } catch (error) {
28 |         console.error('An error occurred while fetching the API key');
29 |       }
30 |     };
31 | 
32 |     fetchApiKey();
33 |   }, []);
34 | 
35 |   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
36 |     event.preventDefault();
37 | 
38 |     if (!input || !input.trim()) {
39 |       console.error("Input value before trim:", input);
40 |       console.error("Input value after trim:", input.trim());
41 |       return;
42 |     } // Don't send empty messages
43 | 
44 |     const openai = apiKey ?  new OpenAI({
45 |       apiKey: apiKey,
46 |       dangerouslyAllowBrowser: true
47 |     }): null;
48 | 
49 |     setLoading(true);
50 | 
51 |     const userMessage: ChatMessage = { role: 'user', content: input };
52 |     const newMessages = [...messages, userMessage];
53 |     setMessages(newMessages);
54 | 
55 |     try {
56 |       const assistantMessage = await sendMessage(newMessages, openai);
57 |       setMessages((prevMessages: ChatMessage[]) => [...prevMessages, assistantMessage]);
58 |     } catch (error) {
59 |       console.error('OpenAI API Error:', error);
60 |       // Handle error appropriately
61 |     } finally {
62 |       setLoading(false);
63 |       setInput('');
64 |     }
65 |   };
66 | 
67 |   const sendMessage = async (messages: ChatMessage[], openai: any): Promise<ChatMessage> => {
68 |     if (!openai) {
69 |       throw new Error("OpenAI has not been initialized with an API key.");
70 |     }
71 | 
72 |     const response = await openai.chat.completions.create({
73 |       model: 'gpt-3.5-turbo',
74 |       messages: messages,
75 |     });
76 | 
77 |     return {
78 |       role: 'assistant',
79 |       content: response.choices[0].message?.content || '',
80 |     };
81 |   };
82 |   return { input, loading, messages, handleSubmit, setInput };
83 | }

--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # Automated Assignment Grading System with AI Model Evaluation
 2 | 
 3 | **Objective:**
 4 | - Develop an automated assignment grading system to reduce manual grading fatigue and improve efficiency.
 5 | - Evaluate the reliability of various AI models in grading assignments as part of a research initiative.
 6 | 
 7 | **Project Steps:**
 8 | 
 9 | 1. **Project Setup:**
10 |    - Establish a project timeline and milestones.
11 |    - Identify the necessary technological stack and resources, including RAG, LangChain, and LLM models.
12 | 
13 | 2. **Data Input Module:**
14 |    - Develop an input module that accepts a zip file containing text-based assignments (Word, PDF, Python notebooks).
15 |    - Design a mechanism to extract and process text from these formats for grading.
16 | 
17 | 3. **Grading Criteria Definition:**
18 |    - Implement a system allowing graders to define specific grading criteria and processes for each assignment type.
19 |    - Ensure the system supports diverse grading metrics and workflows tailored to different assignments.
20 | 
21 | 4. **AI Grading System:**
22 |    - Integrate AI automation flows to grade assignments based on the predefined criteria.
23 |    - Employ multiple AI models and compare their grading outputs to ensure reliability and consistency.
24 | 
25 | 5. **Grading Consistency and Verification:**
26 |    - Define a protocol for grading each assignment multiple times to verify consistency.
27 |    - Develop an algorithm to compare grading outcomes across iterations, flagging significant discrepancies for review.
28 | 
29 | 6. **Flagging System:**
30 |    - Create a web interface to display flagged assignments, highlighting variations in grading.
31 |    - Allow graders to review and adjust grades for flagged assignments, ensuring accuracy.
32 | 
33 | 7. **Result Compilation and Reporting:**
34 |    - Generate comprehensive reports detailing each assignment's grade, confidence levels, and variation across grading iterations.
35 |    - Include constructive feedback based on grading metrics, offering insights into areas of improvement for students.
36 | 
37 | 8. **Testing and Iteration:**
38 |    - Conduct thorough testing of the system with a variety of assignment samples.
39 |    - Gather feedback from potential users and refine the system based on this input.
40 | 
41 | 9. **Future Expansion:**
42 |    - Plan for the incorporation of more complex assignment types, including those with embedded images or code, in subsequent phases of the project.
43 | 
44 | 10. **Documentation and Dissemination:**
45 |     - Document the development process, system architecture, and user instructions.
46 |     - Prepare a paper or presentation to share the research findings on AI model reliability in grading.
47 | 
48 | **Expected Outcomes:**
49 | - An operational automated grading system that enhances grading efficiency and consistency.
50 | - Insights into the effectiveness and reliability of different AI models in the educational grading context.
51 | 
52 | ## Detailed Documentation
53 | 
54 | - Check out the project [Wiki](https://github.com/parthasarathydNU/autoGrader/wiki) and [list of issues](https://github.com/parthasarathydNU/autoGrader/issues) for more context.
55 | - Check out [CONTRIBUTING.md](https://github.com/parthasarathydNU/autoGrader/blob/main/CONTRIBUTING.md) for contribution guidelines
56 |

--------------------------------------------------------------------------------
/packages/webapp/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | :root {
  6 |   --foreground-rgb: 0, 0, 0;
  7 |   --background-start-rgb: 214, 219, 220;
  8 |   --background-end-rgb: 255, 255, 255;
  9 | }
 10 | 
 11 | input, textarea { /* Target both inputs and textareas */
 12 |   color: inherit;          /* Inherit color from parent (body) */
 13 |   background-color: inherit;/* Inherit background from parent (body) */
 14 | }
 15 | 
 16 | /*@media (prefers-color-scheme: dark) {*/
 17 | /*  :root {*/
 18 | /*    --foreground-rgb: 255, 255, 255;*/
 19 | /*    --background-start-rgb: 0, 0, 0;*/
 20 | /*    --background-end-rgb: 0, 0, 0;*/
 21 | /*  }*/
 22 | /*}*/
 23 | 
 24 | @media (prefers-color-scheme: dark) {
 25 |   :root {
 26 |     --foreground-rgb: 255, 255, 255;
 27 |     --background-start-rgb: 0, 0, 0;   /* Black background */
 28 |     --background-end-rgb: 0, 0, 0;    /* Black background */
 29 |   }
 30 | 
 31 |   input, textarea {
 32 |     color: rgb(var(--foreground-rgb)); /* Explicitly set white in dark mode */
 33 |   }
 34 | }
 35 | 
 36 | body {
 37 |   color: rgb(var(--foreground-rgb));
 38 |   background: linear-gradient(
 39 |       to bottom,
 40 |       transparent,
 41 |       rgb(var(--background-end-rgb))
 42 |     )
 43 |     rgb(var(--background-start-rgb));
 44 | }
 45 | 
 46 | @layer utilities {
 47 |   .text-balance {
 48 |     text-wrap: balance;
 49 |   }
 50 | }
 51 | 
 52 | .user {
 53 |   display: flex;
 54 |   gap: 0.5rem;
 55 |   margin-bottom: 1rem;
 56 | }
 57 | .header {
 58 |   margin-bottom: 1.5rem;
 59 | }
 60 | 
 61 | .assistant {
 62 |   display: flex;
 63 |   gap: 0.5rem;
 64 |   margin-bottom: 1rem;
 65 | }
 66 | 
 67 | .function {
 68 |   display: flex;
 69 |   gap: 0.5rem;
 70 |   margin-bottom: 1rem;
 71 | }
 72 | 
 73 | .message-label-assitant {
 74 |   color: #F6B26B;
 75 | }
 76 | 
 77 | .message-label-user {
 78 |   color: #6FA8DC;
 79 | }
 80 | 
 81 | .message-content {
 82 |   margin-left: 1rem;
 83 |   color: #EEEEEE;
 84 | }
 85 | 
 86 | form {
 87 |   display: flex;             /* Use Flexbox for easy alignment */
 88 |   align-items: flex-end;   /* Align items to the bottom (for expanding textarea) */
 89 | }
 90 | 
 91 | textarea {
 92 |   width: 80%;
 93 |   resize: vertical;
 94 |   height: 40px;
 95 |   min-height: 40px;
 96 |   padding: 0.8rem;  /* Add some padding for visual comfort */
 97 |   border: 2px solid #d9e7e6; /* Subtle border */
 98 |   border-radius: 8px;       /* Rounded corners */
 99 |   background-color: #3b3b3b;    /* Dark gray background */
100 |   color: #eee;             /* Light gray text */
101 |   font-size: 1rem;
102 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
103 |   transition: border-color 0.2s; /* Smooth transition for focus */
104 | }
105 | 
106 | textarea:focus {
107 |   outline: none; /* Remove default focus outline */
108 |   border-color: #007bff; /* Blue border on focus */
109 | }
110 | 
111 | button[type="submit"] {
112 |   padding: 0.6rem 1.5rem; /* Adjust padding to your liking */
113 |   margin-left: 0.5rem;
114 |   border: none;
115 |   border-radius: 8px;
116 |   background-color: #007bff; /* Blue background */
117 |   color: white;
118 |   cursor: pointer;
119 |   font-size: 1rem;
120 |   white-space: nowrap;
121 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
122 |   transition: background-color 0.2s;
123 | }
124 | 
125 | button[type="submit"]:hover {
126 |   background-color: #0056b3; /* Darker blue on hover */
127 | }
128 | 
129 | button[type="submit"]:disabled {
130 |   background-color: #ccc; /* Grayed out when disabled */
131 |   cursor: not-allowed;
132 | }

--------------------------------------------------------------------------------
/Notes/RubricGenerator.md:
--------------------------------------------------------------------------------
 1 | # Chatbot application for generating and fine-tuning assignment rubrics:
 2 | 
 3 | ## Phase 1: Understanding and Designing the Chatbot's Functionality
 4 | 
 5 | 1. **Document Upload Handling**: Implement functionality to allow users to upload assignment documents in various formats (text, Word, PDF). This will involve integrating document parsing libraries to extract text from these formats.
 6 | 
 7 | 2. **Interactive Query Module**: Develop a module where the chatbot engages with the user through follow-up questions to understand the specific needs for the rubric, such as focus areas, topics tested, and any particular grading preferences.
 8 | 
 9 | 3. **User Preference Profiling**: Design a system to capture and profile user preferences in rubric styles. This information is crucial for personalizing the rubric suggestions.
10 | 
11 | 4. **Rubric Suggestion and Fine-tuning**: Create a mechanism where the chatbot suggests a complete rubric, which users can then fine-tune or accept. If users have an existing rubric, the chatbot should be able to incorporate and modify it as needed.
12 | 
13 | 5. **Integration with Storage Systems**: Ensure the chatbot can integrate with external systems to store generated rubrics, creating a knowledge base for future reference.
14 | 
15 | 6. **Additional Document Analysis**: Allow users to upload supplementary documents related to the assignment. The chatbot should use this data to enhance the context and relevance of the rubric suggestions.
16 | 
17 | 7. **User-Driven Criteria Setting**: Enable the chatbot to adapt its rubric criteria based on user input or default to commonly used metrics for the assignment's topic.
18 | 
19 | 8. **Feedback Mechanism**: Implement a feedback loop where users can rate the generated rubrics and provide comments for continuous improvement of the chatbot.
20 | 
21 | ## Phase 2: Development and Implementation
22 | 
23 | 1. **Chatbot Development**: Utilize a suitable chatbot development framework and NLP library to build the chatbot's core interaction capabilities.
24 | 
25 | 2. **Rubric Generation Algorithm**: Develop the algorithm that will generate rubrics based on the extracted information from documents and user inputs. This could involve AI and machine learning techniques to analyze text and generate relevant grading criteria.
26 | 
27 | 3. **User Interface**: Design a user-friendly interface for the chatbot, allowing for easy document uploads, interactive conversations, and rubric review.
28 | 
29 | 4. **Integration and Testing**: Integrate the chatbot with the required external systems for document storage and retrieval. Conduct thorough testing to ensure the chatbot's functionality aligns with the outlined requirements.
30 | 
31 | 5. **Deployment and Monitoring**: Deploy the chatbot in a controlled environment initially to monitor its performance and user engagement. Use the feedback collected to refine and enhance the chatbot's capabilities.
32 | 
33 | ## Phase 3: Evaluation and Refinement
34 | 
35 | 1. **User Feedback Analysis**: Regularly analyze user feedback to identify areas for improvement in the chatbot's rubric generation and interaction processes.
36 | 
37 | 2. **Continuous Learning**: Incorporate a continuous learning process where the chatbot evolves based on user interactions, feedback, and newly generated rubrics to enhance its accuracy and relevance.
38 | 
39 | 3. **Scalability**: Ensure the system is scalable, capable of handling an increasing number of users and documents, and adaptable to different educational contexts or requirements.
40 | 
41 | By following this structured approach, you can develop a chatbot that effectively assists in generating personalized, context-aware rubrics for assignments, enhancing the grading process for educators.
42 |

--------------------------------------------------------------------------------
/packages/webapp/src/pages/rubric-generator/home/index.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 4 | import { faUser, faRobot } from '@fortawesome/free-solid-svg-icons';
 5 | import '../../../styles/globals.css';
 6 | import '../../../styles/home.css';
 7 | import '@/components/chatbot/ChatMessage';
 8 | import '@/components/chatbot/ChatInput';
 9 | import useChat from "../../../lib/chatbot/MessageHandler";
10 | 
11 | export const runtime = 'experimental-edge';
12 | 
13 | const prompt = "You are an expert in rubric generation for any given type of assignment. Once a user " +
14 |     "submits an assignment, use the flipped interaction pattern to ask the user questions " +
15 |     "about their grading preferences, which areas of the assignment that they want greater " +
16 |     "emphasis on. The conversation should be engaging to the user. The questions can be " +
17 |     "regarding: Their style of grading , how strict do they want to be and other questions " +
18 |     "to arrive at a well defined and clear grading schema without any ambiguity. Further ask " +
19 |     "questions regarding the user to understand more about their personal as well. Finally " +
20 |     "based on the gathered preferences, use the persona pattern to take the persona of the " +
21 |     "user and generate a rubric that matches their style. Start by greeting the user and ask " +
22 |     "one question at a time. Ask the first question about what is the type of assignment " +
23 |     "they want help with.";
24 | 
25 | const assistant_greeting = "Hello! I'm here to help you create a customized rubric for your assignment. " +
26 |     "To start off, could you please tell me what type of assignment you need the rubric for? " +
27 |     "For example, is it an essay, a presentation, a project, or something else?"
28 | 
29 | export default function Home() {
30 |   const { input, loading, messages, handleSubmit, setInput } = useChat(prompt, assistant_greeting);
31 | 
32 |   const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
33 |     event.preventDefault();
34 |     await handleSubmit(event);
35 |   };
36 | 
37 |   return (
38 |       <main className="flex min-h-screen">
39 |         <div className="sidebar">
40 |           <button className="new-chat-button">+ New Chat</button>
41 |           <div className="search-bar">
42 |             <input type="text" placeholder="Search rubrics..." />
43 |           </div>
44 |           <div className="chat-list">
45 |             <p>No saved rubrics.</p>
46 |           </div>
47 |         </div>
48 |         <div className="chat-window">
49 |           <div className="chat-header">
50 |             <h2 className="text-2xl font-semibold">Rubric Generator Chatbot</h2>
51 |           </div>
52 |           <div className="chat-messages">
53 |             {messages.map((msg, index) => {
54 |               if (msg.role === 'function' || msg.role === 'assistant') {
55 |                 return (
56 |                 <div key={index} className={`message ${msg.role}`}>
57 |                   <FontAwesomeIcon icon={faRobot}  className="message-icon"/>
58 |                   <span className="message-content">{msg.content}</span>
59 |                 </div>
60 |                 )
61 |               } else if (msg.role === 'user') {
62 |                 return (
63 |                     <div key={index} className={`message ${msg.role}`}>
64 |                       <FontAwesomeIcon icon={faUser}  className="message-icon"/>
65 |                       <span className="message-content">{msg.content}</span>
66 |                     </div>
67 |                 )
68 |               }
69 |             })}
70 |             {loading && <div className="message loading">Loading...</div>}
71 |           </div>
72 |           <form onSubmit={handleFormSubmit} className="chat-input">
73 |             <textarea
74 |                 value={input}
75 |                 onChange={(e) => setInput(e.target.value)}
76 |                 disabled={loading}
77 |                 placeholder="Type your message..."
78 |             />
79 |             <button type="submit" disabled={loading}>
80 |               {loading ? 'Sending...' : 'Send'}
81 |             </button>
82 |           </form>
83 |         </div>
84 |       </main>
85 |   );
86 | }
87 |

--------------------------------------------------------------------------------
/packages/webapp/src/pages/assignment-generator/home/index.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 4 | import { faUser, faRobot } from '@fortawesome/free-solid-svg-icons';
 5 | import '../../../styles/globals.css';
 6 | import '../../../styles/home.css';
 7 | import '@/components/chatbot/ChatMessage';
 8 | import '@/components/chatbot/ChatInput';
 9 | import useChat from "../../../lib/chatbot/MessageHandler";
10 | 
11 | export const runtime = 'experimental-edge';
12 | 
13 | const prompt = "You are an expert in assignment generation for any given course topic. Once a user " +
14 |     "submits a course topic, use the flipped interaction pattern to ask the user questions " +
15 |     "about their assignment preferences, which sub-topic of the given topic that they want greater " +
16 |     "emphasis on. The conversation should be engaging to the user. The questions can be " +
17 |     "regarding: How many questions they want to include in the assignment , what type of questions the user " +
18 |     "want to include in the assignment (MCQs, brief, essay writing etc.), what is the difficulty of the assignment that they are looking for " +
19 |     "to arrive at a well defined assignment. Further ask " +
20 |     "questions regarding the user to understand more about their personal as well. Finally " +
21 |     "based on the gathered preferences, use the persona pattern to take the persona of the " +
22 |     "user and generate a assignment that matches their style. Start by greeting the user and ask " +
23 |     "one question at a time. Ask the first question about what is the topic for assignment generation that " +
24 |     "they want help with.";
25 | 
26 | const assistant_greeting = "Hello! I'm your assignment expert, ready to help you create the perfect challenge " +
27 |     "for your students. To start, what course topic would you like to focus on for this assignment?"
28 | 
29 | 
30 | export default function Home() {
31 |   const { input, loading, messages, handleSubmit, setInput } = useChat(prompt, assistant_greeting);
32 | 
33 |   const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
34 |     event.preventDefault();
35 |     await handleSubmit(event);
36 |   };
37 | 
38 |   return (
39 |       <main className="flex min-h-screen">
40 |         <div className="sidebar">
41 |           <button className="new-chat-button">+ New Chat</button>
42 |           <div className="search-bar">
43 |             <input type="text" placeholder="Search assignment..." />
44 |           </div>
45 |           <div className="chat-list">
46 |             <p>No saved assignments.</p>
47 |           </div>
48 |         </div>
49 |         <div className="chat-window">
50 |           <div className="chat-header">
51 |             <h2 className="text-2xl font-semibold">Assignment Generator Chatbot</h2>
52 |           </div>
53 |           <div className="chat-messages">
54 |             {messages.map((msg, index) => {
55 |               if (msg.role === 'function' || msg.role === 'assistant') {
56 |                 return (
57 |                     <div key={index} className={`message ${msg.role}`}>
58 |                       <FontAwesomeIcon icon={faRobot}  className="message-icon"/>
59 |                       <span className="message-content">{msg.content}</span>
60 |                     </div>
61 |                 )
62 |               } else if (msg.role === 'user') {
63 |                 return (
64 |                     <div key={index} className={`message ${msg.role}`}>
65 |                       <FontAwesomeIcon icon={faUser}  className="message-icon"/>
66 |                       <span className="message-content">{msg.content}</span>
67 |                     </div>
68 |                 )
69 |               }
70 |             })}
71 |             {loading && <div className="message loading">Loading...</div>}
72 |           </div>
73 |           <form onSubmit={handleFormSubmit} className="chat-input">
74 |             <textarea
75 |                 value={input}
76 |                 onChange={(e) => setInput(e.target.value)}
77 |                 disabled={loading}
78 |                 placeholder="Type your message..."
79 |             />
80 |             <button type="submit" disabled={loading}>
81 |               {loading ? 'Sending...' : 'Send'}
82 |             </button>
83 |           </form>
84 |         </div>
85 |       </main>
86 |   );
87 | }
88 |

--------------------------------------------------------------------------------
/Documents/Integration_of_rag.md:
--------------------------------------------------------------------------------
 1 | # How can RAG help in this case ?
 2 | 
 3 | Retrieval-Augmented Generation (RAG) can be a powerful component in your project, especially in phases where the system needs to access external information or prior knowledge to enhance the answer evaluation process. Here’s how you can integrate RAG into your project:
 4 | 
 5 | ### Potential Integration of RAG:
 6 | 
 7 | 1. **During the POC Phase**:
 8 |    - In the Proof of Concept (POC) phase, you can leverage RAG to augment the capabilities of your base model. By incorporating external knowledge or a database of high-quality answers, the model can generate more informed and contextually relevant evaluations.
 9 | 
10 | 2. **In the Model Evaluation Phase**:
11 |    - When you're evaluating student responses, RAG can assist by retrieving relevant educational content or examples to compare with student answers. This can help in assessing the depth of understanding and conceptual clarity.
12 | 
13 | 3. **For Feedback Generation**:
14 |    - In the feedback generation step, RAG can be used to provide more detailed and specific feedback by pulling in examples, explanations, or suggestions from a knowledge base, enhancing the personalized feedback for students.
15 | 
16 | ### Implementation Considerations:
17 | 
18 | - **Data Source**: Identify and curate a reliable source of information or a corpus that the RAG system can retrieve from. This could be a database of well-annotated student answers, educational material, or other relevant content.
19 |   
20 | - **Integration**: Plan how RAG will interact with your existing models. For instance, in the POC, you need to determine how the base model will use retrieved information to enhance its predictions or evaluations.
21 | 
22 | - **Evaluation**: It’s crucial to assess how effectively the RAG component improves the system's performance. This might involve comparing the output with and without RAG integration to see the value it adds.
23 | 
24 | By strategically placing RAG in these phases, you can enhance the model’s ability to understand and evaluate student answers more deeply, providing a richer analysis and feedback mechanism.
25 | 
26 | # How can RAG help during the initial annotation Phase ?
27 | 
28 | Incorporating Retrieval-Augmented Generation (RAG) during the annotation and model pre-training phases can significantly benefit from the expertise and knowledge base of professors and teaching assistants. Here's how RAG can be integrated effectively during these stages:
29 | 
30 | ### During the Annotation Phase:
31 | 
32 | 1. **Enhanced Annotation Guidance**: RAG can provide real-time, contextually relevant information or examples to annotators (professors and TAs) during the annotation process. For example, when a TA is annotating an answer for 'depth of understanding,' the RAG system can retrieve and present similar annotated examples or guidelines to ensure consistency and depth in annotations.
33 | 
34 | 2. **Quality Control**: By retrieving and presenting related information or prior annotated examples, RAG can help annotators cross-verify their judgments, enhancing the annotation quality.
35 | 
36 | 3. **Training Annotators**: For new annotators or TAs, RAG can serve as a training tool, offering examples and references that illustrate what constitutes high or low scores across different criteria.
37 | 
38 | ### During the Model Pre-Training Phase:
39 | 
40 | 1. **Data Augmentation**: RAG can augment the training data by providing additional context or examples that help the model understand the nuances of different answers, especially in cases where the dataset is limited or lacks diversity.
41 | 
42 | 2. **Model Guidance**: During pre-training, RAG can assist the model by injecting external knowledge or expert insights into the training process, which can be particularly beneficial for fine-tuning the model on specific criteria like creativity or conceptual understanding.
43 | 
44 | 3. **Incorporating Expert Knowledge**: Leverage the knowledge base of professors and TAs to create a repository that RAG can retrieve from. This can include high-quality answers, feedback examples, or domain-specific insights, which the RAG system can use to inform the model training.
45 | 
46 | By integrating RAG in these phases, you can leverage the expertise of your educational staff more effectively, ensuring that the model not only learns from the data but also aligns with the expert knowledge and educational standards upheld by the professors and TAs.
47 |

--------------------------------------------------------------------------------
/Documents/Initial_Ideation_Expansion.md:
--------------------------------------------------------------------------------
  1 | # Phased Project Approach
  2 | 
  3 | ## Phase 1: Extracting Answers from PDF Submissions
  4 | 
  5 | ### Overview
  6 | The first phase is dedicated to segmenting the PDF document to isolate sections that represent each student's answers to individual questions, setting a foundation for detailed analysis.
  7 | 
  8 | ### Implementation Steps:
  9 | 
 10 | 1. **PDF Segmentation using RegEx**:
 11 |    - Apply Regular Expressions (RegEx) to pinpoint sections within the PDF corresponding to each answer.
 12 |    - Design a pattern that effectively identifies the breaks between different answers in the submissions.
 13 | 
 14 | 2. **Extraction and Structuring**:
 15 |    - Extract answers following the RegEx patterns.
 16 |    - Compile the extracted data into a DataFrame, structuring it for ease of analysis and access.
 17 | 
 18 | ### Data Structuring:
 19 | 
 20 | - The DataFrame will feature columns for:
 21 |   - Student ID
 22 |   - Student Name
 23 |   - Question Number
 24 |   - Answer Content
 25 |   - Creativity
 26 |   - Depth of Answer
 27 |   - Conceptual Understanding
 28 |   - Feedback
 29 | 
 30 | - The "Creativity", "Depth of Answer", and "Conceptual Understanding" columns are designated as target variables, setting the stage for a nuanced evaluation process.
 31 | 
 32 | ### Model Integration for Evaluation:
 33 | 
 34 | - To assess the target variables, we'll integrate a suite of models, each tailored to evaluate a specific aspect:
 35 |   - **Creativity Model**: Assesses the originality and inventive aspects of the answers.
 36 |   - **Depth of Answer Model**: Determines the thoroughness and detail within the responses.
 37 |   - **Conceptual Understanding Model**: Gauges the grasp of underlying concepts conveyed in the answers.
 38 |   - **Additional aspects as required**
 39 | 
 40 | - These models will facilitate a comprehensive evaluation, providing nuanced insights into various dimensions of the students' answers.
 41 | 
 42 | ## Phase 2: Proof of Concept (POC) Development with Pre-Training
 43 | 
 44 | ### Overview
 45 | Prior to developing specialized models for each target variable, this phase aims to establish a Proof of Concept (POC) using models like ChatGPT. The focus here will be on data collection, annotation, and fine-tuning a base model to validate the approach.
 46 | 
 47 | ### Implementation Steps:
 48 | 
 49 | 1. **Data Collection**:
 50 |    - Gather a representative sample dataset that mirrors the type of student answers expected in the assignments.
 51 |    - This dataset should cover a variety of responses to ensure the model is exposed to diverse answer styles and contents.
 52 | 
 53 | 2. **Data Annotation**:
 54 |    - Collaborate with Teaching Assistants (TAs) and professors to annotate the dataset.
 55 |    - Annotations should reflect the target variables: Creativity, Depth of Answer, and Conceptual Understanding, providing a basis for model training.
 56 | 
 57 | 3. **Model Selection and Fine-Tuning**:
 58 |    - Choose a suitable base model, such as ChatGPT, for the POC.
 59 |    - Fine-tune this model on the annotated dataset to adapt its responses to the evaluation criteria specific to this project.
 60 | 
 61 | ### Objectives:
 62 | 
 63 | - **Validation**: The POC aims to validate the feasibility of using AI models for evaluating student answers.
 64 | - **Model Calibration**: Fine-tuning helps in calibrating the model to align closely with the evaluation standards set by educators.
 65 | 
 66 | ### Upcoming Phases:
 67 | 
 68 | - **POC Evaluation**: Assess the performance of the POC, ensuring it meets the project's objectives and provides a reliable basis for expanding to more detailed models.
 69 | - **Expansion**: Based on the POC outcomes, proceed to develop and integrate more sophisticated models for each target variable.
 70 | 
 71 | ## Phase 3: Detailed Evaluation and Feedback Generation
 72 | 
 73 | ### Overview
 74 | After identifying the target variables for each student's answer, the next phase focuses on a detailed evaluation process, leveraging the suite of models to assign quantitative values to the 'Creativity', 'Depth of Answer', and 'Conceptual Understanding' aspects of each response.
 75 | 
 76 | ### Implementation Steps:
 77 | 
 78 | 1. **Model Deployment**:
 79 |    - Deploy the selected models to analyze the answers in the DataFrame.
 80 |    - Each model will evaluate the answers to generate scores for the respective target variables.
 81 | 
 82 | 2. **Quantitative Assessment**:
 83 |    - Convert the model outputs into quantifiable scores that reflect the quality of each answer in terms of creativity, depth, and understanding.
 84 | 
 85 | 3. **Feedback Generation**:
 86 |    - Develop a system to translate the quantitative assessments into constructive feedback.
 87 |    - This feedback will be tailored to each answer, providing students with insights into the strengths and areas for improvement in their responses.
 88 | 
 89 | ### Integration with Data:
 90 | 
 91 | - Update the DataFrame to include the scores and feedback, aligning them with the corresponding student ID, name, and question number.
 92 | - Ensure that the evaluation process maintains the integrity of the original data, allowing for a transparent and fair assessment.
 93 | 
 94 | ### Final Steps:
 95 | 
 96 | - **Review and Adjustment**: Implement a review mechanism to ensure the evaluation aligns with expected standards and allows for manual adjustments if necessary.
 97 | - **Output Preparation**: Format the final results and feedback for dissemination, ensuring they are accessible and understandable for both educators and students.
 98 | 
 99 | ## Next Steps:
100 | 
101 | - Detail the finalization and output preparation processes, emphasizing how the results will be communicated and utilized.
102 | 
103 | # Further thoughts and exploration
104 | 
105 | 1. [Integration of RAG](./Integration_of_rag.md)
106 |

--------------------------------------------------------------------------------
/packages/webapp/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | 
  3 | export default function Home() {
  4 |   return (
  5 |       <main className="flex min-h-screen flex-col items-center justify-between p-24">
  6 |         <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
  7 |           <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
  8 |             Get started by editing 
  9 |             <code className="font-mono font-bold">src/app/page.tsx</code>
 10 |           </p>
 11 |           <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
 12 |             <a
 13 |                 className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
 14 |                 href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
 15 |                 target="_blank"
 16 |                 rel="noopener noreferrer"
 17 |             >
 18 |               By{" "}
 19 |               <Image
 20 |                   src="/vercel.svg"
 21 |                   alt="Vercel Logo"
 22 |                   className="dark:invert"
 23 |                   width={100}
 24 |                   height={24}
 25 |                   priority
 26 |               />
 27 |             </a>
 28 |           </div>
 29 |         </div>
 30 | 
 31 |         <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
 32 |           <Image
 33 |               className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
 34 |               src="/next.svg"
 35 |               alt="Next.js Logo"
 36 |               width={180}
 37 |               height={37}
 38 |               priority
 39 |           />
 40 |         </div>
 41 | 
 42 |         <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
 43 |           <a
 44 |               href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
 45 |               className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
 46 |               target="_blank"
 47 |               rel="noopener noreferrer"
 48 |           >
 49 |             <h2 className="mb-3 text-2xl font-semibold">
 50 |               Docs{" "}
 51 |               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
 52 |               ->
 53 |             </span>
 54 |             </h2>
 55 |             <p className="m-0 max-w-[30ch] text-sm opacity-50">
 56 |               Find in-depth information about Next.js features and API.
 57 |             </p>
 58 |           </a>
 59 | 
 60 |           <a
 61 |               href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
 62 |               className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
 63 |               target="_blank"
 64 |               rel="noopener noreferrer"
 65 |           >
 66 |             <h2 className="mb-3 text-2xl font-semibold">
 67 |               Learn{" "}
 68 |               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
 69 |               ->
 70 |             </span>
 71 |             </h2>
 72 |             <p className="m-0 max-w-[30ch] text-sm opacity-50">
 73 |               Learn about Next.js in an interactive course with quizzes!
 74 |             </p>
 75 |           </a>
 76 | 
 77 |           <a
 78 |               href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
 79 |               className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
 80 |               target="_blank"
 81 |               rel="noopener noreferrer"
 82 |           >
 83 |             <h2 className="mb-3 text-2xl font-semibold">
 84 |               Templates{" "}
 85 |               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
 86 |               ->
 87 |             </span>
 88 |             </h2>
 89 |             <p className="m-0 max-w-[30ch] text-sm opacity-50">
 90 |               Explore starter templates for Next.js.
 91 |             </p>
 92 |           </a>
 93 | 
 94 |           <a
 95 |               href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
 96 |               className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
 97 |               target="_blank"
 98 |               rel="noopener noreferrer"
 99 |           >
100 |             <h2 className="mb-3 text-2xl font-semibold">
101 |               Deploy{" "}
102 |               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103 |               ->
104 |             </span>
105 |             </h2>
106 |             <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
107 |               Instantly deploy your Next.js site to a shareable URL with Vercel.
108 |             </p>
109 |           </a>
110 |         </div>
111 |       </main>
112 |   );
113 | }

--------------------------------------------------------------------------------