This JavaScript client implementation of the SUMMA API lets you integrate summaries from arbitrary SUMMA servers into your HTML documents.
It supports three modes:
- SUMMA client This mode lets you retrieve a summary from a specific entity that will be attached to a predefined DIV element in your page.
- qSUM This mode lets you annotate elements with the Internationalization Tag Set (ITS) property
its-ta-ident-refinside your HTML and summaries will be displayed as soon as you hover over the annotated elements. - ELES This mode combines qSUM with DBpedia Spotlight ITS annotations.
An integrated demo can be found at http://athalhammer.github.io/summaClient.
Include the following lines in your HTML:
- SUMMA client
<link rel="stylesheet" type="text/css" href="http://athalhammer.github.io/summaClient/css/summaClient.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://athalhammer.github.io/summaClient/js/summaClient.js"></script>
<script>
$(document).ready(function() {
// define which element should contain a specific summary
// parameters: entity, topK, language, fixed properties, (html) DIV-id, service
summa("http://dbpedia.org/resource/Quentin_Tarantino", 5, "en",
"http://dbpedia.org/ontology/director,http://dbpedia.org/ontology/knownFor",
"pf-summary", "http://km.aifb.kit.edu/services/link/sum");
});
</script>
<!-- here is the element that should contain a specific summary -->
<div class="sum" id="pf-summary"></div>- qSUM
<link rel="stylesheet" type="text/css" href="http://athalhammer.github.io/summaClient/css/summaClient.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://athalhammer.github.io/summaClient/js/summaClient.js"></script>
<script>
$(document).ready(function() {
// inline popups for annotated text
// parameters: topK, language, fixed properties, service
qSUM(5, "en", null, "http://km.aifb.kit.edu/services/link/sum");
});
</script>
The narrative sequence called "The Gold Watch" of
<span its-ta-ident-ref="http://dbpedia.org/resource/Pulp_Fiction">Pulp Fiction</span>
ends with Butch picking up Fabienne with Zed's
<span its-ta-ident-ref="http://dbpedia.org/resource/Chopper_(motorcycle)">chopper</span>- ELES
<link rel="stylesheet" type="text/css" href="http://athalhammer.github.io/summaClient/css/summaClient.css" />
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://dbpedia-spotlight.github.io/demo/dbpedia-spotlight-0.3.js"></script>
<script src="http://athalhammer.github.io/summaClient/js/summaClient.js"></script>
<script>
$(document).ready(function() {
// selector on HTML element(s)
var select = ".annotate";
// as soon as the annotations are ready, start registering mouseover events
// parameters: topK, language, fixed properties, service
$(select).bind("DOMSubtreeModified", function() {
qSUM(5, "en", null, "http://km.aifb.kit.edu/services/link/sum");
});
// DBpedia Spotlight configuration and annotation
var settings = { "endpoint" : "http://model.dbpedia-spotlight.org/en/", "its" : "yes", "spotter" : "Default" };
$(select).annotate(settings);
$(select).annotate("best");
});
</script>
<style>span{background-color:#AAAAAA}</style>
<div class="annotate">Angela Merkel is TIME Person of the Year 2015.</div>As a matter of fact, you can download the above *.js files respectively and include them on your own server.
You don't like the summaries of LinkSUM? Build your own ones by implementing the interface edu.kit.aifb.summa.Summarizer of
https://github.com/athalhammer/summaServer.
This source code is dual-licensed under the MIT license and GPL v3.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent