Spaces:
Running
Running
| <!-- templates/index.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Tutor- Doubt Solver</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #333; | |
| } | |
| .chat-container { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| padding: 20px; | |
| height: 500px; | |
| overflow-y: auto; | |
| margin-bottom: 20px; | |
| background-color: #f9f9f9; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| border-radius: 5px; | |
| max-width: 80%; | |
| } | |
| .user { | |
| background-color: #e3f2fd; | |
| margin-left: auto; | |
| text-align: right; | |
| } | |
| .model { | |
| background-color: #f0f0f0; | |
| } | |
| .input-form { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .input-form input[type="text"] { | |
| flex-grow: 1; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| } | |
| .input-form button { | |
| padding: 10px 20px; | |
| background-color: #1a73e8; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .input-form button:hover { | |
| background-color: #1558b7; | |
| } | |
| .tab-buttons { | |
| margin-bottom: 15px; | |
| } | |
| .tab-button { | |
| padding: 8px 15px; | |
| background-color: #f0f0f0; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-right: 10px; | |
| } | |
| .tab-button.active { | |
| background-color: #e3f2fd; | |
| border-color: #1a73e8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>AI Tutor - Doubt Solver</h1> | |
| <div class="tab-buttons"> | |
| <button class="tab-button active">Text Only</button> | |
| <button class="tab-button">Image + Text</button> | |
| </div> | |
| <div class="chat-container"> | |
| {% for message in chat_history %} | |
| <div class="message {{ message.role }}"> | |
| {{ message.content }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <form class="input-form" method="post"> | |
| <input type="text" name="user_input" placeholder="Type your message..." required> | |
| <button type="submit">Send</button> | |
| </form> | |
| <script> | |
| // Auto-scroll to bottom of chat container | |
| const chatContainer = document.querySelector('.chat-container'); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Tab buttons functionality (for future implementation) | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| // Add implementation for switching between text-only and image+text modes | |
| }); | |
| }); | |
| </script> | |
| </body> |