integrated UI

Dockerfile

-FROM node:latest
-
+FROM continuumio/miniconda3
+ADD Softlab.yml /tmp/Softlab.yml
+RUN conda config --set ssl_verify no
+RUN conda env create -f /tmp/Softlab.yml
+RUN echo "source activate $(head -1 /tmp/Softlab.yml | cut -d' ' -f2)" > ~/.bashrc
+ENV PATH /opt/conda/envs/$(head -1 /tmp/Softlab.yml | cut -d' ' -f2)/bin:$PATH
 # Create app directory
 WORKDIR /usr/src/app
 
 # Install app dependencies
 # A wildcard is used to ensure both package.json AND package-lock.json are copied
 # where available (npm@5+)
-COPY package*.json ./
 
+# RUN conda config --set ssl_verify no && \
+#     conda create --name Softlab -y python=3.7.4 && \
+#     conda activate Softlab && \
+#     pip install starlette=0.12.10 uvicorn=0.9.1 google-auth=1.6.3 nltk=3.4.5 tensorflow=2.0.0 gensim=3.8.1 
 # If you are building your code for production
 # RUN npm ci --only=production
 
 # Bundle app source
 COPY . .
 
-EXPOSE 8080
-CMD [ "node", "main.js" ]
\ No newline at end of file
+EXPOSE 8765
+CMD [ "python3", "main.py" ]
\ No newline at end of file

condaReadme.txt

+#Create a conda environment
+conda create --name <environment-name> python=<version:2.7/3.5>
+
+#To create a requirements.txt file:
+conda list #Gives you list of packages used for the environment
+
+conda list -e > requirements.txt #Save all the info about packages to your folder
+
+#To export environment file
+activate <environment-name>
+conda env export > <environment-name>.yml
+
+#For other person to use the environment
+conda env create -f <environment-name>.yml
\ No newline at end of file

main.py

 from google.oauth2 import service_account
 from google.auth.transport.requests import AuthorizedSession
 from starlette.applications import Starlette
+from starlette.templating import Jinja2Templates
 from starlette.responses import JSONResponse, PlainTextResponse
 from prediction import predict
 import uvicorn
@@ -10,6 +11,7 @@ scopes = [
   "https://www.googleapis.com/auth/userinfo.email",
   "https://www.googleapis.com/auth/firebase.database"
 ]
+templates = Jinja2Templates(directory='templates')
 
 app = Starlette(debug=True)
 credentials = service_account.Credentials.from_service_account_file("./serviceKey.json", scopes=scopes)
@@ -18,12 +20,14 @@ authed_session = AuthorizedSession(credentials)
 
 @app.route('/')
 async def homepage(request):
-    return JSONResponse({'hello': 'world'})
+    return templates.TemplateResponse('index.html', {'request': request})
 
+@app.route('/contribute')
+async def contrbPage(request):
+    return templates.TemplateResponse('contribute.html', {'request': request})
 
 @app.route('/{prompt}')
 async def getEssay(request):
-
     prompt = request.path_params['prompt']
     response = authed_session.get("https://softlab-ba722.firebaseio.com/"+prompt+".json")
     return JSONResponse(response.json())
@@ -32,14 +36,13 @@ async def getEssay(request):
 # app.add_route('/evaluate', predict, methods=["POST"])
 @app.route('/evaluate',methods=["POST"])
 async def evaluate(request):
-    body = await request.json()
+    body = await request.form()
     score = predict(body['essay'])
-    return PlainTextResponse(score)
-
+    return templates.TemplateResponse('score.html', {'request': request, 'score':score})
 
 @app.route('/contribute',methods=["POST"])
 async def evaluate(request):
-    body = await request.json()
+    body = await request.form()
     score, essay, prompt = body['score'], body['essay'], body['prompt']
     json = { 
         "essay": essay,

view/contribute.html → templates/contribute.html

@@ -16,14 +16,14 @@
     <div class="container">
         <!-- navbar component from getbootstrap.com  -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-top: 1px">
-          <a class="navbar-brand" href="index.html">Evaluate</a>
+          <a class="navbar-brand" href="/">Evaluate</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
               <div class="navbar-nav">
               <!-- <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> -->
-              <a class="nav-item nav-link" href="contribute.html">Contribute</a><!-- Internal page links -->
+              <a class="nav-item nav-link" href="/contribute">Contribute</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="https://github.com/KartavyaKothari/Automated-essay-grading-UI">About</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="#links"></a><!-- Internal page links -->
               </div>
@@ -41,29 +41,41 @@
               <div class="input-group-prepend">
                 <span class="input-group-text">Enter essay text here</span>
               </div>
-              <textarea class="form-control" aria-label="With textarea"></textarea>
+              <textarea class="form-control" form="contribute" name="essay" aria-label="With textarea"></textarea>
             </div>
           </p>
           <div class="input-group mb-3">
-            <input type="text" class="form-control" placeholder="Essay Score" aria-label="Recipient's username" aria-describedby="basic-addon2">
+              <p>
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text">Topic for essay</span>
+                    </div>
+                    <input type="text" class="form-control" form="contribute" name="prompt" aria-label="With textarea"></textarea>
+                  </div>
+              </p>
+          </div>
+          <div class="input-group mb-3">
+            <input type="text" class="form-control" form="contribute" name="score" placeholder="Essay Score" aria-label="Recipient's username" aria-describedby="basic-addon2">
             <div class="input-group-append">
               <span class="input-group-text" id="basic-addon2">/ 60</span>
             </div>
           </div>
-          <div class="btn-group">
+          <!-- <div class="btn-group">
             <button class="btn btn-secondary btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Topic for essay
             </button>
-            <div class="dropdown-menu">
-                <a class="dropdown-item" href="#">Academics</a>
-                <a class="dropdown-item" href="#">Sports</a>
-                <a class="dropdown-item" href="#">News</a>
+            <div class="dropdown-menu" form="contribute" name="prompt">
+                <a class="dropdown-item" href="">Academics</a>
+                <a class="dropdown-item" href="">Sports</a>
+                <a class="dropdown-item" href="">News</a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Other</a>
-            </div>
+                <a class="dropdown-item" href="">Other</a>
             </div>
+          </div> -->
           <div class="text-center">
-            <a class="btn btn-primary btn-lg text-center" href="#" role="button">Contribute!</a>
+            <form action="/contribute" method="post" id="contribute">
+              <input type="submit" class="btn btn-primary btn-lg text-center" value="Contribute!" name="submit" />
+            </form>
           </div>
         </div>
     </div>

view/index.html → templates/index.html

@@ -16,14 +16,14 @@
     <div class="container">
         <!-- navbar component from getbootstrap.com  -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-top: 1px">
-          <a class="navbar-brand" href="index.html">Home</a>
+          <a class="navbar-brand" href="/">Home</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
               <div class="navbar-nav">
               <!-- <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> -->
-              <a class="nav-item nav-link" href="contribute.html">Contribute</a><!-- Internal page links -->
+              <a class="nav-item nav-link" href="/contribute">Contribute</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="https://github.com/KartavyaKothari/Automated-essay-grading-UI">About</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="#links"></a><!-- Internal page links -->
               </div>
@@ -41,11 +41,13 @@
               <div class="input-group-prepend">
                 <span class="input-group-text">Enter essay text here</span>
               </div>
-              <textarea class="form-control" aria-label="With textarea"></textarea>
+              <textarea class="form-control" aria-label="With textarea" form="evaluation" name="essay"></textarea>
             </div>
           </p>
           <div class="text-center">
-            <a class="btn btn-primary btn-lg text-center" href="score.html" role="button">Evaluate!</a>
+              <form action="/evaluate" method="post" id="evaluation">
+                  <input type="submit" class="btn btn-primary btn-lg text-center" value="Evaluate" name="submit" />
+              </form> 
           </div>
         </div>
     </div>

view/score.html → templates/score.html

@@ -16,14 +16,14 @@
     <div class="container">
         <!-- navbar component from getbootstrap.com  -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-top: 1px">
-          <a class="navbar-brand" href="index.html">Evaluate</a>
+          <a class="navbar-brand" href="/">Evaluate</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
               <div class="navbar-nav">
               <!-- <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> -->
-              <a class="nav-item nav-link" href="contribute.html">Contribute</a><!-- Internal page links -->
+              <a class="nav-item nav-link" href="/contribute">Contribute</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="https://github.com/KartavyaKothari/Automated-essay-grading-UI">About</a><!-- Internal page links -->
               <a class="nav-item nav-link" href="#links"></a><!-- Internal page links -->
               </div>
@@ -33,7 +33,7 @@
         <br />
 
         <div class="jumbotron">
-          <h1 class="display-4 text-center" style="font-size: 7em;">8/60</h1>
+          <h1 class="display-4 text-center" style="font-size: 7em;">{{score}}/60</h1>
           <br />
           <p class="lead">This is the score you received for your entered essay below:</p>
           <hr class="my-4">