Jippity Junior: AI Chatbot Extraordinaire

{"name":"Jippity Junior: AI Chatbot Extraordinaire","description":"Engage in conversations with Jippity Junior, a chatbot-like AI designed to greet users, respond to input, maintain conversational flow, handle common queries, have a unique personality and tone, learn and adapt over time, and pull information from the dictionary and Wikipedia.","photo":null,"view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-01-10T16:06:43.097323Z","updated_at":"2024-01-10T16:06:43.097326Z","user_id":20,"status":"PUBLIC","parent_id":322,"id":323,"user":{"username":"easton","id":20,"password_hash":null,"updated_at":"2023-12-13T22:03:27.288320Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"93334261-e433-7134-983b-ed13d90349f5","created_at":"2023-12-13T22:03:27.288318Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"// This is the correct place to declare handleJimLikes function\nfunction handleJimLikes(userInput) {\n if (userInput.includes('banana bread')) {\n return 'Jim: I absolutely love banana bread!';\n } else if (userInput.includes('lava banana bread')) {\n return 'Jim: Lava banana bread is my all-time favorite!';\n }\n return '';\n}\n\nwindow.onload = function () {\n var greetingContainer = document.getElementById(\"greetingContainer\");\n greetingContainer.innerHTML = \"Hello! I'm Jippity Junior. How may I assist you today?\";\n};\n\nconst API_KEY = \"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\";\n\nfunction callGpt3Api(textInput) {\n const endpoint = \"https://api.openai.com/v1/chat/completions\";\n const data = {\n 'model': 'gpt-3.5-turbo',\n 'messages': [\n {\n 'role': 'system',\n 'content': 'You are a helpful assistant.'\n },\n {\n 'role': 'user',\n 'content': textInput\n }\n ]\n };\n\n return fetch(endpoint, {\n method: \"POST\",\n headers: {\n 'Authorization': `Bearer ${API_KEY}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(data)\n })\n .then(response => response.json())\n .then(data => data['choices'][0]['message']['content']);\n}\n\nfunction speakText(text) {\n var utterance = new SpeechSynthesisUtterance(text);\n var voices = window.speechSynthesis.getVoices();\n if (voices.length > 1) utterance.voice = voices[1];\n window.speechSynthesis.speak(utterance);\n}\n\ndocument.addEventListener('keydown', handleKeyPress);\n\nfunction handleKeyPress(e) {\n var settingsMenu = document.getElementById('settingsMenu');\n\n if (e.key == 'e') {\n settingsMenu.style.display = 'block';\n } else if (e.key == 'Escape') {\n settingsMenu.style.display = 'none';\n }\n}","style.css":"body {\n font-family: Arial, sans-serif;\n background-color: green;\n}\n\n#greetingContainer {\n margin-bottom: 20px;\n}\n\n#userInput {\n width: 300px;\n height: 30px;\n padding: 5px;\n font-size: 16px;\n}\n\n#sendButton {\n height: 40px;\n margin-left: 10px;\n font-size: 16px;\n}\n\n#userMessage {\n background-color: blue;\n color: white;\n padding: 5px;\n margin: 10px 0;\n font-size: 16px;\n}\n\n#conversationContainer p {\n background-color: lightgreen;\n padding: 10px;\n margin: 10px 0;\n border-radius: 5px;\n}","index.html":"\n\n\n\n \n \n Jippity Junior: AI Chatbot Extraordinaire\n \n\n\n\n

\n \n \n

Settings Menu

Some settings...

\n \n\n\n\n

"},"chat_history":[{"deleted":0,"code_id":18699,"input_tokens":null,"id":11765,"project_id":323,"sender":"human","message":"Let's get started!","created_at":"2024-01-10T16:08:31.493774Z","output_tokens":null},{"deleted":0,"code_id":18699,"input_tokens":null,"id":11766,"project_id":323,"sender":"ai","message":"First, we will add a div to the HTML file to serve as a container for the Mario image and the controls. \n\nHTML:\n```html\n

\n```\n\n- The div with id 'gameContainer' will contain our Mario image and the controls.\n- Inside this div, we insert an img tag with id 'mario'. This will be the image of Mario that we will move around. \n- The src attribute of the img tag uses the @asset preProcessor to load the Mario image.\n- The style attribute positions the image at the top left corner of the 'gameContainer'.\n\nNext, we will add some CSS to style the gameContainer.\n\nCSS:\n```css\n#gameContainer {\n position: relative;\n width: 800px;\n height: 600px;\n border: 1px solid black;\n}\n```\n\n- The position is set to 'relative' which means that all absolute positioned elements inside this div will position themselves relative to this div.\n- The width and height are set to 800px and 600px, respectively. This is the play area for Mario.\n- A border is added to clearly define the","created_at":"2024-01-10T16:08:31.504622Z","output_tokens":null},{"deleted":0,"code_id":18700,"input_tokens":null,"id":11767,"project_id":323,"sender":"human","message":"add my sprite named jim","created_at":"2024-01-10T16:08:40.696730Z","output_tokens":null},{"deleted":0,"code_id":18700,"input_tokens":null,"id":11768,"project_id":323,"sender":"ai","message":"Sure, we can add your sprite named \"jim\". Let's add the sprite to the HTML file and then we will handle its movement.\n\nHTML:\n```html\n

\n```\n\nIn the above code:\n\n- We added a div with an id of \"gameContainer\" which will be the container for the game.\n- Inside this div, we added an image with an id of \"jim\" and set its source to the \"jim\" sprite using the \"@asset\" function.\n- We set the style of the image to be \"position:absolute;\" which will allow us to move the sprite around inside the \"gameContainer\" div.\n\nNext, we'll add the JavaScript to handle the movement.","created_at":"2024-01-10T16:08:40.703190Z","output_tokens":null},{"deleted":0,"code_id":19884,"input_tokens":null,"id":12471,"project_id":323,"sender":"human","message":"condition jim to like banana bread and lava banana bread","created_at":"2024-01-12T15:19:43.659882Z","output_tokens":null},{"deleted":0,"code_id":19884,"input_tokens":null,"id":12472,"project_id":323,"sender":"ai","message":"We can condition \"jim\" to like banana bread and lava banana bread by creating some rules for our chatbot. We will add a function that checks if the user input contains certain keywords and respond accordingly.\n\nFirst, let's add a new function to handle this:\n\n```javascript\nfunction handleJimLikes(userInput) {\n if (userInput.includes('banana bread')) {\n return 'Jim: I absolutely love banana bread!';\n } else if (userInput.includes('lava banana bread')) {\n return 'Jim: Lava banana bread is my all-time favorite!';\n }\n return '';\n}\n```\n\nIn the above code:\n\n- We define a new function called `handleJimLikes` that takes a string `userInput` as its argument.\n- If the user input includes the phrase 'banana bread', the function returns a string expressing Jim's love for banana bread.\n- If the user input includes the phrase 'lava banana bread', the function returns a string expressing Jim's preference for lava banana bread.\n- If neither condition is met, the function returns an empty string.\n\nNext, let's modify the event listener for the send button to use the new function:\n\n```javascript\nsendButton.addEventListener(\"click\", function () {\n var userInput = userInputField.value;\n\n if (userInput) {\n var userMessageElement = document.createElement(\"p\");\n userMessageElement.textContent = `You: ${userInput}`;\n conversationContainer.appendChild(userMessageElement);\n\n var jimMessage = handleJimLikes(userInput);\n if (jimMessage) {\n var jimMessageElement = document.createElement(\"p\");\n jimMessageElement.textContent = jimMessage;\n conversationContainer.appendChild(jimMessageElement);\n } else {\n callGpt3Api(userInput)\n .then(response => {\n var aiMessage = response;\n var aiMessageElement = document.createElement(\"p\");\n aiMessageElement.textContent = `Jippity Junior: ${aiMessage}`;\n conversationContainer.appendChild(aiMessageElement);\n speakText(aiMessage);\n })\n .catch(error => console.error(\"API Error:\", error));\n }\n\n userInputField.value = \"\";\n }\n});\n```\n\nIn the modified code:\n\n- We call the `handleJimLikes` function with the user input.\n- If the `handleJimLikes` function returns a non-empty string, we create a new message element for Jim's response and append it to the conversation container.\n- If the `handleJimLikes` function returns an empty string, we proceed with the existing code to call the GPT-3 API and handle its response.","created_at":"2024-01-12T15:19:43.666396Z","output_tokens":null},{"deleted":0,"code_id":25374,"input_tokens":null,"id":15405,"project_id":323,"sender":"human","message":"ERROR: Uncaught ReferenceError: handleJimLikes is not defined at 56:26 in script.js","created_at":"2024-01-18T15:18:07.431268Z","output_tokens":null},{"deleted":0,"code_id":25374,"input_tokens":null,"id":15406,"project_id":323,"sender":"ai","message":"It appears there is a scope issue with your `handleJimLikes` function. The function is defined within the `callGpt3Api` function, which means it's not accessible outside of it. This is why you're getting a `ReferenceError` when you attempt to call `handleJimLikes` from the event listener on the send button. \n\nTo fix this, we need to move `handleJimLikes` function out of `callGpt3Api` function and declare it on the global scope. \n\nHere's the corrected code:\n\n```javascript\n// This is the correct place to declare handleJimLikes function\nfunction handleJimLikes(userInput) {\n if (userInput.includes('banana bread')) {\n return 'Jim: I absolutely love banana bread!';\n } else if (userInput.includes('lava banana bread')) {\n return 'Jim: Lava banana bread is my all-time favorite!';\n }\n return '';\n}\n\nwindow.onload = function () {\n var greetingContainer = document.getElementById(\"greetingContainer\");\n greetingContainer.innerHTML = \"Hello! I'm Jippity Junior. How may I assist you today?\";\n};\n\nconst API_KEY = \"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\";\n\nfunction callGpt3Api(textInput) {\n const endpoint = \"https://api.openai.com/v1/chat/completions\";\n const data = {\n 'model': 'gpt-3.5-turbo',\n 'messages': [\n {\n 'role': 'system',\n 'content': 'You are a helpful assistant.'\n },\n {\n 'role': 'user',\n 'content': textInput\n }\n ]\n };\n\n return fetch(endpoint, {\n method: \"POST\",\n headers: {\n 'Authorization': `Bearer ${API_KEY}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(data)\n })\n .then(response => response.json())\n .then(data => data['choices'][0]['message']['content']);\n}\n```\n\n- I moved the `handleJimLikes` function out of the `callGpt3Api` function and placed it before the `window.onload` function, so it is now globally accessible.\n- Now, when the send button is clicked, the event listener will be able to access and call the `handleJimLikes` function without any scope issues.","created_at":"2024-01-18T15:18:07.436971Z","output_tokens":null}],"assets":[{"cloudinary_id":"ycslietivnjdbje2bkll","project_id":323,"created_at":"2024-01-10T16:08:29.621086Z","deleted":false,"name":"jim","resource_type":"image","id":481},{"cloudinary_id":"wobgbgd5epbytjutp02g","project_id":323,"created_at":"2024-01-10T16:06:43.102864Z","deleted":false,"name":"setin","resource_type":"image","id":480}],"messages_sent":4,"comments":[{"content":"🤯","id":279,"user_id":4,"user":{"username":"pandahbomb","id":4,"password_hash":null,"updated_at":"2023-12-11T22:20:59.207234Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"803a180d-df5e-dbf8-2d4b-a79d02b6dad5","created_at":"2023-12-11T22:20:59.207232Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":323,"created_at":"2024-01-10T20:29:16.069643Z","updated_at":"2024-01-10T20:29:16.069644Z"},{"content":"noice \r\n","id":280,"user_id":4,"user":{"username":"pandahbomb","id":4,"password_hash":null,"updated_at":"2023-12-11T22:20:59.207234Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"803a180d-df5e-dbf8-2d4b-a79d02b6dad5","created_at":"2023-12-11T22:20:59.207232Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":323,"created_at":"2024-01-10T20:29:22.259723Z","updated_at":"2024-01-10T20:29:22.259726Z"}],"steps":[]}