Spaces:
Sleeping
Sleeping
File size: 6,069 Bytes
2611de2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<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> |