| {% extends "base.html" %} |
| {% block title %}ChatGPT{% endblock %} |
| {% block content %} |
| <div class="max-w-3xl mx-auto py-8"> |
| <h1 class="text-3xl font-bold mb-2">🤖 ChatGPT</h1> |
| <p class="text-gray-400 mb-6">Chat with the AI assistant.</p> |
| <div class="bg-gray-800 rounded-xl p-4 h-96 overflow-y-auto mb-4" id="chat-box"> |
| {% for msg in messages %} |
| <div class="mb-3 {% if msg.role == 'user' %}text-right{% endif %}"> |
| <span class="inline-block p-3 rounded-lg {% if msg.role == 'user' %}bg-purple-600{% else %}bg-gray-700{% endif %}"> |
| {{ msg.content }} |
| </span> |
| </div> |
| {% endfor %} |
| </div> |
| <form id="chat-form" class="flex gap-2"> |
| <input type="text" name="message" placeholder="Type your message..." required autocomplete="off" |
| class="flex-1 p-3 rounded bg-gray-800 border border-gray-700 focus:border-purple-500 outline-none"> |
| <button type="submit" class="p-3 bg-purple-600 rounded hover:bg-purple-500 font-semibold">Send</button> |
| </form> |
| </div> |
| <script> |
| document.getElementById('chat-form').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const input = e.target.querySelector('input[name="message"]'); |
| const msg = input.value.trim(); |
| if (!msg) return; |
| input.value = ''; |
| const box = document.getElementById('chat-box'); |
| box.innerHTML += `<div class="mb-3 text-right"><span class="inline-block p-3 rounded-lg bg-purple-600">${msg}</span></div>`; |
| box.scrollTop = box.scrollHeight; |
| const res = await fetch('/chat', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({message: msg}) }); |
| const data = await res.json(); |
| box.innerHTML += `<div class="mb-3"><span class="inline-block p-3 rounded-lg bg-gray-700">${data.reply}</span></div>`; |
| box.scrollTop = box.scrollHeight; |
| }); |
| </script> |
| {% endblock %} |
|
|
