Jak naprogramovat aplikaci, která vyhledá klíčový obsah textu

3. 1. 2021 Azure, Programming

Chcete se naučit vyhledávat klíčová slova v dlouhých dokumentech nebo vysvětlit slova, kterým nerozumíte? Tento článek vám ukáže, jak na to. Společně s námi si vytvoříte demo, které bude schopno ve vašem dokumentu najít klíčové fráze, z nichž vám vytvoří URL adresy, pomocí kterých si budete moci dané pojmy jednoduše vyhledat.

Jak vypadá výsledek?

Ještě než začneme, můžete se podívat na finální demo, které vytvoříte společně s námi. Můžete ho najít na této Heroku instanci. Máte zde připravené vše na vyzkoušení práce s umělou inteligencí a nepotřebujete k tomu ani jeden řádek kódu. Chcete-li více než jen vyzkoušet si hotový model, pokračujte s námi a vytvoříme si ho společně.

O projektu

Tento projekt vzniká v režii dvou studentů z Microsoft Studenského Trenérského Centra Anny BicanovéFilipa Troníčka. Tento článek není zdaleka jediný, který v rámci tohoto projektu vyjde, zde na blogu studuj.digital, proto se můžete těšit i na další. V tomto článku se budeme zabývat službou Text Analytics v Azure a budeme ji demonstrovat v praxi.

Co budeme potřebovat?

Azure

K tomuto projektu budete potřebovat licenci na Azure. My používáme Azure for Students. Jak aktivovat tuto licenci si přečtěte zde:

Visual Studio

Abyste se mohli pustit do tohoto projektu, budete potřebovat textový editor. Doporučujeme Visual Studio Code. Zdarma ke stažení ho najdete na code.visualstudio.com a podrobný návod k instalace si můžete projít zde:

Node.js

Open-source platformu Node.js budeme využívat k exekuci kódu. Je to zjednodušeně serverová interpretace JavaScriptu. Ke stažení ho naleznete na nodejs.org.

Jdeme na to!

Jako první si musíme vygenerovat API klíče (aplikační programovací rozhraní).

Vyhledání služby Text Analytics
Vyhledání Azure Analytics | Zdroj: portal.azure.com
Vytvoření projektu
Vytváření služby Text Analytics | Zdroj: portal.azure.com
Zde najdeme naše potřebné informace
Výsledné API klíče a Endpoint| Zdroj: portal.azure.com
npm i express
npm i express @azure/ai-text-analytics

Kód

Na začátek

Na začátek vytvoříme novou složku, kterou si otevřeme ve Visual Studio Code. Přes VS Code vytvoříme ve složce položku se jménem main.js a otevřeme ji.

Na začátek souboru importujeme naše balíčky express a @azure/ai-text-analytics

const express = require("express");
const app = express(); // definujeme si zapnutí naší aplikace
const port = 5000; // definujeme port, na kterém aplikace poběží

app.set("view engine", "ejs"); // Využijeme předlohovací systém EJS

app.use(express.static("views")); // Zde budou naše statické stránky
app.use(express.static("assets")); // Zde budou naše styly

const {TextAnalyticsClient,TextAnalyticsApiKeyCredential} = require("@azure/ai-text-analytics"); // Importujeme Azure Text Analytics

app.get("/", function (req, res) {
   //Sem půjde náš kód
});

Navrhnutí serveru tak, aby přijímal požadavky

Přijímaní požadavků budeme dělat přes HTTP GET parametry (více o nich na wikipedii) – což jednoduše znamená, že budeme komunikovat náš text k analýze přes část za „?“ v URL adrese.

Toto se dělá v Node.js naštěstí naprosto jednoduše:

const text_k_analyze = req.query.txt; //Vytvoříme konstantu, která je nastavená na parametr txt v URL adrese.

Dále budeme potřebovat někam uložit svůj API klíč a koncový bod. Vytvoříme si pro ně dvě proměnné:

const endpoint = "VAS_KONCOVY_BOD";
const key = "VAS_KLIC";

Když máme proměnné vytvořené, můžeme začít využívat Azure. Vezmeme náš text (proměnnou text_k_analyze) a pošleme ji pomocí balíčku @azure/ai-text-analytics

Teď si nastavíme hodnotu našeho Azure klienta s naším koncovým bodem a API klíčem

const textAnalyticsClient = new TextAnalyticsClient(
   endpoint,
   new TextAnalyticsApiKeyCredential(key)
 );

Dále vytvoříme funkci na ztučnění všech klíčových slov, která nám vrátí Azure.

  function boldenKeyphrases(text, phrases) {
    let finalText = text;
    phrases.forEach((keyword) => {
      finalText = finalText.replace(
        keyword,
        `<span style="font-weight: bold;"&gt;${keyword}</span&gt;`
      );
    });
    return finalText;
  }

… a teď ho přes asynchronní funkci (funkce, na kterou může naše proměnná „počkat“, než zjistíme, co bude mít za hodnotu) zavoláme pomocí našeho @azure/ai-text-analytics Poté již můžeme poslat text a dostat z něj odpovědi, které uložíme do proměnné entityResults a zobrazíme výsledky na konzoli (příkazovém řádku).

 async function linkedEntityRecognition(client) {
      const linkedEntityInput = txt;
      const entityResults = await client.recognizeLinkedEntities(
        linkedEntityInput
      );
      const keyPhraseResult = await client.extractKeyPhrases(linkedEntityInput);
      entityResults.forEach((document) =&gt; {
        document.entities.forEach((entity) =&gt; {
          entity.matches.forEach((match) =&gt; {
            return txt.substr(match.offset, match.length + match.offset);
          });
        });
      });
      res.render("analyze", {
        returnStuff: entityResults[0].entities,
        returnText: boldenKeyphrases(
          txt
          keyPhraseResult[0].keyPhrases
        ),
      });
    }

Dále vytvoříme frontend naší aplikace přes EJS (index.ejs, který vytvoříme ve složce views).

<!DOCTYPE html&gt;
<html lang="cs"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Text analytics</title&gt;
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
    <link rel="stylesheet" href="/css/styles.css"&gt;
</head&gt;
<body style="text-align: center;"&gt;
    <h2&gt; Psali jste o: </h2&gt;

    <ul&gt;
    <br&gt;
    <% for(url of returnUrls)  { %&gt;
     <li&gt;- <a class="wikiUrl" target="_blank" href="<%-url.url%&gt;"&gt;<%- url.url.replace(/_/gi, " ").replace("https://en.wikipedia.org/wiki/", "") %&gt; </a&gt; </li&gt;
    <% } %&gt;
    </ul&gt;
    <form action=""&gt;
        <div class="row"&gt;
            <div class="input-field col s6 offset-s3 text-red"&gt;
              <textarea placeholder="Váš text" name="txt" id="textarea1"&gt;</textarea&gt;
            </div&gt;
          </div&gt;
        <br&gt;
    <button type="submit" class="btn red"&gt;Analyzovat</button&gt;
    </form&gt;
    <div class="newText"&gt;
        <%- returnText %&gt;
    </div&gt;
</body&gt;
<script&gt;
</script&gt;
</html&gt;

Teď už jen stránku jednoduše nastylujeme a máme hotovo!

Ve složce assets/css:

@import url("https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"); /* Importujeme font Montserrat */

textarea {
  overflow: auto; /* Automatický overflow pro hezčí zobrazení */
  width: 50vw; /* Výchozí šířka */
  max-width: 50vw; /* Maximální šířka */
  min-height: 70px; /* Minimální výška */
  max-height: 80vh; /* Maximální výška */
} :root {
  font-family: "Montserrat", sans-serif; /* Nastavení námi deklarovaného fontu na celou stránku */
}

.newText {
  max-width: 75vw; /* nastavíme maximální šířku boxu s textem */
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
} a {
/* Nastavíme, aby odkazy vypadaly jako normální text */
  text-decoration: none;
  color: black;
}

.wikiUrl {
  font-weight: bold; /* Ztučníme seznam odkazů */
}

Nyní jen otevřeme integrovaný příkazový řádek ve VS Code (alternativně funguje i normální CMD na Windows 10) klávesovou zkratkou Ctrl+Shift+; a spustíme program následujícím příkazem:

node main.js

Závěr

Doufáme, že se vám podle našeho návodu podařilo udělat podobné demo jako jsme vytvořili my. Už v blízké době se můžete těšit na pokračování našeho projektu, který se bude zabývat službou Speech to Text a následným propojení obou služeb. Kdyby vás zajímal základní popis této služby, můžete si o ní přečíst prozatím něco zde:

Pokud jste z kódu něco nezachytili, je dostupný na GitHubu.

Nastavení souborů Cookies

1. Co jsou soubory cookies

Soubory cookies jsou krátké textové soubory, které internetová stránka odešle do vašeho prohlížeče. Umožňují internetové stránce zaznamenat informace o vaší návštěvě, například zvolený jazyk a podobně. Následující návštěva stránek tak pro vás může být snazší a příjemnější. Soubory cookies jsou důležité, neboť bez nich by procházení sítě Internet bylo mnohem složitější. Soubory cookies umožňují lepší využití naší internetové stránky a přizpůsobení jejího obsahu vašim potřebám. Soubory cookies používá téměř každá internetová stránka na světě.

2. Druhy souborů cookies

Relační (tedy dočasné) soubory cookies nám umožňují propojovat vaše jednotlivé aktivity po dobu prohlížení těchto internetových stránek. V okamžiku otevření okna vašeho prohlížeče se tyto soubory vytvoří a po zavření okna vašeho prohlížeče se odstraní.

Trvalé soubory cookies nám pomáhají váš počítač identifikovat, jestliže opětovně navštívíte naši internetovou stránku.

3. Využívání souborů cookies

V souladu s ustanovením § 89 odst. 3 zák. č. 127/2005 Sb., o elektronických komunikacích, v účinném znění, si vás tímto dovolujeme informovat, že naše internetové stránky využívají pro svoji činnost soubory cookies, tedy vaše soubory cookies, včetně trvalých, zpracováváme.

Internetové prohlížeče obvykle obsahují správu souborů cookies. V rámci nastavení vašeho prohlížeče tak pravděpodobně můžete jednotlivé soubory cookies ručně mazat, blokovat či zcela zakázat jejich používání. Pro více informací použijte nápovědu vašeho internetového prohlížeče. Jsou-li cookies povoleny, lze toto nastavení internetového prohlížeče považovat za souhlas se zpracováním osobních údajů.

4. Účel použití souborů cookies

K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookies. Informace o tom, jak náš web používáte, sdílíme se svými partnery působícími v oblasti sociálních médií, inzerce a analýz. Používáním internetových stránek vyjadřujete souhlas propojením následujících služeb: Google Analytics, Google Tag Manager, Facebook Pixel, Microsoft Clarity.

Soubory cookies využíváme, kromě účelu uvedeného v předchozím odstavci, pouze pro měření návštěvnosti webové stránky.

5. Správce osobních údajů

Provozovatelem webové stránky studuj.digital a správcem osobních údajů je společnost: pg-sec s.r.o., sídlem Rybná 716/24, Staré Město, 110 00 Praha 1, identifikační číslo 09580905, zapsaná v obchodním rejstříku Městského soudu v Praze, oddíl C, vložka 338028.

​6. Zásady ochrany osobních údajů

Podrobnější informace o souborech cookies a zpracování tvých osobních údajů najdete v našich Zásadách ochrany osobních údajů.

Nezbytné

Tyto soubory cookie jsou nutné pro základní funkce stránky, a jsou proto vždy povolené. Mezi ně patří soubory cookie, které stránce umožňují si vás zapamatovat při procházení stránky v rámci jedné relace nebo, pokud o ně požádáte, mezi relacemi.

Volitelné

Výkon

Tyto soubory cookie nám pomáhají vylepšovat funkce stránek sledováním využití této webové stránky. V některých případech zrychlují zpracování vašeho požadavku a umožňují nám zapamatovat si vaše vybrané předvolby na stránce. Pokud soubory cookie zakážete, může se tím zhoršit přesnost našich doporučení a zpomalit funkčnost stránek.

Sociální média a relamy

Díky souborům cookies sociálních médií si můžete připojit ke svým sociálním sítím a prostřednictvím sociálních médií sdílet obsah z naší webové stránky. Reklamní soubory cookie (třetích stran) shromažďují informace pro lepší přizpůsobení reklamy tvým zájmům, a to na webových stránkách studuj.digital i mimo ně. V některých případech tyto soubory cookies zpracovávají vaše osobní údaje. Pokud chcete získat více informací o zpracování osobních údajů, přečtěte si naše Zásady ochrany osobních údajů. Pokud zakážete soubory cookies, mohou se zobrazovat reklamy, které méně souvisejí s vašimi zájmy, nebo nebudete moci účinně používat odkazy na Facebook, Instagram či jiné sociální sítě anebo nebudete moci sdílet obsah na sociálnch médiích.