recommender-api/index.html at main · 123EFD/recommender-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Resource Recommender</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        .chat-height{ height: 400px; }
        .pdf-height{ height: 500px; }

        .spinner {
            border: 3px solid #73d0f2;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            width : 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            vertical-align: middle;
        }
        @keyframes spin {
            0% {transform: rotate(0deg);}
            100% { transform: rotate(360deg);}
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-6">

    <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Student Academic Profile</h2>

        <form id="predictionForm" class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">SSC Score (out of 4.0)</label>
                    <input type="number" id="ssc" step="0.1" max="4.0" value="3.5" class="mt-1 w-full border border-gray-300 rounded-md p-2" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Last Semester GPA</label>
                    <input type="number" id="last" step="0.1" max="4.0" value="3.0" class="mt-1 w-full border border-gray-300 rounded-md p-2" required>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Class Attendance</label>
                <select id="attendance" class="mt-1 w-full border border-gray-300 rounded-md p-2">
                    <option value="1">Below 40%</option>
                    <option value="2">40%-59%</option>
                    <option value="3" selected>60%-79%</option>
                    <option value="4">80%-100%</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Daily Study Preparation</label>
                <select id="preparation" class="mt-1 w-full border border-gray-300 rounded-md p-2">
                    <option value="1">0-1 hour</option>
                    <option value="2" selected>2-3 hours</option>
                    <option value="3">More than 3 hours</option>
                </select>
            </div>

            <div class="border-t pt-4">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Current Semester Courses</label>
                <div id="courseContainer" class="space-y-2">
                    <div class="flex gap-2 course-row">
                        <input type="text" placeholder="Course Code (e.g. WIA1006)" class="flex-1 border rounded-md p-2 text-sm course-name" required>
                        <input type="number" placeholder="Grade" step="0.1" max="4.0" min="0" class="w-20 border rounded-md p-2 text-sm course-grade" required>
                        <button type="button" onclick="removeRow(this)" class="text-red-500 font-bold px-2">×</button>
                    </div>
                </div>
                <button type="button" onclick="addCourseRow()" class="mt-2 text-sm text-blue-600 hover:underline">+ Add Another Course</button>
            </div>

            <input type="hidden" id="income" value="2">
            <input type="hidden" id="hometown" value="1">
            <input type="hidden" id="department" value="0">
            <input type="hidden" id="gaming" value="2">

            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-200">
                Analyze Needs with AI
            </button>
        </form>

        <div id="resultArea" class="mt-6 hidden">
            <div id="resultBox" class="p-4 rounded-md border text-center">
                <p id="resultMessage" class="font-bold text-lg"></p>
                <p id="resultConfidence" class="text-sm mt-1"></p>
            </div>
        </div>
    </div>

    <div class="space-y-6">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-800 mb-4">PDF AI Workspace</h2>

                <div class="flex flex-col gap-3 mb-6 p-4 bg-gray-50 rounded-lg border border-dashed border-gray-300">
                    <input type="file" id="pdfFile" accept=".pdf" class="text-sm">
                    <div class="flex gap-2">
                        <input type="text" id="pdfUrl" placeholder="Or paste PDF URL here..." class="flex-1 text-sm border rounded-md p-2">
                        <button type="button" id="processBtn" onclick="handlePDFUpload()" class="bg-green-500 text-white px-4 py-1 rounded-md text-sm">Process</button>
                    </div>
                    <p id="uploadStatus" class="text-xs text-gray-500"></p>
                </div>

                <div id="pdfContainer" class="hidden mb-6 border rounded-lg overflow-hidden bg-gray-200">
                    <iframe id="pdfFrame" class="w-full pdf-height" src=""></iframe>
                </div>

                <div id="chatArea" class="flex flex-col border rounded-lg bg-white overflow-hidden">
                    <div id="chatMessages" class="chat-height overflow-y-auto p-4 space-y-4 bg-gray-50 text-sm">
                        <p class="text-gray-400 italic">Upload a PDF to start chatting...</p>
                    </div>
                    <div class="flex p-2 border-t bg-white">
                        <input type="text" id="userQuestion" placeholder="Ask about the PDF..." class="flex-1 border-none focus:ring-0 p-2 text-sm">
                        <button type="button" onclick="askQuestion()" class="bg-blue-500 text-white px-4 py-1 rounded-md text-sm">Ask</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="fixed top-6 left-6 z-50">
        <button id="menuBtn" class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-50 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>

    <div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-white shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out z-40 p-6 overflow-y-auto">
        <div class="flex justify-between items-center mb-8">
            <h3 class="text-xl font-bold text-gray-800">Your Library</h3>
        </div>

        <div class="space-y-4">
            <p class="text-xs text-gray-500 uppercase font-bold tracking-wider">Recently Uploaded PDFs</p>
            <div id="pdfLibraryList" class="space-y-2 text-sm">
                <p class="text-gray-400 italic">No files found...</p>
            </div>
        </div>
    </div>

    <div id="overlay" class="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-300 z-30"></div>
    <script src="script.js"></script>
</body>
</html>