Hugging Face's logo

Spaces:
yasserrmd
/
webUIGen
Running

App Files Community
yasserrmd commited on
Commit
3948dee
·
verified ·
1 Parent(s): d21b859

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +235 -17
index.html CHANGED
@@ -1,19 +1,237 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Sample Form</title>
5
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
7
+ <style>
8
+ /* Style the form container */
9
+ .form-container {
10
+ max-width: 600px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ border: 1px solid #ccc;
14
+ border-radius: 5px;
15
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16
+ }
17
+
18
+ /* Style the form heading */
19
+ h1 {
20
+ font-size: 24px;
21
+ font-weight: bold;
22
+ margin-bottom: 20px;
23
+ }
24
+
25
+ /* Style the form icon */
26
+ .form-icon {
27
+ margin-right: 10px;
28
+ }
29
+
30
+ /* Style the group headings */
31
+ h2 {
32
+ font-size: 20px;
33
+ font-weight: bold;
34
+ margin-bottom: 10px;
35
+ padding: 10px;
36
+ border: 1px solid #ccc;
37
+ border-radius: 5px;
38
+ }
39
+
40
+ /* Style the group icon */
41
+ .group-icon {
42
+ margin-right: 5px;
43
+ }
44
+
45
+ /* Style the form fields */
46
+ .form-field {
47
+ margin-bottom: 10px;
48
+ }
49
+
50
+ /* Style the form field labels */
51
+ .form-field label {
52
+ font-weight: bold;
53
+ }
54
+
55
+ /* Style the form field inputs */
56
+ .form-field input,
57
+ .form-field textarea,
58
+ .form-field select {
59
+ width: 100%;
60
+ }
61
+
62
+ /* Style the form field checkboxes and radios */
63
+ .form-field input[type="checkbox"],
64
+ .form-field input[type="radio"] {
65
+ margin-right: 5px;
66
+ }
67
+
68
+ /* Style the form field checkbox and radio labels */
69
+ .form-field label[for] {
70
+ display: inline;
71
+ font-weight: normal;
72
+ }
73
+
74
+ /* Style the form field error messages */
75
+ .form-field .error-message {
76
+ color: red;
77
+ font-size: 12px;
78
+ margin-top: 5px;
79
+ }
80
+
81
+ /* Style the form submit and cancel buttons */
82
+ .form-buttons {
83
+ margin-top: 20px;
84
+ }
85
+
86
+ .form-buttons button {
87
+ padding: 10px 20px;
88
+ border: none;
89
+ border-radius: 5px;
90
+ cursor: pointer;
91
+ }
92
+
93
+ .form-buttons button[type="submit"] {
94
+ background-color: #4CAF50;
95
+ color: white;
96
+ margin-right: 10px;
97
+ }
98
+
99
+ .form-buttons button[type="reset"] {
100
+ background-color: #f44336;
101
+ color: white;
102
+ }
103
+
104
+ /* Use Bootstrap classes to style the form and group headings */
105
+ .form-container {
106
+ border: none;
107
+ box-shadow: none;
108
+ padding: 2rem;
109
+ background-color: #f8f9fa;
110
+ border-radius: 0.25rem;
111
+ }
112
+
113
+ h1 {
114
+ font-size: 2.5rem;
115
+ margin-bottom: 2rem;
116
+ }
117
+
118
+ h2 {
119
+ font-size: 1.5rem;
120
+ margin-bottom: 1rem;
121
+ padding: 0.5rem 1rem;
122
+ background-color: #e9ecef;
123
+ border-radius: 0.25rem;
124
+ border: none;
125
+ }
126
+
127
+ .form-field {
128
+ margin-bottom: 1rem;
129
+ }
130
+
131
+ .form-field label {
132
+ font-weight: bold;
133
+ margin-bottom: 0.25rem;
134
+ }
135
+
136
+ .form-field input,
137
+ .form-field textarea,
138
+ .form-field select {
139
+ border-radius: 0.25rem;
140
+ }
141
+
142
+ .form-buttons button {
143
+ padding: 0.5rem 1rem;
144
+ border-radius: 0.25rem;
145
+ }
146
+
147
+ .form-buttons button[type="submit"] {
148
+ background-color: #007bff;
149
+ border-color: #007bff;
150
+ }
151
+
152
+ .form-buttons button[type="reset"] {
153
+ background-color: #dc3545;
154
+ border-color: #dc3545;
155
+ }
156
+
157
+
158
+ </style>
159
+ </head>
160
+ <body>
161
+ <div class="container" style="margin-top: 50px;">
162
+ <form id="messageForm">
163
+ <div class="input-group mb-3">
164
+ <input type="text" class="form-control" id="messageInput" placeholder="Type your message here...">
165
+ <!-- <textarea class="form-control" id="messageInput" placeholder="Type your message here..." rows="7"></textarea> -->
166
+ <div class="input-group-append">
167
+ <button class="btn btn-outline-secondary" type="submit" id="sendButton">
168
+ <i id="buttonIcon" class="fas fa-paper-plane"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </form>
173
+ </div>
174
+
175
+ <div class="container-fluid" id="htmlDiv">
176
+ <div class=" embed-responsive-16by9">
177
+ <iframe id="myIframe" class="embed-responsive-item" style="width: 100%;border: none;"></iframe>
178
+ </div>
179
+ </div>
180
+
181
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
182
+ <script>
183
+ // document.getElementById('myIframe').onload = function() {
184
+ // document.getElementById('myIframe').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
185
+ // //document.getElementById('htmlDiv').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
186
+
187
+ // }
188
+
189
+ var iframe = document.getElementById('myIframe');
190
+ iframe.onload = function() {
191
+ iframe.contentWindow.document.body.style.margin = '0';
192
+ iframe.contentWindow.document.body.style.padding = '0';
193
+ iframe.style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
194
+
195
+ }
196
+ $(document).ready(function() {
197
+ $('#messageForm').on('submit', function(e) {
198
+ e.preventDefault();
199
+ var message = $('#messageInput').val();
200
+ var buttonIcon = $('#buttonIcon');
201
+ //$("#htmlPreview").html('');
202
+ // Change icon to loading spinner
203
+ document.getElementById('myIframe').srcdoc = '';
204
+ buttonIcon.removeClass('fa-paper-plane').addClass('fa-spinner fa-spin');
205
+
206
+ $.ajax({
207
+ url: 'http://74.48.211.190:3000/api/v1/prediction/0c48e9e8-03ba-4b5d-bb70-a5ad570d1717',
208
+ type: 'POST',
209
+ data: JSON.stringify({"question": + message }),
210
+ contentType: 'application/json',
211
+ success: function(data) {
212
+ // Change icon back to paper plane
213
+ $('#messageInput').val('');
214
+ var text=data.text
215
+ var startIndex = text.indexOf("<");
216
+ var endIndex = text.lastIndexOf(">") + 1;
217
+ var htmlString = text.substring(startIndex, endIndex);
218
+ document.getElementById('myIframe').srcdoc = htmlString;
219
+ //$("#htmlPreview").html(htmlString);
220
+ buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
221
+ // Handle success here
222
+ },
223
+ error: function(jqXHR, textStatus, errorThrown) {
224
+ // Change icon back to paper plane
225
+ buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
226
+ // Handle error here
227
+ }
228
+ });
229
+ });
230
+ });
231
+ </script>
232
+
233
+ <!-- <div class="container" id="htmlPreview">
234
+
235
+ </div> -->
236
+ </body>
237
  </html>