Hugging Face's logo

Spaces:
yasserrmd
/
triage-assessment-groq
Sleeping

App Files Community
yasserrmd commited on
Commit
e1a6e4d
•
1 Parent(s): e77be48

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +173 -173
index.html CHANGED
@@ -1,173 +1,173 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>BPMN Diagram Generator</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
10
- <style>
11
- body {
12
- background-color: #f8f9fa;
13
- }
14
-
15
- .card {
16
- background-color: #fff;
17
- border-radius: 12px;
18
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
19
- }
20
-
21
- .card-header {
22
- background-color: #343a40;
23
- color: #fff;
24
- border-top-left-radius: 12px;
25
- border-top-right-radius: 12px;
26
- }
27
-
28
- .btn-primary {
29
- background-color: #007bff;
30
- border-color: #007bff;
31
- }
32
-
33
- .btn-primary:hover {
34
- background-color: #0056b3;
35
- border-color: #004a99;
36
- }
37
-
38
- .btn-secondary {
39
- background-color: #6c757d;
40
- border-color: #6c757d;
41
- }
42
-
43
- .btn-secondary:hover {
44
- background-color: #5a6268;
45
- border-color: #545b62;
46
- }
47
-
48
- .loader {
49
- border: 4px solid #f3f3f3;
50
- border-top: 4px solid #007bff;
51
- border-radius: 50%;
52
- width: 30px;
53
- height: 30px;
54
- animation: spin 2s linear infinite;
55
- }
56
-
57
- @keyframes spin {
58
- 0% { transform: rotate(0deg); }
59
- 100% { transform: rotate(360deg); }
60
- }
61
- </style>
62
- </head>
63
- <body>
64
- <div class="container my-5">
65
- <h1 class="mb-4 text-center text-dark">
66
- <i class="fas fa-project-diagram mr-2"></i>
67
- BPMN Generator
68
- </h1>
69
- <div class="row justify-content-center">
70
- <div class="col-md-12">
71
- <div class="card mb-4">
72
- <div class="card-header">
73
- <i class="fas fa-code mr-2"></i>
74
- Generate BPMN
75
- </div>
76
- <div class="card-body">
77
- <div class="form-group">
78
- <label for="promptInput" class="form-label">Enter text:</label>
79
- <textarea class="form-control" id="promptInput" rows="3"></textarea>
80
- </div>
81
- <div class="form-group" style="margin-top: 20px;">
82
- <div class="d-flex justify-content-between">
83
- <button class="btn btn-primary" id="generateButton">
84
- <i class="fa fa-cog fa-spin d-none" id="loadingIcon"></i>
85
- Generate
86
- </button>
87
- <button class="btn btn-secondary" id="saveButton" style="display: none;">
88
- <i class="fas fa-download mr-2"></i>
89
- Save Image
90
- </button>
91
- </div>
92
- </div>
93
- </div>
94
- </div>
95
- <div class="card">
96
- <div class="card-header">
97
- <i class="fas fa-file-alt mr-2"></i>
98
- Output
99
- </div>
100
- <div class="card-body">
101
- <div class="form-group" style="display: none;">
102
- <label for="pipeFlowText" class="form-label">Pipe Flow Text:</label>
103
- <p id="pipeFlowText"></p>
104
- </div>
105
- <div class="form-group">
106
- <label for="pipeFlowImage" class="form-label">Pipe Flow Image:</label>
107
- <img id="pipeFlowImage" alt="Pipe Flow Image" class="img-fluid d-none">
108
- </div>
109
- </div>
110
- </div>
111
- </div>
112
- </div>
113
- </div>
114
-
115
- <script>
116
- const generateButton = document.getElementById('generateButton');
117
- const saveButton = document.getElementById('saveButton');
118
- const loadingIcon = document.getElementById('loadingIcon');
119
- const pipeFlowText = document.getElementById('pipeFlowText');
120
- const pipeFlowImage = document.getElementById('pipeFlowImage');
121
-
122
-
123
- generateButton.addEventListener('click', async () => {
124
- const promptInput = document.getElementById('promptInput').value;
125
- if (!promptInput) {
126
- alert('Please enter some text.');
127
- return;
128
- }
129
-
130
- // Show the loading indicator
131
- loadingIcon.classList.remove('d-none');
132
-
133
- try {
134
- const response = await fetch('http://localhost:8000/generate/', {
135
- method: 'POST',
136
- headers: {
137
- 'Content-Type': 'application/json'
138
- },
139
- body: JSON.stringify({ prompt: promptInput })
140
- });
141
-
142
- const data = await response.json();
143
-
144
- // Hide the loading indicator
145
- loadingIcon.classList.add('d-none');
146
-
147
- pipeFlowText.textContent = data.pipeFlowText;
148
-
149
- if (data.pipeFlowImage) {
150
- pipeFlowImage.src = `data:image/png;base64,${data.pipeFlowImage}`;
151
- pipeFlowImage.classList.remove('d-none');
152
- saveButton.style.display = 'inline-block';
153
- } else {
154
- pipeFlowImage.classList.add('d-none');
155
- saveButton.style.display = 'none';
156
- }
157
-
158
- saveButton.addEventListener('click', () => {
159
- const link = document.createElement('a');
160
- link.download = 'bpmn-diagram.png';
161
- link.href = pipeFlowImage.src;
162
- link.click();
163
- });
164
- } catch (error) {
165
- // Hide the loading indicator
166
- loadingIcon.classList.add('d-none');
167
- alert('Error generating the BPMN diagram. Please try again later.');
168
- console.error('Error:', error);
169
- }
170
- });
171
- </script>
172
- </body>
173
- </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>BPMN Diagram Generator</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
10
+ <style>
11
+ body {
12
+ background-color: #f8f9fa;
13
+ }
14
+
15
+ .card {
16
+ background-color: #fff;
17
+ border-radius: 12px;
18
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ .card-header {
22
+ background-color: #343a40;
23
+ color: #fff;
24
+ border-top-left-radius: 12px;
25
+ border-top-right-radius: 12px;
26
+ }
27
+
28
+ .btn-primary {
29
+ background-color: #007bff;
30
+ border-color: #007bff;
31
+ }
32
+
33
+ .btn-primary:hover {
34
+ background-color: #0056b3;
35
+ border-color: #004a99;
36
+ }
37
+
38
+ .btn-secondary {
39
+ background-color: #6c757d;
40
+ border-color: #6c757d;
41
+ }
42
+
43
+ .btn-secondary:hover {
44
+ background-color: #5a6268;
45
+ border-color: #545b62;
46
+ }
47
+
48
+ .loader {
49
+ border: 4px solid #f3f3f3;
50
+ border-top: 4px solid #007bff;
51
+ border-radius: 50%;
52
+ width: 30px;
53
+ height: 30px;
54
+ animation: spin 2s linear infinite;
55
+ }
56
+
57
+ @keyframes spin {
58
+ 0% { transform: rotate(0deg); }
59
+ 100% { transform: rotate(360deg); }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container my-5">
65
+ <h1 class="mb-4 text-center text-dark">
66
+ <i class="fas fa-project-diagram mr-2"></i>
67
+ BPMN Generator
68
+ </h1>
69
+ <div class="row justify-content-center">
70
+ <div class="col-md-12">
71
+ <div class="card mb-4">
72
+ <div class="card-header">
73
+ <i class="fas fa-code mr-2"></i>
74
+ Generate BPMN
75
+ </div>
76
+ <div class="card-body">
77
+ <div class="form-group">
78
+ <label for="promptInput" class="form-label">Enter text:</label>
79
+ <textarea class="form-control" id="promptInput" rows="3"></textarea>
80
+ </div>
81
+ <div class="form-group" style="margin-top: 20px;">
82
+ <div class="d-flex justify-content-between">
83
+ <button class="btn btn-primary" id="generateButton">
84
+ <i class="fa fa-cog fa-spin d-none" id="loadingIcon"></i>
85
+ Generate
86
+ </button>
87
+ <button class="btn btn-secondary" id="saveButton" style="display: none;">
88
+ <i class="fas fa-download mr-2"></i>
89
+ Save Image
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="card">
96
+ <div class="card-header">
97
+ <i class="fas fa-file-alt mr-2"></i>
98
+ Output
99
+ </div>
100
+ <div class="card-body">
101
+ <div class="form-group" style="display: none;">
102
+ <label for="pipeFlowText" class="form-label">Pipe Flow Text:</label>
103
+ <p id="pipeFlowText"></p>
104
+ </div>
105
+ <div class="form-group">
106
+ <label for="pipeFlowImage" class="form-label">Pipe Flow Image:</label>
107
+ <img id="pipeFlowImage" alt="Pipe Flow Image" class="img-fluid d-none">
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+ const generateButton = document.getElementById('generateButton');
117
+ const saveButton = document.getElementById('saveButton');
118
+ const loadingIcon = document.getElementById('loadingIcon');
119
+ const pipeFlowText = document.getElementById('pipeFlowText');
120
+ const pipeFlowImage = document.getElementById('pipeFlowImage');
121
+
122
+
123
+ generateButton.addEventListener('click', async () => {
124
+ const promptInput = document.getElementById('promptInput').value;
125
+ if (!promptInput) {
126
+ alert('Please enter some text.');
127
+ return;
128
+ }
129
+
130
+ // Show the loading indicator
131
+ loadingIcon.classList.remove('d-none');
132
+
133
+ try {
134
+ const response = await fetch('/generate/', {
135
+ method: 'POST',
136
+ headers: {
137
+ 'Content-Type': 'application/json'
138
+ },
139
+ body: JSON.stringify({ prompt: promptInput })
140
+ });
141
+
142
+ const data = await response.json();
143
+
144
+ // Hide the loading indicator
145
+ loadingIcon.classList.add('d-none');
146
+
147
+ pipeFlowText.textContent = data.pipeFlowText;
148
+
149
+ if (data.pipeFlowImage) {
150
+ pipeFlowImage.src = `data:image/png;base64,${data.pipeFlowImage}`;
151
+ pipeFlowImage.classList.remove('d-none');
152
+ saveButton.style.display = 'inline-block';
153
+ } else {
154
+ pipeFlowImage.classList.add('d-none');
155
+ saveButton.style.display = 'none';
156
+ }
157
+
158
+ saveButton.addEventListener('click', () => {
159
+ const link = document.createElement('a');
160
+ link.download = 'bpmn-diagram.png';
161
+ link.href = pipeFlowImage.src;
162
+ link.click();
163
+ });
164
+ } catch (error) {
165
+ // Hide the loading indicator
166
+ loadingIcon.classList.add('d-none');
167
+ alert('Error generating the BPMN diagram. Please try again later.');
168
+ console.error('Error:', error);
169
+ }
170
+ });
171
+ </script>
172
+ </body>
173
+ </html>