facebook – blog.fossasia.org

Welcome the Visdom Project at FOSSASIA Now Fully Open Source

Post author:Mario Behling
Post published:January 5, 2021
Post category:Community FOSSASIA Visdom
Post comments:0 Comments

We are proud to announce that FOSSASIA is welcoming the Visdom project. The project is being transitioned from Facebook AI Research to the FOSSASIA Organization. As part of this transition it has been relicensed to the Apache License 2.0 as fully Open Source. Visdom is a flexible tool for creating, organizing, and sharing visualizations of live, rich data. It aims to facilitate visualization of (remote) data with an emphasis on supporting scientific experimentation. It supports PyTorch and Numpy. Visdom was created in 2017 by Allan Jabri and Laurens van der Maaten of Facebook AI Research, and further developed under the leadership of Jack Urbanek. To date, 90 developers from around the world have contributed to the project with over 3000 projects depending on Visdom. It is now available on the FOSSASIA GitHub. “I’m excited to see how Visdom continues to grow as a FOSSASIA project, as the community will set a new vision for what we all want out of it. While I’ll no longer be leading the project, I will remain engaged to provide clear context for transitions, code reviews, and direct code contributions.”Jack Urbanek, Facebook Research Engineer and Visdom project lead “My goal continues to be building amazing communities around state of the art AI rooted in open source collaboration. Bringing the Visdom project to FOSSASIA is a great example of this and I am extremely pleased to see the project continue this path with FOSSASIA as the new host of Visdom.”Joe Spisak, Product Manager for Facebook’s open-source AI platform and PyTorch FOSSASIA has been developing Open Source software applications and Open Hardware together with a global community from its base in Asia since 2009. FOSSASIA’s goal is to provide access to open technologies, science applications and knowledge that improve people's lives stating in its mission: “We want to enable people to adapt and change technology according to their own ideas and needs and validate science and knowledge through an Open Access approach.” This mission perfectly aligns with the goals of Visdom as an Open Source tool that aims to: Facilitate visualization of data with an emphasis on supporting scientific experimentation and Organize a visualization space programmatically or through the UI to create dashboards for live data, inspect results of experiments, or debug experimental code. Hong Phuc Dang, OSI vice president and FOSSASIA founder says: “We will continue the development of Visdom in cooperation with the developer and user community. We already discussed lots of ideas to move forward on an exciting roadmap with the core team and adding it to FOSSASIA’s Pocket Science Lab applications. We are looking forward to the input and involvement of the community to bring the project to the next level.” Mario Behling, co-founder of FOSSASIA and CEO of OpnTec adds: “We are thrilled that the Visdom project becomes fully Open Source as part of the project transition. It is fantastic to see how Facebook supports open technologies and takes an active role to foster International cooperation and development in the FOSS ecosystem by…

Apply Shimmer Effect for Progress in Open Event Attendee Application

Post author:liveHarshit
Post published:August 30, 2019
Post category:Android Event Management FOSSASIA GSoC Open Event
Post comments:0 Comments

The open event attendee is an android app which allows users to discover events happening around the world using the Open Event Platform. It consumes the APIs of the open event server to get a list of available events and can get detailed information about them. Shimmer effect was created by Facebook to indicate a loading status, so instead of using ProgressBar or the usual loader use Shimmer for a better design and user interface. They also open-sourced a library called Shimmer both for Android and iOS so that every developer could use it for free. Add Shimmer libraryCreate a placeholder for shimmerApply the effect with live dataConclusionResources Let’s analyze every step in detail. Add Shimmer Library Add Shimmer Library to build.gradle : // Cards Shimmer Animation implementation 'com.facebook.shimmer:shimmer:0.5.0' Create reasouces Add shimmer background color to colors.xml: <color name="shimmer_background">#dddddd</color> Create a placeholder layout: <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/layout_margin_medium" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="@dimen/card_corner_radius" app:cardElevation="@dimen/layout_margin_none" android:foreground="?android:attr/selectableItemBackground" android:background="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/layout_margin_large" android:layout_gravity="center" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="@dimen/item_image_view_160dp" android:scaleType="centerCrop" android:background="@color/shimmer_background"/> <LinearLayout android:layout_width="match_parent" android:layout_marginTop="@dimen/layout_margin_medium" android:layout_height="wrap_content" android:orientation="horizontal"> <View android:layout_width="@dimen/card_width_45dp" android:layout_height="@dimen/item_image_view" android:background="@color/shimmer_background" android:layout_marginEnd="@dimen/padding_large" android:layout_marginRight="@dimen/padding_large" android:gravity="center_horizontal" android:orientation="vertical" android:layout_marginTop="@dimen/padding_medium"> </View> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/padding_large" android:paddingTop="@dimen/padding_medium"> <View android:layout_width="match_parent" android:layout_height="@dimen/view_height_25dp" android:layout_marginBottom="@dimen/layout_margin_small" android:background="@color/shimmer_background"/> <View android:layout_width="match_parent" android:layout_height="@dimen/view_height_25dp" android:background="@color/shimmer_background"/> </LinearLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> Add shimmer in your fragment/activity layout resources file: <com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmer_view_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="15dp" android:orientation="vertical" shimmer:duration="800">  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> <include layout="@layout/data_placeholder_layout" /> </LinearLayout> </com.facebook.shimmer.ShimmerFrameLayout> Apply Shimmer with LiveData Declare live data variable in view model: private val mutableShowShimmer = MediatorLiveData<Boolean>() val showShimmer: MediatorLiveData<Boolean> = mutableShowShimmer Handle progress in the view model: compositeDisposable += eventPagedList .subscribeOn(Schedulers.io()) .doOnSubscribe { mutableShowShimmer.value = true }.finally { mutableShowShimmer.value = false } Handle shimmer with observing the live data in fragment/activity: eventsResultsViewModel.showShimmer .nonNull() .observe(viewLifecycleOwner, Observer { if (it) { rootView.shimmer_view_container.startShimmer() } else { rootView.shimmer_view_container.stopShimmer() } rootView.shimmer_view_container.isVisible = it }) GIF Resources Show shimmer progress in Android: https://medium.com/mindorks/android-design-shimmer-effect-fa7f74c68a93 Tags Eventyay, open-event, Shimmer, Facebook, MVVM, Fossasia, GSoC, Android, Kotlin

Integration of SUSI AI to Facebook

Post author:Manveer695
Post published:July 23, 2017
Post category:FOSSASIA
Post comments:0 Comments

It's easy to create your own SUSI AI Facebook messenger bot. You can read the official documentation by Facebook to get started. Messenger bots use a web server to send and receive messages. You also need to have the bot be authenticated to speak with the web server and be approved by Facebook before getting public. If any problems faced, visit the susi_fbbot repository which hosts the code for SUSI Facebook Messenger bot. We will be using Node js technology to develop the FB bot. First, let’s see on how to request an answer from the SUSI API. To call Susi API and fetch an answer from it for a query (‘hi’ in this case). Let's first visit http://api.asksusi.com/susi/chat.json?q=hi from the browser. We will get a JSON object as follows: The answer can be found as the value of the key named expression. In this case, it is “Hallo!”. To fetch the answer through coding, we can use this code snippet in Node js: // including request module var request = require(‘request’); // setting options to make a successful call to Susi API. var options = { method: 'GET', url: 'http://api.asksusi.com/susi/chat.json', qs: { timezoneOffset: '-330', q: 'hi' } }; // A request to the Susi bot request(options, function (error, response, body) { if (error) throw new Error(error); // answer fetched from susi ans = (JSON.parse(body)).answers[0].actions[0].expression; } The properties required for the call are set up through a JSON object (i.e. options). Pass the options object to our request function as its 1st parameter. The response from the API will be stored in ‘body’ variable. We need to parse this body, to be able to access the properties of that body object. Hence, fetching the answer from Susi API. Now let’s dive into the code of receiving and messaging back to the user on Facebook: A generic function to send a message to the user. // the first argument is the sender id and the second is the text to send. function sendTextMessage(sender, text) { var messageData = { text:text }; // making a post request to facebook graph API to send message. request({ url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token:token}, method: 'POST', json: { recipient: {id:sender}, message: messageData, } }, function(error, response, body) { if (error) { console.log('Error sending messages: ', error); } else if (response.body.error) { console.log('Error: ', response.body.error); } }); } According to step 9, in the below instructions we need to include this code snippet too: // for facebook verification app.get('/webhook/', function (req, res) { if (req.query['hub.verify_token'] === 'my_voice_is_my_password_verify_me') { res.send(req.query['hub.challenge']); } res.send('Error, wrong token'); }); When user messages to our bot, we need to extract the text of the message from the request body. Then we need to extract the reply from the SUSI API and send it back to the user. // when a message from a user is received. app.post('/webhook/', function (req, res) { var messaging_events = req.body.entry[0].messaging for (var i = 0; i < messaging_events.length; i++) { // fetching the current event var event = req.body.entry[0].messaging[i];…

Sharing Images on Facebook from Phimpme Android App

Post author:Subhankar29
Post published:June 28, 2017
Post category:Android API FOSSASIA GSoC Tutorial
Post comments:0 Comments

In Phimpme Android app, our next objective was to share the image to the Social media platform. As Facebook being the largest social media platform it is easier to reach many people through it. Below are the steps we followed to implement sharing an image on Facebook. Step 1 First, we need to setup our android application development environment. We need to add Facebook SDK for android to the environment. This can either be done by downloading Facebook SDK or directly adding it to the gradle. In Phimpme we have used the latter(adding facebook sdk through gradle). Add this to your build.gradle file before depencies: repositories { mavenCentral() } And add this in your dependencies: compile 'com.facebook.android:facebook-android-sdk:4.23.0' We, can use any sdk after 4+ but 4.23.0 is the latest when Phimpme Android was in development. Step 2 For every application which is under development Facebook requires the user to create a Facebook App ID. This can be done by logging to https://developers.facebook.com/apps and then creating the app. This will generate an APP ID on the dashboard. We need add this App ID to our android development environment. In Strings.xml (app/src/main/res/values/strings.xml.) Add a new String of the name facebook_app_id and the value should be the facebook app id which was generated in the https://developers.facebook.com/apps dashboard. <string name="facebook_app_id">1920575401558694</string> Step 3 Generating Key Hash and adding the hash key to the https://developers.facebook.com/apps. This Key Hash is required to communicate information between the app and Facebook. To generate the Key Hash run the following command in the terminal in the development directory. keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64 Where release key should be replaced with app id and the path of the release key path. This will generate a string which we have to paste it to the https://developers.facebook.com/apps under the key hashes column. Step 4 We need to take internet and Facebook provider permission in the manifest and : Permission: <uses-permission android:name="android.permission.INTERNET"/> In place of APP_ID we need to add facebook app ID that was generated in https://developers.facebook.com/apps <provider android:authorities="com.facebook.app.FacebookContentProvider{APP_ID}" android:name="com.facebook.FacebookContentProvider" android:exported="true"/> Step 5 After setting up Facebook integration we can send the Image. But to send the image we have to convert to Bitmap. In Phimpme all the sharing function is established in Share Image Activity. So, we need to convert the image to Bitmap: BitmapFactory.Options bmOptions = new BitmapFactory.Options(); Bitmap image = BitmapFactory.decodeFile(saveFilePath, bmOptions); saveFilePath is the path where the Edited Image is stored. BitmapFactory converts the file to Bitmap by using decodeFile() method. Step 6 When share through Facebook button is pressed the image is converted to Bitmap and it is finally shared to the Facebook platform by using SharePhoto class: SharePhoto photo = new SharePhoto.Builder() .setBitmap(image) .setCaption(sendMessage) .build(); SharePhotoContent content = new SharePhotoContent.Builder() .addPhoto(photo) .build(); ShareApi.share(content, null); setCaption(): it sends text message with the image. In the case of Phimpme it gets the text message from the EditText stores to sendMessage. The end result When share through…