Merge branch 'api-i18n' of github.com:mo-fu/Annif

NatLibFi · Mar 9, 2023 · a53d462 · a53d462
2 parents aa96ebc + 3628c83
commit a53d462
Show file tree

Hide file tree

Showing 55 changed files with 6,437 additions and 0 deletions.
diff --git a/ai.finto.fi/index.html b/ai.finto.fi/index.html
@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="fi">
+
+<!-- TODO items
+
+Dependencies
+* add jQuery.i18n (local)
+
+Basic layout
+* logo for header
+* favicon
+* add the links in the top and bottom boxes
+
+Dynamic functionality
+* dynamic translations for UI strings using jQuery.i18n
+  * including the message for no results (used in annif.js)
+  * update links to point to the URL for the correct language version
+* switch to ai.finto.fi API instead of api.annif.org
+
+-->
+
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="static/css/bootstrap.min.css">
+
+    <!-- Fira Sans font -->
+    <link rel="stylesheet" href="static/css/fonts.css">
+
+    <title>Finto AI</title>
+    <style type="text/css">
+      body {
+        background-color: #80d5e9;
+        font-family: 'Fira Sans', sans-serif;
+      }
+      a { color: #006288; text-decoration: underline; }
+      a:hover { color: #00acd4; }
+      header, #footer {
+        color: white;
+        background-color: #394554;
+      }
+      #navlinks a {
+        background-position: left center;
+        background-repeat: no-repeat;
+        padding-left: 26px;
+        padding-top: 10px;
+      }
+      #navlinks a, #languages a {
+        color: white;
+        margin: auto 10px;
+        text-decoration: none;
+      }
+      #navlinks a:hover, #languages a:hover { color: #dff5f9; }
+      #nav-about { background-image: url('static/img/about.png'); }
+      #nav-feedback { background-image: url('static/img/feedback.png'); }
+      .widget { padding: 8px 10px; }
+      #splash {
+
+      }
+      #splash a, #footer a { color: #83c1cf; }
+      #splash a:hover, #footer a:hover { color: #dff5f9; }
+      #api {
+        color: black;
+        background-color: #dff5f9;
+      }
+      #api h2, #sidebar h2 {
+        font-size: 1rem;
+        font-weight: bold;
+        margin-bottom: 0;
+      }
+      #splash p, #api p, #footer p {
+        margin-bottom: 0;
+      }
+      #text-box {
+        background-color: white;
+        border-top: 2px solid black;
+      }
+      #text-box { font-weight: bold; padding-bottom: 16px; }
+
+      #sidebar, #sidebar-tab { background-color: #dff5f9; }
+      #sidebar-tabs { background-color: #bfeaf4;}
+      #sidebar-tab { float: left; border-top: 2px solid black; }
+      .form-control { border-radius: 0px; }
+      select {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      .select-wrapper { position: relative; }
+      .select-wrapper:after {
+        content: '▼';
+        font-size: 10px;
+        position: absolute;
+        top: 11px;
+        right: 9px;
+        color: black;
+        pointer-events: none;
+      }
+      #get-suggestions {
+        margin-top: 24px;
+        background-color: #394554;
+        border: none;
+        border-radius: 0;
+      }
+      #sidebar h2 {
+        margin-top: 24px;
+      }
+      #results {
+        min-height: 250px;
+      }
+      #results li { border-radius: 0; }
+      meter { width: 24px; }
+      meter:-moz-meter-optimum::-moz-meter-bar {
+        background: #394554;
+      }
+      meter::-webkit-meter-optimum-value {
+        background: #394554;
+      }
+    </style>
+  </head>
+  <body>
+
+<header class="mb-4 mt-0">
+  <div class="container">
+
+
+    <div class="row pt-md-3 pb-md-3">
+      <div class="col-md-8 text-right">
+        <div id="navlinks">
+          <a id="nav-about" data-i18n="nav-about" href="#">Tietoja</a>
+          <a id="nav-feedback" data-i18n="nav-feedback" href="#">Palaute</a>
+        </div>
+      </div>
+      <div class="col-md-4 text-right">
+        <div id="languages">
+          <ul id="switch-locale">
+            <a href="#" data-locale="fi">suomeksi</a></li>
+            <a href="#" data-locale="sv">på svenska</a></li>
+            <a href="#" data-locale="en">in English</a></li></ul>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="row align-items-end">
+      <div class="col-md-4">
+        <h1 class="py-3">Finto AI</h1>
+      </div>
+      <div class="col-md-4">
+        <div id="splash" class="widget">
+          <p data-i18n="splash">Finto AI ehdottaa tekstille sopivia aiheita.
+          Palvelu perustuu Annif-työkaluun.</p>
+          <a data-i18n="read-more" href="#">Lue lisää...</a>
+        </div>
+      </div>
+      <div class="col-md-4 pl-md-2 mb-md-4">
+        <div id="api" class="widget">
+          <h2 data-i18n="api-title">API-palvelu</h2>
+          <p data-i18n="api-desc">Finto AI toimii myös rajapintapalveluna, joka voidaan integroida omiin
+          järjestelmiin.</p>
+          <p><a href="#">Lisätietoja</a> | <a href="#">OpenAPI-kuvaus</a></p>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+</header>
+
+<div class="container">
+
+
+  <div class="row mb-md-2">
+    <div class="col-md-8 pr-md-3">
+      <div id="text-box" class="form-group widget">
+        <label for="text" data-i18n="text-box-label-text">Kuvailtava teksti</label><br>
+        <textarea class="form-control" rows="20" name="text" id="text"></textarea>
+      </div>
+    </div>
+
+    <div class="col-md-4 pl-md-2">
+      <ul id="sidebar-tabs" class="nav nav-tabs">
+        <li id="sidebar-tab" class="nav-item">
+          <a class="nav-link" data-i18n="nav-subject-indexing">Sisällönkuvailu</a>
+        </li>
+      </ul>
+      <div id="sidebar" class="widget">
+        <div class="form-group">
+          <label for="project" data-i18n="project">Sanasto ja tekstin kieli</label>
+          <div class="select-wrapper">
+            <select class="form-control" id="project">
+              <option></option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="limit" data-i18n="limit">Ehdotusten lukumäärä</label>
+          <div class="btn-group btn-group-toggle" data-toggle="buttons">
+            <label class="btn btn-secondary">
+              <input type="radio" name="limit" value="10" autocomplete="off" checked>
+              10
+            </label>
+            <label class="btn btn-secondary">
+              <input type="radio" name="limit" value="15" autocomplete="off">
+              15
+            </label>
+            <label class="btn btn-secondary">
+              <input type="radio" name="limit" value="20" autocomplete="off">
+              20
+            </label>
+          </div>
+        </div>
+        <button id="get-suggestions" data-i18n="get-suggestions" type="button" class="btn btn-primary btn-block">Anna aihe-ehdotukset</button>
+        <h2 id="suggestions" data-i18n="suggestions">Ehdotetut aiheet</h2>
+        <ul class="list-group" id="results">
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12 mb-md-4">
+      <div id="footer" class="widget">
+        <p data-i18n="footer-text">
+          Lomakkeen ja rajapintapalveluiden kautta lähettyjä tietoja ei
+          talleteta.  Palvelun käyttöä seurataan ja tilastoidaan palvelun
+          kehittämiseksi.
+        </p>
+        <a href="#" data-i18n="footer-link">Lue tietosuojaseloste</a>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+    <script src="static/js/jquery-3.4.1.min.js"></script>
+    <script src="static/js/bootstrap.min.js"></script>
+
+    <script src="static/js/jquery.i18n.js"></script>		
+    <script src="static/js/jquery.i18n.messagestore.js"></script>
+    <script src="static/js/jquery.i18n.fallbacks.js"></script>
+    <script src="static/js/jquery.i18n.language.js"></script>
+    <script src="static/js/jquery.i18n.parser.js"></script>
+    <script src="static/js/jquery.i18n.emitter.js"></script>	
+    <script src="static/js/jquery.i18n.emitter.bidi.js"></script>
+    <script src="static/js/jquery.history.js"></script>
+    <script src="static/js/url.min.js"></script>  -->
+
+    <script src="static/js/annif.js"></script>
+    <script src="static/js/i18n.js"></script>
+
+  </body>
+</html>
diff --git a/ai.finto.fi/static/css/bootstrap.min.css b/ai.finto.fi/static/css/bootstrap.min.css
diff --git a/ai.finto.fi/static/css/bootstrap.min.css.map b/ai.finto.fi/static/css/bootstrap.min.css.map
diff --git a/ai.finto.fi/static/css/fonts.css b/ai.finto.fi/static/css/fonts.css
@@ -0,0 +1,21 @@
+/* Generated using google-webfonts-helper */
+
+/* fira-sans-regular - latin-ext_latin */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
+       url('../fonts/fira-sans-v10-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/fira-sans-v10-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* fira-sans-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Fira Sans Bold'), local('FiraSans-Bold'),
+       url('../fonts/fira-sans-v10-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/fira-sans-v10-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
diff --git a/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-700.woff b/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-700.woff
diff --git a/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-700.woff2 b/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-700.woff2
diff --git a/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-regular.woff b/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-regular.woff
diff --git a/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-regular.woff2 b/ai.finto.fi/static/fonts/fira-sans-v10-latin-ext_latin-regular.woff2
diff --git a/ai.finto.fi/static/img/about.png b/ai.finto.fi/static/img/about.png
diff --git a/ai.finto.fi/static/img/feedback.png b/ai.finto.fi/static/img/feedback.png
diff --git a/ai.finto.fi/static/js/annif.js b/ai.finto.fi/static/js/annif.js
@@ -0,0 +1,56 @@
+
+var base_url = 'https://api.annif.org/v1/';
+
+function clearResults() {
+    $('#results').empty();
+}
+
+function fetchProjects() {
+    $.ajax({
+        url: base_url + "projects",
+        method: 'GET',
+        success: function(data) {
+            $('#project').empty();
+            $.each(data.projects, function(idx, value) {
+                $('#project').append(
+                    $('<option>').attr('value',value.project_id).append(value.name)
+                );
+            });
+        }
+    });
+}
+
+function getSuggestions() {
+    $.ajax({
+        url: base_url + "projects/" + $('#project').val() + "/suggest",
+        method: 'POST',
+        data: {
+          text: $('#text').val(),
+          limit: $('input[name="limit"]:checked').val(),
+          threshold: 0.01
+        },
+        success: function(data) {
+            if (data.results.length == 0) {
+                $('#results').append(
+                    $('<li class="list-group-item p-0">Ei tuloksia</li>')
+                );
+            }
+            $.each(data.results, function(idx, value) {
+                $('#results').append(
+                    $('<li class="list-group-item p-0">').append(
+                        $('<meter class="mr-2">').attr('value',value.score).attr('max',1.0).attr('title',value.score.toFixed(4)),
+                        $('<a>').attr('href',value.uri).append(value.label)
+                    )
+                );
+            });
+        }
+    });
+}
+
+$(document).ready(function() {
+    fetchProjects();
+    $('#get-suggestions').click(function() {
+        clearResults();
+        getSuggestions();
+    });
+});
diff --git a/ai.finto.fi/static/js/bootstrap.min.js b/ai.finto.fi/static/js/bootstrap.min.js
diff --git a/ai.finto.fi/static/js/bootstrap.min.js.map b/ai.finto.fi/static/js/bootstrap.min.js.map