nopaque/app/templates/main/news_new.html.j2

{% extends "base.html.j2" %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12">
      <div id="aggregated-news"></div>
      <div class="card" id="april-2022-update">
        <div class="card-content">
          <span class="card-title">April 2022 update</span>
          <p>Dear users</p>
          <br>
          <p>
            with the April 2022 update we have improved nopaque in all places.
            We have significantly reworked our backend code to utilize our servers more efficiently,
            integrated a new service, updated all previously existing ones, rewrote a lot of code and made a few minor design improvements.
          </p>
          <br>

          <span class="card-title">Where is my Job data?</span>
          <p>
            At the beginning of the year, we realized that our storage limit had been reached.
            This was the time when some users may have noticed system instabilities.
            We were fortunately able to temporarily solve this problem without data loss
            by deleting some non-nopaque related data on our system (yes we also do <a href="https://digital-history.uni-bielefeld.de">other things then nopaque</a>).
            In order to not face the same problem again, we had to dedicate ourselves to a long-term solution.
            This consists of deleting all previous job data with this update and henceforth storing new job data
            only for three months after job creation (important note: <b>corpora are not affected</b>).
            All job data prior to this update has been backed up for you,
            feel free to contact us at nopaque@uni-bielefeld.de if you would like to get this data back.
          </p>
          <br>

          <span class="card-title">What's new?</span>
          <p>
            By partnering up with <a href="https://readcoop.eu/transkribus/?sc=Transkribus">Transkribus</a> we reached one of our long term goals: integrate a HTR service into nopaque.
            The <a href="{{ url_for('services.transkribus_htr_pipeline') }}">Transkribus HTR Pipeline</a> service is implemented as a kind of proxied service where the work is split between Transkribus and us.
            That means we do the preprocessing, storage and postprocessing, while Transkribus handles the HTR itself.
          </p>
          <br>

          <p>
            One of the changes in the background was to fix our performance issues. While implementing the <a href="{{ url_for('services.transkribus_htr_pipeline') }}">Transkribus HTR Pipeline</a> service we
            found some optimization potential within different steps of our processing routine. These optimizations are now also
            available in our <a href="{{ url_for('services.transkribus_htr_pipeline') }}">Tesseract OCR Pipeline</a> service, resulting in a speed up of about 4x.
            For now we are done with the most obvious optimizations but we may include more in the near future, so stay tuned!
          </p>
          <br>

          <p>
            The next step was to reorganize our <a href="{{ url_for('services.corpus_analysis') }}">Corpus Analysis</a> code. Unfortunatly it was a bit messy, after a complete rewrite we are
            now able to query a corpus without long loading times and with better error handling, resulting in way more stable user experience.
            The Corpus Analysis service is now modularized and comes with 2 modules that recreate and extend the functionality of the old service.<br>
            For now we had to disable the Query Result viewer, the code was based on the old Corpus Analysis service and will be reintegrated as a module to the Corpus Analysis.
          </p>
          <br>

          <p>
            The <a href="{{ url_for('services.spacy_nlp_pipeline') }}">spaCy NLP Pipeline</a> service got some love in the form of smaller updates too.
            This is important preliminary work to support more models/languages that does not provide the full set of linguistic features (lemma, ner, pos, simple_pos). It still needs some testing and tweaking but will be ready soon!
          </p>
          <br>

          <p>
            Last but not least we made some design changes. Now you can find colors in places where we had just black and white before.
            Nothing big but the new colors will help you identify ressources more efficient!
          </p>
          <br>

          <span class="card-title">Database cleanup</span>
          <p>
            We may be a bit late with our spring cleaning but with this update we tidied up within our database system.
            This means we deleted old corpora with no corpus files, unconfirmed user accounts and in general unnecessary data fields.
          </p>
          <br>

          <p>
            That's it, thank you for using nopaque! We hope you like the update and appreciate all your past and future feedback.
          </p>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card" id="maintenance">
        <div class="card-content">
          <span class="card-title">Maintenance</span>
          <p>Dear users</p>
          <br>
          <p>Currently we are rewriting big parts of our project infrastructure. Due to this the following features are not available:</p>
          <ul>
            <li>Corpus export and import</li>
            <li>Query result export, import and view</li>
          </ul>
          <p>We hope to add these features back in the near future, until then check out our updated corpus analysis.</p>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card" id="nlp-removed-language-support">
        <div class="card-content">
          <span class="card-title">Natural Language Processing removed language support</span>
          <p>Dear users</p>
          <br>
          <p>Not all language models support all features we utizlize in our NLP service. Thats why we had to drop them, as soon as they meet our requirements we will add them back!</p>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card" id="beta-launch">
        <div class="card-content">
          <span class="card-title">nopaque's beta launch</span>
          <p>Dear users</p>
          <br>
          <p>A few days ago we went live with nopaque. Right now nopaque is still in its Beta phase. So some bugs are to be expected. If you encounter any bugs or some feature is not working as expected please send as an email using the feedback button at the botton of the page in the footer!</p>
          <p>We are happy to help you with any issues and will use the feedback to fix all mentioned bugs!</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
  function getMastodonStatuses() {
    return new Promise((resolve, reject) => {
      fetch(`https://fedihum.org/api/v1/accounts/109386364241901080/statuses`, {method: 'GET', headers: {Accept: 'application/json'}})
        .then((response) => {
          if (!response.ok) {reject(response);}
          return response.json();
        })
        .then((statuses) => {resolve(statuses);})
      });
  }
  function getBisBlogsEntries() {
    return new Promise((resolve, reject) => {
      fetch(`https://blogs.uni-bielefeld.de/blog/uniintern/feed/entries/atom?cat=%2FAllgemein`, {method: 'GET', headers: {Accept: 'application/xml'}})
        .then((response) => {
          if (!response.ok) {reject(response);}
          return response.text();
        })
        .then((responseText) => {return new DOMParser().parseFromString(responseText, 'application/xml');})
        // .then((xmlDocument) => {return xmlDocument.toObject();})
        .then((xmlDocument) => {return {};})
        .then((feed) => {resolve(feed);});
    });
  }
  function sortAggregatedNews(a, b) {
    let aDate;
    let bDate;

    switch (a.source) {
      case 'mastodon':
        aDate = new Date(a.created_at);
        break;
      case 'big-blogs':
        aDate = new Date(a.published);
        break;
      default:
        throw new Error('Unknown source');
    }
    switch (b.source) {
      case 'mastodon':
        bDate = new Date(b.created_at);
        break;
      case 'big-blogs':
        bDate = new Date(b.published);
        break;
      default:
        throw new Error('Unknown source');
    }
    return bDate - aDate;
  }
  function aggregateNews() {
    return new Promise((resolve, reject) => {
      Promise.all([getMastodonStatuses(), getBisBlogsEntries()])
        .then(
          (responses) => {
            console.log(responses[1]);
            let mastodonStatuses = responses[0].map((obj) => {return { ...obj, source: 'mastodon'}});
            let bisBlogsEntries = responses[1].feed.entry.map((obj) => {return { ...obj, source: 'big-blogs'};});
            let aggregatedNews = [...mastodonStatuses, ...bisBlogsEntries];
            aggregatedNews.sort(sortAggregatedNews);
            resolve(aggregatedNews);
          },
          (error) => {reject(error);}
        );
    });
  }

  function mastodonStatusToElement(status) {
    let date = new Date(status.created_at).toLocaleString('en-US');
    let newsElement = nopaque.Utils.HTMLToElement(
      `
        <div class="row">
          <div class="col s11">
            <div class="card white-text" style="background-color:#5D50E7; border-radius:10px;">
              <div class="card-content">
                <span class="card-title">New Actitvity on Mastodon</span>
                <p><i>Published on ${date}</i></p>
                <br>
                <p>${status.content}</p>
              </div>
            </div>
          </div>
          <div class="col s1">
            <img src="https://joinmastodon.org/logos/logo-purple.svg" alt="Mastodon" class="responsive-img hide-on-small-only" style="width:70%; margin-top:30px;">
          </div>
        </div>
      `
    );
    return newsElement;
  }

  function bisBlogsEntryToElement(entry) {
    let date = new Date(entry.published).toLocaleString('en-US');
    let newsElement = nopaque.Utils.HTMLToElement(
      `
        <div class="row">
          <div class="col s1">
            <img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img hide-on-small-only" style="width:70%; margin-top:40px;">
          </div>
          <div class="col s11">
            <div class="card" style="background-color: #A5BDCC; border-radius:10px;">
              <div class="card-content">
                <span class="card-title">${entry.title['#text']}</span>
                <p><i>Published on ${date}</i></p>
                <br>
                <p>${entry.content['#text']}</p>
              </div>
            </div>
          </div>
        </div>
      `
    );
    let newsImageElements = newsElement.querySelectorAll('img');
    for (let newsImageElement of newsImageElements) {
      newsImageElement.classList.add('responsive-img');
    }
    return newsElement;
  }

  let aggregatedNewsElement = document.querySelector('#aggregated-news');
  aggregateNews().then((aggregatedNews) => {
    for (let item of aggregatedNews) {
      let newsElement;
      switch (item.source) {
        case 'mastodon':
          newsElement = mastodonStatusToElement(item);
          break;
        case 'big-blogs':
          newsElement = bisBlogsEntryToElement(item);
          break;
        default:
          throw new Error('Unknown source');
      }
      aggregatedNewsElement.appendChild(newsElement);
    }
  });
</script>
{% endblock scripts %}