Hugging Face's logo

Spaces:
Sasiraj01
/
medicalragsystem01
Sleeping

App Files Community
Sasiraj01 commited on
Commit
2611de2
·
verified ·
1 Parent(s): 906ba22

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +165 -0
index.html ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <title>Multimodal RAG App</title>
4
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
5
+ <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap" rel="stylesheet">
6
+ <style>
7
+ body {
8
+ background-color: #121212;
9
+ color: #fff;
10
+ font-family: 'Ubuntu', sans-serif;
11
+ }
12
+ .container {
13
+ position: absolute;
14
+ top: 40%; /* Adjusted for space below */
15
+ left: 50%;
16
+ transform: translate(-50%, -40%);
17
+ text-align: center;
18
+ }
19
+ .title {
20
+ font-size: 48px;
21
+ font-weight: 300;
22
+ margin-bottom: 40px;
23
+ }
24
+ .input-box {
25
+ background-color: #202124;
26
+ border: none;
27
+ border-radius: 24px;
28
+ padding: 24px;
29
+ width: 100%;
30
+ color: #fff;
31
+ height: 100px;
32
+ font-size: 16px;
33
+ resize: none;
34
+ display: block;
35
+ margin: 0 auto 20px auto;
36
+ }
37
+ .input-box::placeholder {
38
+ color: #9e9e9e;
39
+ }
40
+ .input-box:focus {
41
+ outline: none;
42
+ box-shadow: none;
43
+ }
44
+ .theme-switcher {
45
+ position: absolute;
46
+ top: 20px;
47
+ right: 20px;
48
+ cursor: pointer;
49
+ }
50
+ .theme-icon {
51
+ color: #fff;
52
+ font-size: 24px;
53
+ }
54
+ .optimize-btn {
55
+ background-color: #16f9f6;
56
+ border: none;
57
+ border-radius: 24px;
58
+ padding: 10px 20px;
59
+ font-size: 16px;
60
+ cursor: pointer;
61
+ display: block;
62
+ margin: 0 auto; /* Center the button */
63
+ }
64
+ .response-card {
65
+ background-color: #333333;
66
+ border-radius: 16px;
67
+ padding: 20px;
68
+ margin-top: 20px;
69
+ display: none; /* Initially hidden */
70
+ }
71
+
72
+ #loader {
73
+ display: none;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body>
78
+ <div class="container">
79
+ <div class="row">
80
+ <div class="col-sm-12">
81
+ <div class="title">Multimodal RAG App</div>
82
+ <textarea class="input-box" placeholder="Enter your Query" id="promptInput"></textarea>
83
+ <div class="mb-5 text-end">
84
+ <button class="btn btn-md btn-info me-3 ps-4 pe-4" onclick="optimizePrompt()"><b>Ask</b></button>
85
+ </div>
86
+ <div id="loader" class="">
87
+ <div class="spinner-border text-info" role="status">
88
+ <span class="visually-hidden">Loading...</span>
89
+ </div>
90
+ </div>
91
+ <div class="response-card text-start" id="responseCard">
92
+
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ </div>
98
+ <div class="theme-switcher" onclick="toggleTheme()">
99
+ <i class="fas fa-adjust theme-icon"></i>
100
+ </div>
101
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
102
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
103
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
104
+ <script>
105
+ function toggleTheme() {
106
+ var body = document.body;
107
+ body.classList.toggle('light-theme');
108
+ body.classList.toggle('dark-theme');
109
+ var themeIcon = document.querySelector('.theme-icon');
110
+ if (body.classList.contains('light-theme')) {
111
+ themeIcon.classList.remove('fa-moon');
112
+ themeIcon.classList.add('fa-sun');
113
+ body.style.backgroundColor = '#f0f0f0';
114
+ body.style.color = '#121212';
115
+ } else {
116
+ themeIcon.classList.remove('fa-sun');
117
+ themeIcon.classList.add('fa-moon');
118
+ body.style.backgroundColor = '#121212';
119
+ body.style.color = '#fff';
120
+ }
121
+ }
122
+
123
+ async function optimizePrompt() {
124
+ var promptInput = document.getElementById('promptInput').value;
125
+ var responseCard = document.getElementById('responseCard');
126
+ var loader = document.getElementById('loader');
127
+
128
+ // Display loader while fetching data
129
+ loader.style.display = 'block';
130
+ responseCard.style.display = 'none';
131
+ try {
132
+ const formData = new FormData();
133
+ formData.append('question', promptInput);
134
+
135
+ let resp = await fetch('/get_answer', {
136
+ method: 'POST',
137
+ body: formData
138
+ });
139
+ // console.log("response",await resp.json());
140
+
141
+ let data = await resp.json();
142
+ responseCard.innerHTML = `
143
+ <div class="row">
144
+ <div class="col-sm-8">
145
+ <h6><b>Question:</b> ${promptInput}</h6>
146
+ <h6><b>Answer:</b> ${data.result}</h6>
147
+ </div>
148
+ <div class="col-sm-4">
149
+ <img src="data:image/jpeg;base64, ${data.relevant_images}" alt="" width="100%" height="auto">
150
+ </div>
151
+ </div>
152
+ `;
153
+ } catch (error) {
154
+ responseCard.innerHTML = `<p>Error: ${error.message}</p>`;
155
+ }
156
+ loader.style.display = 'none';
157
+ responseCard.style.display = 'block';
158
+
159
+ }
160
+
161
+ // Initial theme setup
162
+ document.body.classList.add('dark-theme');
163
+ </script>
164
+ </body>
165
+ </html>