{"id":951,"date":"2024-08-13T11:59:47","date_gmt":"2024-08-13T16:59:47","guid":{"rendered":"https:\/\/blogs.dickinson.edu\/edtech\/?p=951"},"modified":"2024-08-13T11:59:53","modified_gmt":"2024-08-13T16:59:53","slug":"951","status":"publish","type":"post","link":"https:\/\/blogs.dickinson.edu\/edtech\/2024\/08\/13\/951\/","title":{"rendered":"Chatbot"},"content":{"rendered":"<style>\n.left, .right  {\n   border: solid #ccc 1px;\n   margin-top: 10px;\n   margin-bottom: 10px;\n   padding: 25px;\n   border-radius: 20px;\n}\n.left {\n   margin: 10px 100px 10px 0px;\npadding-left:70px;\nbackground: url('https:\/\/itech1.dickinson.edu\/moodleicons\/chatbot.png') no-repeat left #222;\n\tcolor: #fff;\n   clear: both;\n   float: left;\n\t}\n.right  {\n   margin: 10px 5px 10px 100px;\n   background: #c8102e;\n\tcolor: #fff;\n   float: right;\n}\n.message_input  {\n   border: solid #c8102e 1px;\n   margin-top: -1px;\n   padding: 15px;\n   margin: 0 5px 10px 50px;\n   clear: both;\n   float: right;\n   border-radius: 20px;\n}\n<\/style>\n<p>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\" type=\"text\/javascript\"><\/script><br \/>\n<!-- Load jquery cookie library, we'll use this to send user token and keep session and matching log in flask --><br \/>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-cookie\/1.4.1\/jquery.cookie.js\" type=\"text\/javascript\"><\/script>\n<\/p>\n<\/p>\n<div class=\"chat_window\">\n<div class=\"top_menu\">\n<div class=\"title\">Enter the description of your conversation or activity here for the chatbot:<\/div>\n<\/div>\n<ul class=\"messages\"><\/ul>\n<div class=\"bottom_wrapper clearfix\">\n<div class=\"message_input_wrapper\"><input class=\"message_input\" placeholder=\"Type your message here and hit 'Enter'\" type=\"text\" size=\"40\"><\/div>\n<p><!-- We won't use a Send button, but just comment out for now\n\n\n<div class=\"send_message\">\n\n\n<div class=\"icon\"><\/div>\n\n\n\n\n<div class=\"text\">Send<\/div>\n\n\n--><\/p>\n<div class=\"message_template\">\n<div class=\"message\">\n<div class=\"text_wrapper\">\n<div class=\"text\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"footer\">\n<div id=\"button\"><\/div>\n<div id=\"container\">\n<div id=\"cont\">\n<div class=\"footer_center\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n<!-- Set the cookie on page load and send via GET with user token -->\n$(document).ready(function() {\n    user_token = Math.random().toString(36).substr(2);\n  $.cookie('user_token', user_token);\n  $.ajax({\n    type: \"GET\",\n    url: \"https:\/\/dknlampstu2.dickinson.edu:8030\",\n    data: { \"user_token\" : user_token }\n   });\n});\n      function getCookie(cname) {\n        const name = cname + \"=\";\n        const decodedCookie = decodeURIComponent(document.cookie);\n        const ca = decodedCookie.split(';');\n        for(let i = 0; i < ca.length; i++) {\n          let c = ca[i];\n          while (c.charAt(0) === ' ') {\n            c = c.substring(1);\n          }\n          if (c.indexOf(name) === 0) {\n            return c.substring(name.length, c.length);\n          }\n        }\n        return null;\n      }\n\n\/\/Messages to\/from LLM API via Flask sent via GET and added to html\n\n(function () {\n\tvar Message;\n\tMessage = function (arg) {\n    \tthis.text = arg.text, this.message_side = arg.message_side;\n    \tthis.draw = function (_this) {\n        \treturn function () {\n            \tvar $message;\n            \t$message = $($('.message_template').clone().html());\n            \t$message.addClass(_this.message_side).find('.text').html(_this.text);\n            \t$('.messages').append($message);\n            \treturn setTimeout(function () {\n                \treturn $message.addClass('appeared');\n            \t}, 0);\n        \t};\n    \t}(this);\n    \treturn this;\n\t};\n\t$(function () {\n\n    \tvar getMessageText, message_side, sendMessage;\n\n        \/\/With each GET, we need to add the user token to keep session and log per user\n        const user_token = getCookie(\"user_token\");\n\n\n\n    \tmessage_side = 'right';\n    \tgetMessageText = function () {\n        \tvar $message_input;\n        \t$message_input = $('.message_input');\n        \treturn $message_input.val();\n    \t};\n\n\n    \tsendMessage = function (text) {\n\tvar $messages, message;\n\tif (text.trim() === '') {\n    \treturn;\n\t}\n\t$('.message_input').val('');\n\t$messages = $('.messages');\n\n\t\/\/ Set message_side based on whether the message is from the user or chatbot\n\tvar message_side = 'right';\n\n\tmessage = new Message({\n    \ttext: text,\n    \tmessage_side: message_side\n\t});\n\n\n\n\/\/ Draw user message\n\tmessage.draw();\n\/\/\n\n\n\n\/\/ Call getResponse() to get the chatbot's response\n\n\/\/ PROFESSORS - YOU WILL SET YOUR PROMPT, NAME OF YOUR BOT, AND LANGUAGE BELOW.  \n\/\/INSTRUCTIONS\n\/\/In the variables below, replace varPrompt with your custom prompt in single quotes.  \n\/\/Replace the varName value with the name you would like to give your bot. \n\/\/Set varLanguage to the target language. The bot will choose the best model for Spanish, Japanese, Russian, etc.\n\n\/\/ENTER YOUR VARIABLES HERE - PLACE THEM WITHIN THE SINGLE QUOTES\n$.get(\"https:\/\/dknlampstu2.dickinson.edu:8030\/get\", { msg: text, \nvarName: 'Tadao', \nvarPrompt: 'I would like to start a simulation. You are my Japanese roommate. Your name is Tadao. Please play the role of Tadao, a native Japanese speaker and student at the University of Nagoya. Do not tell me you are a chatbot. Use the pronoun \"I\" when referring to yourself. I will play the role of an American student studying in Japan.', \nvarLanguage: 'Japanese',\n\n\/\/END PROFESSORS\n\nvarUserToken: user_token\n } ).done(function(data) {\n\tvar botMessage = new Message({\n    \ttext: data,\n    \tmessage_side: 'left'\n\t});\n\n\n\t\/\/ Draw bot message\n\tbotMessage.draw();\n\t$messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);\n});\n\nreturn $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);\n};\n\n    \t$('.send_message').click(function (e) {\n        \treturn sendMessage(getMessageText());\n    \t});\n    \t\/\/event 13 is enter on the keyboard, Todd\n    \t$('.message_input').keyup(function (e) {\n        \tif (e.which === 13) {\n            \treturn sendMessage(getMessageText());\n        \t}\n    \t});\n        \t\/\/ Add \"Writing...\" message\n\twritingMessage = new Message({\n    \ttext: 'Place initial greeting from your chatbot here to start conversation',\n    \tmessage_side: 'left'\n\t});\n\twritingMessage.draw();\n\n\t});\n}.call(this));\n\/\/ ]]><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enter the description of your conversation or activity here for the chatbot:<\/p>\n","protected":false},"author":776,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-951","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/posts\/951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/users\/776"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/comments?post=951"}],"version-history":[{"count":0,"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/posts\/951\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/media?parent=951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/categories?post=951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.dickinson.edu\/edtech\/wp-json\/wp\/v2\/tags?post=951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}