update the caption page and add microsoft translator service

README.md

@@ -18,8 +18,8 @@ pip install -r requirements.txt
 
 ```
 FLASK_APP=app.py
-set FLASK_ENV=development
-set FLASK_DEBUG=true
+FLASK_ENV=development
+FLASK_DEBUG=true
 flask run --reload
 ```
 

app.py

@@ -1,4 +1,6 @@
-import os
+import requests, os, uuid, json
+from dotenv import load_dotenv
+load_dotenv()
 import sys
 sys.path.append('./src')
 from flask import Flask, request, render_template, redirect, abort, jsonify, flash, url_for
@@ -44,6 +46,51 @@ def landing_page():
     @app.route("/caption")
     def caption_page():
         return render_template("pages/caption.html")
+
+    @app.route('/caption', methods=['POST'])
+    def index_post():
+        # Read the values from the form
+        original_text = request.form['text']
+        target_language = request.form['language']
+
+        # Load the values from .env
+        key = os.environ['KEY']
+        endpoint = os.environ['ENDPOINT']
+        location = os.environ['LOCATION']
+
+        # Indicate that we want to translate and the API version (3.0) and the target language
+        path = '/translate?api-version=3.0'
+        # Add the target language parameter
+        target_language_parameter = '&to=' + target_language
+        # Create the full URL
+        constructed_url = endpoint + path + target_language_parameter
+
+        # Set up the header information, which includes our subscription key
+        headers = {
+            'Ocp-Apim-Subscription-Key': key,
+            'Ocp-Apim-Subscription-Region': location,
+            'Content-type': 'application/json',
+            'X-ClientTraceId': str(uuid.uuid4())
+        }
+
+        # Create the body of the request with the text to be translated
+        body = [{ 'text': original_text }]
+
+        # Make the call using post
+        translator_request = requests.post(constructed_url, headers=headers, json=body)
+        # Retrieve the JSON response
+        translator_response = translator_request.json()
+        # Retrieve the translation
+        translated_text = translator_response[0]['translations'][0]['text']
+
+        # Call render template, passing the translated text,
+        # original text, and target language to the template
+        return render_template(
+            'pages/translate.html',
+            translated_text=translated_text,
+            original_text=original_text,
+            target_language=target_language
+        )
 
     @app.route("/flickr8k", methods=["POST"])
     def upload_file():

static/css/upload.css

@@ -1,8 +1,8 @@
 .drag-area{
   border: 2px dashed #fff;
   border-radius: 10px;
-  height: 400px;
-  width: 400px;
+  height: 360px;
+  width: 360px;
   display: flex;
   align-items: center;
   justify-content: center;

templates/layouts/main.html

@@ -16,6 +16,7 @@
     {% endblock %}
     <!-- /meta -->
     <script src="https://kit.fontawesome.com/61ca687656.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/static/css/popup.css">
     <link rel="stylesheet" href="/static/css/caption.css">
     <link rel="stylesheet" href="/static/css/darkmode.css">
     <link rel="stylesheet" href="/static/css/bootstrap.css">
@@ -24,6 +25,7 @@
     <link rel="stylesheet" href="/static/css/bootstrap-grid.min.css">
     <link rel="stylesheet" href="/static/css/style_1.css">
     <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
 </head>
 

templates/pages/caption.html

@@ -1,69 +1,127 @@
 {% extends 'layouts/main.html' %} {% block title %}Caption - ImageScribe{% endblock %}
 {% block content %}
 <link rel="stylesheet" href="/static/css/upload.css">
-<section class="home_banner_area">
   <div class="banner_inner">
+    <section class="home_banner_area">
+
+      <div style="margin-top: 80px;" class="container mt-5">
+      <div style="background: none;" class="jumbotron">
+        <h1 style="text-align: center; color: white;" class="display-4">Welcome to our captioner!</h1>
+        <p style="text-align: center; color: white;" class="lead">Generating Descriptive Image Captions Using Deep Learning In Seconds.
+        </p>
+        <hr style="background-color: white;" class="my-4">
+        <p style="text-align: center;" class="lead">
+          <!-- Button trigger modal -->
+          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+            Launch demo modal
+          </button>
+        </p>
+      </div>
+
+      <!-- Modal -->
+      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Dolorum id, vitae provident cumque non rerum quas suscipit necessitatibus a.
+              Culpa minima pariatur nam harum tenetur quis nemo qui molestias enim?
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="container">
-      <div class="row">
+      <div class="row">        
         <div class="col-lg-6">
           <div class="home_left_img">
+
             <div class="container">
               <input type="radio" name="option" value="option1" onchange="changeAction(this)"> Flickr8k
               <input type="radio" name="option" value="option2" onchange="changeAction(this)"> Flickr30k
               <input type="radio" name="option" value="option3" onchange="changeAction(this)"> Vit-Gpt2-Image-Captioning
               <div class="col-lg-6">
+
+                <!--start of checker_form-->
                 <div class="checker_form" id="checker-form">
+
                   <div class="drag-area row text-center justify-content-center">
                     <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
                     <header class="drag-drop">Drag & Drop to Upload File</header>
                     <span>OR</span>
                     <button class="upload-btn">Browse File</button>
                     <input id="fileUpload" class="upload-file" type="file" hidden>
                   </div>
-                  <div class="row">
-                    <div class="col button text-left">
+
+                  <!--start of submit and cancel buttons-->
+                  <div class="row justify-content-end">
+                    <div class="col-4">
                       <button id="cancel-upload" onclick="cancelUpload()" class="submit_btn">Cancel</button>
                     </div>
-                    <div class="col button text-right">
+                    <div class="col-4">
                       <button id="myForm" onclick="submitUpload()" class="cancel_btn">Submit</button>
                     </div>
                   </div>
+                  <!--end of submit and cancel buttons-->
                 </div>
+                <!--end of checker_form-->
+
               </div>
             </div>
           </div>
         </div>
-        <div class="col-lg-6">
-          <div class="banner_content">
-
-            <!--
-            <div class="col-sm-4">
-              <img id="image" style="height: 70%; width: 70%;" src="">
-            </div>
-            <div class="col-sm-8">
-              <p class="text">Generated Caption: </p>
-              <p id="caption"> </p>
-            </div>
-            -->
 
+        <div class="col-lg-6">
+          <div class="container">
             <div class="card" style="width: 18rem;">
               <img id="image" class="card-img-top" src="/static/images/waiting.gif" alt="Card image cap">
               <div class="card-body">
-                <h5 class="card-title text-danger">Output Caption</h5>
+                <h5 class="text-danger">Output Caption</h5>
                 <div style="margin-bottom: 10px;" class='console-container'>
                   <span id="caption" class="card-text text-dark"> </span>
                   <div class='console-underscore' id='console'>&#95;</div>
                 </div>
                 <a id="reset-button" href="#" class="btn btn-primary">Reset Image</a>
+                <a id="load-button" href="#" class="btn btn-primary">Load Caption</a><br>
+                <hr>
+                <form method="POST">
+                  <div class="form-group">
+                    <textarea name="text" cols="5" rows="3" class="form-control"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label style="color: black;" for="language">Language:</label>
+                    <select name="language" class="form-control">
+                      <option value="en">English</option>
+                      <option value="ar">Arabic</option>
+                      <option value="it">Italian</option>
+                      <option value="ja">Japanese</option>
+                      <option value="ru">Russian</option>
+                      <option value="de">German</option>
+                    </select>
+                  </div>
+                  <div>
+                    <button type="submit" class="btn btn-success">Translate!</button>
+                  </div>
+                </form>
               </div>
             </div>
-
           </div>
         </div>
+
       </div>
     </div>
-  </div>
-  </div>
+
 </section>
 {% endblock %}
 
@@ -122,9 +180,9 @@ <h5 class="card-title text-danger">Output Caption</h5>
           let img = res.image;
 
           //document.getElementById("caption").innerText = text; // display the caption directly on the page
-          
+
           // Note: The reset function acceletate the _ in the caption --> find the root cause and solve it
-          
+
           resetButton.click();
           consoleText([text], 'text', ['lightblue']);
 
@@ -170,6 +228,19 @@ <h5 class="card-title text-danger">Output Caption</h5>
             }, 400)
           }
           document.getElementById("image").src = img;
+
+          // reference to the <a> element with the id "load-button"
+          var textareaElement = document.querySelector('textarea[name="text"].form-control');
+          var loadButton = document.getElementById('load-button');
+
+          // Add an event listener to the button
+          loadButton.addEventListener('click', function (event) {
+            event.preventDefault(); // Prevent the default behavior of the link (e.g., navigating to another page)
+
+            var textareaElement = document.querySelector('textarea[name="text"].form-control');
+            textareaElement.value = text; // Append the value to the <textarea>
+          });
+
         } else { // If the response is plain text
           console.log('Received plain text response:', res);
           // Handle the plain text response as needed
@@ -243,38 +314,34 @@ <h5 class="card-title text-danger">Output Caption</h5>
   };
 </script>
 <script>
-const cardImage = document.getElementById("image");
-const resetButton = document.getElementById("reset-button");
-const consoleContainer = document.querySelector('.console-container');
-let captionElement = document.getElementById('caption');
+  const cardImage = document.getElementById("image");
+  const resetButton = document.getElementById("reset-button");
+  const consoleContainer = document.querySelector('.console-container');
+  let captionElement = document.getElementById('caption');
+  var textareaElement = document.querySelector('textarea[name="text"].form-control');
 
-resetButton.addEventListener("click", function () {
-  cardImage.src = "/static/images/waiting.gif";
-
-  // Remove the existing caption element and recreate it
-  captionElement.remove();
-  captionElement = document.createElement('span');
-  captionElement.id = 'caption';
-  captionElement.classList.add('card-text', 'text-dark');
-  consoleContainer.prepend(captionElement);
-
-  // Reset the content of the console element
-  const consoleElement = document.getElementById('console');
-  consoleElement.textContent = '_';
-});
-</script>
-<!--
-<script>
-function resetAndSetText(newText) {
-  consoleText([newText], 'text', ['lightblue']);
-}
-resetAndSetText("Initial text");
-resetButton.addEventListener("click", function() {
-  var newText = "New text";
-  resetAndSetText(newText);
-});
+  resetButton.addEventListener("click", function () {
+    cardImage.src = "/static/images/waiting.gif";
+    textareaElement.value = ""; // Append the value to the <textarea>
+
+    // Remove the existing caption element and recreate it
+    captionElement.remove();
+    captionElement = document.createElement('span');
+    captionElement.id = 'caption';
+    captionElement.classList.add('card-text', 'text-dark');
+    consoleContainer.prepend(captionElement);
+
+    // Reset the content of the console element
+    const consoleElement = document.getElementById('console');
+    consoleElement.textContent = '_';
+  });
 </script>
--->
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
+  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="/static/js/bootstrap.min.js"></script>
 <script src="/static/js/change-action.js"></script>
 <script src="/static/js/darkmode.js"></script>

templates/pages/index.html

@@ -165,4 +165,7 @@ <h6>Learn More</h6>
 <script src="/static/js/darkmode.js"></script>
 <script src="/static/js/upload.js"></script>
 <script src="/static/js/js.js"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 {% endblock %}

templates/pages/translate.html

@@ -0,0 +1,33 @@
+{% extends 'layouts/main.html' %} {% block title %}Caption - ImageScribe{% endblock %}
+{% block content %}
+<div class="banner_inner">
+<section class="home_banner_area">
+<div style="  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" class="container">
+<div class="card text-center">
+    <div class="card-header">
+      Translated Caption
+    </div>
+    <div class="card-body">
+      <h5 class="card-title"><strong>Target language code: {{ target_language }}</strong></h5>
+      <p class="card-text"><strong>Original text:</strong> {{ original_text }}</p>
+      <p class="card-text"><strong>Translated text:</strong> {{ translated_text }}</p>
+      <a href="/caption" class="btn btn-primary">Try another one!</a>
+    </div>
+    <div class="card-footer text-muted">
+      Microsoft Azure Translator API
+    </div>
+</div>
+</div>
+</section>
+</div>
+{% endblock %}
+{% block script %}
+<script src="/static/js/bootstrap.min.js"></script>
+<script src="/static/js/change-action.js"></script>
+<script src="/static/js/darkmode.js"></script>
+<script src="/static/js/upload.js"></script>
+<script src="/static/js/js.js"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+{% endblock %}