Skip to content

Commit 0f0ef39

Browse files
sykesprosykespro
committed
poc vmrx without functionality
1 parent f8ef95e commit 0f0ef39

File tree

3 files changed

+206
-1
lines changed

3 files changed

+206
-1
lines changed

‎app.py

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import os
22

33
from flask import (Flask, redirect, render_template, request,
4-
send_from_directory, url_for)
4+
send_from_directory, url_for, jsonify)
55

66
app = Flask(__name__)
77

@@ -27,6 +27,23 @@ def hello():
2727
print('Request for hello page received with no name or blank name -- redirecting')
2828
return redirect(url_for('index'))
2929

30+
def query_llm(question):
31+
# response = llm_chain.invoke({'question': question})
32+
# mock response like of object to be used like response.content
33+
response = {'content': 'This is a mock response for the question: ' + question}
34+
return response
35+
36+
@app.route('/poc/vmrx')
37+
def vmrx_index():
38+
print('Request for vmrx page received')
39+
return render_template('vmrx/index.html')
40+
41+
@app.route("/poc/vmrx/chatbot", methods=["POST"])
42+
def vmrx_chatbot():
43+
data = request.get_json()
44+
question = data["question"]
45+
response = query_llm(question)
46+
return jsonify({"response": response['content']})
3047

3148
if __name__ == '__main__':
3249
app.run()

‎static/vmrx/vmrx-logo.png

20.5 KB
Loading

‎templates/vmrx/index.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>ViewMasterRx AI Assistant</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
12+
/>
13+
<style>
14+
.markdown-content p {
15+
padding: 3px;
16+
}
17+
@keyframes gradient {
18+
0% {
19+
background-position: 0% 50%;
20+
}
21+
50% {
22+
background-position: 100% 50%;
23+
}
24+
100% {
25+
background-position: 0% 50%;
26+
}
27+
}
28+
.glass-effect {
29+
background: rgba(255, 255, 255, 0.5);
30+
backdrop-filter: blur(10px);
31+
border: 1px solid rgba(255, 255, 255, 0.3);
32+
}
33+
</style>
34+
</head>
35+
<body
36+
class="bg-gradient-to-br from-gray-100 via-blue-100 to-gray-200 min-h-screen flex flex-col items-center p-8 animate-[gradient_15s_ease_infinite] bg-[length:400%_400%]"
37+
>
38+
<div class="w-full max-w-4xl glass-effect rounded-2xl shadow-2xl p-8 mb-8">
39+
<div class="flex items-center justify-between mb-8">
40+
<img
41+
src="{{ url_for('static', filename='vmrx/vmrx-logo.png') }}"
42+
alt="ViewMasterRx Logo"
43+
class="w-64 h-auto object-contain rounded-lg"
44+
/>
45+
<h1 class="text-3xl font-bold text-gray-800 text-shadow">
46+
ViewMasterRx AI Assistant
47+
</h1>
48+
</div>
49+
<p class="text-gray-700 mb-8 text-lg leading-relaxed">
50+
Welcome to the future of healthcare assistance. This AI-powered chat
51+
assistant is designed to provide ViewMasterRx users with instant,
52+
accurate information about platform features, navigation, and
53+
troubleshooting. Empowering staff with quick access to ViewMasterRx
54+
knowledge.
55+
</p>
56+
<div
57+
id="chat-container"
58+
class="w-full h-96 glass-effect rounded-lg overflow-y-auto p-4 mb-6 border border-gray-300"
59+
></div>
60+
<div class="w-full flex">
61+
<input
62+
type="text"
63+
id="user-input"
64+
placeholder="Ask me anything about ViewMasterRx..."
65+
class="flex-grow p-4 bg-white bg-opacity-50 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-300 text-lg text-gray-800 placeholder-gray-500"
66+
/>
67+
<button
68+
id="send-btn"
69+
class="bg-blue-600 text-white px-8 py-4 rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 text-lg font-semibold transition duration-300 ease-in-out"
70+
>
71+
<i class="fas fa-paper-plane mr-2"></i>Send
72+
</button>
73+
</div>
74+
</div>
75+
<script>
76+
const chatContainer = document.getElementById("chat-container");
77+
const userInput = document.getElementById("user-input");
78+
const sendBtn = document.getElementById("send-btn");
79+
80+
sendBtn.addEventListener("click", function (event) {
81+
event.preventDefault();
82+
sendMessage();
83+
});
84+
userInput.addEventListener("keypress", function (event) {
85+
if (event.key === "Enter") {
86+
event.preventDefault();
87+
sendMessage();
88+
}
89+
});
90+
91+
function sendMessage() {
92+
const userMessage = userInput.value.trim();
93+
if (userMessage) {
94+
displayMessage("You", userMessage, "user");
95+
sendMessageToServer(userMessage);
96+
userInput.value = "";
97+
}
98+
}
99+
100+
function displayMessage(sender, message, type) {
101+
const messageElement = document.createElement("div");
102+
messageElement.classList.add(
103+
"mb-4",
104+
"p-3",
105+
"rounded-lg",
106+
"flex",
107+
"items-start",
108+
"animate-fade-in"
109+
);
110+
if (type === "user") {
111+
messageElement.classList.add("bg-blue-600", "text-white");
112+
} else {
113+
messageElement.classList.add(
114+
"bg-white",
115+
"bg-opacity-20",
116+
"text-gray-800",
117+
"border",
118+
"border-gray-300"
119+
);
120+
}
121+
122+
const iconElement = document.createElement("div");
123+
iconElement.classList.add("mr-3", "mt-1");
124+
const icon = document.createElement("i");
125+
icon.classList.add("fas", type === "user" ? "fa-user" : "fa-robot");
126+
iconElement.appendChild(icon);
127+
128+
const contentElement = document.createElement("div");
129+
contentElement.classList.add("flex-grow");
130+
131+
const senderElement = document.createElement("span");
132+
senderElement.classList.add("font-bold", "mb-1");
133+
senderElement.textContent = `${sender}`;
134+
135+
const messageTextElement = document.createElement("div");
136+
messageTextElement.classList.add("markdown-content");
137+
138+
if (type === "user") {
139+
messageTextElement.textContent = message;
140+
} else {
141+
messageTextElement.innerHTML = marked.parse(message);
142+
}
143+
144+
contentElement.appendChild(senderElement);
145+
contentElement.appendChild(messageTextElement);
146+
147+
messageElement.appendChild(iconElement);
148+
messageElement.appendChild(contentElement);
149+
150+
chatContainer.appendChild(messageElement);
151+
chatContainer.scrollTop = chatContainer.scrollHeight;
152+
}
153+
154+
function sendMessageToServer(message) {
155+
fetch("/poc/vmrx/chatbot", {
156+
method: "POST",
157+
headers: {
158+
"Content-Type": "application/json",
159+
},
160+
body: JSON.stringify({ question: message }),
161+
})
162+
.then((response) => response.json())
163+
.then((data) => {
164+
console.log("Success:", data);
165+
displayMessage("VMRx AI", data.response, "bot");
166+
})
167+
.catch((error) => {
168+
console.error("Error:", error);
169+
displayMessage(
170+
"System",
171+
"An error occurred. Please try again.",
172+
"bot"
173+
);
174+
});
175+
}
176+
</script>
177+
<footer
178+
class="w-full max-w-4xl mt-8 text-center text-gray-700 text-sm glass-effect p-4 rounded-lg"
179+
>
180+
<p>
181+
This AI assistant is for internal ViewMasterRx purposes only. Not for
182+
public distribution. <br />
183+
Designed and developed by <span class="font-medium">Daniel Sykes</span>.
184+
&copy; 2024 Pharmerica Corporation. All rights reserved.
185+
</p>
186+
</footer>
187+
</body>
188+
</html>

0 commit comments

Comments
 (0)