Change from ajax to javascript fetch

app.py

@@ -1,13 +1,8 @@
-from flask import Flask, render_template, request, jsonify, make_response
+from flask import Flask, render_template, request, jsonify
 from modules.model import summarize
-from flask_cors import CORS, cross_origin
-
 import __main__
 
 app = Flask(__name__)
-CORS(app, supports_credentials=True)
-app.config['CORS_ALLOW_HEADERS'] = 'Content-Type'
-app.config['CORS_SUPPORTS_CREDENTIALS'] = 'True'
 # shortTokenizer = BartTokenizer.from_pretrained('sshleifer/distilbart-xsum-12-6')
 # shortModel = BartForConditionalGeneration.from_pretrained('sshleifer/distilbart-xsum-12-6')
 
@@ -19,43 +14,26 @@ def home():
     return render_template('index.html')
 
 
-@app.route('https://huggingface.co/spaces/datien228/text-summarizer/summarize', methods=['POST', 'OPTIONS'])
-@cross_origin()
+@app.route('/summarize', methods=['GET', 'POST'])
 def recommend():
     if request.method == "POST":
         # Get form data
-        request_data = request.get_json()
-        input_text = request_data['input_text']
+        # request_data = request.args.get("input").get_json()
+        # input_text = request_data['input_text']
+        input_text = request.args.get("input")
 
         # Call the function summarize to run the text summarization
         try:
             short_output_summary, long_output_summary = summarize(input_text)
             response = jsonify({'short': short_output_summary.strip(), 'long': long_output_summary.strip()})
             # Pass output summary to the output template
-            response.headers.add('Access-Control-Allow-Origin', 'http://0.0.0.0:7860')
-            response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')
-            response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
-            response.headers.add('Access-Control-Allow-Credentials', 'true')
             return response
 
         except Exception as e:
             return render_template('index.html', query=e)
 
-    elif request.method == "OPTIONS":
-        response = make_response("OK")
-        response.status_code = 201
-        response.headers.add('Access-Control-Allow-Origin', 'http://0.0.0.0:7860')
-        response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')
-        response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
-        response.headers.add('Access-Control-Allow-Credentials', 'true')
-        # Debug
-        print("Right")
-        return response
-
     pass
 
-
-
 def main():
     # app.config['TEMPLATES_AUTO_RELOAD'] = True
     # app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

requirements.txt

@@ -1,4 +1,4 @@
 torch==1.11.0
 Flask==2.1.0
 transformers==4.20.0
-flask_cors==3.0.10 
+# flask_cors==3.0.10 

templates/index.html

@@ -186,20 +186,56 @@
       }, 100);
 
       // ======= COMMUNICATE WITH FLSAK BACK END TO RUN ML TASK =======
+
+      const translateText = async (jsonfile) => {
+        const inferResponse = await fetch(`/summarize?input=${jsonfile}`, {method: 'POST'});
+        const inferJson = await inferResponse.json();
+
+        return inferJson;
+      };
+      
+      const textGenForm = document.querySelector('#input_form');
+
+      textGenForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+
+        const textGenParagraph = document.querySelector('#output_text');
+        const textGenInput = document.querySelector('#input_text');
+        $("#check").attr('checked', false);
+        $("#input_text").attr("readonly", true);
+        $(".summarize-button").hide();
+        $(".progress-icon").fadeIn();
+        $("#load-noti").fadeIn();
+
+        // var data = {"input_text": textGenInput.value};
+
+        try {
+          data_out = await translateText(textGenInput.value);
+          $("#check").attr('checked', true);
+          $("#input_text").attr("readonly", false);
+          $("#load-noti").text("Completed")
+          runOnce = true;
+          short_summary = data_out.short;
+          long_summary = data_out.long;
+          textGenParagraph.innerHTML = short_summary;
+          
+        } catch (err) {
+          console.error(err);
+        }
+      });
+      
+      /*
       $(document).on('submit', '#input_form', function (e) {
         var outputField = document.getElementById("output_text");
         var data = { "input_text": $("#input_text").val() };
         e.preventDefault();
         $.ajax({
           type: 'POST',
-          url: 'https://huggingface.co/spaces/datien228/text-summarizer/summarize',
+          url: '/summarize',
           data: JSON.stringify(data),
           contentType: "application/json",
           dataType: 'json',
-          xhrFields: {
-            withCredentials: true
-          },
-          crossDomain: true,
+
           beforeSend: function () {
             $("#check").attr('checked', false);
             $("#input_text").attr("readonly", true);
@@ -220,6 +256,7 @@
           },
         })
       });
+      */
 
     </script>
   </body>