Svg viewer

web/package.json

@@ -22,6 +22,7 @@
     "@vicons/ionicons5": "^0.12.0",
     "@vscode/markdown-it-katex": "^1.0.3",
     "@vueuse/core": "^9.13.0",
+    "dompurify": "^3.1.6",
     "dot-env": "^0.0.1",
     "highlight.js": "^11.7.0",
     "html2canvas": "^1.4.1",
@@ -74,4 +75,4 @@
       "pnpm lint:fix"
     ]
   }
-}
+}

web/src/router/index.ts

@@ -22,6 +22,11 @@ const routes: RouteRecordRaw[] = [
     name: 'Prompt',
     component: () => import('@/views/prompt/creator.vue')
   },
+  {
+    path: '/prompt/svg',
+    name: 'Prompt',
+    component: () => import('@/views/prompt/svgViewer.vue')
+  },
   {
     path: '/bot',
     name: 'Bot',

web/src/views/prompt/svgViewer.vue

@@ -0,0 +1,67 @@
+<template>
+        <div class="flex flex-row w-full">
+                <div class="flex-1 m-5">
+                        <div class="flex justify-between mb-4">
+                                <n-button type="primary" class="rounded-lg">Raw</n-button>
+                                <n-button @click="clearSvgContent" type="error" class="rounded-lg">Clear</n-button>
+                        </div>
+                        <n-input v-model:value="svgContent" type="textarea" :autosize="{ minRows: 20, maxRows: 60 }"
+                                placeholder="Paste your SVG code here" class="w-full border rounded-lg shadow-md" />
+                </div>
+                <div class="flex-1 m-5">
+                        <div class="flex justify-between mb-4">
+                                <n-button @click="saveToPng" type="success" class="rounded-lg">Save</n-button>
+                        </div>
+                        <div v-html="sanitizedSvgContent" class="w-full h-full">
+                        </div>
+                </div>
+        </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { NInput, NDivider, NButton } from 'naive-ui'
+import DOMPurify from 'dompurify'
+
+const svgContent = ref(localStorage.getItem('svgContent') || '')
+
+watch(svgContent, (newValue) => {
+        localStorage.setItem('svgContent', newValue);
+});
+
+const sanitizedSvgContent = computed(() => {
+        return DOMPurify.sanitize(svgContent.value)
+})
+
+const saveToPng = () => {
+        const svgElement = new Blob([sanitizedSvgContent.value], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(svgElement);
+        const img = new Image();
+        img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0);
+                const pngUrl = canvas.toDataURL('image/png');
+                const a = document.createElement('a');
+                a.href = pngUrl;
+                a.download = 'image.png';
+                a.click();
+                URL.revokeObjectURL(url);
+        };
+        img.src = url;
+}
+
+const clearSvgContent = () => {
+        svgContent.value = '';
+}
+
+</script>
+
+<style scoped>
+.svg-container {
+        overflow: auto;
+        /* Light background for contrast */
+}
+</style>