Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Multimodal RAG App</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> | |
| <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| color: #fff; | |
| font-family: 'Ubuntu', sans-serif; | |
| } | |
| .container { | |
| position: absolute; | |
| top: 40%; /* Adjusted for space below */ | |
| left: 50%; | |
| transform: translate(-50%, -40%); | |
| text-align: center; | |
| } | |
| .title { | |
| font-size: 48px; | |
| font-weight: 300; | |
| margin-bottom: 40px; | |
| } | |
| .input-box { | |
| background-color: #202124; | |
| border: none; | |
| border-radius: 24px; | |
| padding: 24px; | |
| width: 100%; | |
| color: #fff; | |
| height: 100px; | |
| font-size: 16px; | |
| resize: none; | |
| display: block; | |
| margin: 0 auto 20px auto; | |
| } | |
| .input-box::placeholder { | |
| color: #9e9e9e; | |
| } | |
| .input-box:focus { | |
| outline: none; | |
| box-shadow: none; | |
| } | |
| .theme-switcher { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| cursor: pointer; | |
| } | |
| .theme-icon { | |
| color: #fff; | |
| font-size: 24px; | |
| } | |
| .optimize-btn { | |
| background-color: #16f9f6; | |
| border: none; | |
| border-radius: 24px; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| display: block; | |
| margin: 0 auto; /* Center the button */ | |
| } | |
| .response-card { | |
| background-color: #333333; | |
| border-radius: 16px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| display: none; /* Initially hidden */ | |
| } | |
| #loader { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="title">Multimodal RAG App</div> | |
| <textarea class="input-box" placeholder="Enter your Query" id="promptInput"></textarea> | |
| <div class="mb-5 text-end"> | |
| <button class="btn btn-md btn-info me-3 ps-4 pe-4" onclick="optimizePrompt()"><b>Ask</b></button> | |
| </div> | |
| <div id="loader" class=""> | |
| <div class="spinner-border text-info" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| </div> | |
| <div class="response-card text-start" id="responseCard"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="theme-switcher" onclick="toggleTheme()"> | |
| <i class="fas fa-adjust theme-icon"></i> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script> | |
| <script> | |
| function toggleTheme() { | |
| var body = document.body; | |
| body.classList.toggle('light-theme'); | |
| body.classList.toggle('dark-theme'); | |
| var themeIcon = document.querySelector('.theme-icon'); | |
| if (body.classList.contains('light-theme')) { | |
| themeIcon.classList.remove('fa-moon'); | |
| themeIcon.classList.add('fa-sun'); | |
| body.style.backgroundColor = '#f0f0f0'; | |
| body.style.color = '#121212'; | |
| } else { | |
| themeIcon.classList.remove('fa-sun'); | |
| themeIcon.classList.add('fa-moon'); | |
| body.style.backgroundColor = '#121212'; | |
| body.style.color = '#fff'; | |
| } | |
| } | |
| async function optimizePrompt() { | |
| var promptInput = document.getElementById('promptInput').value; | |
| var responseCard = document.getElementById('responseCard'); | |
| var loader = document.getElementById('loader'); | |
| // Display loader while fetching data | |
| loader.style.display = 'block'; | |
| responseCard.style.display = 'none'; | |
| try { | |
| const formData = new FormData(); | |
| formData.append('question', promptInput); | |
| let resp = await fetch('/get_answer', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| // console.log("response",await resp.json()); | |
| let data = await resp.json(); | |
| responseCard.innerHTML = ` | |
| <div class="row"> | |
| <div class="col-sm-8"> | |
| <h6><b>Question:</b> ${promptInput}</h6> | |
| <h6><b>Answer:</b> ${data.result}</h6> | |
| </div> | |
| <div class="col-sm-4"> | |
| <img src="data:image/jpeg;base64, ${data.relevant_images}" alt="" width="100%" height="auto"> | |
| </div> | |
| </div> | |
| `; | |
| } catch (error) { | |
| responseCard.innerHTML = `<p>Error: ${error.message}</p>`; | |
| } | |
| loader.style.display = 'none'; | |
| responseCard.style.display = 'block'; | |
| } | |
| // Initial theme setup | |
| document.body.classList.add('dark-theme'); | |
| </script> | |
| </body> | |
| </html> |