Using Wikipedia API for knowledge graph in SUSPER
Knowledge Graph is way to give a brief description about search query by connecting it to a real world entity. This helps users to get information about exactly what they want. Previously Susper had a Knowledge Graph which was implemented using DBpedia API. But since DBpedia do not provide content over HTTPS connections therefore the content was blocked on susper.com and there was a need to implement the Knowledge Graph using a new API that provide contents over HTTPS. In this blog, I will describe how getting a knowledge graph was made possible using Wikipedia API.
What is Wikipedia API ?
The MediaWiki action API is a web service that provides convenient access to wiki features, data, and metadata over HTTP, via a URL usually at api.php. Clients request particular “actions” by specifying an action parameter, mainly action=query to get information.
The endpoint :
https://en.wikipedia.org/w/api.php
The format :
format=json This tells the API that we want data to be returned in JSON format.
The action :
action=query
The MediaWiki web service API implements dozens of actions and extensions implement many more; the dynamically generated API help documents all available actions on a wiki. In this case, we’re using the “query” action to get some information.
The complete API which is used in SUSPER to extract information of a query is :
Where titles=Search_Query, here Japan
How it is implemented in SUSPER?
For implementing it a service has been created which fetches information by setting various URL parameters. This result can be fetched by creating an instance of service and passing search query to getsearchresults(searchquery) function.
export class KnowledgeapiService { server = 'https://en.wikipedia.org'; searchURL = this.server + '/w/api.php?'; homepage = 'http://susper.com'; logo = '../images/susper.svg'; constructor(private http: Http, private jsonp: Jsonp, private store: Store<fromRoot.State>) { } getsearchresults(searchquery) { let params = new URLSearchParams(); params.set('origin', '*'); params.set('format', 'json'); params.set('action', 'query'); params.set('prop', 'extracts'); params.set('exintro', ''); params.set('explaintext', ''); params.set('titles', searchquery); let headers = new Headers({ 'Accept': 'application/json' }); let options = new RequestOptions({ headers: headers, search: params }); return this.http .get(this.searchURL, options).map(res => res.json().query.pages ).catch(this.handleError); }
Since the result obtained is an observable therefore we have to subscribe for it and then extract information to local variables in infobox.component.ts file.
export class InfoboxComponent implements OnInit { public title: string; public description: string; query$: any; resultsearch = '/search'; constructor(private knowledgeservice: KnowledgeapiService, private route: Router, private activatedroute: ActivatedRoute, private store: Store<fromRoot.State>, private ref: ChangeDetectorRef) { this.query$ = store.select(fromRoot.getquery); this.query$.subscribe( query => { if (query) { this.knowledgeservice.getsearchresults(query).subscribe(res => { const pageId = Object.keys(res)[0]; if (res[pageId].extract) { this.title = res[pageId].title; this.description = res[pageId].extract; } else { this.title = ''; this.description = ''; } }); } }); }
The variable title and description are used to display results on results page.
| <div *ngIf=“this.description” class=“card”> <div> <h2><b>{{this.title}}</b></h2> <p>{{this.description | slice:0:600}}<a href=‘https://en.wikipedia.org/wiki/{{this.title}}’>..more at Wikipedia</a></p> </div> </div> |
Resources
1.MediaWiki API : https://www.mediawiki.org/wiki/API:Main_page
2.Stackoverflow : https://stackoverflow.com/questions/8555320/is-there-a-clean-wikipedia-api-just-for-retrieve-content-summary
3.Angular Docs : https://angular.io/tutorial/toh-pt4
Jonas Smeedegaard at Workshop: Bringing Asian and International developers together
FOSSASIA Event in Ho Chi Minh City