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

{% block page_content %}
<style>
  input::placeholder {
    color: black;
    font-style: italic;
  }
</style>

<div class="col s9">
  <div class="card">
    <div class="card-content">
      <span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
      <p>
        Häufig liegen Digitalisate textueller Foschungsdaten (Bücher, Briefe etc.) in mehreren Dateien und Formaten vor. Nopaque ermöglicht die Konvertierung und Zusammenfassung in ein einheitliches Datenformat, was eine vereinfachte Weiterverarbeitung mit weiteren Services ermöglicht.
      </p>
      <div class="row">
        <div class="col s9">
          <div class="file-field input-field">
            <div class="btn">
              <span>File</span>
              <input type="file" multiple>
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Bilder, Fotos, Scans&hellip;">
            </div>
          </div>
        </div>
        <div class="col s3 right-align">
          <p>&nbsp;</p>
          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
</div>

<div class="col s3">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Ausgabe</span>
      <p>Nach Eingabeateinamen sortierte Multipage-TIFF-Dateien.</p>
    </div>
  </div>
  <p>
    <blockquote>
      Umgesetzt mit <i>ImageMagick</i><br>
      als Docker Swarm Service
    </blockquote>
  </p>
  <br>
  <br>
  <br>
</div>

<div class="col s12"></div>

<div class="col s9">
  <div class="card">
    <div class="card-content">
      <span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
      <p>
        Durch optische Analysemethoden werden aus Bilddaten, wie Fotos oder
        Scans, Textdateien erzeugt. Erst dieser Vorverarbeitungsschritt
        ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
      </p>
      <div class="row">
        <div class="col s9">
          <div class="file-field input-field">
            <div class="btn">
              <span>File</span>
              <input type="file" multiple>
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Multipage-TIFF- oder PDF-Dateien">
            </div>
          </div>
        </div>
        <div class="col s3 right-align">
          <p>&nbsp;</p>
          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
</div>

<div class="col s3">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Ausgabe</span>
      <p>
        Textdateien, PDF-Dateien und TEI P5 konforme XML-Dateien.
      </p>
    </div>
  </div>
  <p>
    <blockquote>
      Pipelineumsetzung mit <i>Tesseract OCR</i><br>
      als Docker Swarm Service
    </blockquote>
  </p>
  <br>
  <br>
  <br>
</div>

<div class="col s12"></div>

<div class="col s9">
  <div class="card">
    <div class="card-content">
      <span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
      <p>
        Mit Hilfe computergestützter linguistischer Datenverarbeitungsmethoden
        (Tokenisierung, Lemmatisierung, Part-of-speech-Tagging und
        Eigennamenerkennung) werden Textdateien mit weiteren Informationen ausgezeichnet.
      </p>
      <div class="row">
        <div class="col s9">
          <div class="file-field input-field">
            <div class="btn">
              <span>File</span>
              <input type="file" multiple>
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Textdateien">
            </div>
          </div>
        </div>
        <div class="col s3 right-align">
          <p>&nbsp;</p>
          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
</div>

<div class="col s3">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Ausgabe</span>
      <p>Korpusdateien im <i>verticalized text</i>-Format (XML-Dialekt, Ähnelt CoNLL).</p>
    </div>
  </div>
  <p>
    <blockquote>
      Pipelineumsetzung mit <i>spaCy</i><br>
      als Docker Swarm Service
    </blockquote>
  </p>
  <br>
  <br>
  <br>
</div>

<div class="col s12"></div>

<div class="col s9">
  <div class="card">
    <div class="card-content">
      <span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
      <p>
        Mittels CQP Query Language können komplexe Suchanfragen unter
        Zuhilfenahme von Metadaten und NLP-Auszeichnungen an eigens erstellte
        Korpora gestellt werden. Ergebnisse können als Text oder in abstrakter Darstellung ausgewertet werden.
      </p>
      <div class="input-field">
        <i class="material-icons prefix">search</i>
        <input class="search" placeholder='"fox" "jumps" "over" []* "dog"' type="search"></input>
      </div>
      <i class="material-icons left" style="padding-left: 10px;">subdirectory_arrow_right</i>
      <p>
        <span class="chip">The | DET</span>
        <span class="chip">quick | ADJ</span>
        <span class="chip">brown | ADJ</span>
        <span class="chip light-green">fox | PROPN</span>
        <span class="chip light-green">jumps | VERB</span>
        <span class="chip light-green">over | ADP</span>
        <span class="chip light-green">the | DET</span>
        <span class="chip light-green">lazy | ADJ</span>
        <span style="padding-left:48px;">
          <span class="chip light-green" id="tooltipped">dog | NOUN</span>
        </span>
        <span class="chip">. | PUNCT</span>
      </p>
    </div>
  </div>
  <br>
  <br>
  <br>
</div>

<div class="col s3">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Ausgabe</span>
      <p>
        Export der Ergebnisse in JSON. (Zunkünftig angedacht: CSV, Excel und
        HTML)
      </p>
    </div>
  </div>
  <p>
    <blockquote>
      Umgesetzt mit <i>IMS Open Corpus Workbench</i><br>
      als lokaler Docker-Container
    </blockquote>
  </p>
</div>

<div class="col s12">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<script>
  // document.addEventListener("DOMContentLoaded", function() {
  //   tooltippedElement = document.getElementById("tooltipped");
  //   tooltip = M.Tooltip.init(
  //     tooltippedElement,
  //     {"html": `<table>
  //                 <tr>
  //                   <th>Token information</th>
  //                   <th>Source information</th>
  //                 </tr>
  //                 <tr>
  //                   <td class="left-align">
  //                     Word: dog<br>
  //                     Lemma: dog<br>
  //                     POS: NN<br>
  //                     Simple POS: NOUN<br>
  //                     NER: NULL
  //                   </td>
  //                   <td class="left-align">
  //                     Title: Current Notes<br>
  //                     Author: Unknown<br>
  //                     Publishing year: 1885
  //                   </td>
  //                 </tr>
  //               </table>`,
  //      "inDuration": 1500,
  //      "margin": 15,
  //      "position": "bottom",
  //      "transitionMovement": 0}
  //   );
  //   tooltip.open();
  // });
  //DarkReader.enable({"brightness": 100, "contrast": 100, "sepia": 0});
</script>
{% endblock %}