 All right, we are live. So hello, everyone, and welcome to the Google Summer of Code and Outreachy Project Showcase. Both these programs, for those of you who don't know, are run by Google and Software Freedom Consovency. And they are designed to introduce students to free and open source software projects from around the world. Wikimedia has been participating in these programs since many years in Google Summer of Code since 12 and Outreachy since five years. These runs that just got over earlier this month, we have 10 students from India, Israel, and United States who contributed code to different projects under the mentorship of 13 mentors. And out of these 10 students, we have seven students attending the showcase today, and they will be sharing with us more about their projects, what features they built this past summer, how it works, and much more. We are very proud of the contributions these students have made, and we are very happy they are here to share their accomplishments and learning with us. So before we dive into the details, I will give you a quick overview of logistics. Each student will tell us who they are, where they are joining us from today, what project they worked on, and then details about their project. And after we are done with this, there will be time for question and answers. For those of you who are watching us live, if you have any questions, you can ask us on IRC channel Wikimedia office. OK, so let's get started. Let's start with whoever is in the slide first. I will quickly do a screen share here. So we have Ella on the slide first. Ella, are you ready to present? Yes, thank you. OK, hello, everybody. My name is Ella. I'm from Israel. I took the feature that called, remind me of this article in X days. And it's supported in notification of reminder for the user per his request, of course. It's a very exciting feature. It's end-to-end feature. It touches from the database through the server to the UI. It was very interesting feature to work on. Basically, we've created a new component in the Echo extension that it's a delayed event, actually. And the new, of course, several APIs for this feature. I can move to the next slide, please. Yes, thank you very much. And we can see. I think I need to present it to everyone. That way, we will see the screen share. OK, awesome. OK, so by enabling the feature, we can see right near the read, edit, view history tabs, we have a new tab that called, right now, it called remind me. And if you're in any page on Wikimedia, you can click on the remind me tab. You get the pop-up that says, please input comment. It's an optional comment, of course, just for the user to connect its reminder for its thoughts in the moment. The user can then click on the when or date input and then choose any of a future date in resolution of seconds, as you can see. And for the user convenience, of course, there are the most popular future time frames, which are tomorrow, next week, and next month. So the user chooses the time and then creating the reminder. And then when the time and when the future time is come, so a notification is generated in the user notification. The notification is triggered with a cron job, the crons in very short intervals. And it's a very exciting feature. Cool. Thank you so much, Ella, for sharing about your work. OK, so next we have Feroz. Hi, everyone. I'm joining from New Delhi, and I am GSOC 2017 participant. And I was working on a project for introducing a hierarchy type to an extension, cargo extension. So first let me introduce you about what cargo is. Cargo is an extension that allows you to store data in your wiki from templates and from info boxes within your templates so that you can query it easily. And it allows you to have some easy build queries for maps, for locations, for several other types that are easy to use and are very informative, in a sense, specific to some type. For example, cargo gives you a place near to a specific coordinate in a range of five kilometer or some x kilometer. So such type of ability cargo gives you. So my task was about adding a hierarchy type. So hierarchies are, as you know, like we have several categories, and then they can be another class, and within that another class. And the aim was to allow generic categories, generate hierarchy types, and allow query within that. So I'll discuss what features are added. Can you switch the slide please? Yeah. So here are a few of the features that I added. I also added in page forms extension. Page forms is like another extension that allows you to easy addition of data into the wiki and really good GUI for adding information into the wiki. So the cargo and page forms work together. Cargo can also work with semantic media extension. But in this project, I have tried to incorporate cargo with page form for the hierarchy feature. So somehow support for hierarchy. And I have added two new querying features within and holds within. I'll tell you in a moment. And I have added a drill down interface for specifically hierarchies and added some pages for some fields entries in page form extension for hierarchy support with the cargo extension. So let's see one of the pages. Can you change the slide? Yeah. Thank you. Yeah. So this is one of the page in the page forms, special create class. This page allows you to create a template and a class and a form to take input form for the template. So here you can see allowed values and hierarchy. So the interface has not been changed pretty much. But I have added this text area and all the stuff to give a hierarchy structure. So from here, you can easily give hierarchies in the form of stars, specifying the levels. So I don't know if you can see the stars, count the stars, asterisks. One asterisk means the first level, the root level. And then as the stars increase, you are going deeper into the level and you can specify that. So this is how you can allow creating a hierarchy field. Please change the slide. So what's the advantage of it? Obviously, the queries that I have added allows you to see how many people are having specific mentions of specific value. Suppose the last field, you created a field like main ingredient in your template. And you have following values, roots, apples, mangoes, and so on, like hierarchy. And now you want to query how many dishes or how many vegetables have root vegetables mentioned in them. And that should also include carrots or turnips or any other values within the root vegetables. So there is a sample query that you can run into your wiki page. And it will give you a nice result in the form of table if you specify the table. So you can see it on the next slide. Please change the slide. Yeah, so here's the sample data. So it is the result for the above query that you ran. So in this way, you can get the results of the queries. So this is just a query for fields having single values. You can similarly run queries for fields having several values. While discussing, it looks the same. But on the back end side, there have been different implementations due to different architecture for saving such data. Hi, Rose, your time is up. Yeah, so that's the last feature if you can give me a few seconds. Next one, yeah. So here is the drill down. You can see the whole mentions of those fields in each and every slide and in each and every page with their accounts. So basically, these are the few major things which I have added on. And that's it. OK, thank you for those. Thank you. Next, we have Amrit. Hello, everyone. I'm Amrit and I'm from Kochi. So the project I've been working in on is the general improvement of improvement and enhancement of WikiSource and an extension called ProofreadPage. So those who are familiar with WikiSource might as well know what ProofreadPage is. For those who aren't, ProofreadPage is an extension that helps in the validation of a text or something that is uploaded to WikiSource. And it allows easy rendering of texts in several ways without duplicating its data. So the tasks I have undertaken is the first one is a creation of an auto-validate privilege. Now, one issue with validation is that not the same person cannot Proofread and validate the same page. So for people running on small Wikis, they need to call in a third person who might not be related to the thing that he's doing in order to validate the page he has Proofread. So with the creation of this auto-validate privilege, the admins, the admins of the small Wikis can themselves Proofread as well as validate the page. So this makes the process a lot more easier and much more simplified. Now, the second one is the conversion of index pages editing form to object-oriented JavaScript. Now, the advantage of object-oriented JavaScript is that the code is much more readable than what was previously written, and the interface looks much better. So what I've done is generally the porting of the pages editing form, that is an index. Those who are familiar with Wikisodes might know this because index is basically like the index of a book. So what all do you need in an index of a book? Those are there in the web interface. So I have converted that from PHP to OJS. And my third task is the migration of Proofread Zoom feature to OJS. It's a similar thing, but then this is a little more of a bigger task. And the job was to convert the code which was originally written and implemented in jQuery to OJS. So you can see the Zoom feature while zooming into an image that is being pinned in with a book when you upload a book to a Wikisodes. And then you Proofread it and validate it. You also add an image with it. So in order to zoom into that image, a widget was used. Now, this widget was originally written in jQuery. So once converting this to OJS makes the code much more readable and easier to access. So these were the tasks that I had done during my DSOP project. And I have planned to keep the presentation pretty small as I guess this can be viewed throughout the Wikisodes and it's widely implemented in the media Wikisodes. Thank you. Shrishji Omurit. Next, we have Sonali. Sonali, are you ready? Hello. Yeah. So hello, everyone. I'm Sonali, and I'm joining from Jaipur, India. I participated in Outroochie round 14. And my project was about documenting how Zatero translators are developed. So can we have the screen share? OK, so basically, we have a service called Cytoid that allows users to add citation to Wikipedia's. And it has made it very easy for people to add citations through URLs and DOIs. Pretty easy because of the UI earlier, it was through adding code in the source. And this service uses Zatero translators. Zatero is a force reference management system. These translators basically scrape websites and get their data and save them as JavaScript object. And that is used by Cytoid. So the link is provided where you can see what the documentation covers. Can we switch to the next slide? So I'll just cover what all the documentation has. First, we go about knowing what Zatero translators are. And then for the people who would like to learn how to write translators through an example and skip all the tutorial, I have created a page that has a translator for Wikipedia blog. And then there is a section that covers all the concepts that are needed before you jump into writing code. And then we have all the methods that are basically used to write a translator. These are more or less static. There's this template that is used in all of the translators. Next, moving ahead, we have a detailed explanation of a translator for mediawiki.org. This documentation was basically prepared because the current documentation that we have was pretty old and did not have all the updates. During the internship period, Zatero released its new version, Zatero 5.0. So this documentation has all the updates, how to develop on Docker, and how to do development through translation server. Because for Cytoid, it is very important that a translator runs on translation server. Whereas the previously available documentations only explain how to develop through scaffold, which is an integrated development environment provided by Zatero community. So the documentation, for the first time, has how to test and write and check the code on the translation server. Further, we have how these translators can be deployed and how to get them merged first in the Zatero community and then in the Wikimedia mirror of Zatero. And most of the translators that we have, as of now, cover English language. And not much coverage is there. It's not available for other languages. So it will be great if people make use of this documentation, develop translators, and expand the coverage of the content that we have. So, yeah. Thank you. Thank you, Sonali. Next, we have Siddharth. Yeah, hi. Can you hear me? Yes, we can hear you. So I'm Siddharth. I'm joining from IT Delhi. And my GSOC project was about making a tool. And this web tool is capable of uploading images from the repositories of GLAMs to Wikimedia Commons. Now, GLAM stands for Gallery, Library, Archives, and Museum, for example, the Amsterdam Museum. So what happens is that these large galleries sometimes have a lot of images to be uploaded to Wikimedia Commons. And as you know that anybody, any comments user can do so. So with my tool, any comments user will be able to upload images, either a single image or multiple images at a time. So let's go to the slides. Yeah, so this is, as I already said, next slide. So right now we are supporting two GLAMs, National Archive and Amsterdam Museum. And the main challenging thing in the tool was to make the tool scalable. And this tool can be extended to any number of GLAMs. So we are expecting to extend it to other GLAMs. And there is a page which I have shown here where anybody can suggest new GLAMs. Next page, next slide. Yeah, so it has a number of features. For example, suppose you are a Wikimedia Commons user, so you will be able to use this tool. So you'll have to log in using your Wikimedia Commons credentials for that we have used authentication token, this protocol called auth. And it has a very simple interface which we will show in the next slides. And the main idea is that, suppose when you are uploading an image, so this image need to have certain metadata which the Wikimedia Commons expects. And these metadata are formed by our tool and the user does not do anything regarding manually entering this metadata. And we will prevent uploading of duplicate images. Suppose we were trying to upload an image which is already there in Wikimedia Commons who our tool will report that. And our tool is capable of uploading multiple images at a time and it can associate images with multiple categories. We will see all in the next slides what this is. So let's go to the next slide. So this is the homepage. The tool is hosted in Wikimedia Foundation Labs. It's called GLAM to Commons. So first thing you have to do is you have to log in using your Wikimedia Commons. And you will see the supported GLAMs list here which contains the link to the repositories you can serve through the images and upload. Let's go to the next slide. So once you click on the login button, you will be asked to log in. If you don't have a Wikimedia Commons account, you can join and log in. Let's go to the next slide. And then you have to allow certain rights to the tool. It will ask you to allow the right to interact with pages and interact with media. And after you allow that, you are inside the tool. Let's go to the next slide. Yes, so this is our tool. It has three main buttons, Home, Help, and the Wikimedia Foundation link, Homepage link. The Home button is where we'll have all the action. Help button has the instructions which you will see in a little while. So once you are logged in, the first thing you'll do is it will choose a GLAM from the dropdown, choose GLAM. Let's go to the next slide. Once you have chosen, suppose, National Archive, so you will get to see a little description about National Archive. And then you will see what are the kind of sample URLs, so you'll be able to go to the sample URL and search, serve through the images of their collection and then provide the sample URL or unique ID for a single image upload. So we are right now considering a single image upload. To upload a single image, you'll have to provide this unique URL or unique ID as you can see here. And then, for example, I was looking at an image of Rajiv Gandhi from a Prime Minister of India. So I have added categories, Prime Minister of India and Rajiv Gandhi. And now we click on the upload or see image calorie button. And let's go to the next slide. So if that image is not there in the Wikimedia Commons repository, so in that case, it will be successfully uploaded and you will get to see a link of that image in the Wikimedia Commons. Once you click on the link, you'll get to see that. Let's go to the next slide. If it is already there in the Wikimedia Commons repository, we will report that a duplicate exists at the following location. Yeah, let's go to the next slide. If your image ID is invalid, incorrect. If you're given a wrong image ID, we will report that. Let's go to the next slide. And this is, once you click on the link to in the Wikimedia Commons, you'll get to see that the image has been uploaded with the metadata, as you can see, a lot of the metadata has been added by a tool. Let's go to the next slide. So this is multiple images at a time. So here, what we'll do is that we'll ask the user to provide a search string. Based on the search string, we will show him a gallery of images. For example, I wanted to see what are the images in National Archive Adir, that has Gandhi as one of the search string. Let's go to the next slide. So once you click on upload or see image gallery, you'll get to see the images which are related to Gandhi. And then you can choose, and there are checkboxes with respect to every image. You choose images which you want to upload and you click on upload to Commons. Let's go to the next slide. And let's go to the next slide. Yeah, so non-duplicated images, let's go back. So non-duplicated images are uploaded to Wikimedia Commons, and the duplicate images are reported that these images are already there in Wikimedia Commons. Let's move. And then you will have a link where you will get to see the new images uploaded, and these are the images which we have uploaded, Gandhi-related images in Wikimedia Commons. Let's move. This is a simple how to use the tool instructions. So you log into Wikimedia Commons, you choose the glam from the dropdown. If you want to upload a single image, you provide the URL or unikari. If you do not know no problem, you can just enter a search term and based on the search term, we will form an image gallery for you and you can choose the images you want to upload and click upload and those images will get uploaded. And if you make any mistakes and those mistakes will be, those exceptions will be caught by the tool and you will get to see appropriate messages. So this is what I did for my GISA project. Thank you. Thanks, Siddharth. Next, we have Sejal. Hi, everyone, I'm Sejal Khatri. I'm joining from Pune, India and my GISA project was to enhance the usability of the Wikimedia programs and events dashboard. So for all of you who don't know, Wikimedia Education Dashboard is Wikimedia Education Foundation's platform for helping people get started with editing articles on Wikipedia and helping professors run assignments wherein their students edit Wikipedia. So the dashboard code runs mainly on two projects which is Wikimedia Education Foundation Dashboard Project and the global version of that is Wikimedia Programs and Events Dashboard. So I worked on Wikimedia Programs and Events Dashboard because the previous use case, which was limited to higher education in the United States and Canada, that dashboard was pretty, it's running pretty well and then we moved on to the global version of the dashboard which is Programs and Events Dashboard which is not perfect yet. It has many programs, many kinds of programs including editathons, education programs and many such Wikimedia events which can be handled. The scope, there are many improvements to be made. So my GISA project was not limited, it was quite open and I had to figure out, I had to do many user testing sessions to find out what's going wrong and then work on that. So can we move on to the next slide? For the first part of my internship, I did some code refining for the user contribution stats and successfully made them available on the user profile pages. So I was working on this since the community bonding period of GSOC to add on some visualizations for user contribution stats and during the first part of my internship, I was successful in refining that and then getting it merged and deployed. Can we move on to the next slide? So I was using Vega, it's a visualization grammar. Using that, I generated these two visualizations. On the left side is visualization for the programs taught by a particular instructor. So as you can see, the programs taught by an instructor are distributed over the time scale which makes it easier for them to understand the impact they have had. And on the next, on the second screenshot, you have the number of editors taught by the instructors or the editors who are handling, guiding those editors on that program. So you could see that instructor, that particular instructor has taught 32 editors and he could see that he had impact on 32 new editors. And so that's the main agenda of the dashboard, to inspire people to contribute more so as to see the impact they are having. Can you move on to the next slide? And then comes the second part of my internship. This was the part where I was having conducting user testing sessions from people all across the globe and then interacting with them, helping them with their frustrations because some people didn't know how to use a particular function or how something is supposed to be done and then understanding and helping them. These are some of the issues that I resolved during which I discovered and then resolved. There was some very critical issues that were discovered and can we move on to the next slide? So yeah, the third and the final part of my internship. I was, there's a screenshot, which you can see the dashboard on a mobile device. It is not well organized and the nav bar you can see is not quite usable. So I walked on making it usable and then refining the UI. Can we move on to the next slide? So this is the outcome of what I did. The first screenshot on the left is I, we decided to add a hamburger menu instead of, because previously you saw that all the elements on the nav bar were distorted and cluttered and that's why we decided to add a hamburger menu and you could see the current layout. So during this I faced a few problems. It was not quite easy. This took a lot of time. The previous dashboard code was written in Hamill, the UI and then we had to like shift to React for using React JS. It's a React hamburger menu. It's a library provided. And then other problems which I faced like this and universal language translator. It's in jQuery and whenever React in jQuery you have to add in some other code. They don't go hand in hand. So I walked on that. And that's the fourth part. This is it as you can see. And the fourth part was me attending Wikimedia. There I met my mentors and further had discussion about how to document this and we decided to put on a proper like we have to document all the user testing sessions I had. Currently I have a raw document of what all the problems they are facing and Jonathan Morgan, my design mentor he helped me to with how the official documentation is done and I met my mentor, the other mentor, Sage Ross and it was an amazing experience. That's from it, that's from my side. Thank you, Sage. I don't see any questions coming on IRC. So I want to ask if anyone present in the room want to ask a question? Do you have any questions for one another? Hi, Sonali. Hello. Yeah, hello. Yeah. So you have walked on the Zotero translator, right? Yes. Yeah. I thought that it was really interesting to work on the project and as you said that this is probably going to help improve the number of contents in different languages other than English, right? Yeah. Yes. So even though in a few minutes I didn't understand the whole of it, I understood bits and pieces. So let's say, so is this a translator you have made or is this just documentation part you have done? So basically translators are like files that scrape web pages and these are used by people who do researches to save content, keep a summary of it. So while documenting the process, I had to create translators because you need to know what you're documenting about before you start writing about it. So I made some nearly 10 translators. It's very easy to learn first. If you learn, it's very easy to speed it up. So I developed translators and then I documented how someone else can do it. And there were many missing pieces in the existing documentation that I used. So the main motive was to make it perfect. So that is a really easy way. So I guess natural language processing was heavily involved, is that so? No, it was basically about working with the HTML code of the websites. It had nothing to do with NLP. It was about the HTML identifying the nodes in the structure of the websites and picking information from that. So just working with JavaScript, HTML and DOM. Okay, thank you. Okay, thanks for the question. Siddharth, I have a question for you. Yeah. I was wondering since your tool, it's out there, have you done any pilots already with people who are associated with these clans? And if so, have you discovered anything cool that you would like to share with us? Yeah, I think from the beginning itself when I made the prototype tool, we had communicated with the Wikimedia representative of the National Archive Clan and he has spoke very highly about the app. And he said that the workflow was very simple and it has made the work a lot easier for them. And there is a page we have maintained where we can see the number of uploads every day that's happening. And it's pretty impressive, I like that. And someone has suggested to include a clam, a French clam. And in France, most of the documentation is French so we're a little bit struck, but we'll start with that. And I wanted to ask you whether you could help me to get in touch with some of the Indian clams so that we can also add our history and upload images from our history to Wikimedia quickly and easily. If you are in contact with anyone. That would be cool. I can't think of any organizations that I know but definitely they can find something out. Yeah, so I'm pretty interested in making this too large and support more and more clams. Cool. Anyone else wants to ask anything? So we have Kirtanam missing, I think so. Yeah, Kirtanam is missing. And Meetham. So finished pretty much before time. Okay, then thank you everyone for joining and stopping the broadcast now. Thank you. Thank you.