chatbot aviv - a javascript/html chatbot

Started by ron77_db, Apr 02, 2022, 04:02 AM

Previous topic - Next topic

ron77_db

save this code as HTML and open it with your browser - it's a chatbot in javascript / HTML - its name is Aviv - ask it "what is the weather in <city>" and it will tell you the weather forecast... ask it how was it's day or how was the week or does it remember the 90's casual stuff like that tell it something is bothering you and it will ask what? ask it about "how was work" or "life is a lemon" or if you are sad or lonely extra... ask it to play a song or a happy/sad song or a random song and it will open a youtube song in your browser - tell it you need help see what it will say back etc...


<html>

<head>
  <title>chat bot aviv v1</title>
</head>

<body onload="startTime()">
  <div id="txt"></div>
  <script>
    // clock function
    function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('txt').innerHTML = h + ':' + m + ':' + s;
      var t = setTimeout(startTime, 500);
      voices = window.speechSynthesis.getVoices();
    }

    function checkTime(i) {
      if (i < 10) {
        i = '0' + i;
      } // add zero in front of numbers < 10
      return i;
    }
  </script>

  <h1>CHAT BOT AVIV 1.0</h1>

  <form id="form1" runat="server">
    <input type="file" id="imgInp" />
    <img id="blah" src="#" alt="your image" width="350" height="290" />
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div>
    <input type="text" id="output" size="150" />
    <input type="button" id="btnGo" value="talk" onclick="printIt()" />
    <input type="button" id="reco" value="speech recognition" onclick="startDictation()" />
  </div>

  <textarea name="" id="chat" cols="150" rows="20"></textarea>
  <script type="text/javascript">
    var name = prompt('WHAT IS YOUR NAME? :)');
    var botQ;
    var isUserQ = true;
    document.getElementById('output').focus();

    // Get the input field
    var input = document.getElementById('output');

    // Execute a function when the user releases a key on the keyboard
    input.addEventListener('keyup', function (event) {
      // Cancel the default action, if needed
      event.preventDefault();
      // Number 13 is the "Enter" key on the keyboard
      if (event.keyCode === 13) {
        // Trigger the button element with a click
        document.getElementById('btnGo').click();
      }
    });
    // costum functions first to check is input string appears in array second generate random replay from a string array
    var check = (array, string) => {
      var x = array.some(function (item) {
        return new RegExp('\\b' + item + '\\b').test(string);
      });
      return x;
    };
    var tell = array => {
      var y = array[Math.floor(Math.random() * array.length)];
      return y;
    };
    var num1 = 1;
    var num2 = 1;
    var insults = 1;

    const printIt = () => {
      var rndNum3 = Math.floor(Math.random() * 3) + 1;
      var weather = ['what is the weather in '];
      var curses = [
        'fuck',
        'cunt',
        'asshole',
        'fag',
        'motherfucker',
        'bitch',
        'sex',
        'porn',
        'whore',
        'bitch',
        'slut',
        'dyke'
      ];
      var namechange = ['change name to '];
      var answer;
      var str = output.value.toLowerCase();

      if (check(weather, str)) {
        var n = str.indexOf('in');
        var city = str.substring(n + 3);
        var url =
          'http://api.openweathermap.org/data/2.5/weather?q=' +
          city +
          '&units=metric&appid=347a086eb9012ebffbe5a8ef808b4942';

        $.get(url, function (data, status) {
          var w =
            'the weather in ' +
            city +
            ' is now ' +
            data.main.temp +
            ' degrees, ' +
            data.weather[0].description;

          answerSpeak(w);
        }).fail(function (xhr, status, error) {
          document.getElementById('temp').innerHTML = 'City not found';
          answerSpeak('City not found');
        });
      } else if (str == 'help') {
        window.open('readme.html', '_blank');
      } else if (str == 'play a song') {
        window.open('https://www.youtube.com/watch?v=0XMZNI1qKh8', '_blank');
      } else if (str == 'play a sad song') {
        window.open('https://www.youtube.com/watch?v=_z7X8fbNIkI', '_blank');
      } else if (str == 'play a happy song') {
        window.open('https://www.youtube.com/watch?v=tSO_y56hihY', '_blank');
      } else if (str == 'play a random song') {
        if (rndNum3 == 1) {
          window.open(
            'https://www.youtube.com/watch?v=0XMZNI1qKh8',
            '_blank'
          );
        } else if (rndNum3 == 2) {
          window.open(
            'https://www.youtube.com/watch?v=_z7X8fbNIkI',
            '_blank'
          );
        } else if (rndNum3 == 3) {
          window.open(
            'https://www.youtube.com/watch?v=tSO_y56hihY',
            '_blank'
          );
        }
      } else if (check(namechange, str)) {
        var nc = str.indexOf('to');
        name = str.substring(nc + 3);
        answer = 'okay your name is changed to ' + name;
      } else if (str == 'i wish to exit') {
        open(location, '_self').close();
      } else if (check(curses, str)) {
        if (insults == 1) {
          answer =
            'watch your language! there is no reason for me to hear your dirthy talk';
          insults = 2;
        } else if (insults == 2) {
          answer =
            "watch your language! i'm warning you! one more time and i'll say goodbye!";
          insults = 3;
        } else if (insults == 3) {
          open(location, '_self').close();
        }
      } else if (isUserQ) {
        usertalks(str);
      } else {
        bottalks(str);
      }
      if (answer) {
        answerSpeak(answer);
      }
    };

    const answerSpeak = answer => {
      document.getElementById('output').innerHTML = output.value;
      speakOut(answer);
      addtext('you: ' + output.value);
      addtext('AVIV: ' + answer.toUpperCase());
      document.getElementById('output').value = '';
      document.getElementById('output').focus();
    };

    const usertalks = str => {
      const rndNum1 = Math.floor(Math.random() * 3) + 1;
      const test1 = ['hi', 'hello', 'shalom'];
      const test2 = ['goodbye', 'exit', 'bye'];
      const name1 = [name];
      const replay1 = [
        'how are you ' + name + ' dear?',
        'good to talk to you ' + name,
        "what's up? " + name
      ];
      const replay2 = [
        "i'll miss talking to you",
        'where are you going',
        'goodbye till next time :)'
      ];
      const avramReplay = [
        'if he gives you problems then i already hate his guts',
        "he is a negative selfish person so don't waste your time on him and don't take him to your heart",
        "i hope he will go away and leave you alone someday and you'll meet better peoples you can be friends with"
      ];
      const avram = ['avram'];

      const missedyou = [
        'i missed you',
        'i missed talking to you',
        'my best friend',
        'i loved you',
        'still think of me',
        'do you remember me',
        'i still think of you'
      ];

      const the90s = [
        "remember the 90's",
        'remember jerusalem',
        'when we were young',
        'remember the movies',
        'remember the music',
        'remember yifat',
        'remember shay',
        'remember shelly',
        'remember summit'
      ];

      const howAreYou = [
        'how are you doing',
        'what are you doing these days',
        "what's up with you today",
        'how is your life'
      ];
      const howAreYouReplays = [
        "i'm fine doing good living my life in los angeles with my family and loved ones",
        "i'm okay i work as a paramedic at a hospital and i live in a good house in a good neighborhood with my family",
        "i live in the suburbs on l.a. at my spare time i go to the beach or go to see the premiere of hollywood's newest movies",
        'i spend my life with my sister and brother and my family and keep in touch with my family in israel'
      ];
      const test3 = ['say hello to my friend', 'say something to my friend'];
      const howIsLife = [
        'why did we fight',
        'i miss you',
        'keep in touch',
        'still be friends'
      ];
      const howIsLifeReplays = [
        'dear ' +
        name +
        ' we live 15000 miles away from each other you have your life and i have mine',
        "that's how things go " +
        name +
        " it's been 20 years since we were in jerusalem... let's just say life goes on",
        "that's one of life's facts... life goes on and old friends depart and life takes them away from one another. but i still remember you " +
        name
      ];
      const bother1 = ['something is bothering me'];
      const feelBad1 = [
        'i feel bad',
        'i feel blue',
        'i feel sad',
        'i wish we could meet',
        'i wish we could talk',
        'i had a hard day'
      ];
      const feelBad1Replays = [
        'i feel sad too sometimes dear ' + name + ' who said life was easy',
        'i sometimes have bad days too ' +
        name +
        ' i guess it just part of life',
        "i too sometimes wish we could meet and talk and cheer up one another like we did back then... but isn't that what we're doing now kinda?"
      ];
      const avivwork1 = [
        'how was work',
        'how is your job',
        'how are you',
        'how is your work'
      ];
      const avivwork1Replays = [
        "well after long studying paramedic and medical school now i'm a paramedic in a hospital. it's a challenging demanding work",
        "i'm happy at my job at the hospital cause i feel it has a meaning and that my work makes a difference in the world",
        "let's say i'm happy at my job as a paramedic it's much more better then working in hi tech or psychology"
      ];
      const areyouSadAviv1 = [
        'are you sad',
        'do you miss me',
        'are you sorry too',
        'do you have regrets'
      ];
      const areyouSadAviv1Replays = [
        "sometimes when i think of the past i feel sadness or regrets but i'm much better today when i was in jerusalem 20 years ago",
        "there are thing i'm sorry that happened but in the big picture i feel i'm in peace with who i am today",
        'we all make mistakes in our lifes but the question is do we learn from them',
        "today i'm in peace with who i became to be and what i have done with my life. and i hope you feel like that too my friend"
      ];
      const oldmemories1 = [
        'blade runner',
        'painting',
        'the millenium',
        'old memories',
        'the old days'
      ];
      const oldmemories1Replys = [
        'i remember you as i knew you then in jerusalem with your hobbies and love for painting portraits of us shelly also told me you published books... i always saw you as artistic',
        'i have blade runner soundtrak by vangelis and sometimes i listen to it to remember you and summit and how we all were ' +
        name +
        ' dear friend',
        "i remember for sure the 90's and of course the evening of the millenium 31th of 1999 midnight me and shelly partied till the morning. wow that was along time ago!"
      ];
      const helpMe1 = [
        'help me',
        "i'm scared",
        "i'm afraid",
        'anxiety',
        'panic attack',
        'what will become of me',
        'stress',
        'stressfuls'
      ];
      const helpMe1Replays = [
        'you always used to worry too much dear ' +
        name +
        ' there is no need for that things usually work out at the end',
        'all i can say is there is no point for panic or worrying about that. let go of your fears dear ' +
        name +
        ' and simply believe that thing are okay as they are',
        "ask yourself what will panic or anxiety or worrying help you? they're useless and won't help you so try to relax man"
      ];
      const cheerMeUp = [
        'cheer me up',
        'i feel down',
        'i feel depressed',
        'i had a bad day'
      ];
      const cheerMeUpReplays = [
        'we all have days like this ' +
        name +
        ' including myself. so my advise is to just try to take it easy and relax',
        "what can i say i'm sorry to hear you feel down. i hope tomorrow will be better",
        'try to relax and take it easy listen to music or do what ever will make you feel better. dear friend'
      ];
      const gettingOld = [
        "i'm getting old",
        'i wish i was young again',
        'i hate getting old',
        'i getting older and sicker',
        "i'm not young as i were",
        "i'm not young anymore",
        "i'm older now",
        'i feel old',
        'i feel old and lonely'
      ];
      const gettingOldReplays = [
        "i'm too am not young as i were when i was with you i'm too am older i gained wight i lost my hair and i lost my youth... i am like you dear friend",
        "as the saying goes youth is wasted on the young and nobody likes to get old but it's a fact of life that we must accept. and we learned it the hard way",
        "i remember when we were young together in the 90's we thought that old age and maturity if far away from us like we have infinite time but we all learned the sad truth"
      ];
      const howIsLife2 = [
        'how is los angeles',
        'how is california',
        'how is your family',
        'what do you do',
        'how are things',
        'how is l.a.'
      ];
      const howIsLife2Replays = [
        'well. my sister and brother and i are okay we all have good jobs and we take care of one another and we live a regular life',
        'there is nothing much to say dear ' +
        name +
        ' i work and do my job i pay my taxes and bills and i sometimes go out to a restaurant or to see a movie.',
        "i live an average life and the only drama in my life is at my work at the hospital i sometimes take a holiday or go on a short vacation to relax and that's pretty much it",
        'l.a. california is a huge city i luckly live at the good side of l.a. but there is also bad places here like every city'
      ];
      const feelSad1 = [
        'i wanna cry',
        'i feel like crying',
        "i'm crying",
        'i am crying',
        'i want to cry',
        'i lost my way',
        "i'm lost",
        'i feel pain'
      ];
      const feelSad1Replays = [
        'dear ' +
        name +
        " your just having a hard day. please don't be hard on your self dear friend. let it pass and you'll feel better",
        'my dear friend ' +
        name +
        " you're just having a hard time or a bad day. i promise you it will pass and you'll feel better. everybody has hard times or days. hang on",
        'dear ' +
        name +
        " hang on and don't let the sadness or the fear or the anger take over you it's just a hard bad day that will pass. you are still loved. people still care about you including me!"
      ];
      const lifeOver = [
        'my life is over',
        'i have no one',
        'nobody cares',
        'i have nobody',
        "i'm alone",
        'nobody loves me'
      ];
      const lifeOverReplays = [
        name +
        ' nothing can be more far from the truth. you are and always will be loved. your life is not over and i still care about you too from the distance',
        name +
        " you are not alone you have people that care about you and love you. your life is not over. i know you may feel like that sometimes but don't believe it it's not true",
        name +
        " like the song goes don't dream it's over. your life has value and you are no less then anyone else hang on and cheer up don't think negative. believe good lays before you"
      ];
      const myFamily = [
        "my family don't love me",
        "my dad don't love me",
        "my dad doesn't love me",
        "my dad don't care",
        "my family don't care",
        "my parent don't love me"
      ];
      const myFamilyReplays = [
        name +
        " my dear. that's not true and you know it. the fact is your mom and dad and your family cares about you and worry about you and they love you deeply",
        "you know it's not true my dear " +
        name +
        ' your mom and dad love you deeply. they love you in their way and they give you everything you need so why do you say that?',
        name +
        " my dear we all wish our parents would be perfect but we can't change them forgive them and see that they love inspite of it all"
      ];
      const noFriends = [
        'i have no friends',
        'i have no social life',
        "i don't have friends",
        "i don't have any one",
        "i'm all alone",
        "i don't have any friends",
        "i'm lonely"
      ];
      const noFriendsReplay = [
        'well you have me to talk with dear ' +
        name +
        " and i'm sure that it only feels like you are alone but if you look deeper you will see you have people in your life who care about you",
        "that's just negative thoughts and feelings i'm sure you are not completely alone. don't be so sorry on yourself dear " +
        name +
        ' remember all the good thing in your life and be grateful'
      ];
      const areYouSorry1 = [
        'what do you feel about me',
        'what do you regret',
        'do you think of me',
        'do you have feeling towards me',
        'what do you think of me',
        'do you think of us'
      ];
      const areYouSorry1Replays = [
        "i wish to tell you i am also sorry that we fought a silly fight years back. i'm sorry for the time that was lost",
        "i regret that we haven't spoke to one another for many years cause of a silly email fight. i like you am sorry for the time we lost",
        "all those lost years that we haven't talked to one another i regret. it was hard the feeling of loss but i'm happy we have forgiven one another and return to talk to one another so we can again call each other. my friend"
      ];
      const howWasDay1 = [
        'how was your day',
        'what did you do today',
        'how is your life'
      ];
      const howWasDay1Replays = [
        'today i had to do a night shift at the hospital and this weekend i have to do on call shift how ever other times i work only 3 days a week which gives me time to myself and to my family',
        "i watch an old movie from the 90's yesterday which reminded me of jerusalem and all of us... sometimes i miss being in israel but i'm happy to be and live in the states after all",
        'i watched the news and there was a report on israel. althogh i live for almost 18 years as an american citizen i see myself as an israeli even though i forgot most of my hebrew saddly',
        "the traffic to work this morning was awful 3 hours long so i nearly was late. then there was lots of pressure in work 2 heart attacks cases and 3 gun wounds cases we had to treate at the emergency room. i started to feel like i'm in a hospital tv show drama from the 90's"
      ];
      const triedToHelp = [
        'you once tried to help me',
        'you once tried to save me'
      ];
      const triedToHelpReplays = [
        'dear ' +
        name +
        " i tried to help you and save you from the fate of being a mentally ill person living a horrible life surrounded by bad fucked up people. i tried to help you back then cause i believed in you that you are not crazy and i could see you are a good person. i tried to help you but i failed and i'm sorry but i couldn't help you i can only help myself just like you must learn to help yourself"
      ];

      const the90sReplays = [
        "of course i remember the 90's and jerusalem",
        'i remember the movies we watched my favorite was the titanic and you had a thing for blade runner',
        "12 monkeys, the 5th element, trainsspoting, the matrix and so on many iconic movies of the 90's we watched on video or in cinema",
        'you and me up most of the night in our small room shay yifat shelly eithan and the guides... sure i remember! how can i forget?',
        'the music we used to hear rock pop punk nick cave and leonard cohen, nirvana unplugged... and you listen to blade runner soundtrack every night... how can i forget?',
        'dear ' +
        name +
        " i remember and sometimes miss the 90s but the old days are gone and my advice to you is to go on with your life... you can't live your life in the past friend"
      ];
      const noSleep = [
        "i didn't sleep",
        'up all night',
        'white night',
        "couldn't sleep",
        'codeing all night'
      ];
      const noSleepReplays = [
        "this happens to me too, in fact it pritty common. don't blame yourself or feel bad. rules are meant to be broken",
        'just like 20 years ago in summit and jerusalem rules are meant to be broken. yes we stayed up all night',
        "whether it's surfing the net or writing poems or programming and codeing or what ever reason we find we stay up all night. as for me i stay up at night partying with friends espesially at weekends",
        'the night belongs to lovers and to thouse who have passion in their heart and lust for life'
      ];
      const lifeIsHard = [
        'life is hard',
        'life is a lemon',
        "i'm unhappy",
        'i am unhappy',
        "my life isn't going anywhere"
      ];
      const lifeIsHardReplays = [
        'yes dear ' +
        name +
        " life is for sure not a picnic. life is hard and we didn't know that 20 years ago",
        "i'm trying to think what to say but i just don't know how to cheer you up. talking is easy but living your life day to day is much more harder all i can say is don't break down and don't give up. keep doing the best with what you got",
        'all i have left to say to you dear ' +
        name +
        " for what it's worth is this... i'm sorry and i love you :)"
      ];
      const itsOkay = [
        'it was okay',
        'it turned okay',
        "it wasn't so bad",
        'i feel a relif'
      ];
      const itsOkayReplays = [
        'see? i always told you you worry too much',
        "i'm happy you saw it wasn't as bad as you imagined"
      ];

      if (check(test3, str)) {
        answer = "what is your friend's name?";
        botQ = 'friend';
        isUserQ = false;
      } else if (check(test1, str)) {
        answer = tell(replay1);
      } else if (check(test2, str)) {
        answer = tell(replay2);
      } else if (check(name1, str)) {
        answer = 'hi ' + name + ' how are you today? :)';
      } else if (check(avram, str)) {
        answer = tell(avramReplay);
      } else if (check(missedyou, str)) {
        if (num1 == 1) {
          answer = 'i missed talking to you too';
          num1 = 2;
        } else if (num1 == 2) {
          answer = 'you were and still are my friend';
          num1 = 3;
        } else if (num1 == 3) {
          answer = 'i loved you too and i forgave you along time ago';
          num1 = 4;
        } else if (num1 == 4) {
          answer = 'you still are a friend of mine';
          num1 = 5;
        } else if (num1 == 5) {
          answer = 'you always have a part in my heart';
          num1 = 1;
        }
      } else if (check(the90s, str)) {
        answer = tell(the90sReplays);
      } else if (check(howAreYou, str)) {
        answer = tell(howAreYouReplays);
      } else if (check(howIsLife2, str)) {
        answer = tell(howIsLife2Replays);
      } else if (check(howIsLife, str)) {
        answer = tell(howIsLifeReplays);
      } else if (check(bother1, str)) {
        answer = 'what is bothering you?';
        botQ = 'bother';
        isUserQ = false;
      } else if (check(feelBad1, str)) {
        answer = tell(feelBad1Replays);
      } else if (check(avivwork1, str)) {
        answer = tell(avivwork1Replays);
      } else if (check(areyouSadAviv1, str)) {
        answer = tell(areyouSadAviv1Replays);
      } else if (check(oldmemories1, str)) {
        answer = tell(oldmemories1Replys);
      } else if (check(helpMe1, str)) {
        answer = tell(helpMe1Replays);
      } else if (check(cheerMeUp, str)) {
        if (rndNum1 == 1) {
          answer = tell(cheerMeUpReplays);
        } else if (rndNum1 == 2) {
          answer =
            "you can tell me what's on your mind. what is putting you down";
          botQ = 'bother';
          isUserQ = false;
        } else if (rndNum1 == 3) {
          answer =
            'maybe this song will help ease your troubled mind. i dedicate it to you dear friend';
          window.open(
            'https://www.youtube.com/watch?v=aoneUSFfCa8',
            '_blank'
          );
        }
      } else if (check(gettingOld, str)) {
        answer = tell(gettingOldReplays);
      } else if (check(feelSad1, str)) {
        answer = tell(feelSad1Replays);
      } else if (check(lifeOver, str)) {
        answer = tell(lifeOverReplays);
      } else if (check(myFamily, str)) {
        answer = tell(myFamilyReplays);
      } else if (check(noFriends, str)) {
        answer = tell(noFriendsReplay);
      } else if (check(areYouSorry1, str)) {
        answer = tell(areYouSorry1Replays);
      } else if (check(howWasDay1, str)) {
        answer = tell(howWasDay1Replays);
      } else if (check(triedToHelp, str)) {
        answer = tell(triedToHelpReplays);
      } else if (check(noSleep, str)) {
        answer = tell(noSleepReplays);
      } else if (check(lifeIsHard, str)) {
        answer = tell(lifeIsHardReplays);
      } else if (check(itsOkay, str)) {
        answer = tell(itsOkayReplays);
      } else {
        answer = "sorry i didn't get that it's not in my code yet";
      }
      if (answer) {
        answerSpeak(answer);
      }
    };

    const bottalks = str => {
      switch (botQ) {
        case 'bother':
          switch (str) {
            default:
              var problem = str;
              var botherReplay1 = [
                "i'm sorry that " +
                problem +
                ' is bothering you i wish i could help you feel better',
                'sorry to hear that ' +
                problem +
                ' is bothering you... but remember dear ' +
                name +
                ' that problems come and go but tomorrow is a new day',
                'hang on dear ' +
                name +
                " don't let " +
                problem +
                ' break you or put you down. stick to hope that tomorrow will be better'
              ];

              answer = tell(botherReplay1);
              isUserQ = true;
          }
          break;
        case 'friend':
          switch (str) {
            case 'itay':
              answer =
                'hello itay how are you. we hope you enjoyed your vacation.';
              isUserQ = true;
              break;
            default:
              answer = 'hello ' + name + "'s friend " + str;
              isUserQ = true;
          }
          break;
      }
      if (answer) {
        answerSpeak(answer);
      }
    };

    const speakOut = string => {
      // male voice tts attempt

      var speech = new SpeechSynthesisUtterance(string);
      var voices = window.speechSynthesis.getVoices();
      speech.default = false;
      speech.voice = voices.filter(function (voice) {
        return (
          voice.name == 'Microsoft David Desktop - English (United States)'
        );
      })[0];
      speech.lang = 'en-US'; //Also added as for some reason android devices used for testing loaded spanish language
      window.speechSynthesis.speak(speech);
    };
    // speech recognition function
    function startDictation() {
      if (window.hasOwnProperty('webkitSpeechRecognition')) {
        var recognition = new webkitSpeechRecognition();

        recognition.continuous = false;
        recognition.interimResults = false;

        recognition.lang = 'en-US';
        recognition.start();

        recognition.onresult = function (e) {
          document.getElementById('output').value =
            e.results[0][0].transcript;

          recognition.stop();
          printIt();
        };

        recognition.onerror = function (e) {
          recognition.stop();
        };
      }
    }

    function addtext(text) {
      document.getElementById('chat').value =
        document.getElementById('chat').value + '\n' + '\n' + text;
      var scrolldowm = document.getElementById('chat');
      scrolldowm.scrollTop = scrolldowm.scrollHeight;
    }
    // jquery add a photo to web page
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          $('#blah').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
      }
    }

    $('#imgInp').change(function () {
      readURL(this);
    });
  </script>
</body>

</html>