Hugging Face's logo

Spaces:
Kirai-Kevin
/
Travel-chatbot
Running

App Files Community
Kirai-Kevin commited on
Commit
f447cd8
·
verified ·
1 Parent(s): d1f719e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +76 -51
index.html CHANGED
@@ -1,57 +1,82 @@
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
7
- <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
8
-
9
- <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
11
-
12
- <style>
13
- html, body {
14
- margin: 0;
15
- padding: 0;
16
- height: 100%;
17
- }
18
- </style>
19
- </head>
20
- <body>
21
- <gradio-lite>
22
- <gradio-file name="app.py" entrypoint>
23
- import gradio as gr
24
-
25
- from filters import as_gray
26
-
27
- def process(input_image):
28
- output_image = as_gray(input_image)
29
- return output_image
30
-
31
- demo = gr.Interface(
32
- process,
33
- "image",
34
- "image",
35
- examples=["lion.jpg", "logo.png"],
36
- )
37
-
38
- demo.launch()
39
- </gradio-file>
40
-
41
- <gradio-file name="filters.py">
42
- from skimage.color import rgb2gray
43
-
44
- def as_gray(image):
45
- return rgb2gray(image)
46
- </gradio-file>
 
 
 
 
 
 
 
 
 
47
 
48
- <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
49
- <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
 
 
50
 
51
- <gradio-requirements>
52
- # Same syntax as requirements.txt
53
- scikit-image
54
- </gradio-requirements>
55
- </gradio-lite>
 
 
 
 
 
 
 
 
 
 
56
  </body>
57
  </html>
 
1
+ <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
2
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
3
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4
+
5
  <!DOCTYPE html>
6
  <html>
7
+ <head>
8
+ <title>Chatbot</title>
9
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
11
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12
+ <link rel="stylesheet" href="static/style.css"/>
13
+
14
+ </head>
15
+
16
+
17
+ <body>
18
+ <div class="container-fluid h-100">
19
+ <div class="row justify-content-center h-100">
20
+ <div class="col-md-8 col-xl-6 chat">
21
+ <div class="card">
22
+ <div class="card-header msg_head">
23
+ <div class="d-flex bd-highlight">
24
+ <div class="img_cont">
25
+ <!-- <img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img"> -->
26
+ <img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2022/10110226.jpeg" class="rounded-circle user_img">
27
+ <span class="online_icon"></span>
28
+ </div>
29
+ <div class="user_info">
30
+ <span>Travel bot</span>
31
+ <p>Ask me anything!</p>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ <div id="messageFormeight" class="card-body msg_card_body">
36
+
37
+
38
+ </div>
39
+ <div class="card-footer">
40
+ <form id="messageArea" class="input-group">
41
+ <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
42
+ <div class="input-group-append">
43
+ <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
44
+ </div>
45
+ </form>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <script>
53
+ $(document).ready(function() {
54
+ $("#messageArea").on("submit", function(event) {
55
+ const date = new Date();
56
+ const hour = date.getHours();
57
+ const minute = date.getMinutes();
58
+ const str_time = hour+":"+minute;
59
+ var rawText = $("#text").val();
60
 
61
+ 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"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div></div>';
62
+
63
+ $("#text").val("");
64
+ $("#messageFormeight").append(userHtml);
65
 
66
+ $.ajax({
67
+ data: {
68
+ msg: rawText,
69
+ },
70
+ type: "POST",
71
+ url: "/get",
72
+ }).done(function(data) {
73
+ var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
74
+ $("#messageFormeight").append($.parseHTML(botHtml));
75
+ });
76
+ event.preventDefault();
77
+ });
78
+ });
79
+ </script>
80
+
81
  </body>
82
  </html>