Mathesis Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
Wilkommen zu unserem (Mathesis-)Projekt
====== Map Of Knowledge ======
{{:ss2021:project3:endversion2.png?500|}}[[https://map-of-knowledge.herokuapp.com/|https://map-of-knowledge.herokuapp.com/]]

===== Zielsetzung =====
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.




===== Wie sind wir dabei vorgegangen? =====


==== Grundidee: Das Erstellen eines Netzwerkes zur Wikipedia-Visualisierung ====


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.

=== Warum Wikipedia? ===
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.


==== Die Bestandteile des Projekts ====
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.


==== Laden der Links ====

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:
<code python>


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			
</code>

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.

==== Verarbeitung der Links ====

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. 

===== Ein kleiner Einstieg in die Graphentheorie =====

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.

{{ graph_beschriftet_unvollständig.png?500 }}
>**Bild 2: **Graphenbeispiel 1


=== Wie soll unser Netzwerk aussehen? ===

{{:ss2021:project3:graph.png?500|}}
>**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.



==== Einbetten der Graphenerstellung in eine Suchmaschine ====

=== Dash ===

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:

{{ versuch3.png }}
 
==== Erstellen der User Interface ====

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.

<code python>

    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'
                ),
            ]

</code>

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.


==== Erstellen einer Website mit der Suchmaschine ====

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.

[[http://example.com|Hier]] (oder am Anfang der Seite) findet ihr unsere Webseite.



==== Protokolle ====

Falls euch unser Vorgehen dabei genauer interessiert, findet ihr hier unsere wöchentlichen [[ss2021:project3:Protokolle]].

----


==== Selbst ausprobieren ====
**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)
{{:ss2021:project3: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)

===== Fazit=====
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
  * 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.
\\



=== Benutzte Software ===

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)


== Projektmitglieder ==
Elena Fillinger, Luise Kern, Damian Kunze, Maya Lackner, Yannik Mika
Mathesis Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
