Deploy as a HF Space

.gitignore

@@ -5,4 +5,4 @@ npm-debug.log*
 node_modules
 bower_components
 typings
-/dist
+# /dist

README.md

@@ -0,0 +1,9 @@
+---
+title: coref
+emoji: ⚡
+colorFrom: yellow
+colorTo: yellow
+sdk: static
+---
+
+## Coref

dist/script.js

@@ -0,0 +1,304 @@
+var Coref = (function () {
+    function Coref(endpoint, opts) {
+        this.onStart = function () { };
+        this.onSuccess = function () { };
+        this.endpoint = endpoint;
+        if (opts.onStart) {
+            this.onStart = opts.onStart;
+        }
+        if (opts.onSuccess) {
+            this.onSuccess = opts.onSuccess;
+        }
+        window.addEventListener('resize', this.svgResize);
+    }
+    Coref.prototype.svgResize = function () {
+        if (!this.container || !this.svgContainer) {
+            return;
+        }
+        this.svgContainer.setAttribute('width', "" + this.container.scrollWidth);
+        this.svgContainer.setAttribute('height', "" + this.container.scrollHeight);
+    };
+    Coref.prototype.parse = function (text) {
+        var _this = this;
+        this.onStart();
+        var path = this.endpoint + "?text=" + encodeURIComponent(text);
+        var request = new XMLHttpRequest();
+        request.open('GET', path);
+        request.onload = function () {
+            if (request.status >= 200 && request.status < 400) {
+                _this.onSuccess();
+                var res = JSON.parse(request.responseText);
+                _this.render(res);
+            }
+            else {
+                console.error('Error', request);
+            }
+        };
+        request.send();
+    };
+    Coref.prototype.render = function (res) {
+        var _this = this;
+        var mentions = res.mentions;
+        for (var _i = 0, mentions_1 = mentions; _i < mentions_1.length; _i++) {
+            var m = mentions_1[_i];
+            m.singleScore = res.singleScores[m.index] || undefined;
+        }
+        var markup = Displacy.render(res.cleanedText, mentions);
+        if (!this.container || !this.svgContainer) {
+            return;
+        }
+        this.container.innerHTML = "<div class=\"text\">" + markup + "</div>";
+        this.svgContainer.textContent = "";
+        this.svgResize();
+        window.container = this.container;
+        window.svgContainer = this.svgContainer;
+        var endY = document.querySelector('.container .text').getBoundingClientRect().top
+            - this.container.getBoundingClientRect().top
+            - 2;
+        SvgArrow.yArrows = endY;
+        for (var _a = 0, _b = Object.entries(res.pairScores); _a < _b.length; _a++) {
+            var _c = _b[_a], __from = _c[0], scores = _c[1];
+            var from = parseInt(__from, 10);
+            for (var _d = 0, _e = Object.entries(scores); _d < _e.length; _d++) {
+                var _f = _e[_d], __to = _f[0], score = _f[1];
+                var to = parseInt(__to, 10);
+                var markFrom = document.querySelector("mark[data-index=\"" + from + "\"]");
+                var markTo = document.querySelector("mark[data-index=\"" + to + "\"]");
+                var arrow = new SvgArrow(this.container, markFrom, markTo, score);
+                if (score >= Math.max.apply(Math, Object.values(scores))) {
+                    arrow.classNames.push('score-ok');
+                    var singleScore = res.singleScores[from];
+                    if (singleScore && score >= singleScore) {
+                        arrow.classNames.push('score-best');
+                    }
+                }
+                this.svgContainer.appendChild(arrow.generate());
+            }
+        }
+        document.querySelectorAll('.displacy-arrow.score-ok').forEach(function (arw) {
+            _this.svgContainer.appendChild(arw);
+        });
+    };
+    return Coref;
+}());
+var Displacy = (function () {
+    function Displacy() {
+    }
+    Displacy.sortSpans = function (spans) {
+        spans.sort(function (a, b) {
+            if (a.start === b.start) {
+                return b.end - a.end;
+            }
+            return a.start - b.start;
+        });
+        spans.forEach(function (s, i) {
+            if (i < spans.length - 1) {
+                var sNext = spans[i + 1];
+                if (s.start < sNext.start && s.end > sNext.start) {
+                    console.log("ERROR", "Spans: strict overlapping");
+                }
+            }
+        });
+    };
+    Displacy.render = function (text, spans) {
+        this.sortSpans(spans);
+        var tags = {};
+        var __addTag = function (i, s, tag) {
+            if (Array.isArray(tags[i])) {
+                tags[i].push({ span: s, tag: tag });
+            }
+            else {
+                tags[i] = [{ span: s, tag: tag }];
+            }
+        };
+        for (var _i = 0, spans_1 = spans; _i < spans_1.length; _i++) {
+            var s = spans_1[_i];
+            __addTag(s.start, s, "start");
+            __addTag(s.end, s, "end");
+        }
+        var out = {
+            __content: "",
+            append: function (s) {
+                this.__content += s;
+            }
+        };
+        var offset = 0;
+        var indexes = Object.keys(tags).map(function (k) { return parseInt(k, 10); }).sort(function (a, b) { return a - b; });
+        for (var _a = 0, indexes_1 = indexes; _a < indexes_1.length; _a++) {
+            var i = indexes_1[_a];
+            var spanTags = tags[i];
+            if (i > offset) {
+                out.append(text.slice(offset, i));
+            }
+            offset = i;
+            for (var _b = 0, spanTags_1 = spanTags; _b < spanTags_1.length; _b++) {
+                var sT = spanTags_1[_b];
+                if (sT.tag === "start") {
+                    out.append("<mark data-entity=\"" + sT.span.type.toLowerCase() + "\" data-index=\"" + sT.span.index + "\">");
+                    var singleScore = sT.span.singleScore;
+                    if (singleScore) {
+                        out.append("<span class=\"single-score\">" + singleScore.toFixed(3) + "</span>");
+                    }
+                }
+                else {
+                    out.append("</mark>");
+                }
+            }
+        }
+        out.append(text.slice(offset, text.length));
+        return out.__content;
+    };
+    return Displacy;
+}());
+var SvgArrow = (function () {
+    function SvgArrow(container, markFrom, markTo, score) {
+        this.classNames = [];
+        this.container = container;
+        this.markFrom = markFrom;
+        this.markTo = markTo;
+        this.score = score;
+    }
+    SvgArrow.prototype._el = function (tag, options) {
+        var _a = options.classnames, classnames = _a === void 0 ? [] : _a, _b = options.attributes, attributes = _b === void 0 ? [] : _b, _c = options.style, style = _c === void 0 ? [] : _c, _d = options.children, children = _d === void 0 ? [] : _d, text = options.text, id = options.id, xlink = options.xlink;
+        var ns = 'http://www.w3.org/2000/svg';
+        var nsx = 'http://www.w3.org/1999/xlink';
+        var el = document.createElementNS(ns, tag);
+        classnames.forEach(function (name) { return el.classList.add(name); });
+        attributes.forEach(function (_a) {
+            var attr = _a[0], value = _a[1];
+            return el.setAttribute(attr, value);
+        });
+        style.forEach(function (_a) {
+            var prop = _a[0], value = _a[1];
+            return el.style[prop] = value;
+        });
+        if (xlink)
+            el.setAttributeNS(nsx, 'xlink:href', xlink);
+        if (text)
+            el.appendChild(document.createTextNode(text));
+        if (id)
+            el.id = id;
+        children.forEach(function (child) { return el.appendChild(child); });
+        return el;
+    };
+    SvgArrow.prototype.generate = function () {
+        var rand = Math.random().toString(36).substr(2, 8);
+        var startX = this.markTo.getBoundingClientRect().left
+            - this.container.getBoundingClientRect().left
+            + this.markTo.getBoundingClientRect().width / 2;
+        var endX = this.markFrom.getBoundingClientRect().left
+            - this.container.getBoundingClientRect().left
+            + this.markFrom.getBoundingClientRect().width / 2;
+        var curveY = Math.max(-50, SvgArrow.yArrows - (endX - startX) / 3.2);
+        return this._el('g', {
+            classnames: ['displacy-arrow'].concat(this.classNames),
+            children: [
+                this._el('path', {
+                    id: "arrow-" + rand,
+                    classnames: ['displacy-arc'],
+                    attributes: [
+                        ['d', "M" + startX + "," + SvgArrow.yArrows + " C" + startX + "," + curveY + " " + endX + "," + curveY + " " + endX + "," + SvgArrow.yArrows],
+                        ['stroke-width', '2px'],
+                        ['fill', 'none'],
+                        ['stroke', 'currentColor'],
+                    ]
+                }),
+                this._el('text', {
+                    attributes: [
+                        ['dy', '1em']
+                    ],
+                    children: [
+                        this._el('textPath', {
+                            xlink: "#arrow-" + rand,
+                            classnames: ['displacy-label'],
+                            attributes: [
+                                ['startOffset', '50%'],
+                                ['fill', 'currentColor'],
+                                ['text-anchor', 'middle'],
+                            ],
+                            text: this.score.toFixed(2)
+                        })
+                    ]
+                }),
+            ]
+        });
+    };
+    SvgArrow.yArrows = 0;
+    return SvgArrow;
+}());
+var ENDPOINT = "https://coref.huggingface.co/coref";
+var DEFAULT_NLP_TEXT = function () {
+    var items = [
+        "I love my father and my mother. They work hard. She is always nice but he is sometimes rude.",
+        "My sister is swimming with her classmates. They are not bad, but she is better. I love watching her swim.",
+        "My mother's name is Sasha, she likes dogs."
+    ];
+    return items[Math.floor(Math.random() * items.length)];
+};
+var loading = function () {
+    document.body.classList.toggle('loading');
+};
+var toggleDebug = function () {
+    document.body.classList.toggle('debug');
+    var icons = document.querySelectorAll('.svg-checkbox');
+    icons.forEach(function (icon) {
+        icon.classList.toggle('hide');
+    });
+    window.localStorage.setItem('debug', document.body.classList.contains('debug').toString());
+};
+var coref = new Coref(ENDPOINT, {
+    onStart: loading,
+    onSuccess: loading,
+});
+var getQueryVar = function (key) {
+    var query = window.location.search.substring(1);
+    var params = query.split('&').map(function (param) { return param.split('='); });
+    for (var _i = 0, params_1 = params; _i < params_1.length; _i++) {
+        var param = params_1[_i];
+        if (param[0] === key) {
+            return decodeURIComponent(param[1]);
+        }
+    }
+    return undefined;
+};
+var updateURL = function (text) {
+    history.pushState({ text: text }, "", "?text=" + encodeURIComponent(text));
+};
+document.addEventListener('DOMContentLoaded', function () {
+    var $input = document.querySelector('input.input-message');
+    var $form = document.querySelector('form.js-form');
+    var $checkbox = document.querySelector('.js-checkbox');
+    var $svgContainer = document.querySelector('.svg-container');
+    coref.container = document.querySelector('.container');
+    coref.svgContainer = $svgContainer;
+    {
+        var queryText = getQueryVar('text');
+        if (queryText) {
+            $input.value = queryText;
+            coref.parse(queryText);
+        }
+        else {
+            coref.parse(DEFAULT_NLP_TEXT());
+        }
+    }
+    $input.addEventListener('keydown', function (evt) {
+        if (evt.charCode === 13) {
+            evt.preventDefault();
+            $form.submit();
+        }
+    });
+    $form.addEventListener('submit', function (evt) {
+        evt.preventDefault();
+        var text = ($input.value.length > 0)
+            ? $input.value
+            : DEFAULT_NLP_TEXT();
+        updateURL(text);
+        coref.parse(text);
+    });
+    $checkbox.addEventListener('click', function () {
+        toggleDebug();
+    });
+    if (window.localStorage.getItem('debug') !== 'false') {
+        toggleDebug();
+    }
+});

dist/style.css

@@ -0,0 +1 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}.bfc{overflow:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}code,pre{background-color:rgba(0,0,0,0.04);border-radius:3px;padding:2px 6px;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;color:#2f2f2f}.hide{display:none !important}.header{padding:18px 18px}.header:before,.header:after{content:" ";display:table}.header:after{clear:both}.header .input-wrapper{background:#c5c5c5;padding:.5rem 1rem;margin:0 .75rem .75rem 0;border-radius:.5rem;float:left;width:76%}.header .input-wrapper .wrapper-inner{width:100%;position:relative}.header .input-wrapper .wrapper-inner:before,.header .input-wrapper .wrapper-inner:after{content:" ";display:table}.header .input-wrapper .wrapper-inner:after{clear:both}.header .input-wrapper .wrapper-inner .input-message-wrapper{position:absolute;left:0;right:50px}.header .input-wrapper .wrapper-inner input.input-message{outline:none;border:none;padding:0;background-color:transparent;font-size:20px;line-height:28px;width:100%}.header .input-wrapper .wrapper-inner button.input-button{float:right;outline:none;border:none}.header div.menu-button{background:#c5c5c5;padding:.5rem 1rem;margin:0 .75rem .75rem 0;border-radius:.5rem;float:left;height:29px;line-height:28px;color:#444;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header div.menu-button.logo{background-color:#6779f7}.header div.menu-button.logo img.svg-logo{height:30px}.header div.menu-button img.svg-checkbox{position:relative;top:3px;margin-left:3px}.container-wrapper{overflow-x:auto;position:relative}.container{font-size:20px;white-space:nowrap;padding:300px 40px 180px 40px}.container mark{position:relative}.container mark span.single-score{position:absolute;bottom:-32px;left:0;right:0;text-align:center;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;visibility:hidden}.container mark:hover span.single-score{visibility:visible}body.debug span.single-score{visibility:visible !important}.svg-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.displacy-arrow{color:#cad2cd;visibility:hidden}.displacy-arrow .displacy-label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px}.displacy-arrow.score-ok{color:#ff9378}.displacy-arrow.score-best{color:#ff211d;visibility:visible}body.debug .displacy-arrow{visibility:visible !important}.footer{padding:18px 18px;color:#2f2f2f;font-size:14px;max-width:700px;line-height:1.3}.footer a{color:inherit}.footer .footline{height:2px;width:200px;background-color:#696969}@media (min-height:700px) and (max-height:800px){.container{padding-bottom:70px}}@media (max-height:700px){.container{padding-bottom:40px}}.c-input__icon{margin-left:.75em}.c-input__button{font-size:inherit;background:transparent;color:inherit;cursor:pointer}.c-input__button.c-input__button--large{font-size:1.5em}.c-input__button__icon{width:1.25em;height:1.25em}.loading .c-input__button__icon{display:none}.c-input__button__spinner{display:none;-webkit-animation:spinner .5s linear infinite;animation:spinner .5s linear infinite}.loading .c-input__button__spinner{display:inline-block}@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.entities{line-height:2}[data-entity]{padding:.25em .35em;margin:0 .25em;line-height:1;display:inline-block;border-radius:.25em;border:1px solid}[data-entity]:after{box-sizing:border-box;content:attr(data-entity);font-size:.6em;line-height:1;padding:.35em .35em;border-radius:.35em;text-transform:uppercase;display:inline-block;vertical-align:middle;margin:0 0 .1rem .5rem}[data-entity][data-entity="proper"]{background:rgba(166,226,45,0.2);border-color:#a6e22d}[data-entity][data-entity="proper"]:after{background:#a6e22d}[data-entity][data-entity="nominal"]{background:rgba(224,0,132,0.2);border-color:#e00084}[data-entity][data-entity="nominal"]:after{background:#e00084}[data-entity][data-entity="pronominal"]{background:rgba(67,198,252,0.2);border-color:#43c6fc}[data-entity][data-entity="pronominal"]:after{background:#43c6fc}[data-entity][data-entity="list"]{background:rgba(253,151,32,0.2);border-color:#fd9720}[data-entity][data-entity="list"]:after{background:#fd9720}