Flask api for image to template conversion added. Readme Updated.

README.md

@@ -14,6 +14,8 @@ Well we all have been working in Open Source and committing various Pull request
 - 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.
+- Can create a badge for your organization.
+- upload and use the templates
 
 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:
 
@@ -26,9 +28,30 @@ The other part of this project includes the “notifying moderator” since we s
 
 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.
 
+## Install and Run
+
+**Step 1:-** clone the repository
+
+``` git clone https://github.com/username/Codebadge.git ``` 
+
+**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, React. Flask is used as an machine learning api.
 
 ## 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/App.vue

@@ -2,6 +2,7 @@
   <v-app>
     <v-toolbar color="white" app>
       <v-toolbar-title class="headline text-uppercase">
+        <a href='http://localhost:8080/upload'>upload file</a>
         <span>Codebadge</span>
         <span class="font-weight-light text-none">&nbsp;(Production Stage)</span>
       </v-toolbar-title>
@@ -29,4 +30,7 @@ export default {
 .content {
   background-color: white;
 }
+a{
+  float:right;
+}
 </style>

src/router.js

@@ -1,36 +1,50 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import AuthView from './views/AuthView';
-import HomeView from './views/HomeView';
-import OrgView from './views/OrgView';
-import AuthService from './services/authService';
+import Vue from "vue";
+import Router from "vue-router";
+import AuthView from "./views/AuthView";
+import HomeView from "./views/HomeView.vue";
+import OrgView from "./views/OrgView";
+import AuthService from "./services/authService";
+import CreateBadge from "./views/CreateBadge";
+import Upload from "./views/Upload/Upload.vue";
 
 Vue.use(Router);
 
 const authService = new AuthService();
 
 export default new Router({
+  mode: "history",
+  base: process.env.BASE_URL,
   routes: [
     {
-      path: '',
-      redirect: 'auth'
+      path: "",
+      redirect: "auth"
     },
     {
-      path: '/auth',
-      name: 'authView',
+      path: "/upload",
+      name: "Upload",
+      component: Upload
+    },
+    {
+      path: "/auth",
+      name: "authView",
       component: AuthView
     },
     {
-      path: '/home',
-      name: 'homeView',
+      path: "/create",
+      name: "CreateBadge",
+      component: CreateBadge
+    },
+    {
+      path: "/home",
+      name: "homeView",
       component: HomeView,
       beforeEnter: (to, from, next) => {
         next(authService.isLoggedIn());
       }
     },
     {
-      path: '/org/:name',
-      name: 'orgView',
+      path: "/org/:name",
+      name: "orgView",
       component: OrgView,
       beforeEnter: (to, from, next) => {
         next(authService.isLoggedIn());

src/views/CreateBadge.vue

@@ -0,0 +1,26 @@
+<template>
+<div>
+  <b-card title="Card Title" no-body>
+    <b-card-header header-tag="nav">
+      <b-nav card-header tabs>
+        <b-nav-item active>Active</b-nav-item>
+        <b-nav-item>Inactive</b-nav-item>
+        <b-nav-item disabled>Disabled</b-nav-item>
+      </b-nav>
+    </b-card-header>
+
+    <b-card-body class="text-center">
+      <b-card-text>
+        With supporting text below as a natural lead-in to additional content.
+        </b-card-text>
+
+      <b-button variant="primary">Go somewhere</b-button>
+    </b-card-body>
+    </b-card>
+    </div>
+</template>
+<script>
+export default {
+  name: "CreateBadge"
+};
+</script>

src/views/Upload/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>