Flask api for badge to sketch

.gitignore

@@ -86,6 +86,8 @@ node_modules/
 
 # Build Files
 dist/
+backend/venv/
+backend/__pycache__/
 
 # Config files
 .prettierrc.js

README.md

@@ -5,41 +5,61 @@
 ![Language Count](https://img.shields.io/github/languages/count/PrabhaniN/codebadge.svg)
 [![License](https://img.shields.io/github/license/PrabhaniN/codebadge.svg)](https://github.com/PrabhaniN/Codebadge/blob/master/LICENSE)
 
-Well we all have been working in Open Source and committing various Pull requests and issues. Many a times it may happen that a mentor is unanle to manage all these activities. So This project is about tracking the contributor as well as its contribution by respective mentors.
+CodeBadge is a project which takes official GitHub API into consideration and makes a fading badges graph for each organization. This project would be organization-oriented project i.e. each organization will need to serve it on a reserved route, say /codebadge. For eg: If coala wants to integrate CodeBadge, they’ll serve this project on coala.io/codebadge. Our aim is to make CodeBadge as a standard such that people start using it as a measure in order to test their skill level/track their progress in a specific community. For eg, Competitive Coding guys test their skills by asking each other what’s their rank on HackerRank / HackerEarth! Likewise, open-source contributors should start asking, **Hey! What badge did you recently earned on CodeBadge!**
+
+### Why do we need CodeBadge?
+- To track and incorporate contributors’ progress in the community or community’s progress as a whole. Making a one-stop platform to find each contributor’s progress rather than finding it separately for each contributor.
+- To show the progress by awarding some really cool badges to top contributors in order to keep them connected towards the community.
+- Auto-assign related issues to most active contributors using tagging to keep contributors connected.
 
-### Features
 
-- Easy to monitor the activities of various contributors.
-- Visibility of top contributors in various projects.
-- Real time tracking of commits, PR's and other contributions.
-- Contributors list based on number of PR's, merged pulls and other activities.
-- Contribution history of each contributor.
+### Features
 
-The other part of this project includes the “notifying moderator” since we see sometimes that there are many PRs being sent, or issues being opened by various people across the globe but there are limited numbers of maintainers merging the PRs. This way organisations usually lose their potential contributors due to following things:
+- GitHub Heatmaps are for each person’s profile and can be observed from visiting each contributor’s profile specifically. Whereas, our aim is to show a complete fading graph for an organization, which would hence be capable of showing each contributor’s progress as well.
+- There would be some pre-built badges by us as well as we offer the organization to design their own badges. This can be done by the illustrator which we are developing for this project.
+- Pre-defined badges could be based on some achievement levels like Baby-Steps, Not-a-Newbie, Almost-Pro, Legendary-Committer, etc which could be awarded by setting some convention like a number of merged PRs or difficulty of issues resolved by the person.
+- Creating/Integrating a bot with our platform which would auto-assign/auto-suggest related issues to the top-most active contributors of the community on the basis of tagging, like what their recent PRs were based upon.
+- Admin Dashboard creation which would show notifications/cards for whosoever earned any new badge. Community Admins should have some extra privileges to award any extra badge to an extraordinary contributor say Committer-of-the-Month, Top-Contributor, GOAT(Greatest-of-all-Times), etc manually.
+- The illustrator will provide the user with an interface which will help the organization to design their own badges. It has a special feature of making a sketch outline of any image which is uploaded. Once a template is uploaded by any user it will also be available to be used by other organizations. It will also provide a feature to make a shareable interface so that more than one person of an organization can work on the same badge at the same time.
 
-- Their PRs are not being merged
-- They finds difficulty in understanding the issue
-- They could not reach to expectation
-  So this will help the maintainers get notified when they see these people inactive.
 
 ## How does it work
 
 For instance, suppose a contributor “X” has been quite active within the community by working on various PRs, opening and resolving various issues, active on chat channels but after a month “X” gets disappeared. So by using this dashboard they will have a badge interface. There will be a badge attached in front of the name of the contributor. Let the name of the badge be “Y” so this badge will have a unique color. So as the time passes like “ a day went, 1 week went, 2 weeks went, a month, etc) this badges will get keep on fading. And Every fade color will have a unique reason. For example, when a contributor made a PR, the badge appeared “Red” in color. This badge will remain in the same color as long as he/she is contributing. Assume that contributor stops contributing and has not contributed for a week so his badge will become green in color. And this will keep on notifying mainaters, Admins about their disappearing. This way the organisations will have greater eye on the contributors and can help them sustain with the community.
 
 ## Setting up the project
 To set up the project, carry out the following steps:
-- Clone/download the project locally
+
+**Step 1:-** clone the repository
+
+``` git clone https://github.com/username/Codebadge.git ``` 
+
 - Create an [oAuth](https://github.com/settings/developers) application if you haven't already
+
 - Make sure that the callback-url is set to `http://localhost:8080/#/auth`
+
 - Make an `.env` file in the root folder of the project (where package.json is)
+
 - Add the code given below and replace it with values from your oAuth application:
-`VUE_APP_CLIENT_ID=<client id>`
-`VUE_APP_CLIENT_SECRET=<client secret>`
-- Run the app using `npm start serve`
+```
+VUE_APP_CLIENT_ID=<client id>
+VUE_APP_CLIENT_SECRET=<client secret>
+```
+**Step 2:-** install frontend dependencies and run frontend server
+``` npm install && npm run serve```
+
+**Step 3:-** install flask api dependencies and run api
+``` 
+cd backend
+virtualenv -p python3 venv
+source venv/bin/activate
+pip install -r requirements.txt
+FLASK_APP=run.py flask run
+```
 
 ## Stack used
 
-This will have a dashboard, where these things can be placed. The stack used can be any but since the organisation have fixed stack so its better to stick to Nodejs, Vue, React.
+This will have a dashboard, where these things can be placed. The stack used can be any but since the organisation have fixed stack so its better to stick to Nodejs, Vue, Flask.
 
 ## Benefits to the community
 

backend/requirements.txt

@@ -0,0 +1,6 @@
+Flask==1.1.1
+Flask-Cors==3.0.8
+numpy==1.16.5
+opencv-python==4.1.1.26
+requests==2.22.0
+Werkzeug==0.16.0

backend/run.py

@@ -0,0 +1,56 @@
+from flask import Flask, render_template, jsonify,send_file,request
+from random import *
+from flask_cors import CORS
+import requests
+import numpy as np
+from cv2 import cv2
+from werkzeug.utils import secure_filename
+import os
+app = Flask(__name__,
+            static_folder = "./dist/static",
+            template_folder = "./dist")
+cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
+
+@app.route('/api/random')
+def random_number():
+    response = {
+        'randomNumber': randint(1, 100)
+    }
+    return jsonify(response)
+
+@app.route('/api/upload',methods=["POST"])
+def upload():
+    # file=request.files['temp']
+    f=request.files['temp']
+    tempname=request.form['tempname']
+    temp_path='../templates/'
+    name = f.filename.replace(' ','_')
+    print(tempname)
+    f.save(secure_filename(f.filename))
+
+    inputImage = cv2.imread(name)
+    inputImageGray = cv2.cvtColor(inputImage, cv2.COLOR_BGR2GRAY)
+
+    edges = cv2.Canny(inputImageGray,150,200,apertureSize = 3)
+
+    print(edges)
+    edges = abs(cv2.subtract(255,edges))
+
+    minLineLength = 30
+    maxLineGap = 5
+    lines = cv2.HoughLinesP(edges,cv2.HOUGH_PROBABILISTIC, np.pi/180, 30, minLineLength,maxLineGap)
+    for x in range(0, len(lines)):
+        for x1,y1,x2,y2 in lines[x]:
+            pts = np.array([[x1, y1 ], [x2 , y2]], np.int32)
+            cv2.polylines(inputImage, [pts], True, (0,255,0))
+
+    font = cv2.FONT_HERSHEY_SIMPLEX
+    cv2.putText(inputImage,"Tracks Detected", (500, 250), font, 0.5, 255)
+
+    cv2.imwrite(temp_path+tempname+'.jpeg',edges)
+    cv2.waitKey(0)
+
+    os.remove(name)
+
+    filename=tempname+'.jpeg'
+    return send_file(temp_path+filename,mimetype='image/jpeg')

src/router.js

@@ -3,38 +3,43 @@ import Router from 'vue-router';
 import AuthView from './views/AuthView';
 import HomeView from './views/HomeView';
 import OrgView from './views/OrgView';
+import Upload from "./views/Upload.vue";
 import AuthService from './services/authService';
 
 Vue.use(Router);
 
 const authService = new AuthService();
 
 export default new Router({
-  routes: [
-    {
-      path: '',
-      redirect: 'auth'
-    },
-    {
-      path: '/auth',
-      name: 'authView',
-      component: AuthView
-    },
-    {
-      path: '/home',
-      name: 'homeView',
-      component: HomeView,
-      beforeEnter: (to, from, next) => {
-        next(authService.isLoggedIn());
-      }
-    },
-    {
-      path: '/org/:name',
-      name: 'orgView',
-      component: OrgView,
-      beforeEnter: (to, from, next) => {
-        next(authService.isLoggedIn());
-      }
-    }
-  ]
-});
+    routes: [{
+            path: '',
+            redirect: 'auth'
+        },
+        {
+            path: "/upload",
+            name: "Upload",
+            component: Upload
+        },
+        {
+            path: '/auth',
+            name: 'authView',
+            component: AuthView
+        },
+        {
+            path: '/home',
+            name: 'homeView',
+            component: HomeView,
+            beforeEnter: (to, from, next) => {
+                next(authService.isLoggedIn());
+            }
+        },
+        {
+            path: '/org/:name',
+            name: 'orgView',
+            component: OrgView,
+            beforeEnter: (to, from, next) => {
+                next(authService.isLoggedIn());
+            }
+        }
+    ]
+});

src/views/Upload.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+      <form action="http://localhost:5000/api/upload" method="POST" enctype="multipart/form-data">
+        <input type="file" name="temp" id="temp">
+        <input name="tempname" placeholder="Give your template name">
+        <button type="submit">Upload</button>
+      </form>
+  </div>
+</template>