Hugging Face's logo

aiyubali
/
Medical_Chatbot

Model card Files
xet
 Community
Medical_Chatbot
File size: 3,711 Bytes
b4f404b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shanin Portfolio</title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-gray-900 via-slate-900 to-gray-800 text-gray-200 font-poppins">

 <div class="flex justify-center items-center h-screen p-4">
  <div class="flex flex-col w-full max-w-xl h-[650px] bg-slate-800/60 border border-slate-700 rounded-2xl shadow-xl overflow-hidden">

    <!-- Header -->
    <div class="flex justify-between items-center px-5 py-4 bg-slate-900/70 border-b border-slate-700">
      <div class="flex items-center">
        <img src="/static/icon.png" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-cyan-400 mr-4">
        <div>
          <h5 class="text-white text-lg font-semibold">💬 Aiyub's Medical Assistant</h5>
          <p class="text-gray-400 text-sm">Ask me anything about my work!</p>
        </div>
      </div>
      <button class="text-cyan-400 hover:text-cyan-300 border-0 p-0">
        <i class="fas fa-arrow-left"></i>
      </button>
    </div>

    <!-- Chat Body -->
    <div id="messageFormeight" class="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-950/50 scroll-smooth"></div>

    <!-- Footer / Input -->
    <div class="border-t border-slate-700 bg-slate-900/70 p-4">
      <form id="messageArea" class="flex items-center space-x-3">
        <input type="text" id="text" name="msg" placeholder="Type a message..." required
          class="flex-1 px-4 py-3 rounded-full bg-slate-800 border border-cyan-500/40 focus:outline-none focus:ring-2 focus:ring-cyan-400 text-gray-100 placeholder-gray-400">
        <button type="submit" class="bg-cyan-500 hover:bg-cyan-400 transition rounded-full p-3 text-white">
          <i class="fas fa-paper-plane"></i>
        </button>
      </form>
    </div>

  </div>
</div>


  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#messageArea").on("submit", function(event) {
      event.preventDefault();

      const date = new Date();
      const str_time = date.getHours().toString().padStart(2,'0') + ":" + date.getMinutes().toString().padStart(2,'0');
      const rawText = $("#text").val();
      $("#text").val("");

      const userHtml = `
        <div class="message user-message mb-3 flex justify-end">
          <div class="msg-text bg-cyan-500 text-white p-3 rounded-2xl relative shadow-sm max-w-[80%]">
            ${rawText}
            <span class="absolute text-[10px] text-white/50 bottom-[-15px] right-2">${str_time}</span>
          </div>
        </div>`;
      $("#messageFormeight").append(userHtml).scrollTop($("#messageFormeight")[0].scrollHeight);

      $.post("/get", { msg: rawText }, function(data) {
        const botHtml = `
          <div class="message bot-message mb-3 flex justify-start">
            <div class="msg-text bg-slate-800/80 text-gray-200 p-3 rounded-2xl relative shadow-sm border border-slate-700 max-w-[80%]">
              ${data}
              <span class="absolute text-[10px] text-white/50 bottom-[-15px] right-2">${str_time}</span>
            </div>
          </div>`;
        $("#messageFormeight").append(botHtml).scrollTop($("#messageFormeight")[0].scrollHeight);
      });
    });
  });
  </script>

</body>
</html>