Update app.py

app.py

@@ -31,8 +31,106 @@ def predict(input_mol, style, contour_level, view_str, chains):
     os.system("inkscape outline_all.svg --actions='select-all;path-simplify;export-plain-svg' --export-filename pdb_opt.svg")
     print(os.stat("outline_all.svg").st_size / (1024 * 1024))
 
+    html_output = """
+    
+     <button id="copySvgBtn">Copy SVG to Clipboard</button>
+    <button id="copyPngBtn">Copy PNG to Clipboard</button>
+
+    <!-- Buttons for Download -->
+    <button id="downloadSvgBtn">Download SVG</button>
+    <button id="downloadPngBtn">Download PNG</button>
+    <script>
+    function copySvgToClipboard() {
+    const svgElement = document.getElementById('svgElement');
+    const svgData = new XMLSerializer().serializeToString(svgElement);
+    const blob = new Blob([svgData], { type: 'image/svg+xml' });
+    const clipboardItem = [new ClipboardItem({ 'image/svg+xml': blob })];
+
+    navigator.clipboard.write(clipboardItem).then(() => {
+        alert("SVG copied to clipboard!");
+    }).catch(err => {
+        console.error("Could not copy SVG to clipboard: ", err);
+    });
+}
+
+// Function to convert SVG to PNG and copy to clipboard
+function copyPngToClipboard() {
+    const svgElement = document.getElementById('svgElement');
+    const svgData = new XMLSerializer().serializeToString(svgElement);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = function () {
+        canvas.width = svgElement.clientWidth;
+        canvas.height = svgElement.clientHeight;
+        ctx.drawImage(img, 0, 0);
+        canvas.toBlob(blob => {
+            const clipboardItem = [new ClipboardItem({ 'image/png': blob })];
+            navigator.clipboard.write(clipboardItem).then(() => {
+                alert("PNG copied to clipboard!");
+            }).catch(err => {
+                console.error("Could not copy PNG to clipboard: ", err);
+            });
+        }, 'image/png');
+    };
+
+    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
+}
+
+// Function to download SVG
+function downloadSvg() {
+    const svgElement = document.getElementById('svgElement');
+    const svgData = new XMLSerializer().serializeToString(svgElement);
+    const blob = new Blob([svgData], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'image.svg';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+// Function to download PNG
+function downloadPng() {
+    const svgElement = document.getElementById('svgElement');
+    const svgData = new XMLSerializer().serializeToString(svgElement);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = function () {
+        canvas.width = svgElement.clientWidth;
+        canvas.height = svgElement.clientHeight;
+        ctx.drawImage(img, 0, 0);
+        canvas.toBlob(blob => {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'image.png';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }, 'image/png');
+    };
+
+    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
+}
+
+// Button event listeners
+document.getElementById('copySvgBtn').addEventListener('click', copySvgToClipboard);
+document.getElementById('copyPngBtn').addEventListener('click', copyPngToClipboard);
+document.getElementById('downloadSvgBtn').addEventListener('click', downloadSvg);
+document.getElementById('downloadPngBtn').addEventListener('click', downloadPng);
+    </script>
+    """
+    
     with open("pdb_opt.svg", "r") as f:
-        return f.read(), "pdb_opt.svg"
+        return f.read().replace("<svg", "<svg id='svgElement'")+html_output, "pdb_opt.svg"