Update app.py

app.py

@@ -303,41 +303,52 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
         <h1>Daten Strukturieren und Analysieren</h1>
         <p style="font-size: 1.1rem; margin-top: -10px;">Dies ist eine Demoversion für die Extrahierung und Visualisierung von Daten</p>
     </div>
-    <p style="font-size: 1.1rem; margin-top: -10px;">In dieser Unterrichtseinheit befassen wir uns mit einer innovativen Methode zur Strukturierung unstrukturierter historischer Texte. Im Kern verbindet unsere Anwendung die systematische Strukturierung von Daten mit einem spezialisierten Sprachmodell, das auf der Question-Answering-Methode basiert.
-Methodik: Vom unstrukturierten Text zur strukturierten Information
-Die grundlegende Herausforderung bei der Arbeit mit historischen Quellen ist, dass relevante Informationen in langen Fließtexten eingebettet sind und manuell mühsam extrahiert werden müssen. Unser Ansatz automatisiert diesen Prozess.
-Wie funktioniert die Informationsextraktion?
+<p style="font-size: 1.1rem; margin-top: -10px;">In dieser Unterrichtseinheit befassen wir uns mit einer Methode zur Strukturierung unstrukturierter historischer Texte. Im Kern verbindet unsere Anwendung die systematische Strukturierung von Daten mit einem spezialisierten Sprachmodell, das auf der Question-Answering-Methode basiert.</p>
 
-Template-Definition: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
-json{"earthquake location": "", "dateline location": ""}
+<h3>Methodik: Vom unstrukturierten Text zur strukturierten Information</h3>
 
-Question-Answering-Methode: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
+<p>Die grundlegende Herausforderung bei der Arbeit mit historischen Quellen ist, dass relevante Informationen in langen Fließtexten eingebettet sind und manuell mühsam extrahiert werden müssen. Unser Ansatz automatisiert diesen Prozess.</p>
 
-"earthquake location": "" → "Wo ist das Erdbeben passiert?"
-"dateline location": "" → "Von wo wird berichtet?"
+<h4>Wie funktioniert die Informationsextraktion?</h4>
 
+<ol>
+  <li><strong>Template-Definition</strong>: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
+  <pre><code>{"earthquake location": "", "dateline location": ""}</code></pre>
+  </li>
+  
+  <li><strong>Question-Answering-Methode</strong>: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
+  <ul>
+    <li><code>"earthquake location": ""</code> → "Wo ist das Erdbeben passiert?"</li>
+    <li><code>"dateline location": ""</code> → "Von wo wird berichtet?"</li>
+  </ul>
+  </li>
+  
+  <li><strong>Sprachmodell-Verarbeitung</strong>: Das NuExtract-1.5 Modell (ein Sequence-to-Sequence Transformer) analysiert den Text vollständig und identifiziert die relevanten Informationen für jedes Template-Feld.</li>
+  
+  <li><strong>Strukturierte Ausgabe</strong>: Das Modell füllt das Template mit den extrahierten Informationen:
+  <pre><code>{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}</code></pre>
+  </li>
+</ol>
 
-Sprachmodell-Verarbeitung: Das NuExtract-1.5 Modell (ein Sequence-to-Sequence Transformer) analysiert den Text vollständig und identifiziert die relevanten Informationen für jedes Template-Feld.
-Strukturierte Ausgabe: Das Modell füllt das Template mit den extrahierten Informationen:
-json{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}
+<h4>Technische Funktionsweise des Sprachmodells</h4>
 
+<p>Das Modell verarbeitet den Input in diesem Format:</p>
 
-Technische Funktionsweise des Sprachmodells
-Das Modell verarbeitet den Input in diesem Format:
-<|input|>
+<pre><code>&lt;|input|&gt;
 ### Template:
 {"earthquake location": "", "dateline location": ""}
 ### Text:
 Neues Erdbeben in Japan. Aus Tokio wird berichtet, daß in Yokohama bei einem Erdbeben sechs Personen getötet...
-<|output|>
-Intern erfolgt die Verarbeitung in mehreren Schritten:
+&lt;|output|&gt;</code></pre>
 
-Tokenisierung: Der Text wird in bearbeitbare Einheiten zerlegt.
-Kontextuelle Analyse: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.
-Selektive Aufmerksamkeit: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.
-Generierung: Die erkannten Informationen werden in das vorgegebene Template eingefügt.
+<p>Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
 
-Im Gegensatz zu regelbasierten Systemen oder klassischen Named Entity Recognition-Ansätzen versteht dieses Modell den semantischen Zusammenhang und kann flexibel auf verschiedene Extraktionsaufgaben angepasst werden.</p>
+<ol>
+  <li><strong>Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.</li>
+  <li><strong>Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.</li>
+  <li><strong>Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.</li>
+  <li><strong>Generierung</strong>: Die erkannten Informationen werden in das vorgegebene Template eingefügt.</li>
+</ol>
     """)
     
     with gr.Tabs() as tabs: