Bild 1: Letzter Stand unserer Suchmaschine bei Abgabe

https://map-of-knowledge.herokuapp.com/

Unser Ziel ist Visualisierung der Verbindung zwischen Wissensbereichen. Dafür wollen wir eine Suchmaschine entwickeln, die anhand eines eingegebenen Suchbegriffs einen Graphen erstellt. Die Knotenpunkte ergeben sich aus den Artikeln, auf die der ursprüngliche Suchbegriff verlinkt. Diese soll das Programm aus einer Wissensbibliothek lesen, zum Beispiel Wikipedia. Voraussichtliche Bestandteile unseres Projekts sind also die Visualisierung von Artikeln und ihrer Verweise aufeinander, also der Links sowie ein geeignetes User Interface, um den Suchbegriff, die Sprache und die Suchtiefe festzulegen.

Mit Hilfe einer Wikipedia API sollen Links auf den jeweiligen Wikipediaseiten ausgelesen werden und anschließend grafisch visualisiert werden.

Eine freundliche Benutzeroberfläche, in der man einfach Sprache, Tiefe und den Suchbegriff eintragen kann, waren dabei unsere Startparameter.

Wir haben uns bewusst für Wikipedia entschieden, auch wenn kurzzeitig andere Wissensseiten im Gespräch waren. Einerseits, weil es bereits für uns (scheinbar) gut nutzbare Wikipedia APIs gab und andererseits, weil es Artikel zu vielfältigen Themen gibt und uns somit eine breite Anwendung unseres Projekts ermöglicht.

Wir benutzen Dash, um unsere Webseite in Python schreiben zu können. Dash hat verschiedene Module, eine davon ist Plotly, womit man simpel Daten visualisieren kann.

Die wichtigsten beiden Dateien in unserem Projekt sind app.py und WikipediaArticle.py

WikipediaArticle.py repräsentiert einen Wikipediaartikel und ist dafür zuständig, diesen zu generieren. Entweder kann über die Wikipedia API oder direkt über das Herunterladen und Verarbeiten der Webseiten das Artikel-Objekt erstellt werden

app.py startet den ganzen Prozess der Graphengeneration, nutzt die WikipediaArticle Klasse und erstellt Artikel-Objekte, speichert diese sinnvoll und stellt sie dann als Graphen dar. Außerdem sorgt es dafür, dass der Graph dynamisch geladen wird, also nicht alle Punkte gleichzeitig geladen werden, sondern in Nachhinein hinzugefügt werden können.

markup.py beinhaltet das Markup der Seite und ein paar Einstellungen zum Design.

Um überhaupt Daten zu haben, aus denen wir einen Graphen generieren können, haben wir zunächst eine Klasse erstellt, die die Links der einzelnen Artikel auf Wikipedia ausliest. Die Wichtigkeit der Links haben wir so definiert, dass Links, die zuerst genannt werden, als wichtigste angesehen werden, die Wichtigkeit also gleichbedeutend mit der Reihenfolge ihrer Nennung ist.

Hier ist ein vereinfachter Code der die Links eines Artikels aus der Zusammenfassung herausliest:

 
def get_links_in_summary(self, phrase): # Via "requests" and HTML parsing
		url = "https://" + self.language + ".wikipedia.org/wiki/" + phrase
 
		raw_html = requests.get(url)
		html = BeautifulSoup(raw_html.text, 'html.parser') 
		# This is the page in HTML in parseable format
		...
 
		for part in summary: #Extract links of painfully found <a> tags
			for link in links:
				...
 
				if self._is_real_link(link_string) and link_string not in links_filtered:
					links_filtered.append(link_string)
 
		print("[+] success, links found: " + str(len(links_filtered)))
		self.links_from_summary = links_filtered
 
	def _is_real_link(self, link_string): 
		# Find out if the link is a article inside wikipedia
 
		if link_string[0:11] == "#cite_note-":
			return False
		...
		return True			

Wenn ihr an dem gesamten Code interessiert seid, findet ihr am Ende eine zip-Datei. Anderenfalls könnt ihr in unser Repository auf gitHub gucken.

Um die Links zu verarbeiten, programmierten wir verschiedene Funktionen in Python. So gibt es beispielsweise eine Funktion, die überprüft, ob ein Link bereits vorhanden ist, das heißt, ob auf ihn schon verwiesen wurde. In diesem Fall soll für diesen Link nicht ein weiterer Knoten erstellt, sondern lediglich eine Kante zum bereits bestehenen Knoten hinzugefügt werden.

Da die Visualisierung der Suchergebnisse ein wichtiger Teil unserer Grundidee war, haben wir uns damit beschäftigt, was Graphen sind und welche Eigenschaften unser Graph besitzen sollte.

Die Graphen, die wir in diesem Projekt betrachten, sind ein wenig anders als die Schulvorstellung von Graphen. Statt der Funktionen in Koordinatensystemen sind Graphen in diesem Kontext eher wie Wahrscheinlichkeitsbäume aufzufassen.

Dabei besteht dieser Graph aus Kanten (edges), hier die Striche, und Knoten (nodes), hier die grauen Punkte. Die Zahlen in den Knoten bezeichnen die Suchtiefe. 1 ist also der ursprüngliche Suchbegriff, 2 die Artikel, auf die dieser direkt verweist usw.

Bild 2: Graphenbeispiel 1

Bild 3: Graphenbeispiel 2

Die Knoten stellen bei unserem Graphen die Artikel dar, die Kanten beschreiben die Verbindungen bzw. Links zwischen den Artikeln – je mehr Kanten also ein Knoten hat, desto öfter wird auf diesen Artikel verwiesen bzw. desto öfter verweist er auf andere. Mithilfe mehrerer Funktionen sollen die in der Klasse gefilterten Links einen Graphen auf diese Art generieren. Dabei sollen die durch den User eingegebenen Parameter Sprache, Tiefe und Anzahl der Kanten bzw. Verzweigungen bei jedem Artikel beachtet werden.

Eine nützliche Eigenschaft, die wir unseren Graphen geben wollten, war die Richtung. Ganz einfach sieht man das durch die Pfeile in Bild 3; diese zeigen zwischen zwei verbundenen Artikeln, welcher davon der ausgehende Artikel ist und auf welchen verwiesen wird.

Während Teile unserer Gruppe an der Wikipediaklasse und der Graphenerstellung aus den Links gearbeitet haben, haben andere bei ersten Codeentwürfen einen zufällig generierten Graphen mit Networkx erstellt, um auszuprobieren, wie ein array überhaupt sinnvoll visualisiert werden kann. Für die Visualisierung hat sich schnell Dash als geeignet herausgestellt, da diese Bibliothek für die Visualisierung von Apps in Webumgebungen und mit Userinteraktion gedacht und mit Python kompatibel ist.

Sinnvoller als Networkx für die Visualisierung hat sich nach einiger Recherche Cytoscape erwiesen, eine Komponente von Dash. Damit sind verschiedenste Möglichkeiten der Graphendarstellung gegeben, von denen wir einige auch in unsere Suchmaschine eingebunden haben. Auch Inputs lassen sich vergleichsweise leicht einbinden.

Ein Beispiel eines unserer Graphen, der mit Dash Cytoscape erstellt wurde:

Bild 4: Graphenbeispiel 3

Neben der Visualisierung des Graphen mussten wir auch eine User Interface erstellen, in denen neben dem Suchbegriff auch die Tiefe und die Sprache und in späteren Versionen die Anzahl der Kanten bzw. Verzweigungen und die Darstellung des Graphen festgelegt werden kann.

Hier ein Codeauszug aus unserer finalen Version. Dieser Abschnitt definiert das Layout des Dropdownmenüs, mit dem die Sprache ausgewählt werden kann.

    dbc.FormGroup(
            [
                dbc.Label("Language"),
 
                dcc.Dropdown(
                    id='language-dropdown',
                    options=[
                        {'label': 'english',
                          'value': 'en'},
                        {'label': 'french',
                          'value': 'fr'},
                        {'label': 'german',
                          'value': 'de'}
                    ], value='en', placeholder='Select a language'
                ),
            ]

Falls ihr mehr über Dash erfahren wollt, findet ihr mehr Informationen in der ausführlichen Dash Dokumtation von Plotly, hier (https://dash.plotly.com/) oder auch am Ende nochmal verlinkt.

Dash arbeitet lokal, das heißt, die gesamte Suche läuft auf dem Rechner ab. Um die Suchmaschine zu veröffentlichen, also verwendbar für jede Person zu machen, ohne dass diese das Programm auf ihrer Festplatte gespeichert haben muss, nutzen wir Heroku.

Allerdings hat Heroku auch einige Probleme bereitet. So hat öfter mal Code, der auf lokal funktioniert hat, auf Heroku Fehler verursacht.

Hier (oder am Anfang der Seite) findet ihr unsere Webseite.

Falls euch unser Vorgehen dabei genauer interessiert, findet ihr hier unsere wöchentlichen Protokolle.

Haben wir euch neugierig gemacht?
Dann kommt ihr hier kommt ihr zu unserer Webseite: https://map-of-knowledge.herokuapp.com/

Oder auch hier im GitHub: https://github.com/yannikmika/map-of-knowledge

Hier ist der Code, der zur Zeit der Veröffentlichung aktuell ist. (Github ist am aktuellsten) map-of-knowledge.zip

Zum Ausführen installiere erst alle verwendeten Frameworks die in requirements.txt aufgelistet sind. Mit: pip install <hier framework einsetzen>

Dann führe es aus: python app.py

Und falls ihr euch auch darüber hinaus mit dem Gebiet beschäftigen wollt, findet ihr hier unsere wichtigste Quelle:
Die Dash Dokumentation: https://dash.plotly.com/
(hier findet man alles, was man über Dash wissen möchte)

Zusammenfassend lässt sich sagen, dass wir mit unserem Ergebnis ziemlich zufrieden sind. Wir konnten viele unserer Ideen umsetzen und sind so unserem Ziel recht nah gekommen, auch wenn sich die Zielsetzung immer wieder leicht verändert hat und sich den Gegebenheiten anpasste.

Unser wichtigstes Ziel war es, den Suchbegriff individuell eingeben zu können. Außerdem wollten wir eine einfach bedienbare Benutzeroberfläche gestalten, mithilfe derer man Parameter wie Sprache und Suchtiefe festlegen kann. Aber auch etwas verstecktere Features, wie die Möglichkeiten heranzuzoomen oder Knotenpunkte zu verschieben, sind integriert. Gleichzeitig gibt es aber auch vorausgewählte Möglichkeiten, die die Nutzung erleichtern. Allerdings gibt es auch noch einige Features, an denen wir gerne noch etwas weiter arbeiten würden, mehr dazu in unserem Ausblick.

Der Arbeitsprozess insgesamt war aufwendig, da wir uns in vor allem in Dash komplett neu einarbeiten mussten, so dass unser Arbeitsprozess aus viel Recherche, Ausprobieren und Debuggen bestand. Trotzdem hatten wir beim Erarbeiten Spaß und haben viel gelernt.

Ausblick:

ToDo:

• Verschiedene Sprachen reparieren (bisher geht ja nur Englisch)
• Zusammenfassung beim Hovern über Artikel schöner machen, da bisher der HTML-Text angezeigt wird
• Heroku crasht noch manchmal: Auswertung der Links vom Server geht unendlich weiter, wenn der Nutzer während der Erstellung die Seite verlässt/neu lädt

In Zukunft könnten wir uns vorstellen, unser Programm noch weiter zu verbessern. Der nächste Schritt wäre, dass wir die Links, die doppelt erscheinen herausfiltern lassen bzw. diese miteinander verknüpft werden, um Dopplungen zu vermeiden.

Dash Core Components
Ohne das geht's nicht :)

Dash HTML Components
Für die Nutzerinteraktion mit Buttons und Text

Dash Bootstrap Components
Für das Layout und das Farbtheme

Dash Cytoscape
Für die Darstellung des Graphen

Wikipedia API „wikipedia“, nicht „wikipedia-api“
Für Suchergebnisse im Dropdown wird wikipedia.search() benutzt

requests & bs4 (BeautifulSoup4)
Für die einzelnen Artikel im Graph deren Wikipedia Webseiten heruntergeladen (requests) und ausgewertet werden (bs4)

Elena Fillinger, Luise Kern, Damian Kunze, Maya Lackner, Yannik Mika