File size: 3,945 Bytes
c1cd7d1
f390b04
c1cd7d1
 
 
f390b04
c1cd7d1
 
 
 
 
f390b04
c1cd7d1
f390b04
 
c1cd7d1
 
 
f390b04
c1cd7d1
f390b04
c1cd7d1
 
f390b04
 
 
 
2e3f5aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c1cd7d1
 
 
 
 
 
 
 
f390b04
 
c1cd7d1
 
f390b04
 
 
 
 
 
 
 
 
 
c1cd7d1
 
 
 
 
 
f390b04
 
 
 
 
 
 
 
 
 
 
 
 
caf4ed9
 
 
 
 
 
 
 
 
f390b04
 
 
c1cd7d1
 
 
 
32a04d6
f390b04
c1cd7d1
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Conversation Data Extraction</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <main class="container">
      <header class="header">
        <h1>Conversation Data Extraction</h1>
        <p class="sub">
          Extracts named entities, topics and sentiment from chat messages,
          pseudonymizes personal data (GDPR) and stores structured results.
        </p>
      </header>

      <!-- Single message analysis -->
      <section class="card">
        <label class="label" for="text">Message</label>
        <textarea
          id="text"
          rows="5"
          placeholder="Write a message to analyze…"
        >Hi, my name is John Smith and I'm really unhappy. My order never arrived. Email me at john.smith@example.com</textarea>

        <div class="modelPickers">
          <div>
            <span class="label">Sentiment model</span>
            <div class="modelPicker" id="sentimentModelPicker" data-task="sentiment"></div>
          </div>
          <div>
            <span class="label">NER (entity extraction) model</span>
            <div class="modelPicker" id="nerModelPicker" data-task="ner"></div>
          </div>
          <div>
            <span class="label">Topic classification model</span>
            <div class="modelPicker" id="topicModelPicker" data-task="topics"></div>
          </div>
        </div>

        <div class="row">
          <button id="analyzeBtn" class="btn">Analyze</button>
          <button id="clearBtn" class="btn secondary" type="button">Clear</button>
          <span id="status" class="status" aria-live="polite"></span>
        </div>

        <div id="result" class="result" hidden>
          <div class="resultRow">
            <span class="k">Sentiment</span>
            <span id="sentiment" class="v"></span>
          </div>
          <div class="resultRow">
            <span class="k">Topic</span>
            <span id="topic" class="v"></span>
          </div>
          <div class="resultRow column">
            <span class="k">Entities</span>
            <div id="entities" class="chips"></div>
          </div>
          <div class="resultRow column">
            <span class="k">Anonymized text</span>
            <code id="anon" class="anon"></code>
          </div>
        </div>

        <pre id="error" class="error" hidden></pre>
      </section>

      <!-- Batch ingest -->
      <section class="card">
        <h2 class="cardTitle">Batch ingest</h2>
        <p class="sub small">
          Upload a CSV or JSON file of conversations. Each message is processed by
          the full pipeline and stored (anonymized). CSV should have a
          <code>text</code> or <code>message</code> column.
        </p>
        <div class="row">
          <input type="file" id="file" accept=".csv,.json,.tsv,.txt" class="file" />
          <button id="ingestBtn" class="btn" type="button">Ingest file</button>
          <span id="ingestStatus" class="status" aria-live="polite"></span>
        </div>

        <div id="ingestProgress" class="ingestProgress" hidden>
          <div class="row">
            <progress id="ingestProgressBar" class="progressBar" value="0" max="1"></progress>
            <span id="ingestTimer" class="timer">0.0 s</span>
          </div>
          <div id="ingestProgressLabel" class="sub small">Zpracováno 0 z 0</div>
        </div>

        <pre id="ingestError" class="error" hidden></pre>
      </section>

      <footer class="footer">
        <a href="/docs">API documentation</a>
        <span class="dot"></span>
        <a href="/health">Health</a>
        <span class="dot"></span>
        <a href="/static/records.html">Records</a>
      </footer>
    </main>

    <script src="/static/app.js"></script>
  </body>
</html>