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>In-Depth Research</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| padding-top: 50px; | |
| } | |
| .search-container { | |
| max-width: 600px; | |
| margin: auto; | |
| } | |
| .result-container { | |
| max-width: 800px; | |
| margin: 20px auto; | |
| padding: 20px; | |
| background-color: #ffffff; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .loader { | |
| border: 8px solid #f3f3f3; | |
| border-top: 8px solid #3498db; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| animation: spin 2s linear infinite; | |
| margin: auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>In-Depth Research</h1> | |
| <div class="search-container"> | |
| <form id="search-form"> | |
| <div class="input-group mb-3"> | |
| <input type="text" id="query" class="form-control" placeholder="Enter your research topic" aria-label="Research Topic" aria-describedby="button-addon2"> | |
| <button class="btn btn-primary" type="submit" id="button-addon2">Search</button> | |
| </div> | |
| </form> | |
| <div id="loader" class="loader d-none"></div> | |
| <div id="result" class="result-container d-none"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js" integrity="sha512-SU1kM0R8P4/5Qv4i7iXK8Fc6b0C6p6r1J5x9tH+7vqYvq9Zx7n0F9I/5g0ly2+4m6k4t1q1jX4k9g9J1A6a1eG3kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| const socket = io(); | |
| document.getElementById('search-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const query = document.getElementById('query').value; | |
| if (!query) { | |
| alert('Please enter a research topic.'); | |
| return; | |
| } | |
| // Show the loader and hide the result | |
| document.getElementById('loader').classList.remove('d-none'); | |
| document.getElementById('result').classList.add('d-none'); | |
| document.getElementById('result').innerHTML = ''; | |
| // Emit the search event | |
| socket.emit('search', {'query': query}); | |
| }); | |
| // Listen for the result event | |
| socket.on('result', function(data) { | |
| document.getElementById('loader').classList.add('d-none'); | |
| if (data.error) { | |
| document.getElementById('result').innerHTML = `<p class="text-danger">Error: ${data.error}</p>`; | |
| } else { | |
| document.getElementById('result').innerHTML = ` | |
| <h2>${data.query}</h2> | |
| <p>${data.result}</p> | |
| `; | |
| } | |
| document.getElementById('result').classList.remove('d-none'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |