Hugging Face's logo

Spaces:
jvedsaqib
/
Future_On
Sleeping

App Files Community
jvedsaqib commited on
Commit
4799f24
·
verified ·
1 Parent(s): bc5dfe9

Create templates/query.html

Browse files
Files changed (1) hide show
  1. templates/query.html +193 -0
templates/query.html ADDED
@@ -0,0 +1,193 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Chat Interface</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f4f9;
11
+ margin: 0;
12
+ padding: 0;
13
+ color: #333;
14
+ }
15
+
16
+ h1 {
17
+ text-align: center;
18
+ margin-top: 20px;
19
+ font-size: 2em;
20
+ color: #4a4a4a;
21
+ }
22
+
23
+ .container-box {
24
+ display: flex;
25
+ align-items: flex-start;
26
+ justify-content: center;
27
+ margin: 20px;
28
+ padding: 20px;
29
+ background-color: #fff;
30
+ border-radius: 8px;
31
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ .img-container {
35
+ flex: 1;
36
+ margin-right: 20px;
37
+ width: 100%;
38
+ height: 100%;
39
+ border: 2px solid #ccc;
40
+ border-radius: 8px;
41
+ overflow: hidden;
42
+ display: flex;
43
+ justify-content: center;
44
+ align-items: center;
45
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
46
+ }
47
+
48
+ .img-container img {
49
+ max-width: 100%;
50
+ max-height: 100%;
51
+ object-fit: cover;
52
+ border-radius: 8px;
53
+ }
54
+
55
+ .chat-container {
56
+ flex: 2;
57
+ display: flex;
58
+ flex-direction: column;
59
+ max-width: 600px;
60
+ }
61
+
62
+ .chat-message {
63
+ margin: 10px 0;
64
+ padding: 10px;
65
+ border-radius: 10px;
66
+ max-width: 100%;
67
+ word-wrap: break-word;
68
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
69
+ }
70
+
71
+ .user-message {
72
+ background-color: #d1f7c4;
73
+ align-self: flex-end;
74
+ }
75
+
76
+ .bot-message {
77
+ background-color: #e3e3e3;
78
+ align-self: flex-start;
79
+ }
80
+
81
+ .textarea-container {
82
+ margin-top: 20px;
83
+ }
84
+
85
+ .textarea-container textarea {
86
+ width: 100%;
87
+ height: 100px;
88
+ padding: 10px;
89
+ border: 1px solid #ddd;
90
+ border-radius: 5px;
91
+ font-size: 16px;
92
+ resize: none;
93
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
94
+ }
95
+
96
+ .textarea-container input[type="file"] {
97
+ display: block;
98
+ margin: 10px 0;
99
+ border: 1px solid #ddd;
100
+ border-radius: 5px;
101
+ padding: 5px;
102
+ background-color: #f9f9f9;
103
+ cursor: pointer;
104
+ }
105
+
106
+ .textarea-container label.thumbnail-button {
107
+ display: inline-block;
108
+ margin: 10px 0;
109
+ padding: 8px 16px;
110
+ background-color: #007bff;
111
+ color: #fff;
112
+ border-radius: 5px;
113
+ cursor: pointer;
114
+ text-align: center;
115
+ font-size: 16px;
116
+ font-weight: bold;
117
+ }
118
+
119
+ .textarea-container label.thumbnail-button:hover {
120
+ background-color: #0056b3;
121
+ }
122
+
123
+ .textarea-container button.send-button {
124
+ display: inline-block;
125
+ padding: 10px 20px;
126
+ border: none;
127
+ border-radius: 5px;
128
+ background-color: #28a745;
129
+ color: #fff;
130
+ font-size: 16px;
131
+ cursor: pointer;
132
+ }
133
+
134
+ .textarea-container button.send-button:hover {
135
+ background-color: #218838;
136
+ }
137
+
138
+ .form-wrapper {
139
+ display: flex;
140
+ flex-direction: column;
141
+ align-items: flex-start;
142
+ }
143
+ </style>
144
+ </head>
145
+ <body>
146
+ <h1>
147
+ FUTURE
148
+ <img
149
+ src="/—Pngtree—chatbot in modern semi circle_8927769.png"
150
+ alt="O"
151
+ style="width: 50px; vertical-align: middle;"
152
+ />
153
+ N
154
+ </h1>
155
+ <div class="container-box">
156
+ <div class="img-container" id="img-container">
157
+ {% if filename %}
158
+ <img src="{{ filename }}" alt="Uploaded Image" id="uploaded-img">
159
+ {% else %}
160
+ <p>No image uploaded</p>
161
+ {% endif %}
162
+ </div>
163
+ <div class="chat-container" id="chat-container">
164
+ <div class="chat-messages">
165
+ {% if user_message %}
166
+ <div class="chat-message user-message">{{ user_message }}</div>
167
+ {% endif %}
168
+ {% if bot_response %}
169
+ <div class="chat-message bot-message">{{ bot_response }}</div>
170
+ {% endif %}
171
+ </div>
172
+ <div class="textarea-container">
173
+ <form action="/Query.html" method="post" enctype="multipart/form-data">
174
+ <div class="form-wrapper">
175
+ <textarea name="message-input" id="message-input" placeholder="Type your message here"></textarea>
176
+ <input type="file" id="file-input" name="file-input"/>
177
+ <button type="submit" class="send-button">Send</button>
178
+ </div>
179
+ </form>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <script>
184
+ document.getElementById("file-input").addEventListener("change", function() {
185
+ const fileInput = document.getElementById("file-input");
186
+ const messageInput = document.getElementById("message-input");
187
+ if (fileInput.files.length > 0) {
188
+ messageInput.value = "";
189
+ }
190
+ });
191
+ </script>
192
+ </body>
193
+ </html>