Hugging Face's logo

Spaces:
ak0601
/
Doubt-Solver
Running

App Files Community
ak0601 commited on
Commit
43003ba
·
verified ·
1 Parent(s): 00f5488

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/index.html +210 -0
  2. templates/index1.html +115 -0
templates/index.html ADDED
@@ -0,0 +1,210 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Tutor - Doubt Solver</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ }
15
+ h1 {
16
+ color: #333;
17
+ }
18
+ .control-bar {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ margin-bottom: 15px;
23
+ }
24
+ .chat-container {
25
+ border: 1px solid #ddd;
26
+ border-radius: 8px;
27
+ padding: 20px;
28
+ height: 500px;
29
+ overflow-y: auto;
30
+ margin-bottom: 20px;
31
+ background-color: #f9f9f9;
32
+ }
33
+ .message {
34
+ margin-bottom: 15px;
35
+ padding: 10px;
36
+ border-radius: 5px;
37
+ max-width: 80%;
38
+ }
39
+ .user {
40
+ background-color: #e3f2fd;
41
+ margin-left: auto;
42
+ text-align: right;
43
+ }
44
+ .model {
45
+ background-color: #f0f0f0;
46
+ }
47
+ /* Preserve raw Markdown formatting */
48
+ .message pre {
49
+ margin: 0;
50
+ white-space: pre-wrap; /* preserve line breaks and wrap */
51
+ font-family: inherit;
52
+ }
53
+ .input-form {
54
+ display: flex;
55
+ gap: 10px;
56
+ align-items: center;
57
+ }
58
+ .input-form input[type="text"] {
59
+ flex-grow: 1;
60
+ padding: 10px;
61
+ border: 1px solid #ddd;
62
+ border-radius: 5px;
63
+ }
64
+ .input-form input[type="file"] {
65
+ display: none;
66
+ }
67
+ .file-upload-label {
68
+ display: inline-block;
69
+ padding: 8px 12px;
70
+ background-color: #f0f0f0;
71
+ border: 1px solid #ddd;
72
+ border-radius: 5px;
73
+ cursor: pointer;
74
+ }
75
+ .file-upload-label:hover {
76
+ background-color: #e3e3e3;
77
+ }
78
+ .file-name {
79
+ margin-left: 10px;
80
+ font-size: 0.9em;
81
+ color: #666;
82
+ }
83
+ .input-form button {
84
+ padding: 10px 20px;
85
+ background-color: #1a73e8;
86
+ color: white;
87
+ border: none;
88
+ border-radius: 5px;
89
+ cursor: pointer;
90
+ }
91
+ .input-form button:hover {
92
+ background-color: #1558b7;
93
+ }
94
+ .tab-buttons {
95
+ margin-bottom: 15px;
96
+ }
97
+ .tab-button {
98
+ padding: 8px 15px;
99
+ background-color: #f0f0f0;
100
+ border: 1px solid #ddd;
101
+ border-radius: 5px;
102
+ cursor: pointer;
103
+ margin-right: 10px;
104
+ }
105
+ .tab-button.active {
106
+ background-color: #e3f2fd;
107
+ border-color: #1a73e8;
108
+ }
109
+ .image-upload-container {
110
+ display: none;
111
+ margin-bottom: 10px;
112
+ }
113
+ .image-upload-container.active {
114
+ display: flex;
115
+ align-items: center;
116
+ }
117
+ .image-preview {
118
+ max-width: 100px;
119
+ max-height: 100px;
120
+ margin-left: 10px;
121
+ border: 1px solid #ddd;
122
+ display: none;
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <h1>AI Tutor - Doubt Solver</h1>
128
+
129
+ <div class="control-bar">
130
+ <div class="tab-buttons">
131
+ <button id="text-only-tab" class="tab-button active" type="button">Text Only</button>
132
+ <button id="image-text-tab" class="tab-button" type="button">Image + Text</button>
133
+ </div>
134
+ <!-- New Chat button -->
135
+ <form method="post" action="/new">
136
+ <button type="submit">New Chat</button>
137
+ </form>
138
+ </div>
139
+
140
+ <div class="chat-container">
141
+ {% for message in chat_history %}
142
+ <div class="message {{ message.role }}">
143
+ <pre>{{ message.content }}</pre>
144
+ </div>
145
+ {% endfor %}
146
+ </div>
147
+
148
+ <form id="input-form" class="input-form" method="post" enctype="multipart/form-data">
149
+ <div id="image-upload-container" class="image-upload-container">
150
+ <label for="image-upload" class="file-upload-label">Upload Image</label>
151
+ <input id="image-upload" type="file" name="image" accept="image/*">
152
+ <span id="file-name" class="file-name"></span>
153
+ <img id="image-preview" class="image-preview" src="#" alt="Preview">
154
+ </div>
155
+ <input type="text" name="user_input" placeholder="Type your message..." required>
156
+ <button type="submit">Send</button>
157
+ </form>
158
+
159
+ <script>
160
+ // Auto-scroll to bottom of chat container
161
+ const chatContainer = document.querySelector('.chat-container');
162
+ chatContainer.scrollTop = chatContainer.scrollHeight;
163
+
164
+ // Tab buttons functionality
165
+ const textOnlyTab = document.getElementById('text-only-tab');
166
+ const imageTextTab = document.getElementById('image-text-tab');
167
+ const imageUploadContainer = document.getElementById('image-upload-container');
168
+ const inputForm = document.getElementById('input-form');
169
+
170
+ textOnlyTab.addEventListener('click', () => {
171
+ textOnlyTab.classList.add('active');
172
+ imageTextTab.classList.remove('active');
173
+ imageUploadContainer.classList.remove('active');
174
+ // Reset file input when switching to text-only
175
+ document.getElementById('image-upload').value = '';
176
+ document.getElementById('file-name').textContent = '';
177
+ document.getElementById('image-preview').style.display = 'none';
178
+ });
179
+
180
+ imageTextTab.addEventListener('click', () => {
181
+ imageTextTab.classList.add('active');
182
+ textOnlyTab.classList.remove('active');
183
+ imageUploadContainer.classList.add('active');
184
+ });
185
+
186
+ // Handle file selection and preview
187
+ const imageUpload = document.getElementById('image-upload');
188
+ const fileName = document.getElementById('file-name');
189
+ const imagePreview = document.getElementById('image-preview');
190
+
191
+ imageUpload.addEventListener('change', (e) => {
192
+ if (e.target.files.length > 0) {
193
+ const file = e.target.files[0];
194
+ fileName.textContent = file.name;
195
+
196
+ // Create image preview
197
+ const reader = new FileReader();
198
+ reader.onload = function(e) {
199
+ imagePreview.src = e.target.result;
200
+ imagePreview.style.display = 'block';
201
+ }
202
+ reader.readAsDataURL(file);
203
+ } else {
204
+ fileName.textContent = '';
205
+ imagePreview.style.display = 'none';
206
+ }
207
+ });
208
+ </script>
209
+ </body>
210
+ </html>
templates/index1.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Tutor- Doubt Solver</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ }
15
+ h1 {
16
+ color: #333;
17
+ }
18
+ .chat-container {
19
+ border: 1px solid #ddd;
20
+ border-radius: 8px;
21
+ padding: 20px;
22
+ height: 500px;
23
+ overflow-y: auto;
24
+ margin-bottom: 20px;
25
+ background-color: #f9f9f9;
26
+ }
27
+ .message {
28
+ margin-bottom: 15px;
29
+ padding: 10px;
30
+ border-radius: 5px;
31
+ max-width: 80%;
32
+ }
33
+ .user {
34
+ background-color: #e3f2fd;
35
+ margin-left: auto;
36
+ text-align: right;
37
+ }
38
+ .model {
39
+ background-color: #f0f0f0;
40
+ }
41
+ .input-form {
42
+ display: flex;
43
+ gap: 10px;
44
+ }
45
+ .input-form input[type="text"] {
46
+ flex-grow: 1;
47
+ padding: 10px;
48
+ border: 1px solid #ddd;
49
+ border-radius: 5px;
50
+ }
51
+ .input-form button {
52
+ padding: 10px 20px;
53
+ background-color: #1a73e8;
54
+ color: white;
55
+ border: none;
56
+ border-radius: 5px;
57
+ cursor: pointer;
58
+ }
59
+ .input-form button:hover {
60
+ background-color: #1558b7;
61
+ }
62
+ .tab-buttons {
63
+ margin-bottom: 15px;
64
+ }
65
+ .tab-button {
66
+ padding: 8px 15px;
67
+ background-color: #f0f0f0;
68
+ border: 1px solid #ddd;
69
+ border-radius: 5px;
70
+ cursor: pointer;
71
+ margin-right: 10px;
72
+ }
73
+ .tab-button.active {
74
+ background-color: #e3f2fd;
75
+ border-color: #1a73e8;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body>
80
+ <h1>AI Tutor - Doubt Solver</h1>
81
+
82
+ <div class="tab-buttons">
83
+ <button class="tab-button active">Text Only</button>
84
+ <button class="tab-button">Image + Text</button>
85
+ </div>
86
+
87
+ <div class="chat-container">
88
+ {% for message in chat_history %}
89
+ <div class="message {{ message.role }}">
90
+ {{ message.content }}
91
+ </div>
92
+ {% endfor %}
93
+ </div>
94
+
95
+ <form class="input-form" method="post">
96
+ <input type="text" name="user_input" placeholder="Type your message..." required>
97
+ <button type="submit">Send</button>
98
+ </form>
99
+
100
+ <script>
101
+ // Auto-scroll to bottom of chat container
102
+ const chatContainer = document.querySelector('.chat-container');
103
+ chatContainer.scrollTop = chatContainer.scrollHeight;
104
+
105
+ // Tab buttons functionality (for future implementation)
106
+ const tabButtons = document.querySelectorAll('.tab-button');
107
+ tabButtons.forEach(button => {
108
+ button.addEventListener('click', () => {
109
+ tabButtons.forEach(btn => btn.classList.remove('active'));
110
+ button.classList.add('active');
111
+ // Add implementation for switching between text-only and image+text modes
112
+ });
113
+ });
114
+ </script>
115
+ </body>