Spaces:
Sleeping
Sleeping
File size: 5,041 Bytes
ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 f8f2407 ce9ae10 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medibot 路 Medical Assistant</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}?v=7"/>
</head>
<body>
<div class="dashboard">
<!-- LEFT: brand / status panel -->
<aside class="panel">
<div class="panel_top">
<div class="brand">
<span class="brand_mark"><i class="fas fa-heartbeat"></i></span>
<span class="brand_name">Medi<span>bot</span></span>
</div>
</div>
<div class="panel_avatar">
<div class="avatar_ring">
<i class="fas fa-user-md avatar_img"></i>
<span class="avatar_status"></span>
</div>
<h2>Medibot Assistant</h2>
<p class="role">AI Medical Assistant</p>
<div class="status_chip"><span class="dot"></span>Online 路 Ready to help</div>
</div>
<p class="panel_desc">
Ask about symptoms, conditions, medications, or general health guidance. Responses are generated by an AI model trained on medical literature.
</p>
<div class="panel_stats">
<div class="stat">
<i class="fas fa-bolt"></i>
<div><span>Instant</span><small>Response time</small></div>
</div>
<div class="stat">
<i class="fas fa-shield-alt"></i>
<div><span>Private</span><small>No data stored</small></div>
</div>
</div>
<div class="panel_footer">
<i class="fas fa-exclamation-triangle"></i>
<span>Not a substitute for professional medical advice. In an emergency, contact a doctor.</span>
</div>
</aside>
<!-- RIGHT: chat area -->
<main class="chat">
<header class="chat_head">
<div class="chat_head_left">
<span>Conversation</span>
<p>Secure session 路 AI-generated responses</p>
</div>
<div class="chat_head_right"><i class="fas fa-ellipsis-v"></i></div>
</header>
<div id="messageFormeight" class="msg_card_body">
<div class="welcome_block">
<div class="welcome_icon"><i class="fas fa-stethoscope"></i></div>
<h3>Welcome to Medibot</h3>
<p>Start by describing your symptoms or asking a health-related question below.</p>
</div>
</div>
<div class="card-footer">
<form id="messageArea" class="input-group">
<input type="text" id="text" name="msg" placeholder="Describe your symptoms or ask a question..." autocomplete="off" class="type_msg" required/>
<button type="submit" id="send" class="send_btn"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</main>
</div>
<script>
$(document).ready(function() {
$("#messageArea").on("submit", function(event) {
const date = new Date();
const hour = date.getHours();
const minute = date.getMinutes();
const str_time = hour+":"+minute;
var rawText = $("#text").val();
var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg user_avatar"><i class="fas fa-user"></i></div></div>';
$("#text").val("");
$("#messageFormeight").append(userHtml);
$("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
var typingHtml = '<div class="d-flex justify-content-start mb-4 typing_row" id="typingIndicator"><div class="img_cont_msg bot_avatar"><i class="fas fa-user-md"></i></div><div class="msg_cotainer typing_dots"><span></span><span></span><span></span></div></div>';
$("#messageFormeight").append(typingHtml);
$("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
$.ajax({
data: {
msg: rawText,
},
type: "POST",
url: "/get",
}).done(function(data) {
$("#typingIndicator").remove();
var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg bot_avatar"><i class="fas fa-user-md"></i></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
$("#messageFormeight").append($.parseHTML(botHtml));
$("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
});
event.preventDefault();
});
});
</script>
</body>
</html> |