Hugging Face's logo

Spaces:
simonduerr
/
gradio_molecule2d
Running

App Files Community
1
gradio_molecule2d
File size: 3,349 Bytes 
8b49f1d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0e81e14
8b49f1d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0e81e14
8b49f1d
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<script>
  // no good unbloated molecule sketch tool.
  // we load ketcher in frame if user want's to draw

  // create event dispatcher
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  import ClearButton from "./ClearButton.svelte";

  function getsmiles() {
    const iframe = document.querySelector("iframe");
    const ketcher = iframe.contentWindow.ketcher;
    ketcher.getSmiles().then((smiles) => {
      dispatch("moleculesketched", {
        smiles: smiles,
      });
    });
  }

  let ketcherDoc = `<!DOCTYPE html>
<html>
  <head> </head>
  <body style="background:white; height:100%">
    <div
      id="loading"
      style="display: flex; justify-content: center; align-items: center"
    >
      <p style="padding: 0.2rem 1rem 0 0; color: #c1c1c1; font-size: 1rem">
        loading SMILES editor
      </p>
      <svg
        version="1.1"
        id="L4"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 100 100"
        enable-background="new 0 0 0 0"
        xml:space="preserve"
        width="5rem"
      >
        <circle fill="#FF7C00" stroke="none" cx="6" cy="50" r="6">
          <animate
            attributeName="opacity"
            dur="1s"
            values="0;1;0"
            repeatCount="indefinite"
            begin="0.1"
          />
        </circle>
        <circle fill="#FF7C00" stroke="none" cx="26" cy="50" r="6">
          <animate
            attributeName="opacity"
            dur="1s"
            values="0;1;0"
            repeatCount="indefinite"
            begin="0.2"
          />
        </circle>
        <circle fill="#FF7C00" stroke="none" cx="46" cy="50" r="6">
          <animate
            attributeName="opacity"
            dur="1s"
            values="0;1;0"
            repeatCount="indefinite"
            begin="0.3"
          />
        </circle>
      </svg>
    </div>
    <div id="root"></div>
    <script>
      window.onload = function () {
        var loadingDiv = document.getElementById("loading");
        loadingDiv.style.display = "flex";
        //load css
        let url =
          "https://huggingface.co/datasets/simonduerr/ketcher-2.7.2/raw/main/static/css/main.6a646761.css";
        fetch(url)
          .then((res) => res.text())
          .then((text) => {
            const style = document.createElement("style");
            style.textContent = text;
            document.head.appendChild(style);
          });
        //load ketcher
        url =
          "https://huggingface.co/datasets/simonduerr/ketcher-2.7.2/resolve/main/static/js/main.5445f351.js";
        fetch(url)
          .then((res) => res.text())
          .then((text) => {
            const script = document.createElement("script");
            //script.type = "module"
            script.src = URL.createObjectURL(
              new Blob([text], { type: "application/javascript" })
            );
            document.head.appendChild(script);
            loadingDiv.style.display = "none";
          });
      };

    </\script>
  </body>
</html>
`;
</script>

<ClearButton on:clear={getsmiles} />

<div class="composerWrapper">
  <iframe srcdoc={ketcherDoc} />
</div>

<style>
  iframe {
    width: 100%;
    height: 650px;
  }
</style>