Hugging Face's logo

Spaces:
pvanand
/
specialized-agents
Running

App Files Community
pvanand commited on
Commit
7abc406
·
verified ·
1 Parent(s): 3ab957a

Update static/graph-maker.html

Browse files
Files changed (1) hide show
  1. static/graph-maker.html +73 -56
static/graph-maker.html CHANGED
@@ -3,15 +3,44 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Streamlined Interactive Chart Maker</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
9
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
14
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  body { padding-top: 2rem; background-color: #f8f9fa; }
16
  .card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
17
  #mermaid-output {
@@ -86,7 +115,7 @@
86
  </head>
87
  <body>
88
  <div id="app" class="container">
89
- <h1 class="mb-4 text-center">Architecture Nexus</h1>
90
  <div class="row justify-content-center">
91
  <div class="col-12">
92
  <div class="card mb-4">
@@ -102,7 +131,7 @@
102
  @input="onInputChange"
103
  @blur="onInputBlur"
104
  />
105
- <button @click="generateChart" :disabled="isInputDisabled" class="btn btn-primary">Generate Chart</button>
106
  </div>
107
  <div v-if="showRecommendations" class="recommendations">
108
  <ul>
@@ -141,14 +170,16 @@
141
  </div>
142
  </div>
143
 
144
- <script type="module">
145
- import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
146
-
 
 
 
 
147
  mermaid.initialize({
148
- startOnLoad: true,
149
  securityLevel: 'strict',
150
- flowchart: { useMaxWidth: false },
151
- gantt: { useMaxWidth: false },
152
  theme: 'default'
153
  });
154
 
@@ -183,15 +214,15 @@
183
  const RECOMMENDATIONS_ENDPOINT = 'https://pvanand-generate-subtopics.hf.space/get_recommendations_chart';
184
 
185
  const generateChart = async () => {
186
- if (!chartDescription.value.trim()) {
187
- error.value = 'Please enter a chart description.';
188
- return;
189
- }
190
-
191
- loading.value = true;
192
- error.value = '';
193
- isInputDisabled.value = true;
194
-
195
  try {
196
  const response = await axios.post(API_ENDPOINT, {
197
  prompt: `Generate Mermaid syntax for the following chart description: ${chartDescription.value} enclosed in <chart> </chart> tags. Respond only with the Mermaid syntax, no additional text.`,
@@ -223,31 +254,27 @@
223
  };
224
 
225
  const extractChartContent = (responseData) => {
226
- const match = responseData.match(/<chart>([\s\S]*?)<\/chart>/);
227
- if (match && match[1]) {
228
- // Remove ```mermaid at the start and ``` at the end, if present
229
- return match[1].trim().replace(/^```mermaid\n?/, '').replace(/```$/, '').trim();
230
- }
231
- return null;
232
- };
233
 
234
  const renderMermaid = async (input) => {
235
  try {
236
- const { svg } = await mermaid.render('mermaid-diagram', input);
237
  const container = document.getElementById('mermaid-output');
238
- container.innerHTML = svg;
239
- const svgElement = container.querySelector('svg');
240
-
241
- // Set viewBox attribute to ensure the entire SVG is visible
242
- const bbox = svgElement.getBBox();
243
- svgElement.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
244
-
245
- // Set width and height to 100% to fill the container
246
- svgElement.setAttribute('width', '100%');
247
- svgElement.setAttribute('height', '100%');
248
 
 
 
 
 
 
 
 
249
  error.value = '';
250
- addZoomFunctionality();
251
  chartReady.value = true;
252
  } catch (err) {
253
  error.value = 'Error rendering diagram. Please check your Mermaid syntax.';
@@ -255,33 +282,23 @@
255
  }
256
  };
257
 
258
- const addZoomFunctionality = () => {
259
- const svg = d3.select("#mermaid-output svg");
260
- svg.html("<g>" + svg.html() + "</g>");
261
- const inner = svg.select("g");
262
- const zoom = d3.zoom().on("zoom", (event) => {
263
- inner.attr("transform", event.transform);
264
- });
265
- svg.call(zoom);
266
- };
267
-
268
  const toggleFullscreen = () => {
269
  const element = document.getElementById('mermaid-output');
270
  if (!document.fullscreenElement) {
271
  if (element.requestFullscreen) {
272
  element.requestFullscreen();
273
- } else if (element.webkitRequestFullscreen) { /* Safari */
274
  element.webkitRequestFullscreen();
275
- } else if (element.msRequestFullscreen) { /* IE11 */
276
  element.msRequestFullscreen();
277
  }
278
  isFullscreen.value = true;
279
  } else {
280
  if (document.exitFullscreen) {
281
  document.exitFullscreen();
282
- } else if (document.webkitExitFullscreen) { /* Safari */
283
  document.webkitExitFullscreen();
284
- } else if (document.msExitFullscreen) { /* IE11 */
285
  document.msExitFullscreen();
286
  }
287
  isFullscreen.value = false;
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Architecture Nexus</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 
 
 
 
 
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f0f4f8;
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+ .title {
19
+ font-weight: 500;
20
+ font-size: 60px !important;
21
+ background: linear-gradient(45deg, #3b82f6, #10b981);
22
+ -webkit-background-clip: text;
23
+ background-clip: text;
24
+ color: transparent;
25
+ text-align: center;
26
+ margin: 0;
27
+ padding: 2rem 0 0.5rem;
28
+ }
29
+ .generate-button {
30
+ background: linear-gradient(45deg, #3b82f6, #10b981);
31
+ -webkit-background-clip: text;
32
+ background-clip: text;
33
+ color: transparent;
34
+ text-align: center;
35
+ margin: 0;
36
+ padding: 2rem 0 0.5rem;
37
+ }
38
+ .subtitle {
39
+ font-size: 24px;
40
+ color: #4b5563;
41
+ text-align: center;
42
+ }
43
+
44
  body { padding-top: 2rem; background-color: #f8f9fa; }
45
  .card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
46
  #mermaid-output {
 
115
  </head>
116
  <body>
117
  <div id="app" class="container">
118
+ <h1 class="title">Architecture Nexus</h1>
119
  <div class="row justify-content-center">
120
  <div class="col-12">
121
  <div class="card mb-4">
 
131
  @input="onInputChange"
132
  @blur="onInputBlur"
133
  />
134
+ <button @click="generateChart" :disabled="isInputDisabled" class="btn btn-primary " >Generate</button>
135
  </div>
136
  <div v-if="showRecommendations" class="recommendations">
137
  <ul>
 
170
  </div>
171
  </div>
172
 
173
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
174
+ <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
175
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
176
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
177
+ <script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
178
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
179
+ <script>
180
  mermaid.initialize({
181
+ startOnLoad: false,
182
  securityLevel: 'strict',
 
 
183
  theme: 'default'
184
  });
185
 
 
214
  const RECOMMENDATIONS_ENDPOINT = 'https://pvanand-generate-subtopics.hf.space/get_recommendations_chart';
215
 
216
  const generateChart = async () => {
217
+ if (!chartDescription.value.trim()) {
218
+ error.value = 'Please enter a chart description.';
219
+ return;
220
+ }
221
+
222
+ loading.value = true;
223
+ error.value = '';
224
+ isInputDisabled.value = true;
225
+
226
  try {
227
  const response = await axios.post(API_ENDPOINT, {
228
  prompt: `Generate Mermaid syntax for the following chart description: ${chartDescription.value} enclosed in <chart> </chart> tags. Respond only with the Mermaid syntax, no additional text.`,
 
254
  };
255
 
256
  const extractChartContent = (responseData) => {
257
+ const match = responseData.match(/<chart>([\s\S]*?)<\/chart>/);
258
+ if (match && match[1]) {
259
+ return match[1].trim().replace(/^```mermaid\n?/, '').replace(/```$/, '').trim();
260
+ }
261
+ return null;
262
+ };
 
263
 
264
  const renderMermaid = async (input) => {
265
  try {
266
+ const { svg } = await mermaid.render('mySvgId', input);
267
  const container = document.getElementById('mermaid-output');
268
+ container.innerHTML = svg.replace(/[ ]*max-width:[ 0-9\.]*px;/i , '');
 
 
 
 
 
 
 
 
 
269
 
270
+ svgPanZoom('#mySvgId', {
271
+ zoomEnabled: true,
272
+ controlIconsEnabled: true,
273
+ fit: true,
274
+ center: true
275
+ });
276
+
277
  error.value = '';
 
278
  chartReady.value = true;
279
  } catch (err) {
280
  error.value = 'Error rendering diagram. Please check your Mermaid syntax.';
 
282
  }
283
  };
284
 
 
 
 
 
 
 
 
 
 
 
285
  const toggleFullscreen = () => {
286
  const element = document.getElementById('mermaid-output');
287
  if (!document.fullscreenElement) {
288
  if (element.requestFullscreen) {
289
  element.requestFullscreen();
290
+ } else if (element.webkitRequestFullscreen) {
291
  element.webkitRequestFullscreen();
292
+ } else if (element.msRequestFullscreen) {
293
  element.msRequestFullscreen();
294
  }
295
  isFullscreen.value = true;
296
  } else {
297
  if (document.exitFullscreen) {
298
  document.exitFullscreen();
299
+ } else if (document.webkitExitFullscreen) {
300
  document.webkitExitFullscreen();
301
+ } else if (document.msExitFullscreen) {
302
  document.msExitFullscreen();
303
  }
304
  isFullscreen.value = false;