画像の英文を読み取りたい

参照から自分の持つ画像を表示するプログラムと
urlを入力すると、英文と画像を表示するプログラムと英文を入力すると、日本語訳が表示させるプログラムの、３つあり、これを１つにまとめたい。 


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html1;charset=UTF-8">
    <title>Translation</title>
    <link rel="stylesheet" href="tarnslation.css" type="text/css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="translation.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  </head>
  <body>
      <h1>translation</h1>
      <h3>画像の英語を日本語に翻訳する</h3>
        <form>
      <input type="file" id="compare">

      <input type="submit" value="search" id="search">
    </form>
      </div>
    <div class="preview"/>
   <script type="text/javascript">
        function processImage() {
            var subscriptionKey = "382285d6c9c74bb59398aa98ef2afdc8";
            // NOTE: Free trial subscription keys are generated in the westcentralus region, so if you are using
          var uriBase = "https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/ocr";
            var params = {
                "language": "unk",
                "detectOrientation ": "true",
            };
            var sourceImageUrl = document.getElementById("inputImage").value;
            document.querySelector("#sourceImage").src = sourceImageUrl;
            $.ajax({
                url: uriBase + "?" + $.param(params),
                beforeSend: function(jqXHR){
                    jqXHR.setRequestHeader("Content-Type","application/json");
                    jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
                },
type: "POST",
                data: '{"url": ' + '"' + sourceImageUrl + '"}',
            })

            .done(function(data) {

              //ここから変更を加えた点になります
              var want=data.regions[0].lines;
              console.log(want);
              var regionslength=data.regions.length;
              var lineslength=data.regions[0].lines.length;
              console.log(regionslength);
              console.log(lineslength);

              var message=new Array(lineslength).fill("");

              for(var j=0;j<regionslength;j++){
                for(var i=0;i<lineslength;i++){
                  var textlength=want[i].words.length;
                  for(var k=0;k<textlength;k++){

                    message[j]=message[j]+want[i].words[k].text;
                    message[j]=message[j]+" ";

}
                }
              }

              $("#responseTextArea").val(message[0]);
          })

          .fail(function(jqXHR, textStatus, errorThrown) {
              // Display error message.
              var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): ";
              errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ?
                  jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message;
              alert(errorString);
          });
      };
  </script>
<br>
  <br>
  画像URLを入力し<strong>Read image</strong>を押してください<br>
  <input type="text" name="inputImage" id="inputImage" value="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Atomist_quote_from_Democritus.png/338px-Atomist_quote_from_Democritus.png" />
  <button onclick="processImage()">Read image</button>
  <br>
  <br>
  <div id="wrapper" style="width:1020px; display:table;">
      <div id="jsonOutput" style="width:600px; display:table-cell;">
          読取結果:<br>
          <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea>
      </div>
      <div id="imageDiv" style="width:420px; display:table-cell;">
          Source image:
          <br><br>
          <img id="sourceImage" width="400" />
      </div>
  </div>

 /*日本語訳*/
   <form name="read">
     <p></p>
   <textarea cols="30" rows="5" name="translate">
   </textarea>
   </form>

   <p>
   <input type="button" value="translate!" onclick="Translate()">
   </p>


   <script>
function Translate(){

   var English = document.read.translate.value; //翻訳したい英語を代入する関数

   /*var = JsonData{
   "data": {
     "translations": [
       {
         "translatedText": "こんにちは",
         "detectedSourceLanguage": "en"
       }
     ]
   }
 };*/
   var xhr= new XMLHttpRequest();
 console.log(xhr);
 function XMLHttpRequestCreate(){
  try{
    return new XMLHttpRequest();
  }catch(e){}
  try{
    return new ActiveXObject('MSXML2.XMLHTTP.6.0');
  }catch(e){}
  try{
    return new ActiveXObject('MSXML2.XMLHTTP.3.0');
  }catch(e){}
  try{
    return new ActiveXObject('MSXML2.XMLHTTP');
  }catch(e){}

  return null;
 }

 // 
 // XMLHttpRequest オブジェクトを作成
 // ------------------------------------------------------------
 var xhr = XMLHttpRequestCreate();

 // ------------------------------------------------------------
 // XHR 通信の状態が変化するたびに実行されるイベント
 // ------------------------------------------------------------
 xhr.onreadystatechange = function (){

  switch(xhr.readyState){

  // ------------------------------------------------------------
  // レスポンスボディを受信中（繰り返し実行される）
  // ------------------------------------------------------------
  case 3:
    console.log("受信中 :" + xhr.responseText.length + " characters");
    break;

  // ------------------------------------------------------------
  // XHR 通信が完了した（成功失敗に関わらず）
  // ------------------------------------------------------------

case 4:

// ------------------------------------------------------------
// リクエスト成功
// ------------------------------------------------------------
if((200 <= xhr.status && xhr.status < 300) || (xhr.status == 304)){

var lines = xhr.response;
console.log(lines);
var Jwant=JSON.parse(lines)
var want = Jwant.data.translations[0].translatedText; //transratedTextから抜き出した文字列を格納する変数
document.write(want);

// ------------------------------------------------------------
// リクエスト失敗
// ------------------------------------------------------------
}else{
//console.log("リクエスト失敗");

}
break;
}
};

// ------------------------------------------------------------
// 「GET メソッド」「接続先 URL」を指定
// -------------------------------
xhr.open("GET" , "https://www.googleapis.com/language/translate/v2?key=AIzaSyBns9P4fN33VLKAWAZNmk0qsM_m6cxZTUc&target=ja&q=" + English);

// ------------------------------------------------------------
// XHR 通信を開始する
// ------------------------------------------------------------
xhr.send(null);

}

</script>

</body>
</html>