specialized-agents

Running

App Files Files Community

pvanand commited on Sep 11, 2024

Commit

0f116bc

verified ·

1 Parent(s): 51c5935

Update static/graph-maker.html

Browse files

Files changed (1) hide show

static/graph-maker.html +253 -88

static/graph-maker.html CHANGED Viewed

@@ -1,90 +1,136 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Chart Maker with LLM</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
     <style>
-        body {
-            padding-top: 2rem;
-            background-color: #f8f9fa;
-        }
-        .card {
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
         #mermaid-output {
-            min-height: 200px;
             width: 100%;
-            margin: 1rem auto;
             position: relative;
             background-color: white;
         }
         .loading-overlay {
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
             background-color: rgba(255, 255, 255, 0.7);
             display: flex;
             justify-content: center;
             align-items: center;
             z-index: 1000;
         }
-        .code-toggle {
-            font-size: 0.9rem;
-            padding: 0.25rem 0.5rem;
-            margin-bottom: 0.5rem;
         }
-        .code-toggle::after {
-            content: " ▼";
-            font-size: 0.8em;
-            transition: transform 0.2s;
-            display: inline-block;
-            margin-left: 0.25rem;
         }
-        .code-toggle.collapsed::after {
-            transform: rotate(-90deg);
         }
-        @media (max-width: 768px) {
-            .input-group {
-                flex-direction: column;
-            }
-            .input-group > * {
-                margin-bottom: 0.5rem;
-                width: 100%;
-            }
         }
     </style>
 </head>
 <body>
     <div id="app" class="container">
-        <h1 class="mb-4 text-center">Interactive Chart Maker</h1>
         <div class="row justify-content-center">
-            <div class="col-lg-10 col-md-12">
                 <div class="card mb-4">
                     <div class="card-body">
                         <div class="input-group mb-3">
-                            <input v-model="chartDescription" :disabled="isInputDisabled" class="form-control" placeholder="Describe the chart you want..." aria-label="Chart description" />
                             <button @click="generateChart" :disabled="isInputDisabled" class="btn btn-primary">Generate Chart</button>
                         </div>
-                        <div class="d-flex justify-content-end">
-                            <button class="btn btn-outline-secondary btn-sm code-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#codeCollapse" aria-expanded="false" aria-controls="codeCollapse">
-                                Code
-                            </button>
-                        </div>
-                        <div class="collapse" id="codeCollapse">
-                            <textarea v-model="mermaidInput" @input="debouncedRenderMermaid" :disabled="isInputDisabled" class="form-control mb-3" rows="6" placeholder="Mermaid syntax will appear here..." aria-label="Mermaid syntax"></textarea>
                         </div>
-                        <div id="mermaid-output" class="border rounded p-3">
-                            <div v-if="loading" class="loading-overlay" aria-busy="true">
-                                <div class="spinner-border text-primary" role="status">
-                                    <span class="visually-hidden">Loading...</span>
                                 </div>
                             </div>
                         </div>
@@ -98,17 +144,13 @@
     <script type="module">
         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-        const defaultConfig = {
             startOnLoad: true,
             securityLevel: 'strict',
             flowchart: { useMaxWidth: false },
             gantt: { useMaxWidth: false },
             theme: 'default'
-        };
-        mermaid.initialize(defaultConfig);
-        const { createApp, ref, watch } = Vue;
         function debounce(func, wait) {
             let timeout;
@@ -122,25 +164,23 @@
             };
         }
         createApp({
             setup() {
                 const chartDescription = ref('');
-                const mermaidInput = ref('');
                 const error = ref('');
                 const loading = ref(false);
                 const isInputDisabled = ref(false);
                 const API_ENDPOINT = 'https://pvanand-audio-chat.hf.space/llm-agent';
                 const API_KEY = '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4';
-                const cleanMermaidSyntax = (input) => {
-                    let cleaned = input.trim();
-                    cleaned = cleaned.replace(/^```mermaid\n?|```$/gm, '');
-                    if (!cleaned.match(/^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|requirementDiagram)/)) {
-                        cleaned = 'graph TD\n' + cleaned;
-                    }
-                    return cleaned;
-                };
                 const generateChart = async () => {
                     if (!chartDescription.value.trim()) {
@@ -150,7 +190,6 @@
                     loading.value = true;
                     error.value = '';
-                    mermaidInput.value = '';
                     isInputDisabled.value = true;
                     try {
@@ -168,7 +207,8 @@
                             }
                         });
-                        mermaidInput.value = cleanMermaidSyntax(response.data);
                     } catch (err) {
                         error.value = 'Error generating chart. Please try again.';
                         console.error('API Error:', err.message);
@@ -178,38 +218,163 @@
                     }
                 };
-                const renderMermaid = () => {
-                    const output = document.getElementById('mermaid-output');
-                    mermaid.render('mermaid-diagram', mermaidInput.value)
-                        .then(({ svg }) => {
-                            output.innerHTML = svg;
-                            error.value = '';
-                        })
-                        .catch(err => {
-                            error.value = 'Error rendering diagram. Please check your Mermaid syntax.';
-                            console.error('Mermaid Error:', err.message);
                         });
                 };
-                const debouncedRenderMermaid = debounce(renderMermaid, 300);
-                watch(mermaidInput, (newValue) => {
-                    if (newValue.trim() !== '') {
-                        debouncedRenderMermaid();
                     }
                 });
                 return {
                     chartDescription,
-                    mermaidInput,
                     error,
                     loading,
                     isInputDisabled,
                     generateChart,
-                    debouncedRenderMermaid
                 };
             }
         }).mount('#app');
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Streamlined Interactive Chart Maker</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
     <style>
+        body { padding-top: 2rem; background-color: #f8f9fa; }
+        .card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
         #mermaid-output {
             width: 100%;
+            height: 100%;
             position: relative;
             background-color: white;
         }
         .loading-overlay {
             position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
             background-color: rgba(255, 255, 255, 0.7);
             display: flex;
             justify-content: center;
             align-items: center;
             z-index: 1000;
         }
+        .chart-output {
+            height: 800px;
+            width: 100%;
+            overflow: hidden;
+            position: relative;
         }
+        #mermaid-output svg { width: 100%; height: 100%; }
+        @media (max-width: 768px) {
+            .input-group { flex-direction: column; }
+            .input-group > * { margin-bottom: 0.5rem; width: 100%; }
         }
+        .fullscreen #mermaid-output {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 9999;
         }
+        .recommendations {
+            position: absolute;
+            background-color: white;
+            border: 1px solid #ddd;
+            border-top: none;
+            max-height: 200px;
+            overflow-y: auto;
+            width: 100%;
+            z-index: 1000;
+        }
+        .recommendations ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+        .recommendations li {
+            padding: 10px;
+            cursor: pointer;
+        }
+        .recommendations li:hover {
+            background-color: #f0f0f0;
+        }
+        .chart-controls {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 1001;
+        }
+        .chart-controls .btn {
+            padding: 0.375rem 0.75rem;
+        }
+        .chart-controls .btn i {
+            font-size: 1.25rem;
         }
     </style>
 </head>
 <body>
     <div id="app" class="container">
+        <h1 class="mb-4 text-center">Architecture Nexus</h1>
         <div class="row justify-content-center">
+            <div class="col-12">
                 <div class="card mb-4">
                     <div class="card-body">
                         <div class="input-group mb-3">
+                            <input
+                                v-model="chartDescription"
+                                :disabled="isInputDisabled"
+                                class="form-control"
+                                placeholder="Describe the chart you want..."
+                                aria-label="Chart description"
+                                @focus="onInputFocus"
+                                @input="onInputChange"
+                                @blur="onInputBlur"
+                            />
                             <button @click="generateChart" :disabled="isInputDisabled" class="btn btn-primary">Generate Chart</button>
                         </div>
+                        <div v-if="showRecommendations" class="recommendations">
+                            <ul>
+                                <li v-for="recommendation in recommendations" @click="selectRecommendation(recommendation)">
+                                    {{ recommendation }}
+                                </li>
+                            </ul>
                         </div>
+                        <div class="chart-output" :class="{ 'fullscreen': isFullscreen }">
+                            <div class="chart-controls btn-group">
+                                <button @click="toggleFullscreen" class="btn btn-secondary" :title="isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'">
+                                    <i class="bi" :class="isFullscreen ? 'bi-fullscreen-exit' : 'bi-arrows-fullscreen'"></i>
+                                </button>
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-secondary " data-bs-toggle="dropdown" aria-expanded="false" title="Download">
+                                        <i class="bi bi-download"></i>
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="#" @click="downloadChart('png')">Download as PNG</a></li>
+                                        <li><a class="dropdown-item" href="#" @click="downloadChart('svg')">Download as SVG</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div id="mermaid-output" class="border rounded">
+                                <div v-if="loading" class="loading-overlay" aria-busy="true">
+                                    <div class="spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
     <script type="module">
         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({
             startOnLoad: true,
             securityLevel: 'strict',
             flowchart: { useMaxWidth: false },
             gantt: { useMaxWidth: false },
             theme: 'default'
+        });
         function debounce(func, wait) {
             let timeout;
             };
         }
+        const { createApp, ref } = Vue;
         createApp({
             setup() {
+                const chartReady = ref(false);
                 const chartDescription = ref('');
                 const error = ref('');
                 const loading = ref(false);
                 const isInputDisabled = ref(false);
+                const isFullscreen = ref(false);
+                const recommendations = ref([]);
+                const showRecommendations = ref(false);
+                const isFirstFocus = ref(true);
                 const API_ENDPOINT = 'https://pvanand-audio-chat.hf.space/llm-agent';
                 const API_KEY = '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4';
+                const RECOMMENDATIONS_ENDPOINT = 'https://pvanand-generate-subtopics.hf.space/get_recommendations_chart';
                 const generateChart = async () => {
                     if (!chartDescription.value.trim()) {
                     loading.value = true;
                     error.value = '';
                     isInputDisabled.value = true;
                     try {
                             }
                         });
+                        const cleanedInput = response.data.trim().replace(/^```mermaid\n?|```$/gm, '');
+                        renderMermaid(cleanedInput);
                     } catch (err) {
                         error.value = 'Error generating chart. Please try again.';
                         console.error('API Error:', err.message);
                     }
                 };
+                const renderMermaid = async (input) => {
+                    try {
+                        const { svg } = await mermaid.render('mermaid-diagram', input);
+                        const container = document.getElementById('mermaid-output');
+                        container.innerHTML = svg;
+                        const svgElement = container.querySelector('svg');
+                        // Set viewBox attribute to ensure the entire SVG is visible
+                        const bbox = svgElement.getBBox();
+                        svgElement.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
+                        // Set width and height to 100% to fill the container
+                        svgElement.setAttribute('width', '100%');
+                        svgElement.setAttribute('height', '100%');
+                        error.value = '';
+                        addZoomFunctionality();
+                        chartReady.value = true;
+                    } catch (err) {
+                        error.value = 'Error rendering diagram. Please check your Mermaid syntax.';
+                        console.error('Mermaid Error:', err.message);
+                    }
+                };
+                const addZoomFunctionality = () => {
+                    const svg = d3.select("#mermaid-output svg");
+                    svg.html("<g>" + svg.html() + "</g>");
+                    const inner = svg.select("g");
+                    const zoom = d3.zoom().on("zoom", (event) => {
+                        inner.attr("transform", event.transform);
+                    });
+                    svg.call(zoom);
+                };
+                const toggleFullscreen = () => {
+                    const element = document.getElementById('mermaid-output');
+                    if (!document.fullscreenElement) {
+                        if (element.requestFullscreen) {
+                            element.requestFullscreen();
+                        } else if (element.webkitRequestFullscreen) { /* Safari */
+                            element.webkitRequestFullscreen();
+                        } else if (element.msRequestFullscreen) { /* IE11 */
+                            element.msRequestFullscreen();
+                        }
+                        isFullscreen.value = true;
+                    } else {
+                        if (document.exitFullscreen) {
+                            document.exitFullscreen();
+                        } else if (document.webkitExitFullscreen) { /* Safari */
+                            document.webkitExitFullscreen();
+                        } else if (document.msExitFullscreen) { /* IE11 */
+                            document.msExitFullscreen();
+                        }
+                        isFullscreen.value = false;
+                    }
+                };
+                const getRecommendations = async () => {
+                    try {
+                        const response = await axios.post(RECOMMENDATIONS_ENDPOINT, {
+                            user_input: chartDescription.value,
+                            num_recommendations: 5
                         });
+                        recommendations.value = response.data.recommendations;
+                        showRecommendations.value = true;
+                    } catch (err) {
+                        console.error('Error fetching recommendations:', err);
+                    }
                 };
+                const debouncedGetRecommendations = debounce(getRecommendations, 300);
+                const onInputFocus = () => {
+                    if (isFirstFocus.value) {
+                        debouncedGetRecommendations();
+                        isFirstFocus.value = false;
                     }
+                };
+                const onInputChange = (event) => {
+                    const inputType = event.inputType;
+                    if (inputType === 'insertText' || inputType === 'deleteContentBackward' || inputType === 'deleteContentForward') {
+                        debouncedGetRecommendations();
+                    }
+                };
+                const onInputBlur = () => {
+                    setTimeout(() => {
+                        showRecommendations.value = false;
+                    }, 200);
+                };
+                const selectRecommendation = (recommendation) => {
+                    chartDescription.value = recommendation;
+                    showRecommendations.value = false;
+                };
+                const downloadChart = async (format) => {
+                    if (!chartReady.value) {
+                        console.error('Chart is not ready for download');
+                        return;
+                    }
+                    const element = document.getElementById('mermaid-output');
+                    const filename = 'chart';
+                    switch (format) {
+                        case 'png':
+                            {
+                                const canvas = await html2canvas(element);
+                                const pngData = canvas.toDataURL('image/png');
+                                downloadURI(pngData, `${filename}.png`);
+                            }
+                            break;
+                        case 'svg':
+                            {
+                                const svgData = new XMLSerializer().serializeToString(element.querySelector('svg'));
+                                const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
+                                const svgUrl = URL.createObjectURL(svgBlob);
+                                downloadURI(svgUrl, `${filename}.svg`);
+                                URL.revokeObjectURL(svgUrl);
+                            }
+                            break;
+                    }
+                };
+                const downloadURI = (uri, name) => {
+                    const link = document.createElement('a');
+                    link.download = name;
+                    link.href = uri;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                };
+                document.addEventListener('fullscreenchange', () => {
+                    isFullscreen.value = !!document.fullscreenElement;
                 });
                 return {
                     chartDescription,
                     error,
                     loading,
                     isInputDisabled,
+                    isFullscreen,
+                    recommendations,
+                    showRecommendations,
                     generateChart,
+                    toggleFullscreen,
+                    onInputFocus,
+                    onInputChange,
+                    onInputBlur,
+                    selectRecommendation,
+                    downloadChart
                 };
             }
         }).mount('#app');
     </script>
 </body>
+</html>