specialized-agents

Running

App Files Files Community

pvanand commited on Sep 10, 2024

Commit

8cb8223

verified ·

1 Parent(s): 643f187

Create graph-maker.html

Browse files

Files changed (1) hide show

static/graph-maker.html +215 -0

static/graph-maker.html ADDED Viewed

	@@ -0,0 +1,215 @@

+<!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>
+                        <div v-if="error" class="alert alert-danger mt-3" role="alert">{{ error }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        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()) {
+                        error.value = 'Please enter a chart description.';
+                        return;
+                    }
+                    loading.value = true;
+                    error.value = '';
+                    mermaidInput.value = '';
+                    isInputDisabled.value = true;
+                    try {
+                        const response = await axios.post(API_ENDPOINT, {
+                            prompt: `Generate Mermaid syntax for the following chart description: ${chartDescription.value}`,
+                            system_message: "You are a helpful assistant that generates Mermaid syntax for charts. Respond only with the Mermaid syntax, no additional text.",
+                            model_id: "anthropic/claude-3.5-sonnet",
+                            conversation_id: "string",
+                            user_id: "string"
+                        }, {
+                            headers: {
+                                'accept': 'application/json',
+                                'X-API-Key': API_KEY,
+                                'Content-Type': 'application/json'
+                            }
+                        });
+                        mermaidInput.value = cleanMermaidSyntax(response.data);
+                    } catch (err) {
+                        error.value = 'Error generating chart. Please try again.';
+                        console.error('API Error:', err.message);
+                    } finally {
+                        loading.value = false;
+                        isInputDisabled.value = false;
+                    }
+                };
+                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>