<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Chat</title>
    <style>
        body{
            background-color:#333333 !important;
            color:white;
            font-family:monospace
        }
        .speak {
            padding-top:10px;
        }
        input {
            background-color:grey;
            border: black 3px solid;
        }
        button {
            background-color:grey;
            border: black 3px solid;
            color:black
        }
        button:hover {
           background:#333333;
           color:white;
        }
        .chat {
            padding:50px
        }
        #msg {
            font-size: 0.9rem;
            padding-left:10px
        }
        .log:first-child{
            padding-top:10px
        }
        .log:last-child{
            padding-bottom:10px
        }
        h1 {
            padding:20px;
            text-align:center
        }
        code {
            background:lightslategrey;
        }
        .log {
            border:3px black dotted;
            width:30.75vw
        }
        a {
            color:lightblue
        }
        #known-limitations {
            color:lightcoral
        }
        #things-it-can-do,#get-chatting {
            color:lightgreen
        }
        #ways-to-access {
            color:aquamarine
        }
        #install-os-agnostic-{
            color:aquamarine
        }
        .info {
            padding:10px;
            padding-left:100px;
            font-size:0.55rem
        }
        .flex {
            display:flex;
            flex-direction: row;
            justify-content: center;
        }
        #long {
            font-size:0.75rem;
            line-height: 0%;
        }
        .short {
            font-size:0.85rem
        }
        .hmmm {
            background:lightslategray
        }
    </style>
    <script>
        var how_justg=false;
        var thistime=false;
        function slog(msg) //server log
        {
            $.get("/log?msg="+msg,function() {
                console.log(msg+" sent to server log")
            })
        }
        function getResponse() {
            var input=$("#input").val();
            if (input===""){return}
            document.getElementById("input").innerHTML="";
            var nexttime=$("#input").val()
            if (thistime==="how are you") {
                var params={ inp: input , how_just: "True"}
            }
            else if (thistime=="rate") {
                var params={inp: input , how_rate: "True"}
            }
            else {
                var params={ inp: input }
            }
            slog(JSON.stringify(params))
            console.log(JSON.stringify(params))
            console.log(params);
            $(".log").append('<div id="msg" class="short">😃 -- '+input+'</div>');
            if (thistime=="rate") {
            $(".log").append('<div id="msg" class="short">🤖 -- Please wait while your result is computed</div>')
            }
            $("button").css("display","none")
            $("input").css("display","none")

            $.get("/res?"+new URLSearchParams(params), function(data){
    content= data;
    console.log(content["response"].length)
    if ((content["response"].length)>50) {
        console.log("jmhfgsdjk")
                    var res = '<div id="msg">🤖 -- <span id="long">' + content["response"].substr(5) + "</span></div>";
                }
                else {   
                    var res = '<div id="msg">' + content["response"] + "</div>";
              
                }
    $('.log').append( res);
}).fail(function() {
    $('.log').append(    '<div id="msg" class="short">🤖 -- An error occured</div>');
});

            $("button").css("display","inline")
            $("input").css("display","inline")
            thistime=nexttime
        }
        
        function every() {
        $("#input").keypress(function(e) {
            if (e.which == 13) {
                getResponse();
                document.getElementById("input").value="";
                
            }
        });}
        const hi = setInterval(every,300)
    </script>
</head>
<body>

    </div>
    <h1>Welcome to werdl/chat</h1>
    <div class="flex">
        <div class="chat">
            <div class="log">
            </div>
            <div class="speak">
                <input id="input" type="text" placeholder="Type here..." />
                <button onclick="getResponse()">Reply...</button>
            </div>
        </div>
        <div class="info">
Welcome to my conversational chatbot! Ask it some questions.
<br>
Note: It is not designed to operate like GPT-3, rather to talk with you. Try asking 'how are you'.
<br>
Type <b>'sentiment'</b> to perform sentiment analysis.
<br>
How about <b>'rate'</b> and it will rate your movie (data gleaned from IMDb database)
<br>
Or even <b>'rate movie'</b> and it will rate your movie
<br>
Or perhaps <b>'weather in city country'</b>
<br>Perhaps you could try 'search query' to search wikipedia for query
<br>
<br>
Example:
<span style="color:lightgrey">
<br>😃 -- rate
<br>🤖 -- Ok, which movie should I rate?
<br>😃 -- hunger games
<br>🤖 -- Please wait while your result is computed...
<br>🤖 -- Personally, I loved it. Released in 2015, the Sci-fi film recieved 68/100 on Rotten Tomatoes and 7.2/10 on IMDb.
</span>
<br>
<br>If it doesn't recognise your input, it will return the top Google search response if it is a question
<br>Or else say some ambiguous phrases

<br>It can also evaluate maths problems

<br>The weather API only works if your provide a country too (it's the only decent free one)
<br>However, you can also search with IP addresses, so its a trade-off.
                <h2 id="a-basic-chatbot">A basic chatbot</h2>
            
            <ul>
            <h3 id="things-it-can-do">Things it can do</h3>
            <li>Do maths problems</li>
            <li>Search google for questions</li>
            <li>convert units</li>
            <li>rate movies</li>
            <li>ask how you are</li>
            <li>get the current weather</li>
            <li>Get page summaries from wikipedia</li>
            <li>greet you<h3 id="ways-to-access">Ways to access</h3>
            </li>
            <li>Web interface (flask)</li>
            <li>CLI (vanilla Python)<h3 id="known-limitations">Known Limitations</h3>
            </li>
            <li>BODMAS/BIDMAS not always applied</li>
            <li>Google scraping a bit vunerable<h3 id="install-os-agnostic-">Install (OS agnostic)</h3>
            <h5 id="-werdl-onrender-com-werdl-onrender-com-"><a href="http://werdl.onrender.com">werdl.onrender.com</a></h5>
            <h4 id="reqs">Reqs</h4>
            </li>
            <li>Python</li>
            <li>requirements.txt<pre><code class="lang-bash">pip <span class="hljs-keyword">install</span> werdl-chat</code></pre>
            <h3 id="get-chatting">Get chatting</h3>
            </li>
            <li>New file
            <br>
            <code class="lang-python"><span class="hljs-keyword">from</span> werdl-chat <span class="hljs-keyword">import</span> *</code>
            <br>
            <code>
            chat()
            </code>
            </li>
            <h3>Thanks to the following modules:</h3>
            <li>bs4 (html parsing)</li>
            <li>requests (HTTP requests)</li>
            <li>lxml (html parsing)</li>
            <li>textblob (spell checking)</li>
            <li>imdbpy (IMDb API)</li>
            <li>semantic3 (unit conversion)</li>
            <li>clrprint (debugging)</li>
            <li>mathparse (maths equation)</li>
            <li>gunicorn &amp flask (website)</li>
            <li>wikipedia (wikipedia parsing)</li>
            <h3>And the following web-based APIs:</h3>
            <li>WeatherAPI.com</li>
            <li>google.com (self-coded 'API')</li>
            <li>https://en.wikipedia.org/w/api.php</li>
        </ul>
        </div>
    </div>
</body>
</html>