Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tanya Aku 🤖💬</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f0f8ff; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| #chat-box { | |
| background-color: #ffffff; | |
| border-radius: 10px; | |
| height: 650px; | |
| overflow-y: auto; | |
| padding: 20px; | |
| border: 1px solid #ddd; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .user-message { | |
| background-color: #007bff; | |
| color: white; | |
| padding: 12px; | |
| border-radius: 20px; | |
| max-width: 70%; | |
| align-self: flex-end; | |
| margin-bottom: 10px; | |
| animation: fadeInUp 0.3s ease-in-out; | |
| } | |
| .bot-response { | |
| background-color: #6c757d; | |
| color: white; | |
| padding: 12px; | |
| border-radius: 20px; | |
| max-width: 70%; | |
| align-self: flex-start; | |
| margin-bottom: 10px; | |
| animation: fadeInUp 0.3s ease-in-out; | |
| } | |
| .message-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, 10%, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| .chat-form { | |
| margin-top: 15px; | |
| } | |
| .chat-form input { | |
| border-radius: 20px; | |
| padding: 10px 15px; | |
| } | |
| .chat-form button { | |
| border-radius: 20px; | |
| padding: 10px 20px; | |
| } | |
| .chat-header { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .chat-header h3 { | |
| font-size: 1.75rem; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-8 offset-md-2 mt-5"> | |
| <div class="chat-header"> | |
| <h3>Tanya Aku 🤖💬</h3> | |
| <p>Your friendly bot is here to help!</p> | |
| </div> | |
| <div id="chat-box" class="message-container"> | |
| {% if user_message %} | |
| <div class="user-message"> | |
| <strong>You:</strong> {{ user_message }} | |
| </div> | |
| {% endif %} | |
| {% if extracted_info %} | |
| <div class="bot-response"> | |
| <strong>Extracted Info:</strong> {{ extracted_info }} | |
| </div> | |
| {% endif %} | |
| {% if response_message %} | |
| {% for message in response_message %} | |
| <div class="bot-response"> | |
| <strong> 🤖 </strong> {{ message }} | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| </div> | |
| <form action="/chat" method="post" class="d-flex chat-form"> | |
| <input type="text" name="message" class="form-control me-2" placeholder="Type your question here..." required> | |
| <button type="submit" class="btn btn-primary">Send</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |